[Bootstrap] Phần 18: Menu, Tab và Pill

407 lượt xem

Trong bài viết này, chúng ta sẽ học cách tạo menu, tab và pill trong Bootstrap.

Menu
Menu là 1 phần quan trọng của các trang web. Trong HTML, menu thường là 1 danh sách không thứ tự (dùng phần tử ul).
menu

<div class="container">
	<ul>
		<li><a href="#">Trang chủ - dammio.com</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>

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ụ:

<ul class="list-inline">

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.
tab

<div class="container">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">Trang chủ - dammio.com</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>

Tab với Menu dropdown
Bạn cũng có thể tạo 1 menu dropdown bằng các tab như ví dụ.
tab_dropdown

<div class="container">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">Trang chủ - dammio.com</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>
</div>

Pill
Pill (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.
pill

<div class="container">
	<ul class="nav nav-pills">
		<li class="active"><a href="#">Trang chủ - dammio.com</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>

Pill hiển thị dọc
Các pill có thể được hiển thị theo hàng dọc bằng cách dùng lớp .nav-stacked.
pill_vertical

<div class="container">
	<ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#">Trang chủ - dammio.com</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>

Pill với Menu Dropdown
Tương tự Tab, bạn cũng có thể làm 1 menu dropdown với pill như ví dụ sau.
pill_dropdown_menu

<div class="container">
	<ul class="nav nav-pills nav-stacked">
		<li class="active"><a href="#">Trang chủ - dammio.com</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>
</div>

Canh giữa Tab và Pill
Để canh giữa Tab và Pill, chúng ta chỉ cần thêm lớp .nav-justified

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.
pill_dynamic

<div class="container">
	<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>Trang chủ - dammio.com</h3>
			<p>Nội dung trang chủ</p>
		</div>
		<div id="menu1" class="tab-pane fade">
			<h3>Menu 1</h3>
			<p>Nội dung menu 1</p>
		</div>
		<div id="menu2" class="tab-pane fade">
			<h3>Menu 2</h3>
			<p>Nội dung menu 2</p>
		</div>
	</div>
</div>

Pill động
Tương tự chúng ta cũng có thể thêm thuộc tính data-toggle=”pill” dành cho các pill động.
pill_dynamic1

<div class="container">
	<ul class="nav nav-pills">
		<li class="active"><a data-toggle="pill" href="#home">Trang chủ - dammio.com</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>Trang chủ</h3>
			<p>Nội dung trang chủ</p>
		</div>
		<div id="menu1" class="tab-pane fade">
			<h3>Menu 1</h3>
			<p>Nội dung menu 1</p>
		</div>
		<div id="menu2" class="tab-pane fade">
			<h3>Menu 2</h3>
			<p>Nội dung menu 2</p>
		</div>
	</div>
</div>

Tóm lại, bài viết giúp các bạn cách tạo menu, tab, pill trong Bootstrap thông qua việc dùng các lớp sẵn có.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz