Bootstrap là gì ?

Bootstrap là một framework CSS phổ biến giúp việc thiết kế web trở nên nhanh chóng và dễ dàng hơn, đặc biệt trong việc phát triển các giao diện web đáp ứng (responsive). Nó được phát triển bởi Twitter và ra mắt lần đầu tiên vào năm 2011. Mục tiêu của Bootstrap là cung cấp một bộ công cụ tiêu chuẩn và mạnh mẽ để phát triển giao diện web đẹp và linh hoạt.

Các thành phần chính của Bootstrap:#

Grid System (Hệ thống lưới): Bootstrap cung cấp một hệ thống lưới dựa trên các cột để thiết kế bố cục trang web, giúp các phần tử tự động điều chỉnh kích thước theo kích thước màn hình (responsive).
Typography (Kiểu chữ): Bộ font chữ tiêu chuẩn và các kiểu chữ khác nhau được tích hợp sẵn, giúp người phát triển dễ dàng tạo các trang web dễ đọc và hấp dẫn.
Components (Thành phần): Bootstrap bao gồm một loạt các thành phần giao diện như buttons, navbars, modals, cards, forms, và nhiều thành phần khác có thể dễ dàng tích hợp vào website.
Utilities (Tiện ích): Một loạt các lớp tiện ích (utility classes) giúp việc căn chỉnh, ẩn hiện, thay đổi màu sắc và các thuộc tính CSS khác dễ dàng hơn.
JavaScript Plugins: Bootstrap đi kèm với một bộ các plugin JavaScript như carousel, modals, dropdowns, tooltips và popovers, giúp tạo ra các tính năng động mà không cần phải viết nhiều mã.

Phiên bản mới nhất của Bootstrap (tính đến thời điểm hiện tại - 2024)#

Bootstrap 5 là phiên bản mới nhất của framework này, ra mắt vào tháng 5 năm 2021. Một số tính năng nổi bật của Bootstrap 5 bao gồm:

Loại bỏ jQuery: Bootstrap 5 không còn phụ thuộc vào jQuery, thay vào đó sử dụng vanilla JavaScript cho các plugin.
Cải tiến Grid System: Cải tiến khả năng tùy chỉnh lưới (grid) với việc hỗ trợ nhiều tùy chọn cho các cột và các breakpoint.
RTL (Right to Left): Bootstrap 5 hỗ trợ đầy đủ cho việc xây dựng các giao diện hỗ trợ ngôn ngữ từ phải sang trái (RTL).
Tùy chỉnh và Theming: Bootstrap 5 có hỗ trợ tốt hơn cho việc tùy chỉnh màu sắc, kiểu chữ, và các thành phần khác thông qua các biến SASS.
Flexbox: Tất cả các lớp CSS của Bootstrap 5 được xây dựng trên Flexbox, giúp bố cục trang web trở nên linh hoạt hơn.
Icons: Bootstrap 5 cung cấp bộ icon riêng, Bootstrap Icons, giúp người phát triển dễ dàng tích hợp các biểu tượng vào giao diện.

Lịch sử phát triển:#

Bootstrap 1: Ra mắt vào năm 2011 với mục tiêu đơn giản hóa thiết kế giao diện web.
Bootstrap 2: Ra mắt vào năm 2012 với hệ thống lưới nâng cao và hỗ trợ cho các thiết bị di động.
Bootstrap 3: Ra mắt vào năm 2013, trở thành phiên bản phổ biến nhất với thiết kế mobile-first và hỗ trợ tốt cho các thiết bị di động.
Bootstrap 4: Ra mắt vào năm 2018, cải thiện hỗ trợ Flexbox, chuyển sang sử dụng SASS thay vì LESS, và cải thiện tính năng đáp ứng.
Bootstrap 5: Ra mắt vào năm 2021, loại bỏ jQuery, cải thiện khả năng tùy chỉnh, hỗ trợ RTL và bổ sung nhiều tính năng mới.

Tính năng mới trong Bootstrap 5:#

RTL Support: Tự động hỗ trợ cho ngôn ngữ từ phải sang trái (như tiếng Ả Rập, tiếng Hebrew).
Enhanced Customization: Hỗ trợ tốt hơn cho việc thay đổi theme và màu sắc của các thành phần trong ứng dụng.
Improved Forms: Cải tiến các thành phần form với nhiều tùy chọn thiết kế hiện đại và dễ sử dụng hơn.
Icons: Bộ Bootstrap Icons mới giúp việc chèn biểu tượng vào giao diện trở nên dễ dàng và linh hoạt hơn.

Phiên bản Bootstrap mới nhất là Bootstrap 5.3 (ra mắt vào tháng 8 năm 2023), tiếp tục cải tiến các tính năng và hỗ trợ các công cụ mới, giúp việc xây dựng ứng dụng web hiện đại trở nên nhanh chóng và dễ dàng hơn.

Cài đặt Bootstrap:#

Bạn có thể cài đặt Bootstrap bằng nhiều cách khác nhau:

Sử dụng CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Tải xuống Bootstrap: Truy cập Bootstrap Download để tải bộ công cụ về và sử dụng trực tiếp.
Cài đặt qua npm:
```
yarn add bootstrap
```
Cài đặt qua Yarn:
```
yarn add bootstrap
```

Bootstrap giúp tăng tốc quá trình phát triển giao diện, tiết kiệm thời gian và công sức cho các nhà phát triển web, đồng thời đảm bảo ứng dụng của bạn sẽ có giao diện đẹp và hoạt động tốt trên mọi thiết bị.

Layout cơ bản dùng Bootstrap:#

Dưới đây là ví dụ về cách xây dựng một layout cơ bản sử dụng cả Bootstrap và Tailwind CSS. Layout này bao gồm một header, một sidebar, và một content area. Bootstrap sử dụng hệ thống lưới (grid system) để tạo ra các bố cục dễ dàng. Dưới đây là ví dụ về một bố cục với một sidebar và content area.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Layout</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Header -->
  <header class="bg-primary text-white p-3">
    <h1>My Website</h1>
  </header>

  <div class="container-fluid">
    <div class="row">
      <!-- Sidebar -->
      <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar p-3">
        <h4>Sidebar</h4>
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>
      </nav>

      <!-- Content Area -->
      <main class="col-md-9 ms-sm-auto col-lg-10 px-4">
        <h2>Welcome to the Dashboard</h2>
        <p>This is your content area.</p>
      </main>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Giải thích:

.container-fluid: Cung cấp một container toàn màn hình.
.row: Làm việc với lưới của Bootstrap.
.col-md-3 và .col-md-9: Xác định chiều rộng của các cột ở độ rộng màn hình vừa và lớn.
.bg-light và .bg-primary: Đặt màu nền cho các phần tử.
.nav: Tạo thanh điều hướng cho sidebar.