Kết nối

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

9.086 lượt xem 
 Cập nhật lần cuối: 11/01/2017 lúc 00:10:59
Thể loại: Bootstrap, Thiết kế Web 

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

Liên quan:  10 font chữ an toàn nhất trong thiết kế website

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

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 18: Menu, Tab và Pill. https://www.dammio.com/2016/10/25/bootstrap-phan-18-menu-tab-va-pill.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 18: Menu, Tab và Pill},
    year = {2016},
    url = {https://www.dammio.com/2016/10/25/bootstrap-phan-18-menu-tab-va-pill},
    urldate = {2024-10-29}
    }
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x