Bootstrap là gì? Tất cả những gì bạn cần biết về Bootstrap

1. Tổng quan về Bootstrap

1.1. Bootstrap là gì?

Bootstrap là một framework front-end mã nguồn mở được phát triển bởi Twitter cung cấp một bộ công cụ và tài nguyên giúp thiết kế giao diện web nhanh chóng và dễ dàng. Bootstrap sử dụng HTML, CSS, và JavaScript để xây dựng các thành phần và giao diện người dùng đáp ứng, giúp đảm bảo rằng trang web của bạn sẽ hiển thị một cách tốt trên nhiều thiết bị và kích thước màn hình khác nhau.

bootstrap

1.2. Lịch sử phát triển của Bootstrap

Ngày 19 tháng 8 năm 2011: Bootstrap được giới thiệu lần đầu tiên bởi Twitter với tên gọi Twitter Blueprint.
Ngày 24 tháng 1 năm 2012: Sau một thời gian sử dụng nội bộ tại Twitter, Bootstrap được chính thức công bố là một dự án mã nguồn mở.
Bootstrap 2 (Ngày 31 tháng 1 năm 2012): Bootstrap 2 được phát hành với nhiều cải tiến so với phiên bản trước đó, bao gồm cải thiện hiệu suất, bảng điều khiển (dashboard), và nhiều thành phần mới.
Bootstrap 3 (Ngày 19 tháng 8 năm 2013): Bootstrap 3 mang lại sự linh hoạt và tính đáp ứng cao hơn. Nó chuyển sang sử dụng Flat Design và loại bỏ hỗ trợ cho trình duyệt Internet Explorer 7 và 8.
Bootstrap 4 (Ngày 19 tháng 1 năm 2018): Bootstrap 4 là một bản cập nhật lớn với nhiều thay đổi đáng kể, bao gồm việc chuyển sang Flexbox, thay đổi đáng kể trong hệ thống lưới, và một loạt các cải tiến khác về hiệu suất và tính năng.
Bootstrap 5 (Ngày 5 tháng 5 năm 2021): Bootstrap 5 tiếp tục mở rộng tính năng và cải thiện hiệu suất. Một số thành phố như jQuery đã được loại bỏ và thay thế bằng Vanilla JavaScript. Bootstrap 5 cũng chú trọng vào tích hợp tốt hơn với CSS custom properties.

Trong quá trình phát triển, Bootstrap đã trở thành một trong những framework front-end phổ biến nhất và được sử dụng rộng rãi trên toàn cầu. Cộng đồng với đông đảo người dùng giúp framwork ngày hoàn thiện và đáp ứng nhu cầu ngày càng đa dạng của các nhà phát triển web.

1.3. 3 file chính trong Bootstrap

Bao gồm:

Bootstrap.CSS
Bootstrap.JS
Glyphicons

bootstrap

1.3.1. Bootstrap.CSS

Đây là tệp CSS chính của Bootstrap, chứa các quy tắc kiểu (styles) cơ bản cho các thành phần và cấu trúc của framework.

Chức năng: Định dạng và trang trí các thành phần giao diện như nút, biểu mẫu, bảng, thanh điều hướng, v.v. Đảm bảo tính nhất quán và đồng nhất trong giao diện của trang web.
Cách sử dụng: Tệp Bootstrap.css thường được liên kết với trang HTML thông qua thẻ <link>.

1.3.2. Bootstrap.JS

Đây là tệp JavaScript chính của Bootstrap, chứa chương trình cho các chức năng tương tác và hiệu ứng động trên trang web:

Chức năng: Hỗ trợ các tính năng như thanh đơn thả xuống (drop down), slide show, modals, và nhiều hiệu ứng động khác. Tạo các trải nghiệm người dùng động và tương tác trên trang web.
Cách sử dụng: Tệp Bootstrap.js thường được liên kết với trang HTML thông qua thẻ <script>.

1.3.3. Glyphicons

Glyphicons là một bộ biểu tượng vector được tích hợp sẵn trong Bootstrap để sử dụng làm biểu tượng hoặc hình ảnh nhỏ cho các thành phần như nút hoặc thanh điều hướng.

Chức năng: Cung cấp các biểu tượng nhỏ và dễ nhận biết. Tạo điểm nhấn và tăng tính thẩm mỹ của giao diện người dùng.
Cách sử dụng: Bạn có thể sử dụng các lớp CSS được định nghĩa sẵn trong Bootstrap để áp dụng Glyphicons vào các phần tử HTML.

2. Hướng dẫn học Bootstrap cơ bản

Để học Bootstrap cơ bản hiệu quả, bạn nên bắt đầu từ việc hiểu cơ bản về HTML, CSS và JavaScript. Truy cập trang chính thức của Bootstrap để đọc tài liệu và hướng dẫn chi tiết.

Sử dụng Bootstrap Starter Template để bắt đầu một dự án một cách nhanh chóng. Học cách sử dụng các thành phần cơ bản như nút, biểu mẫu, thanh điều hướng và bảng.

Đặc biệt, hiểu rõ về hệ thống lưới Bootstrap để xây dựng bố cục trang web một cách hiệu quả. Nắm vững cách tùy chỉnh giao diện với Sass và các biến Bootstrap. Học cách làm cho trang web đáp ứng trên nhiều thiết bị khác nhau và sử dụng các lớp và tiện ích Bootstrap một cách hiệu quả.

