Bootstrap 4 - Bootstrap Tabs
Cách tạo Tab bằng Bootstrap
Điều hướng dựa trên tab cung cấp một cơ chế dễ dàng và mạnh mẽ để xử lý lượng nội dung trong một khu vực nhỏ thông qua việc tách nội dung thành các tab khác nhau nơi mỗi tab có thể xem được tại một thời điểm. Người dùng có thể nhanh chóng truy cập nội dung thông qua việc chuyển đổi giữa các tab mà không cần rời khỏi trang. Ví dụ sau đây sẽ chỉ cho bạn cách tạo các tab cơ bản bằng cách sử dụng thành phần tab Bootstrap.
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
Các plugin tabs cũng tương thích với Pills Nav. Để tạo pills Nav chỉ cần thay thế lớp .nav-tabs thành lớp .nav-pills . Xem ví dụ sau:
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
Tab động
Để tạo các tab động, chúng ta thêm thuộc tính data-toggle=”tab” vào mỗi liên kết. Sau đó, tạo 1 lớp .tab-pane với 1 ID duy nhất cho mỗi tab và bao chúng bên trong 1 phần tử div với lớp .tab-content. Nếu bạn muốn các tab hiển thị dần biến mất hoặc dần hiện ra thì thêm lớp .fade trong lớp .tab-pane.
Ví dụ:
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-toggle="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content ...</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content ...</p>
</div>
<div class="tab-pane fade" id="messages">
<p>Messages tab content ...</p>
</div>
</div>