Hướng dẫn cài đặt và sử dụng Bootstrap dành cho người mới

Bootstrap là một trong những công cụ hỗ trợ layout website và responsive nhanh chóng.

Nó chứa những khung CSS có sẵn, các bạn chỉ cần áp dụng vào và style lại 1 chút là xong.

Như vậy sẽ tiết kiệm rất nhiều thời gian và công sức cho phần Front-end.

Hiểu một cách đơn giản hơn, Bootstrap như một người giải mã ký hiệu, thay vì bạn phải CSS cả 1 trang dài thì bạn chỉ cần ra một vài ký hiệu, Bootstrap sẽ dịch thành các đoạn mã CSS.

Sử dụng Bootstrap cũng không hề khó khăn chút nào.

Cùng tham khảo nhé!

Cài đặt

• Đầu tiên bạn cần tải về phiên bản Bootstrap mới nhất tại đây

• Tiếp theo bạn giải nén file vừa tải về, copy thư mục Bootstrap vào thư mục website và dẫn link như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Dẫn link đến file bootstrap.min.css -->
    <link rel="stylesheet" href="Vendor/bootstrap-5.0.2-dist/css/bootstrap.min.css">
</head>
<body>

    <!-- Dẫn script đến file bootstrap.bundle.min.js và bootstrap.min.js -->
    <script src="Vendor/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
    <script src="Vendor/bootstrap-5.0.2-dist/js/bootstrap.min.js"></script>
</body>
</html>

Như vậy là bạn đã có thể bắt đầu sử dụng Bootstrap rồi.

Cách sử dụng Bootstrap

Trong Bootstrap các bạn sử dụng các class có sẵn để áp dụng CSS vào phần tử.

Ở bài viết này mình xin chia sẻ đến các bạn những class sử dụng phổ biến nhất.

Đầu tiên, bạn cần biết đến hệ thống lưới trong Bootstrap, thường được chia thành 12 cột.

Để có thể áp dụng hệ thống lưới trong việc layout/responsive website, bạn cần tìm hiểu khái niệm về breakpoints trong Bootstrap(tạm hiểu là kích thước màn hình).

Kích thước màn hình và kí hiệu

Từ Bootstrap 5.0 được chia làm 6 loại kích thước màn hình như sau:

Để sử dụng lưới bạn cần tạo 1 phần tử cha chứa các phần tử con với thuộc tính class=”.row”

Sau đó, tại phần tử con áp dụng thuộc tính class=”col-*–*“ để layout/responsive website.

• *: Là ký hiệu màn hình
• *: Là số phần, phần tử này chiếm so với phần tử cha (từ 1-12 phần)

Ví dụ:

• Col-sm–6: Có nghĩa là khi kích thước màn hình  ≥576px (Smalll ký hiệu sm), thì phần tử này chiếm 6/12 tức 50% chiều rộng của phần tử cha(Tức trên 1 dòng có 2 phần tử con).
• Col-md–4: Có nghĩa là khi kích thước màn hình  ≥768px (Medium ký hiệu md), thì phần tử này chiếm 4/12 chiều rộng của phần tử cha(Tức trên 1 dòng có 3 phần tử con).
• Col-lg–3: Có nghĩa là khi kích thước màn hình  ≥992px (Large ký hiệu lg), thì phần tử này chiếm 3/12 chiều rộng của phần tử cha(Tức trên 1 dòng có 4 phần tử con).

Để áp dụng cho các kích thước màn hình khác, bạn thay thế kí hiệu của màn hình đó và số phần mà phần tử con chiếm.

Với đoạn code trên chúng ta đã chia website thành:

• 6 cột trên thiết bị có kích thước màn hình ≥1200px
• 4 cột trên thiết bị có kích thước màn hình ≥992px
• 3 cột trên thiết bị có kích thước màn hình ≥768px
• 2 cột trên các thiết bị còn lại (<768px)

Nếu không sử dụng Bootstrap, để có kết quả tương tự như trên bạn sẽ viết CSS như sau:

Container (Vùng chứa)

Sử dụng để tạo khung bao quanh các phần tử, dễ dàng căn chỉnh nhiều phần tử 1 lúc(thường là căn max-width và căn giữa).

Trong Bootstrap container được sử dụng theo 3 class dưới đây:

• .container: Chiều rộng max-width thay đổi theo từng kích thước màn hình.
• .container-*: Chiều rộng width 100% theo từng chiều rộng màn hình cụ thể (* là kí hiệu kích thước màn hình: sm, md, lg,…).
• .container-fluid: Chiều rộng width 100% trên mọi kích thước màn hình.

Xem bảng mô tả dưới đây:

Căn chỉnh các phần tử

Căn chỉnh các phần tử cũng như việc căn giữa trong CSS luôn có một chút khó khăn đối với những người mới.

Ngày cả bản thân mình cũng vậy.

Việc sử dụngclass .row và .col-*-* để chia layout trong Bootstrap giống như bạn đang sử dụng flexbox.

Vì thể để căn chỉnh các phần tử bạn có thể sử dụng thuộc tính justify-content, align-items và align-self.

Trong Bootstrap bạn có thể sử dụng các class để căn chỉnh theo chiều dọc hoặc ngang.

Căn chỉnh theo chiều dọc

• Sử dụng class align-items-start, align-items-center, align-items-end để căn chỉnh cho tất cả phần tử con

• Sử dụng class align-self-start, align-self-center, align-self-end để căn chỉnh từng phần tử con

Căn chỉnh theo chiều ngang

• Sử dụng class justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between, justify-content-evenly để căn chỉnh các phần tử con.

Tổng kết

Việc sử dụng các class của Bootstrap giúp bạn tiết kiệm khá nhiều thời gian và công sức.

Tuy nhiên khi sử dụng bạn cũng nên xem thử nguyên tắc hoạt động của các class đó như thế nào.

Bootstrap không phải là tất cả, bạn vẫn phải thuần thục CSS để có thể style website đẹp như ý.

Vì thế trước khi bắt đầu sử dụng Bootstrap hãy tập gõ từ dòng CSS để hiểu rõ nó.

Khi bạn hiểu rồi thì mới tính đến chuyện làm cho nhanh, và sẽ có nhiều cách làm không chỉ riêng Bootstrap.

Xin chào và hẹn gặp lại!