Bài 5. Navbar, nav, breadcrumb và pagination

Một số khái niệm

navbar-expand-lg nghĩa là từ lg trở lên menu nằm ngang, nhỏ hơn thì gập vào nút ☰ (navbar-toggler) và mở ra bằng thành phần collapse. Màu navbar dùng bg-* kết hợp thuộc tính data-bs-theme="dark" cho chữ sáng trên nền tối.

Navbar responsive

<nav class="navbar navbar-expand-sm bg-success" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="#"><i class="bi bi-mortarboard"></i> Tự Học Tin</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Mở menu"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Trang chủ</a></li>
        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Khóa học</a>
          <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">HTML</a></li><li><a class="dropdown-item" href="#">CSS</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Bootstrap 5</a></li></ul></li>
        <li class="nav-item"><a class="nav-link" href="#">Liên hệ</a></li>
      </ul>
      <form class="d-flex" role="search"><input class="form-control form-control-sm me-2" type="search" placeholder="Tìm bài học"><button class="btn btn-sm btn-light">Tìm</button></form>
    </div>
  </div>
</nav>

Bấm “Khóa học” để mở dropdown. Khi khung hẹp hơn 576px (sm), menu gập vào nút ☰.

Tabs và pills

<ul class="nav nav-tabs mb-2"><li class="nav-item"><a class="nav-link active" href="#">Mô tả</a></li><li class="nav-item"><a class="nav-link" href="#">Nội dung</a></li><li class="nav-item"><a class="nav-link disabled">Đánh giá</a></li></ul>
<ul class="nav nav-pills nav-fill"><li class="nav-item"><a class="nav-link active" href="#">Tất cả</a></li><li class="nav-item"><a class="nav-link" href="#">Cơ bản</a></li><li class="nav-item"><a class="nav-link" href="#">Nâng cao</a></li></ul>

Muốn bấm tab để chuyển nội dung, thêm data-bs-toggle="tab" và các khối .tab-content > .tab-pane (bài 8).

Breadcrumb và pagination

<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Trang chủ</a></li><li class="breadcrumb-item"><a href="#">Phát triển web</a></li><li class="breadcrumb-item active" aria-current="page">Bootstrap 5</li></ol></nav>
<nav aria-label="Phân trang"><ul class="pagination pagination-sm">
  <li class="page-item disabled"><a class="page-link">Trước</a></li><li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Sau</a></li></ul></nav>