Bootstrap 5, phiên bản mới nhất của thư viện CSS phổ biến nhất trên thế giới, đã mang đến nhiều cải tiến và tính năng mới mà các nhà phát triển web không thể bỏ qua. Từ việc loại bỏ jQuery, tăng cường hỗ trợ cho CSS custom properties, đến việc giới thiệu một API JavaScript mới, Bootstrap 5 đã mở ra một trang mới cho việc thiết kế giao diện người dùng hiện đại và tương tác.
Cài đặt
Đầu tiên, bạn cần phải liên kết đến thư viện Bootstrap trong tệp HTML của mình. Bạn có thể tải xuống Bootstrap và tự lưu trữ nó, hoặc bạn có thể sử dụng CDN.
<!– CSS –>
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet”>
<!– JS –>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
Container
Trong Bootstrap, container và container-fluid là hai lớp quan trọng được sử dụng để xác định cách các phần tử HTML được căn chỉnh và sắp xếp trên trang web của bạn.
Lớp container được sử dụng để tạo ra một container có kích thước cố định trên trang web. Nội dung bên trong container này sẽ được căn chỉnh giữa trên mọi thiết bị.
<div class=“container”>
<!– Nội dung của bạn ở đây –>
</div>
Lớp container-fluid tạo ra một container rộng đầy đủ chiều rộng của trình duyệt. Nội dung bên trong sẽ được căn theo cách căn trái và phải của trang.
<div class=“container-fluid”>
<!– Nội dung của bạn ở đây –>
</div>
Bạn có thể lồng các container bên trong nhau để tạo cấu trúc phức tạp hơn và điều chỉnh vị trí và kích thước của các thành phần trên trang web của bạn.
<div class=“container”>
<div class=“row”>
<div class=“col”>
<!– Nội dung của container con –>
</div>
</div>
</div>
Grid System
Bootstrap sử dụng hệ thống lưới dựa trên flexbox để tạo ra các layout đáp ứng. Hệ thống lưới bao gồm các hàng (row) và cột (col).
Mỗi hàng (row) trong Bootstrap phải được bao bọc bởi một thành phần .container hoặc .container-fluid.
<div class=“container”>
<div class=“row”>
<div class=“col”>
Cột 1
</div>
<div class=“col”>
Cột 2
</div>
</div>
</div>
Số cột
Hệ thống lưới của Bootstrap sử dụng 12 cột để sắp xếp nội dung. Bạn có thể chỉ định số cột mà một thành phần nên chiếm bằng cách sử dụng lớp .col-*, trong đó * là số cột từ 1 đến 12.
<div class=“row”>
<div class=“col-8”>Chiếm 8 cột</div>
<div class=“col-4”>Chiếm 4 cột</div>
</div>
Hiện thị đáp ứng trên nhiều thiết bị
Bootstrap cho phép bạn chỉ định số cột mà một thành phần nên chiếm tại các điểm ngắt khác nhau. Điều này giúp bạn tạo ra các trang web đáp ứng hiện thị tốt trên nhiều thiết bị khác nhau.
Hệ thống lưới của Bootstrap 5 bao gồm sáu lớp:
.col- (thiết bị cỡ rất 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ị rất lớn – chiều rộng màn hình bằng hoặc lớn hơn 1200px)
.col-xxl- (thiết bị rất rất lớn – chiều rộng màn hình bằng hoặc lớn hơn 1400px)
Các lớp trên có thể kết hợp với nhau để tạo ra các bố cục linh hoạt và động.
<div class=“row”>
<div class=“col-12 col-md-8”>Chiếm 12 cột trên điện thoại, 8 cột trên máy tính bảng trở lên</div>
<div class=“col-6 col-md-4”>Chiếm 6 cột trên điện thoại, 4 cột trên máy tính bảng trở lên</div>
</div>
Lớp tiện ích utility
Lớp tiện ích trong Bootstrap 5 giúp bạn nhanh chóng thêm các style CSS vào các thành phần của bạn mà không cần phải viết CSS riêng.
Màu sắc
Bootstrap 5 cung cấp các lớp tiện ích để thay đổi màu sắc của văn bản và nền:
<div class=“text-primary”>Văn bản màu chính</div>
<div class=“bg-secondary”>Nền màu phụ</div>
Padding và Margin
Bạn có thể sử dụng các lớp tiện ích để điều chỉnh đệm (padding) và lề (margin):
<div class=“p-3”>padding 3</div>
<div class=“mt-4”>margin trên 4</div>
Các lớp được đặt tên theo cú pháp {thuộc tính}{cạnh}-{kích thước}. Cụ thể:
Thuộc tính:
m: thiết lập margin
p: thiết lập padding
Cạnh:
t: top (trên)
b: bottom (dưới)
s: start (trái)
e: end (phải)
x: cả trái và phải
y: cả trên và dưới
Trống: tất cả các cạnh
Kích thước:
0: loại bỏ margin hoặc padding (đặt thành 0)
1: 0.25 lần kích thước mặc định
2: 0.5 lần kích thước mặc định
3: kích thước mặc định
4: 1.5 lần kích thước mặc định
5: 3 lần kích thước mặc định
auto: tự động
Hiện và ẩn
Bootstrap 5 cung cấp các lớp tiện ích để kiểm soát việc hiển thị và ẩn các thành phần:
<div class=“d-none”>Ẩn</div>
<div class=“d-block”>Hiển thị dạng block</div>
Flexbox
Bootstrap 5 cung cấp các lớp tiện ích để sử dụng flexbox:
<div class=“d-flex justify-content-center”>Căn giữa nội dung</div>
Vị trí
Bootstrap 5 cung cấp các lớp tiện ích để điều chỉnh vị trí của các thành phần:
<div class=“position-relative”>Vị trí tương đối</div>
<div class=“position-absolute”>Vị trí tuyệt đối</div>
Kích thước
Bạn có thể sử dụng các lớp tiện ích để điều chỉnh kích thước của các thành phần. Hỗ trợ các kích thước 25%, 50%, 75%, 100%
<div class=“w-50”>Chiều rộng 50%</div>
<div class=“h-100”>Chiều cao 100%</div>
Chữ và Font
Bootstrap 5 cung cấp các lớp tiện ích để điều chỉnh chữ và font:
<div class=“text-left”>Canh trái</div>
<div class=“text-center”>Canh giữa</div>
<div class=“text-right”>Canh phải</div>
<div class=“font-weight-bold”>Chữ đậm</div>
<div class=“font-italic”>Chữ nghiêng</div>
Components
Bootstrap cung cấp một loạt các thành phần (components) được xây dựng sẵn, giúp bạn nhanh chóng và dễ dàng tạo ra giao diện web thân thiện với người dùng. Một số các thành phần cơ bản:
- Alerts: Cung cấp thông báo phản hồi cho người dùng về một số hành động.
- Badges: Tạo nhãn nhỏ để hiển thị số lượng hoặc trạng thái.
- Breadcrumbs: Hiển thị đường dẫn hiện tại trong cấu trúc trang web.
- Buttons: Cung cấp nút với nhiều kiểu và kích cỡ khác nhau.
- Button group: Nhóm nhiều nút lại với nhau.
- Cards: Tạo khối nội dung linh hoạt với header, footer và nhiều nội dung khác.
- Carousel: Tạo slideshow cho các hình ảnh.
- Collapse: Hiển thị hoặc ẩn nội dung.
- Dropdowns: Tạo danh sách liên kết có thể mở rộng.
- Forms: Cung cấp các thành phần form như input, select, checkbox, radio, và nhiều hơn nữa.
- Input group: Thêm biểu tượng hoặc văn bản vào input.
- Jumbotron: Hiển thị thông tin nổi bật trên trang web.
- List group: Tạo danh sách các mục.
- Modal: Tạo hộp thoại hiện lên trên màn hình.
- Navs: Tạo thanh điều hướng với các liên kết.
- Navbar: Tạo thanh điều hướng đáp ứng.
- Pagination: Tạo thanh phân trang.
- Popovers: Hiển thị thông tin khi di chuột qua một thành phần.
- Progress: Tạo thanh tiến trình.
- Scrollspy: Cập nhật liên kết trên thanh điều hướng khi cuộn trang.
- Spinners: Hiển thị trạng thái tải.
- Toasts: Hiển thị thông báo nhỏ.
- Tooltips: Hiển thị thông tin khi di chuột qua một thành phần.
Giảng viên Nguyễn Quang Hùng
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
