Cơ bản về Nav xây dựng Tab trong Bootstrap

Nav cơ bản

Trong Bootstrap .nav là lớp cơ bản để xây dựng nên các thành phần có chức năng điều hường khác nhau như NavBar, Tab ... .nav được xây dựng với tính năng flexbox và nó sẽ áp dụng triệt để tính năng này trong tất cả các thành phần khác xây dựng nên từ nó.

Để áp dụng .nav thoải mái, đầu tiên hãy thành thục CSS Flexbox và các lớp triển khai FlexBox trong Boostrap

Cách sử dụng cơ bản tạo ra một cấu trúc điều hướng với .nav đó là viết code HTML có phần tử chứa với class .nav, bên trong có các phần tử con .nav-item .nav-link. Sau đó có thể thêm vào sau .nav, .nav-item các lớp định dạng, chức năng khác nhau

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">Mục 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="#">Mục 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Mục 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Mục 4</a>
    </li>
</ul>

Sử dụng JavaScript tạo Tabs với Nav

Khi tích hợp thư viện Bootstrap, nếu có tích hợp cả phần js: bootstrap.js thì trong đó có tiện ích Javascript giúp tạo ra Tabs với cấu tạo và hoạt động như sau:

Thanh Tab

Thành phần thanh tab trên đó chứa điều khiển để người dùng bấm vào (tiêu đề tab), khi bấm vào tiêu đề tab nào thì nó kích hoạt tiêu đề tab đó. Thành phần này tạo bằng .nav cho thêm thuộc tính để thư viện tự động kích hoạt nó như là tab role="tablist". Các phần tử con .nav-item bên trong chứa <a> có thiết lập class chứa .nav-link và thiết lập khác như sau:

• Cho thêm thuộc tính data-toggle="tab" và role="tab" để JS biết đây là một tiêu đề Tab
• href="#id-tab-panel" với #id-tab-panel là ID của phần tử HTML có lớp .tab-pane là một hộp trong đó chứa phần nội dung mà khi tiêu đề kích hoạt sẽ hiện thị. Nếu phần tử ở trạng thái kích hoạt cho thêm .active
• Có thiết lập cho nó một id để sau đó phần nội dung liên kết đến thông qua id này

Xem code HTML sau tạo ra một thanh Tab, kích hoạt mặc định phần tử Tab1, các Box sẽ hiện thị nội dung khi Tab kích hoạt có id là pane-tab-1, pane-tab-2, pane-tab-1

<ul class="nav nav-tabs" id="example-tabs" role="tablist">
    <li class="nav-item">
        <a id="tab1" class="nav-link active" data-toggle="tab" role="tab"  href="#pane-tab-1">Tab1</a>
    </li>
    <li class="nav-item">
        <a id="tab2" class="nav-link" data-toggle="tab" role="tab"  href="#pane-tab-2">Tab2</a>
    </li>
    <li class="nav-item">
        <a id="tab3" class="nav-link" data-toggle="tab" role="tab"  href="#pane-tab-3">Tab3</a>
    </li>
</ul>
<!--Phần nội dung Tab ở đây-->

Nội dung Tab

Phần này xây dựng từ phần tử chứa với lớp .tab-content, bên trong chứa các phân tử con xây dựng từ lớp .tab-pane. Nội dung của phần tử con này chính là nội dung của từng Tab khi kích hoạt. Đặt id cho phần tử con này giống với id đã sử dụng trong thuộc tính href của .nav-link ở trên và có thiết lập thuộc tính sau:

• role="tabpanel" để JS kích hoạt ứng xử nó như là phần nội dung sẽ hiện thị khi Tab kích hoạt
• aria-labelledby="tab-id" với tab-id là id của tiêu đề Tab mà nó liên kết đến thanh Tab
• .tab-pane nào muốn hiện thị mặc định thì cho thêm .show và .active
• Muốn có hiệu ứng fade khi kích hoạt thì thêm .fade

Ví dụ sau triển khai code cho thanh Tab tạo ra ở phần trên, tạo ra ba hộp nội dung .tab-pane có ID là pane-tab-1, pane-tab-2, pane-tab-3

<div class="tab-content">
    <div class="tab-pane fade show active" id="pane-tab-1" role="tabpanel" aria-labelledby="tab1">
        Nội dung Tab1 - HTML code
    </div>
    <div class="tab-pane fade" id="pane-tab-2" role="tabpanel" aria-labelledby="tab2">
        Nội dung Tab2 - HTML code
    </div>
    <div class="tab-pane fade" id="pane-tab-3" role="tabpanel" aria-labelledby="tab3">
        Nội dung Tab3 - HTML code
    </div>
</div>

Kết quả

Tổng hợp lại 2 đoạn mã trên, khi chạy nó có kết quả như sau:

Bạn có thể tùy ý tùy biến thanh Tab theo cách tùy biến .nav cũng như tùy biến phần nội dung hiện thị bằng việc sử dụng các tiện ích Bootstrap đã biết.

Ví dụ có thể cho thanh Tab thẳng đứng đồng thời sử dụng .nav-pills thay cho .nav-tabs, phần nội dung bên phải:

<div class="row">
    <div class="col-3">
        <ul class="nav flex-column nav-pills" role="tablist">
        <!--Copy lại các .nav-item ở trên-->
        </ul>
    </div>
    <div class="col-9">
        <!--Copy lại phần tab-content ở trên-->
    </div>
</div>