Số lượng người dùng di động duyệt web đang tăng lên từng ngày, vì vậy thiết kế đáp ứng Bootstrap cho trang web của bạn quan trọng hơn bao giờ hết. Đối với điều này, bạn cần sự trợ giúp của Bootstrap.
Vậy bootloader là gì? Cách sử dụng Bootstrap, cách nhúng Bootstrap vào HTML và các plugin viết mã Bootstrap là gì? Bài viết này sẽ cho bạn câu trả lời. Bây giờ chúng ta cùng tìm hiểu về Bootstrap nhé!
1. Bootstrap là gì?
Bootstrap là gì? Bootstrap là một front-end framework rất phổ biến. Nó được sử dụng để xây dựng các trang web đáp ứng và ưu tiên thiết bị di động.
Bootstrap là mã nguồn mở và sử dụng miễn phí. Dự án được tạo bởi Twitter và được lưu trữ trên GitHub. Nó bao gồm các mẫu HTML, CSS và JavaScript được tích hợp sẵn.
Các mẫu này chứa các yếu tố thiết kế web cơ bản như biểu mẫu, lưới, nút, v.v., cũng như các cài đặt giao diện như màu sắc, chiều cao, kích thước, v.v. Các nhà thiết kế có thể dựa vào các yếu tố làm sẵn để xây dựng trang web một cách dễ dàng và nhanh chóng, nhưng vẫn phải có một ý tưởng độc đáo.
2. Lịch sử của Bootstrap
Bootstrap được xây dựng bởi Twitter. Những người tạo ra sản phẩm này là Mark Otto và Jacob Thornton.
Sau khi được phát hành dưới dạng mã nguồn mở vào ngày 19 tháng 8 năm 2011 với tên gọi Twitter Blueprint, framework này nhanh chóng trở nên phổ biến do tính linh hoạt và dễ sử dụng của nó.
Kể từ khi thành lập, bootstrap đã phát hành hơn 20 phiên bản, bao gồm ba bản viết lại chính, phiên bản 2, 3 và 4:
Bootstrap 2 được phát hành vào ngày 31 tháng 1 năm 2012. Bản phát hành này bổ sung bố cục lưới 12 cột, các yếu tố thiết kế đáp ứng và các thay đổi đối với một số thành phần hiện có.
Bootstrap 3 được phát hành vào ngày 19 tháng 8 năm 2013. Bản phát hành này chuyển sang cách tiếp cận ưu tiên thiết bị di động và sử dụng thiết kế phẳng.
Vào ngày 29 tháng 10 năm 2014, Mark Otto thông báo rằng Bootstrap 4 đang được phát triển. Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào ngày 19 tháng 8 năm 2015 và phát hành vào ngày 19 tháng 1 năm 2018.
Bản phát hành này chuyển sang sử dụng CSS tiền xử lý Sass và CSS flexbox để tối ưu hóa thiết kế web đáp ứng.
3. 3 tệp chính của Bootstrap
Cấu trúc Bootstrap rất đơn giản và dễ hiểu. Nó bao gồm các tệp được biên dịch trước dễ dàng tích hợp vào các dự án xây dựng web để phục vụ cho công việc thiết kế nhanh chóng.
Bên cạnh các tệp CSS và JS, Bootstrap còn có các tệp phông chữ từ Glyphicons.
Khi tải xuống bootstrap 3 và bootstrap 4, giải nén sẽ cho ra một thư mục giống như hình trên. Sẽ có CSS, JS và thư mục phông chữ (Glyphicons)
3.1 Bootstrap.CSS
HTML và CSS là một bộ đôi cần có mặt cùng nhau để thực hiện một hành động cụ thể.
Vai trò của HTML là quản lý cấu trúc và vai trò của CSS là xử lý bố cục của trang web. Bạn có thể sử dụng tệp CSS này để tạo giao diện mà không tốn quá nhiều thời gian.
Bootstrap cung cấp các tệp được định dạng CSS trong thư mục CSS và chúng bao gồm nhiều lớp được khai báo trước. Bootstrap.min.css là tệp quan trọng nhất trong thư mục này.
3.2. Bootstrap.JS
JS (JavaScript) có các chức năng quản lý các tương tác với trang web. Các nhà thiết kế thường sử dụng jQuery để giảm thời gian viết JS. Khi sử dụng Bootstrap, bạn cần sự hỗ trợ của jQuery để thiết kế responsive. Chúng sẽ có các chức năng như:
Hỗ trợ tạo widget bằng các plugin JavaScript.
Tạo hoạt ảnh thông qua các thuộc tính CSS và các thuộc tính động của nội dung trang
Thực thi một yêu cầu Ajax
Thư mục JS của Bootstrap sẽ chứa các tệp JS với nhiều chức năng được khai báo trước. Bootstrap.min.js là tệp quan trọng nhất trong thư mục này.
3.3. Glyphs
Khi thiết kế một trang web, biểu tượng là một trong những phần không thể thiếu giúp các trang trở nên sống động.
Bạn có thể liên kết chúng với một số dữ liệu hoặc khớp với các hành động của người dùng để tăng tính linh hoạt của trang.
Bộ biểu tượng cho Glyphicons này có trong bootstrap 3. Với bootstrap 4, chúng đã được thay thế bằng các loại biểu tượng khác. Bạn cũng có thể mua các bộ biểu tượng cao cấp hơn để sử dụng trên trang web của mình.
Qua bài giới thiệu về Bootstrap này, bạn đã tìm được câu trả lời cho câu hỏi Bootstrap là gì chưa?
