Tạo Tabs trong bootstrap 3
1. Tạo tabs cơ bản trong bootstrap 3
Ở phần này thì chúng ta sẽ tìm hiểu cách tao ra một dạng tabs cơ bản, tức là nó hiển thị giống như một thanh menu nằm ngang và khi click vào cũng không có điều gì xảy ra cả. Vì nó cũng là một thành phần của nav nên mọi nội dung cũng phải được bọc trong hai cặp thẻul,li. ngoài class nav được gán vào mặc định thì chúng sẽ còn một class con hỗ trợ là nav-tabs, sau khi gán class này vào thì nó mới hiển thị đúng như dạng tabs mà chúng ta thường gặp ở các website.
1
2
3
4
5
| <ul class="nav nav-tabs"> <li><a href="">HOME</a></li> <li><a href="">PROFILE</a></li> <li><a href="">CONTACT</a></li></ul> |
Full Code: XEM DEMO1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!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-theme.min.css"> <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 Hoài Minh</h2> <ul class="nav nav-tabs"> <li><a href="">HOME</a></li> <li><a href="">PROFILE</a></li> <li><a href="">CONTACT</a></li> </ul> </div> </div> </div> </body></html> |
Hình ảnh tabs căn bản trong bootstrap 3
2. Xác định vị trí tabs trong bootstrap 3
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 javasript và 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 thẻa href ở trên phần menu, tôi sẽ đặt 3 id khác nhau cho từng menu, ký hiệu id trong css là dấu #, vậy lần lượt ta sẽ có 3 id như sau, #home, #info, #contact.Thuộc tính
data-toggle là thuộc tính riêng mà bootstrap hỗ trợ chúng ta trong rất nhiều component, phần giá trị của nó , chúng ta sẽ điền vào là tab để nó hiểu rằng chúng ta đang làm việc với components tabs.Như tôi đã trình bày ở phía trên thì phần tabs này có 2 thành phần như sau:
Phần thứ nhất:2
1
2
3
4
5
| <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> |
Phần thứ hai:3
1
2
3
4
5
| <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> |
tab-content (Class cha) , bên
trong nó sẽ còn các thẻ div có các class là tab-pane (Class con). đây sẽ
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 truyền vào thẻ a herf ở phần thứ nhất, nhằm xác
định chính xác vị trí id của từng tabs, để show nội dung cho phù hợp.
Full Code: XEM DEMO4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!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-theme.min.css"> <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 Hoài Minh</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> |
Hình ảnh tabs hoàn chỉnh
3. Nhúng icons vào tabs trong bootstrap 3
Cách nhúng icons thì nếu các bạn đã học qua bài Glyphicons trong bootstrap 3 thì chắc hẳn cũng đã biết rồi hen, nếu bạn nào chưa xem bài đó mà nhảy cóc thẳng lên bài này thì xin mời vào lịnk trên xem lại để vững kiến thức hơn hen.
1
2
3
4
5
| <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> |
Full Code: XEM DEMO5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!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-theme.min.css"> <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 Hoài Minh</h2> <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> <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> |
Hình ảnh tabs sau khi nhúng icons
No comments
Post a Comment