Bài học Bootstrap 3 này chúng ta sẽ học cách tạo menu, tab và pill trong Bootstrap 3 các bạn nhé!
Menu
Menu là 1 phần cực kỳ quan trọng của các trang web. Trong HTML, menu thường là 1 danh sách không thứ tự (sử dụng phần tử ul).
Ví dụ:
<div class="container"> <ul> <li><a href="#">Trang chủ HocTV</a></li> <li><a href="#">PHP</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </div>
Nếu bạn muốn menu hiển thị theo hàng ngàng, đơn giản là hiển thị lớp .list-inline ở phần tử ul, ví dụ:
<div class="container"> <ul class="list-inline"> <li><a href="#">Trang chủ</a></li> <li><a href="#">PHP</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </div>
Tab
Tab được tạo bằng cách dùng lớp .nav và lớp .nav-tabs trong phần tử ul. Để đánh dấu tab hiện tại, chúng ta có thể dùng lớp .active ở phần tử li.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Trang chủ</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</div>
Tab với Menu dropdown
Bạn cũng có thể tạo 1 menu dropdown bằng các tab như ví dụ.
<div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Trang chủ</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bóng đá <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">kết quả trận đấu</a></li> <li><a href="#">Bảng xếp hạng NHA</a></li> <li><a href="#">Bảng xếp hạng Laliga</a></li> </ul> </li> <li><a href="#">Giải trí</a></li> <li><a href="#">Tin tức</a></li> </ul> </div>
Kết quả hiển thị như sau:
Pill
Pill là một dạng nút hình viên thuốc được tạo ra bằng cách dùng lớp .nav và lớp .nav-pills. Lớp .active ở phần tử li để đánh dấu trang hiện tại đang kích hoạt.
<div class="container"> <ul class="nav nav-pills"> <li class="active"><a href="#">Trang chủ</a></li> <li><a href="#">Bóng đá</a></li> <li><a href="#">Thời sự</a></li> <li><a href="#">Giải trí</a></li> </ul> </div>
Kết quả hiển thị như sau:
Pill hiển thị dọc
Các pill có thể được hiển thị theo chiều dọc bằng cách dùng lớp .nav-stacked.
<div class="container"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Trang chủ</a></li> <li><a href="#">Bóng đá</a></li> <li><a href="#">Thời sự</a></li> <li><a href="#">Giải trí</a></li> </ul> </div>
Kết quả:
Pill với Menu Dropdown
Tương tự Tab, chúng ta cũng có thể làm 1 menu dropdown với pill như ví dụ sau.
<div class="container"> <ul class="nav nav-pills"> <li class="active"><a href="#">Trang chủ</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bóng đá <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Kết quả thi đấu</a></li> <li><a href="#">Lịch thi đấu</a></li> <li><a href="#">Bảng xếp hạng</a></li> </ul> </li> <li><a href="#">Tin tức</a></li> <li><a href="#">Video Clip</a></li> </ul> </div>
Kết quả:
Canh giữa Tab và Pill
Để canh giữa Tab và Pill, bạn chỉ cần thêm lớp .nav-justified vào ul
Ví dụ
<div class="container"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Trang chủ</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bóng đá <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Kết quả thi đấu</a></li> <li><a href="#">Lịch thi đấu</a></li> <li><a href="#">Bảng xếp hạng</a></li> </ul> </li> <li><a href="#">Tin tức</a></li> <li><a href="#">Video Clip</a></li> </ul> </div>
Kết quả:
Tab động
Để tạo các tab động, chúng ta sử dụng thuộc tính data-toggle=”tab” cho 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.
<div class="container"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Trang chủ</a></li> <li><a data-toggle="tab" href="#menu1">Bóng Đá</a></li> <li><a data-toggle="tab" href="#menu2">Tin Tức</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>Trang chủ</h3> <p>Heloo các bạn!</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Bóng Đá</h3> <p>Kết quả bóng đá</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Tin Tức</h3> <p>Covid 20</p> </div> </div> </div>
Kết quả :
Pill động
Tương tự bạn cũng có thể thêm thuộc tính data-toggle=”pill” dành cho các pill động.
<div class="container"> <ul class="nav nav-pills"> <li class="active"><a data-toggle="pill" href="#home">Trang chủ</a></li> <li><a data-toggle="pill" href="#menu1">Bóng đá</a></li> <li><a data-toggle="pill" href="#menu2">Giải trí</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>Trang chủ</h3> <p>Niềm vui của em là Học TV</p> </div> <div id="menu1" class="tab-pane fade"> <h3>Bóng đá</h3> <p>Kết quả bóng đá</p> </div> <div id="menu2" class="tab-pane fade"> <h3>Giải trí</h3> <p>Clip hot tiktok</p> </div> </div> </div>
Kết quả:
Tóm lại:
Vậy là qua bài viết này chúng mình đã giúp cho ác bạn hiểu được cách tạo Menu, Tab, và Pill trong Bootstrap 3 thông qua các lớp sẵn có của Bootstrap 3 rồi đấy. Có gì khó hiểu các bạn hãy comment bên dưới nhé chúng mình sẽ giải quyết nhanh nhất có thể!
