Trong series này:

Thư viện Web phổ biến Bootstrap 5 Tailwind CSS Chart.js — Vẽ biểu đồ Mermaid.js — Sơ đồ từ văn bản anime.js — Animation Three.js — Đồ hoạ 3D trên web Swiper.js — Slider và Carousel
Sửa trang này

Bootstrap 5

Bootstrap là gì?

Bootstrap là CSS framework phổ biến nhất thế giới, cung cấp hệ thống grid, components sẵn sàng dùng (button, card, navbar, modal, v.v.) và responsive utilities. Bootstrap 5 không còn phụ thuộc jQuery.

CDN Boostrap 5:

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

Grid System & Components

    Kết quả 
    <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">

<h4 class="mb-3">Grid 12 cột</h4>
<div class="container-fluid">
  <div class="row g-2 mb-4">
    <div class="col-12 col-md-8"><div class="bg-primary text-white p-2 rounded">col-12 col-md-8</div></div>
    <div class="col-6  col-md-4"><div class="bg-secondary text-white p-2 rounded">col-6 col-md-4</div></div>
    <div class="col-6  col-md-4"><div class="bg-success text-white p-2 rounded">col-6 col-md-4</div></div>
    <div class="col-12 col-md-8"><div class="bg-danger text-white p-2 rounded">col-12 col-md-8</div></div>
  </div>

  <h4 class="mb-3">Buttons & Badges</h4>
  <div class="d-flex flex-wrap gap-2 mb-4">
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-outline-secondary">Outline</button>
    <button class="btn btn-success btn-sm">Small</button>
    <button class="btn btn-danger btn-lg">Large</button>
    <button class="btn btn-warning" disabled>Disabled</button>
    <span class="badge bg-primary">New</span>
    <span class="badge rounded-pill bg-danger">99+</span>
  </div>

  <h4 class="mb-3">Cards</h4>
  <div class="row g-3">
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">HTML</div>
        <div class="card-body">
          <p class="card-text">Ngôn ngữ đánh dấu siêu văn bản, nền tảng của web.</p>
          <a href="#" class="btn btn-sm btn-outline-primary">Học ngay</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-header bg-success text-white">CSS</div>
        <div class="card-body">
          <p class="card-text">Cascading Style Sheets định dạng giao diện trang web.</p>
          <a href="#" class="btn btn-sm btn-outline-success">Học ngay</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-header bg-warning">JavaScript</div>
        <div class="card-body">
          <p class="card-text">Ngôn ngữ lập trình web giúp trang web tương tác.</p>
          <a href="#" class="btn btn-sm btn-outline-warning">Học ngay</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

    Navbar & Modal

      Kết quả 
      <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar & Modal</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary px-3">
  <a class="navbar-brand fw-bold" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="nav">
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Trang chủ</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Bài viết</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Liên hệ</a></li>
    </ul>
    <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">
      Đăng nhập
    </button>
  </div>
</nav>

<div class="container py-4 text-center">
  <h2>Chào mừng!</h2>
  <p class="text-muted">Click <strong>Đăng nhập</strong> để mở modal.</p>

  <div class="alert alert-info d-inline-flex align-items-center gap-2 mt-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
    Bootstrap xử lý tất cả JS cho navbar collapse và modal tự động.
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Đăng nhập</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Email</label>
          <input type="email" class="form-control" placeholder="example@email.com">
        </div>
        <div class="mb-3">
          <label class="form-label">Mật khẩu</label>
          <input type="password" class="form-control" placeholder="••••••••">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Hủy</button>
        <button class="btn btn-primary">Đăng nhập</button>
      </div>
    </div>
  </div>
</div>

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

      Bình luận