Thực hành liên tục thông qua các dự án thực tế và tham gia cộng đồng Bootstrap để học hỏi và chia sẻ kinh nghiệm với cộng đồng người sử dụng khác.

Nếu bạn muốn mở rộng kiến thức, tìm hiểu thêm từ các tài nguyên trực tuyến như video hướng dẫn, blog và các khóa học trên các nền tảng như Udemy, Coursera hoặc Codecademy. Bằng cách tuân theo những bước này và thực hành đều đặn, bạn sẽ phát triển kỹ năng Bootstrap của mình và có khả năng xây dựng giao diện web chuyên nghiệp.

Hướng dẫn sử dụng bootstrap cơ bản:

Truy cập trang (https://getbootstrap.com), tải phiên bản Bootstrap mới nhất.
Nối CSS với JavaScript: Trong tệp HTML, liên kết tệp CSS của Bootstrap bằng cách thêm đoạn code sau vào phần thẻ <head>:

<link rel="stylesheet" href="đường_dẫn/tới/bootstrap.min.css"/>

Tiếp theo nối JavaScript của Bootstrap bằng cách thêm đoạn code dưới đây trước phần </body>:

<script src="đường_dẫn/tới/bootstrap.min.js"></script>

Sử dụng các lớp và thành phần của Bootstrap để xây dựng giao diện. Ví dụ, sử dụng lớp container để tạo container chứa nội dung, row để tạo hàng, và col để chia cột trong hàng. Còn có các thành phần như button, form, navbar, giúp tạo giao diện tương tác.
Tùy chỉnh giao diện bằng cách sử dụng lớp CSS có sẵn trong Bootstrap hoặc viết CSS tùy chỉnh. Sử dụng biến CSS và cấu hình tùy chỉnh trong Bootstrap để điều chỉnh kiểu dáng và giao diện theo ý muốn.
Tích hợp các plugins JavaScript của Bootstrap như carousel, modal, dropdown bằng cách thêm mã JavaScript tương ứng vào tệp HTML và tuân thủ hướng dẫn cụ thể cho từng plugin.

3. Tìm hiểu về hệ thống lưới Bootstrap

3.1.Row col bootstrap là gì?

Trong Bootstrap, hệ thống lưới (Grid System) được xây dựng dựa trên khái niệm về cột (columns) và dòng (rows). Hệ thống lưới này giúp bạn tạo ra bố cục linh hoạt và đáp ứng cho trang web của mình.

3.1.1. Bootstrap row:

Lớp row được sử dụng để tạo ra một hàng hoặc dòng trong hệ thống lưới Bootstrap.
Các hàng thường được đặt bên trong một dòng để tạo thành một hàng ngang. row định rõ khoảng cách giữa các cột và đảm bảo chúng xuất hiện đúng cách trên trang web.
Ví dụ:

<div class="row">

</div>

3.1.2. Bootstrap column

Lớp col được sử dụng để xác định một cột trong hệ thống lưới. Bạn có thể chỉ định số lượng cột mà một phần tử cụ thể sẽ chiếm trong một dòng.
Các lớp col thường được kết hợp với các số từ 1 đến 12, xác định số lượng cột cụ thể mà cột đó sẽ chiếm. Ví dụ, col-6 sẽ chiếm 6/12 cột (50% chiều rộng) trên mọi kích thước màn hình.
Ví dụ:

<div class="col">

</div>

Thông qua sự kết hợp của row và col, Bootstrap giúp chúng ta tạo ra các bố cục linh hoạt, tự động điều chỉnh dựa trên kích thước của màn hình hoặc thiết bị, cung cấp trải nghiệm người dùng đồng đều trên nhiều loại thiết bị.

Bootstrap 4 row col hay hệ thống lưới trong Bootstrap 4 bao gồm 5 lớp chính để xác định số cột mà một cột cụ thể sẽ chiếm trên các kích thước màn hình khác nhau. Các lớp này đều bắt đầu với col- và có thêm kích thước màn hình vào sau. Dưới đây là danh sách 5 lớp:

col-: Lớp cơ bản, không có tiền tố về kích thước màn hình. Mặc định, nó sẽ chiếm 12/12 cột (100%) trên mọi kích thước màn hình.
col-sm-: Áp dụng cho kích thước màn hình sm (small) và lớn hơn. Ví dụ: col sm-6 sẽ chiếm 6/12 cột trên màn hình sm và lớn hơn.
col md-: Áp dụng cho kích thước màn hình md (medium) và lớn hơn. Ví dụ col md-4 sẽ chiếm 4/12 cột trên màn hình md và lớn hơn.
col lg-: Áp dụng cho kích thước màn hình lg (large) và lớn hơn. Ví dụ: col lg-3 sẽ chiếm 3/12 cột trên màn hình lg và lớn hơn.
col xl-: Áp dụng cho kích thước màn hình xl (extra-large). Ví dụ: col-xl-2 sẽ chiếm 2/12 cột trên màn hình xl.

4. Lời Kết

Qua bài viết trên, ICANTECH đã giúp bạn trả lời cho câu hỏi “Bootstrap là gì” cũng như cách sử dụng Bootstrap để xây dựng giao diện web. Hi vọng bạn sẽ áp dụng các kiến thức trên để tạo ra các website chuyên nghiệp và đẹp mắt.

Cảm ơn bạn đã đọc bài viết, nếu bạn đang quan tâm đến học lập trình thì hãy tham khảo ngay các khóa học lập trình dưới đây tại ICANTECH nhé

Nguồn ảnh: ICANTECH.