🔮14-Tổng quan về bootstrap
Trong buổi học hôm nay chúng ta sẽ tìm hiểu về một thư viện Front End đang được sử dụng nhiều nhất hiện nay
Last updated
Trong buổi học hôm nay chúng ta sẽ tìm hiểu về một thư viện Front End đang được sử dụng nhiều nhất hiện nay
Last updated
Bootstrap là một front-end framework miễn phí dùng để phát triển web nhanh hơn và dễ dàng hơn. Bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ (text), biểu mẫu (form), nút (button), bảng (table) và nhiều thành phần khác, cũng như các plugin JavaScript tùy chọn.
Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo dựng layout của website tương thích với đa thiết bị (responsive)
Tại sao lại cần sử dụng bootstrap framework ?
Dễ sử dụng: Bất kỳ ai chỉ có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
Thành phần: Hỗ trợ nhiều thành phần dưới dạng component, dễ dàng trong việc sử dụng và kết hợp
Các tính năng đáp ứng: Bootstrap hỗ trợ điều chỉnh phù hợp với điện thoại, máy tính bảng và máy tính để bàn.
Phương pháp ưu tiên: Hỗ trợ ưu tiên các "style" trên thiết bị di động
Khả năng tương thích của trình duyệt: Bootstrap 4 tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer 10+, Edge, Safari và Opera)
Một số ví dụ so sánh về việc sử dụng CSS + HTML thuần và sử dụng thư viện boostrap.
Các tạo ra một button màu xanh lá khi không sử dụng bohintotstrap framework
Cách tạo ra một button màu xanh là khi sử dụng bootstrap
Chúng ta nhận thấy cùng là việc tạo ra 1 button nhưng với bootstrap chúng ta chỉ cần gọi class css tương ứng mà không cần phải viết css riêng cho từng button.
Để có thể sử dụng thư viện bootstrap, chúng ta có hai cách:
Import bootstrap thông qua bootstrap CDN
Download thư viện bootstrap từ trang chủ
Cách 1: Import bootstrap CDN
Nếu không muốn tải thư viện bootstrap về máy, bạn có thể sử dụng liên kết CDN
MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap với cú pháp như sau:
Cách 2: Download thư viện bootstrap
Nếu không sử dụng liên kết CDN, bạn có thể tải xuống và lưu trữ thư viện bootstrap tại trang chủ của bootstrap
Bước 1: Truy cập trang chủ bootstrap tại địa chỉ: https://getbootstrap.com/. Tại mục download , bạn tiến hành download thư mục css và js của thư viện bootstrap
Bước 2: Giải nén và copy nội dung trong thư mục css và js vào project
Bước 3: Nhúng file bootstrap.min.css và bootstrap.min.js vào project
Sau khi cài đặt đầy đủ thư viện bootstrap framework, bạn có thể bắt đầu ngay với chương trình khởi tạo đơn giản như sau:
Đầu tiên, bạn khởi tạo một trang HTML như bình thường sau đó import thư viện của bootstrap bằng 1 trong 2 cách ở trên.
Bootstrap cung cấp hai class để tạo ra vùng chứa nội dung chính:
Class .container cung cấp một vùng chứa chứa chiều rộng cố định
Class .container-fluid cung cấp một vùng chưa với chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của khung nhìn.
Trong phần body, bạn có thể sử dụng hai class .container và class .container-fluid để thấy rõ sự khác nhau giữa chúng.
Một trong những thành phần được đánh giá là hiệu quả nhất trong bootstrap framework là hệ thống lưới (Grid System).
Hệ thống lưới (Grid System) được thiết kế với cơ chế hiển thị flexbox, với 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng lẻ, bạn có thể nhóm các cột lại với nhau để tạo các cột rộng hơn.
Grid System hỗ trợ tốt với chế độ reponsive bằng việc linh hoạt điều chỉnh kích thước các cột phù hợp với kích thước màn hình thiết bị.
Hệ thống lưới Bootstrap 4 có năm class theo bảng sau:
.col- (thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px)
.col-sm- (thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px)
.col-md- (thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px)
.col-lg- (thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px)
.col-xl- (thiết bị phóng to - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
Các lớp trên có thể được kết hợp để tạo ra các bố cục năng động và linh hoạt hơn.
Ví dụ 1: Kiểm soát độ rộng của thành phần bằng cách thiết lập số cột và chế độ màn hình của các thiết bị khác nhau.
Ví dụ 2: Bootstrap tự động xử lý bố cục
Các hàng phải được đặt trong một .container hoặc .container-fluid(full-width) để căn chỉnh vùng chứa nội dung.
Sử dụng hàng với class .row để tạo hàng. Mỗi hàng sẽ luôn bao gồm 12 cột.
Nội dung nên được đặt trong các cột và được bao bởi hàng.
Các lớp được xác định trước như .row và .col-sm-4 có sẵn để nhanh chóng tạo bố cục grid.
Các cột lưới được tạo bằng cách chỉ định số lượng cột trong tổng số 12 cột mà bạn muốn tạo. Ví dụ: 3 cột bằng sau sẽ sử dụng 3 khối có class .col-sm-4.
Độ rộng cột được tính theo tỷ lệ %, vì vậy chúng rất linh hoạt và có kích thước tương ứng với phần tử cha của chúng.
Các thư viện luôn được phát triển và nâng cấp các phiên bản khác nhau nên việc biết cách tra cứu tài liệu của các phiên bản tương đương là rất cần thiết.
Boostrap ở các phiên bản đều có tài liệu riêng các bạn có thể tra trong menu docs tại trang chủ bootstrap: https://getbootstrap.com/
Ngoài ra các bạn có thể tham khảo tài liệu trên một số website khác như:
