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

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 đã tìm hiểu xong phần glyphicons dùng để nhúng các biểu tượng vào website. Ở bài viết này thì chúng ta sẽ tìm hiểu về một components khá là quan trọng, đó chính là navs. Nghe cái tên là thấy quen quen rồi hen, chức năng chính của nó sẽ giúp chúng ta tạo ra các menu đẹp mắt và ứng dụng nó vào website dễ dàng hơn. Nó có rất là nhiều kiểu và chúng ta sẽ tìm hiểu cách sử dụng nó thông qua từng kiểu menu.

1. Tạo menu nằm ngang với navs trong bootstrap 3

Ông bà ta thường nói, khi bắt đầu làm việc gì đó thì đều bắt đầu từ những việc đơn giản nhất. Tôi sử dụng các thẻ ul, li để xây dựng cấu trúc html cho ví dụ này, tôi bọc nội dung bên trong một khối có chứa phần tử là 12 cột.

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.

Ví dụ: Xem demo


navs bootstrap png
Hình ảnh navs

Như vậy để có thể tao ra menu giống như hình trên thì ngay thẻ ul , các bạn khai báo cho nó class cha là navs và phía sau nó sẽ là các class con bổ trợ chúng ta tạo ra các kiểu menu khác. Tiếp theo chúng sẽ sẽ tìm hiểu kiểu đầu tiên đó chính là dạng menu theo kiểu tabs.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Navs</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">
            .example{
                margin: 20px;
            }

        </style>
    </head>
    <body>
        <div class="example">
            <div class="container">
                <div class="row">
                    <h2 class="text-center">Freetuts.net - Bootstrap 3 Navs  - Author Hoài Minh</h2>
                    <hr />
                    <div class="col-md-12">
                        <ul class="nav nav-tabs">
                            <li><a href="">Trang chủ</a></li>
                            <li><a href="">Giới thiệu</a></li>
                            <li><a href="">Liên hệ</a></li>
                        </ul>
                    </div>	

                </div>
            </div>
        </div>
    </body>
</html>


navs tab png
Hình ảnh nav-tabs

Như vậy các bạn có thể dễ dàng nhân ra rằng là sau khi chúng ta thêm class con là nav-tabs vào thì danh sách menu đã hiển thị theo chiều ngang và phía dưới có thể hiện một nét gạch ngang để phân chia ra từng tabs menu rất rõ ràng.

Để có thể làm nổi bật menu đã được click chuột và xác định là người dùng đang ở trang nào thì chắc hẳn các bạn vẫn còn nhớ class active đúng không nào. Ai quên rồi thì vui lòng xem lại các bài cũ nhé.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Navs</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">
        .example{
            margin: 20px;
        }

    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
            	<h2 class="text-center">Freetuts.net - Bootstrap 3 Navs  - Author Hoài Minh</h2>
            	<hr />
            <div class="col-md-12">
            	<ul class="nav nav-tabs">
            		<li><a href="">Trang chủ</a></li>
            		<li class="active"><a href="">Giới thiệu</a></li>
            		<li><a href="">Liên hệ</a></li>
            	</ul>
            </div>	
            	
        </div>
</div>
</div>
    </body>
    </html>


active navs tabs png
Hình ảnh active nav-tabs

Với css thông thường thì để có thể thêm một icons vào kế bên menu thì chắc hẳn các bạn sẽ mất rất nhiều thời gian để canh lề cho background, vậy thì khi làm việc với navs điều mà khiến các bạn đau đầu bất lâu nay sẽ trở nên rất là đơn giản. hoàn toàn có thể kết hợp glyphicons nhúng vào menu.

2. Nhúng glyphicons vào navs trong bootstrap 3

Cách sử dụng và khai báo glyphicons thì quá đơn giản rồi hen, nên tôi sẽ không nhắc lại.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Navs</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">
            .example{
                margin: 20px;
            }

        </style>
    </head>
    <body>
        <div class="example">
            <div class="container">
                <div class="row">
                    <h2 class="text-center">Freetuts.net - Bootstrap 3 Navs  - Author Hoài Minh</h2>
                    <hr />
                    <div class="col-md-12">
                        <ul class="nav nav-tabs">
                            <li><a href=""><span class="glyphicon glyphicon-home"></span> Trang chủ</a></li>
                            <li class="active"><a href=""><span class="glyphicon glyphicon-user"></span> Giới thiệu</a></li>
                            <li><a href=""><span class="glyphicon glyphicon-envelope"></span> Liên hệ</a></li>
                        </ul>
                    </div>	

                </div>
            </div>
        </div>
    </body>
</html>


icon nav tab png
Hình ảnh nhúng icons vào nav-tabs

Như vậy xem như chúng ta vừa hoàn thành xong việc tìm hiểu kiểu menu đầu tiên mà navs trong bootstrap 3 cung cấp cho chúng ta. Để tôi trình bày sơ lược ví dụ minh họa ở trên, tôi sử dụng cặp thẻ span và nhúng vào đó các class glyphicons và nhét nó vào bên trong phần tử của thẻ a href.

3. Thay đổi background active menu navs trong bootstrap 3

Ở phần này thì navs có một class con là nav-pills hỗ trợ như chúng ta việc thay đổi màu nền cho việc active menu. Trong ví dụ này tôi mượn lại phần code phía trên và chỉ thay đổi class con bổ trợ mà thôi.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Navs</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">
            .example{
                margin: 20px;
            }

        </style>
    </head>
    <body>
        <div class="example">
            <div class="container">
                <div class="row">
                    <h2 class="text-center">Freetuts.net - Bootstrap 3 Navs  - Author Hoài Minh</h2>
                    <hr />
                    <div class="col-md-12">
                        <ul class="nav nav-pills">
                            <li><a href=""><span class="glyphicon glyphicon-home"></span> Trang chủ</a></li>
                            <li class="active"><a href=""><span class="glyphicon glyphicon-user"></span> Giới thiệu</a></li>
                            <li><a href=""><span class="glyphicon glyphicon-envelope"></span> Liên hệ</a></li>
                        </ul>
                    </div>	

                </div>
            </div>
        </div>
    </body>
</html>


nav pills png
Hình ảnh nav-pills

Ngoài ra còn có class con là nav-stacked dùng để tạo ra menu dạng nằm dọc, tôi sẽ không demo đâu nhé, các bạn có thể thay đổi code và cảm nhận mà thôi.

Kết bài:

Bài viết này cũng khá ngắn nhưng nó là nền tảng để các bạn có thể học tốt các phần sau hơn,ở bài tiếp theo chúng ta sẽ lại tiếp tục tìm hiểu vmột components khác để tạo ra các kiểu menu bắt mắt hơn. Mình viết xong bài này là hơn 1h sáng rồi, đóng lap và xin chào tạm biệt các bạn.

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 18: Tạo Tabs trong bootstrap 3

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 navs vì…

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