Bootstrap là một framework CSS miễn phí sử dụng mã nguồn mở dùng cho mục đích phát triển web front-end cho thiết bị di động. Bên cạnh những mẫu thiết kế kiểu chữ, biểu mẫu, nút hay thanh điều hướng bằng ngôn ngữ HTML, CSS và JavaScript, framework này còn bao gồm một số thành phần giao diện khác.
Tính đến tháng 7 năm 2022, Bootstrap xếp thứ 8 trong danh sách dự án có nhiều lượt star nhất GitHub, với hơn 158.000 star.
Các tính năng
Bootstrap là một thư viện HTML, CSS và JS tập trung vào việc đơn giản hóa việc phát triển các trang web thông tin (ngược lại với các ứng dụng web). Mục đích chính của việc thêm nó vào một dự án web là áp dụng các lựa chọn về màu sắc, kích thước, phông chữ và bố cục của Bootstrap cho dự án đó. Như vậy, yếu tố chính là liệu các nhà phát triển phụ trách có tìm thấy những lựa chọn đó theo ý thích của họ hay không. Sau khi được thêm vào dự án, Bootstrap cung cấp các định nghĩa kiểu cơ bản cho tất cả các thành phần HTML. Kết quả là sự xuất hiện thống nhất cho văn xuôi, bảng biểu và các thành phần biểu mẫu trên các trình duyệt web. Ngoài ra, các nhà phát triển có thể tận dụng các lớp CSS được xác định trong Bootstrap để tùy chỉnh thêm giao diện nội dung của chúng. Ví dụ: Bootstrap đã cung cấp các bảng màu sáng và tối, tiêu đề trang, dấu ngoặc kép nổi bật hơn và văn bản được đánh dấu.
Bootstrap cũng đi kèm với một số thành phần JavaScript không yêu cầu các thư viện khác như jQuery. Chúng cung cấp các thành phần giao diện người dùng bổ sung như hộp thoại, chú giải công cụ, thanh tiến trình, trình đơn thả xuống điều hướng và băng chuyền. Mỗi thành phần Bootstrap bao gồm một cấu trúc HTML, các khai báo CSS và trong một số trường hợp có kèm theo mã JavaScript. Chúng cũng mở rộng chức năng của một số thành phần giao diện hiện có, chẳng hạn như chức năng tự động hoàn thành cho các trường đầu vào.
Ví dụ về một trang web sử dụng khung Bootstrap
Ví dụ về một trang web sử dụng khung Bootstrap được hiển thị trong Firefox
Các thành phần nổi bật nhất của Bootstrap là các thành phần bố cục của nó, vì chúng ảnh hưởng đến toàn bộ trang web. Thành phần bố cục cơ bản được gọi là "Vùng chứa" vì mọi thành phần khác trong trang đều được đặt trong đó. Nhà phát triển có thể chọn giữa vùng chứa có chiều rộng cố định và vùng chứa có chiều rộng linh hoạt. Trong khi cái sau luôn lấp đầy chiều rộng của trang web, cái trước sử dụng một trong năm chiều rộng cố định được xác định trước, tùy thuộc vào kích thước của màn hình hiển thị trang:[cần dẫn nguồn]
Nhỏ hơn 576 pixel
576–768 pixel
768–992 pixel
992–1200 pixel
Lớn hơn 1200 pixel
Khi đã có vùng chứa, các thành phần bố cục Bootstrap khác sẽ triển khai bố cục CSS Flexbox thông qua việc xác định các hàng và cột.
Phiên bản Bootstrap được biên dịch sẵn có sẵn ở dạng một tệp CSS và ba tệp JavaScript có thể dễ dàng thêm vào bất kỳ dự án nào. Tuy nhiên, dạng thô của Bootstrap cho phép các nhà phát triển triển khai các tùy chỉnh sâu hơn và tối ưu hóa kích thước. Dạng thô này là mô-đun, nghĩa là nhà phát triển có thể loại bỏ các thành phần không cần thiết, áp dụng chủ đề và sửa đổi các tệp Sass chưa được biên dịch.
Liên kết ngoài
- Website chính thức
- Bootstrap trên GitHub
