Tabs có quan hệ mật thiết với component navs bởi vì nó cũng là 1 dạng danh sách nằm ngang được phan làm từng khối riêng biệt.
Cách tạo Tabs cơ bản trong bootstrap 3
Vì Tabs cũng là 1 thành phần crua Nav nên mọi nội dung cũng được bao bộc ở trong 2 cặp thẻ ui li, ngoài ra class nav được gán vào mặc định thì chúng sẽ còn 1 class con hỗ trợ là nav-tabs, và sau khi gán class này vào thì nó mới hiển thị đúng như tabs mà chúng ta thường hay gặp ở nhiều website hiện nay.
<ul class=”nav nav-tabs”>
<li><a href=””>HOME</a></li>
<li><a href=””>PROFILE</a></li>
<li><a href=””>CONTACT</a></li>
</ul>
Hướng dẫn xác định vị trí tabs ở trong bootstrap 3
Phần này cũng giống như việc xây dựng các tabs bằng css thông thường thì tabs ở trong bootstrap 3 cũng được hỗ trợ bằng javascript, và khi đó chúng ta sẽ xác định vị trí các tabs bằng các id mà chúng ta truyền vào các thẻ a href ở trên phần menu.
Blog Getbootstrap sẽ đặt 3 id khác nhau cho từng menu, ký hiệu id trong css sẽ là dấu #, khi đó chúng ta lần lượt sẽ có 3 id là: #home, #info, #contact.
Thành phần thứ 1:
<ul class=”nav nav-tabs”>
<li><a href=”#home” data-toggle=”tab”>HOME</a></li>
<li><a href=”#info” data-toggle=”tab”>PROFILE</a></li>
<li><a href=”#contact” data-toggle=”tab”>CONTACT</a></li>
</ul>
Thành phần thứ 2:
<div class=”tab-content”>
<div class=”tab-pane” id=”home”>Trang Chủ</div>
<div class=”tab-pane” id=”info”>Thông Tin</div>
<div class=”tab-pane” id=”contact”>Liên Hệ</div>
</div>
Tóm tắt: Mọi thành phần muốn hiển thị khi click vào các tabs sẽ đều được bọc ở trong thẻ div có class là tab-content(class cha), và ở bên trong nó sẽ còn có các thẻ div có các class là tab-pane(class con).
Đấy là nơi chứa các nội dung ngoài ra còn là nơi khai báo id css để so sánh với phần id mà chúng ta sẽ truyền vào thẻ a href ở phần thứ 1, nhằm xác định rõ vị trí chính xác id của từng tabs, để có thể show nội dung sao cho phù hợp.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Bootstrap 3 Tabs</title>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>
<style type=”text/css”>
body{
min-height: 1000px;
padding-top: 50px;
}
.example{
margin: 5px;
}</style>
</head>
<body>
<div class=”example”>
<div class=”container”>
<div class=”row”>
<h2 class=”text-center”>Tab Bootstrap 3 – Author Blog Getbootstrap</h2>
<ul class=”nav nav-tabs”>
<li><a href=”#home” data-toggle=”tab”>HOME</a></li>
<li><a href=”#info” data-toggle=”tab”>PROFILE</a></li>
<li><a href=”#contact” data-toggle=”tab”>CONTACT</a></li>
</ul><div class=”tab-content”>
<div class=”tab-pane” id=”home”>Trang Chủ</div>
<div class=”tab-pane” id=”info”>Thông Tin</div>
<div class=”tab-pane” id=”contact”>Liên Hệ</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Và ngay sau khi bạn click vào tabs thì nó sẽ có thể thay đổi nội dung tương ứng với từng tabs. và tất nhiên nếu ở css thông thường thì để có thể click thì chúng ta cần phải nhúng thêm vào đó các hiệu ứng js, và với bootstrap 3 thì chúng ta không cần bởi nó đã hỗ trợ js sẵn cho chúng ta rồi, khi đó chúng ta chỉ cần khai báo html mà thôi.
Hướng dẫn nhúng icons vào tabs trong bootstrap 3
Để có thể sử dụng icons thì chúng tôi đã giới thiệu chi tiết qua bài Glyphicons trong bootstrap 3, và nếu bạn chưa biết thì có thể xem thêm thông tin tại đso.
<ul class=”nav nav-tabs”>
<li><a href=”#home” data-toggle=”tab”>HOME <span class=”glyphicon glyphicon-home”></span></a></li>
<li><a href=”#info” data-toggle=”tab”>PROFILE <span class=”glyphicon glyphicon-plus”></span></a></li>
<li><a href=”#contact” data-toggle=”tab”>CONTACT <span class=”glyphicon glyphicon-pencil”></span></a></li>
</ul>
Hi vọng với những thông tin trên về tabs trong bootstrap 3 sẽ giúp bạn hiểu kỹ hơn về kiến thức bootstrap nhé. Chúc các bạn thành công.
