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>

1 Có thể sử dụng các lớp Flex để thiết lập cho phần tử chứa .nav
Căn các phần tử theo hướng chính:


2 Hướng đứng bằng thuộc tính .flex-column hoặc .flex-{breakpoint}-column:


3 Để tạo ra dạng Tab cho thêm .nav-tabs, nổi bật các item dùng .nav-pills

4 Để thiết lập tất cả các phần tử con chiếm kín thanh .nav và cùng độ rộng sử dụng thêm vào .nav-fill hoặc .nav-justified (các phần tử con trực tiếp phải là .nav-item)

5 Xem thêm phần dropdown, bạn có thể thiết lập .nav-item như là một Drowpdown

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:

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:

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:

Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code

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>
Nội dung Tab1 - HTML code
Nội dung Tab2 - HTML code
Nội dung Tab3 - HTML code

Đăng ký nhận bài viết mới