Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Tạo Tabs (Thẻ) với Bootstrap Framework

Tabs là thành phần giao diện (UI) cho phép xem các khu vực thông tin khác nhau mà không tốn thêm diện tích màn hình. Giống như thẻ trong file hồ sơ hay sách, chúng đánh dấu vị trí trên trang cho thêm thông tin và được nhận diện bởi nội dung của khu vực đó. Khi click vào một tab, bạn sẽ thấy thông tin liên quan đến tab đó.

Bootstrap là framework giúp tạo tabs nhanh chóng. Bài viết này hướng dẫn: cài đặt Bootstrap, lý do dùng tabs, và các ví dụ Bootstrap tabs thực tế.

Bắt đầu

Đầu tiên, đảm bảo đã có các dependency cần thiết để hiển thị tabs: Bootstrap, Popper.js, jQuery. Truy cập trang Quick Start của Bootstrap để được hỗ trợ cài đặt.

Cách link package tùy ý bạn, nhưng cách dễ nhất, 친新手-friendly nhất là dùng CDN (Content Delivery Network) cho jQuery, Popper.js, và Bootstrap. Lưu ý thứ tự thẻ <script> - thứ tự quan trọng!

Bạn đã sẵn sàng!

Sử dụng Bootstrap Documentation để tạo Tabs

Ệ bên trái trang "Introduction/Getting Started", sidebar link đến các mục. Tìm link "Components" và click. Sẽ điều hướng đến component đầu tiên: "Alerts". Sidebar cập nhật hiển thị link đến tất cả components.

Click component "Navs" - đây chứa thông tin tabs cần thiết.

Bắt đầu với Base Nav

Để dùng code mẫu của Bootstrap, bắt đầu với base nav ở đầu trang. Điều này chứng minh class nav không xử lý styling đặc biệt.

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Để tạo tabs, thêm class nav-tabs vào dòng đầu tiên trong attribute class:

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
<div> ***** nội dung tab sẽ ở đây dưới dạng <div> ***** </div>

Về mặt UI, đã có tabs. Nhưng chưa có functionality (chức năng chuyển tab). Xem tiếp cách làm.

Thêm Roles cho Markup (Accessibility - ARIA)

Để tuân thủ chuẩn ARIA (quy tắc truy cập), thêm attribute role cho các thẻ:

  • Cho <ul>: thêm role="tablist"
  • Cho <a>: thêm role="tab"
  • Cho <div> bao quanh nội dung mỗi tab: thêm role="tabpanel"

Thêm Attributes để trỏ đến Tab Content

Ở mức độ cao, ta có block code cho links, và block code cho content. Cần kết nối tab với content của nó. Bắt đầu với block <ul>:

  1. Thêm id cho tất cả element <a>. Dùng format "ten-tab-tab" (ví dụ tab tên "home" → id="home-tab").
  2. Cho block <div> chứa tab-contents (dùng làm tabpanel), dùng tên tab làm id (content của home tab → id="home").
  3. Thêm href cho tab trỏ đến id của tab-content liên quan. Tab "home" → href="#home".
  4. Thêm attribute data-toggle="tab" chỉ định gì được toggle.
  5. Thêm các ARIA attributes hỗ trợ công nghệ hỗ trợ (screen reader).

Element <ul> với links trông như sau:

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A</a>
  </li>
  <li class="nav-item">
    <a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B</a>
  </li>
  <li class="nav-item">
    <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a>
  </li>
  <li class="nav-item">
    <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a>
  </li>
</ul>

Element tab-content tiếp theo. Block code riêng biệt từ block <ul> chứa links.

  1. Đảm bảo các div tab contents được bao trong một outer div container. Mỗi div nhỏ đặt tên tương ứng tab heading từ block trước.
  2. Thêm ARIA attributes: aria-selected và aria-labelledby. aria-labelledby khớp id của tab heading. aria-controls khớp id của div element đó.
  3. Thêm class attribute chứa ít nhất show - class Bootstrap hỗ trợ hiển thị pane đúng khi click tab. active chỉ pane đang hiển thị. fade cho hiệu ứng fade in/out.

Code cho một tab-content div:

<div class="tab-content" style="padding: 20px;">
  <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
</div>

Dùng làm mẫu tạo các tab-content div còn lại. Tham khảo code đầy đủ dưới nếu bị kẹt.

Toàn bộ codebase hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Tabs Demo</title>
  <!-- Bootstrap stylesheet -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <!-- tab headings -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a>
    </li>
    <li class="nav-item">
      <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a>
    </li>
    <li class="nav-item">
      <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a>
    </li>
    <li class="nav-item">
      <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a>
    </li>
  </ul>
  <!-- tab contents -->
  <div class="tab-content" style="padding: 20px;">
    <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
    <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div>
    <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div>
    <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div>
  </div>
  <!-- jquery cdn -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- popper js cdn -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
  <!-- bootstrap cdn -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Kết luận

Bạn vừa tạo component điều hướng tab bằng Bootstrap! Hãy thử tạo pill navigational containers tiếp theo. Happy coding!