1. Giới thiệu

Bootstrap 5 là phiên bản mới nhất của framework CSS phổ biến nhất, giúp bạn dễ dàng phát triển giao diện web một cách nhanh chóng và chuyên nghiệp. Với Bootstrap, bạn có thể xây dựng các trang web tương thích với mọi kích thước màn hình (responsive), từ điện thoại di động đến máy tính để bàn, mà không cần viết quá nhiều CSS từ đầu.

Trong bài viết này, chúng ta sẽ tìm hiểu cách bắt đầu với Bootstrap 5, bao gồm cách thêm Bootstrap vào dự án, những thay đổi so với các phiên bản trước, và ví dụ cụ thể về cách xây dựng một trang web cơ bản.

2. Các cách thêm Bootstrap 5 vào dự án

Bạn có thể thêm Bootstrap 5 vào dự án của mình bằng các phương pháp sau:

a. Sử dụng CDN (Content Delivery Network)

Cách nhanh nhất để bắt đầu với Bootstrap 5 là sử dụng CDN. Bạn không cần phải tải Bootstrap về máy mà chỉ cần chèn liên kết tới CSS và JavaScript của Bootstrap trực tiếp vào mã HTML.

Bước 1: Thêm liên kết tới CSS của Bootstrap trong phần <head> của trang HTML:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Get Started</title>
    <!-- Link tới Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Chào mừng đến với Bootstrap 5!</h1>
</body>
</html>

Bước 2: Thêm liên kết tới JavaScript của Bootstrap (bao gồm Popper.js) trước thẻ đóng </body>:

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

b. Tải xuống Bootstrap

Bạn cũng có thể tải Bootstrap 5 về máy tính và lưu trữ trực tiếp trong dự án của mình. Để làm điều này, bạn truy cập Bootstrap Download và tải xuống các file CSS và JavaScript.

Sau khi tải về, bạn chỉ cần liên kết file CSS và JavaScript trong thư mục dự án như sau:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Get Started</title>
    <!-- Link tới Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Chào mừng đến với Bootstrap 5!</h1>

    <!-- Link tới Bootstrap JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

c. Cài đặt Bootstrap qua NPM (Node Package Manager)

Nếu bạn đang phát triển ứng dụng với các công cụ như Node.js, bạn có thể cài đặt Bootstrap 5 thông qua NPM.

shell
npm install bootstrap

Sau đó, bạn chỉ cần import Bootstrap trong dự án JavaScript của mình:

js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

3. Các điểm mới trong Bootstrap 5

Bootstrap 5 mang đến nhiều cải tiến so với phiên bản trước, đặc biệt là về tốc độ, thiết kế và hỗ trợ modern web. Dưới đây là một số điểm nổi bật:

  • Loại bỏ jQuery: Bootstrap 5 không còn yêu cầu jQuery, giúp giảm dung lượng trang và tăng tốc độ tải.
  • CSS Grid hỗ trợ tốt hơn: Bootstrap 5 tương thích tốt hơn với CSS Grid, giúp bạn linh hoạt hơn trong việc xây dựng bố cục.
  • Cải tiến hệ thống lưới (Grid): Bootstrap 5 cải thiện hệ thống lưới để dễ dàng thiết kế responsive hơn với nhiều kích thước màn hình.
  • Hỗ trợ RTL (Right-to-left): Bootstrap 5 cung cấp hỗ trợ tốt hơn cho các ngôn ngữ từ phải sang trái như tiếng Ả Rập.

4. Ví dụ xây dựng trang web cơ bản với Bootstrap 5

a. Tạo bố cục lưới đơn giản (Grid layout)

Bootstrap 5 sử dụng hệ thống lưới để giúp bạn tạo các bố cục responsive nhanh chóng. Ví dụ, bạn có thể tạo một trang với ba cột mà mỗi cột chiếm 4 phần trong lưới 12 cột như sau:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Grid với Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4 bg-primary text-white">Cột 1</div>
            <div class="col-4 bg-secondary text-white">Cột 2</div>
            <div class="col-4 bg-success text-white">Cột 3</div>
        </div>
    </div>

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

Trong ví dụ này, chúng ta sử dụng class container để tạo vùng chứa, row để xác định hàng, và col-4 để tạo ba cột bằng nhau trên lưới 12 cột.

b. Tạo thanh điều hướng (Navbar)

Navbar là một thành phần quan trọng và rất dễ xây dựng trong Bootstrap 5. Dưới đây là ví dụ về cách tạo một thanh điều hướng đơn giản:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">CodeTutHub</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Trang chủ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Về chúng tôi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Dịch vụ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

c. Tạo button và form đơn giản

Bootstrap 5 cũng cung cấp sẵn các kiểu button và form để bạn dễ dàng sử dụng. Dưới đây là ví dụ về một button và form đơn giản:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form và Button Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <h1>Đăng ký tài khoản</h1>
    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Mật khẩu</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <button type="submit" class="btn btn-primary">Đăng ký</button>
    </form>
</div>

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

5. Kết luận

Bootstrap 5 là một công cụ mạnh mẽ giúp bạn nhanh chóng xây dựng các trang web hiện đại và responsive. Với các cải tiến so với các phiên bản trước, Bootstrap 5 đơn giản hơn, hiệu suất tốt hơn và linh hoạt hơn, đặc biệt là không còn phụ thuộc vào jQuery.

Bắt đầu với Bootstrap 5 rất dễ dàng, dù bạn dùng CDN, tải về hoặc cài qua NPM. Hãy thử áp dụng các ví dụ trong bài viết để làm quen và xây dựng các trang web nhanh chóng với Bootstrap 5 trên CodeTutHub!