Tab và thuốc Bootstrap
Thực đơn
Hầu hết các trang web đều có một số loại menu.
Trong HTML, một menu thường được xác định trong một danh sách không có thứ tự <ul> (và được tạo kiểu sau đó), như sau:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Nếu bạn muốn tạo menu ngang của danh sách trên, hãy thêm lớp .list-inline vào <ul> :
<ul class="list-inline"> Hãy tự mình thử »Hoặc bạn có thể hiển thị menu bên trên bằng Tabs và Pills của Bootstraps (xem bên dưới).
Lưu ý: Xem ví dụ cuối cùng trên trang này để tìm hiểu cách làm cho các tab và viên thuốc có thể chuyển đổi/động.
Tab
Các tab được tạo bằng <ul class="nav nav-tabs"> :
Mẹo: Đồng thời đánh dấu trang hiện tại bằng <li class="active"> .
Ví dụ sau tạo các tab điều hướng:
Ví dụ
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Hãy tự mình thử »Các tab có menu thả xuống
Các tab cũng có thể chứa các menu thả xuống.
Ví dụ sau thêm menu thả xuống vào "Menu 1":
Ví dụ
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Hãy tự mình thử » Thuốc
Thuốc được tạo bằng <ul class="nav nav-pills"> . Đồng thời đánh dấu trang hiện tại bằng <li class="active"> :
Ví dụ
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Hãy tự mình thử »Thuốc dọc
Thuốc cũng có thể được hiển thị theo chiều dọc. Chỉ cần thêm lớp .nav-stacked :
Ví dụ
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Hãy tự mình thử »Thuốc dọc liên tiếp
Chữ...
Chữ...
Chữ...
Ví dụ sau đây đặt menu viên thuốc dọc bên trong cột cuối cùng. Vì vậy, trên màn hình lớn menu sẽ được hiển thị bên phải. Nhưng trên màn hình nhỏ, nội dung sẽ tự động điều chỉnh thành bố cục một cột:
Ví dụ
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Hãy tự mình thử »Thuốc có menu thả xuống
Thuốc cũng có thể chứa các menu thả xuống.
Ví dụ sau thêm menu thả xuống vào "Menu 1":
Ví dụ
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Hãy tự mình thử »Tab và thuốc ở giữa
Để căn giữa/căn chỉnh các tab và cột, hãy sử dụng lớp .nav-justified .
Lưu ý rằng trên màn hình nhỏ hơn 768px, các mục trong danh sách sẽ được xếp chồng lên nhau (nội dung sẽ vẫn được căn giữa):
Ví dụ
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Hãy tự mình thử »Tab có thể chuyển đổi / động
TRANG CHỦ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Để làm cho các tab có thể chuyển đổi được, hãy thêm thuộc tính data-toggle="tab" vào mỗi liên kết. Sau đó, thêm lớp .tab-pane với một ID duy nhất cho mỗi tab và bọc chúng bên trong phần tử <div> với lớp .tab-content .
Nếu bạn muốn các tab mờ dần trong và ngoài khi nhấp vào chúng, hãy thêm lớp .fade vào .tab-pane :
Ví dụ
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Hãy tự mình thử »Thuốc có thể chuyển đổi / động
Mã tương tự áp dụng cho thuốc viên; chỉ thay đổi thuộc tính data-toggle thành data-toggle="pill" :
Ví dụ
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Hãy tự mình thử » Tham khảo điều hướng Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các lớp điều hướng, hãy truy cập Tài liệu tham khảo điều hướng Bootstrap đầy đủ của chúng tôi.
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện tab, hãy truy cập Tài liệu tham khảo về tab Bootstrap JS của chúng tôi.
