Bootstrap - Tạo Giao Diện Web Nhanh Chóng và Dễ Dàng

Một trong những framework front-end phổ biến nhất hiện nay là Bootstrap. Vậy Bootstrap là gì và tại sao nó lại được sử dụng rộng rãi? Trong bài viết này, chúng ta sẽ khám phá Bootstrap, một công cụ mạnh mẽ để thiết kế giao diện web hiện đại.

Tổng quan về Bootstrap

Bootstrap là gì?

Bootstrap là một framework front-end mã nguồn mở được phát triển bởi Twitter. Nó cung cấp một bộ công cụ và tài nguyên để 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. Điều này đảm bảo rằng trang web của bạn sẽ hiển thị tốt trên nhiều thiết bị và kích thước màn hình khác nhau.

Hình ảnh minh họa: Bootstrap

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

Bootstrap đã trải qua nhiều phiên bản phát triển và cải tiến từ khi ra mắt. Dưới đây là một số điểm quan trọng trong 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 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.

Trên thực tế, 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 thế giới. Với cộng đồng đông đảo người dùng, Bootstrap ngày càng 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.

3 file chính trong Bootstrap

Bootstrap gồm ba tệp chính:

1. Bootstrap.css

Đây là tệp CSS chính của Bootstrap, chứa các quy tắc kiểu 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, vv. Đả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ẻ .

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, slide show, modals và nhiều hiệu ứng động khác. Tạo 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ẻ

• 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.

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

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 và dòng. 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.

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ụ:

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ụ:

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ị.

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.

Lời Kết

Qua bài viết trên, chúng tôi đã giúp bạn trả lời câu hỏi "Bootstrap là gì?" cũng như cách sử dụng Bootstrap để xây dựng giao diện web. Hy vọng bạn sẽ áp dụng các kiến thức trên để tạo ra các trang web 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, hãy tham khảo ngay các khóa học lập trình tại ICANTECH.

Nguồn ảnh: ICANTECH