TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navstabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. Như vậy serie về bootstrap 3 cũng đã đi được một chặng đường dài và cũng sắp kết thúc,theo plan mà tôi đề ra thì còn khoảng 2 bài nửa là chúng ta kết thúc lý thuyết và chuyển sang giai đoạn thực hành để style ra một giao diện, áp dụng toàn bộ kiến thức đã học vào bài thực hành.

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
<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 DEMO
<!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 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>

tab-basic.png
Hình ảnh tabs căn bản trong bootstrap 3

Chúng ta vừa xây dựng thành công cấu trúc một dạng tabs căn bản và chưa có click được, vì thế công việc tiếp theo sẽ phải cần làm chính là khi người dùng click vào tabs bất kì thì sẽ chuyển sang tabs bên kia và show nội dung bên trong tabs đó ở phía bên dưới dấu gạch ngang. Tức là phần tabs này sẽ chia ra thành hai thành phần...phần thứ nhất chứa nội dung của menu và phần thứ hai chứa những nội dung tương ứng khi mà click vào từng tabs.

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:
<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:
<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ôi sẽ giải thích phần thứ hai để các bạn nắm rõ hơn về các class của nó, mọi thành phần muốn hiển thị khi click vào các tabs đều được bọc trong thẻ div có class là 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 DEMO
<!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 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>

tab bootstrap png
Hình ảnh tabs hoàn chỉnh

Ngay từ bây giờ các bạn có thể click tabs và nó đã có thể thay đổi nội dung tương ứng với từng tabs rồi nhé, tất nhiên nếu ở css thông thường thì để có thể click nó thì chúng ta cần phải nhúng thêm vào đó các hiệu ứng js, còn với bootstrap 3 thì nó đã hỗ trơ js sẵn cho chúng ta rồi nên chúng ta chỉ việc khai báo html và sử dụng thôi. Tiếp theo chúng ta sẽ nhúng thêm icons vào để trang trí tab đẹp mắt hơn.

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.

<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 DEMO

<!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 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>

tabs and icons png
Hình ảnh tabs sau khi nhúng icons

Tabs còn rất nhiều, nhưng tôi không thể trình bày hết ở đây được, vì thế nếu bạn chưa hài lòng và muốn tìm hiểu thêm thì lên trang chủ của bootstrap xem thêm nha.

Kết Bài:

Bài viết khá ngắn, nhưng tôi nghĩ như thế là quá đủ để có thể tạo ra cho riêng các bạn một tabs đẹp mắt. còn các hiệu ứng click khi chuyển tabs thì các bạn tự tìm hiểu thêm nha, Xin chào và hẹn gặp lại các bạn ở bài tiếp theo.

Cùng chuyên mục:

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top