Chủ đề nổi bật
03/08/2018, 09:45

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

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.

Ví dụ: Xem demo



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>



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>



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>



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>



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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Twitter Bootstrap 3

BÀI KẾ SAU BÀI KẾ TIẾP

Twitter Bootstrap 4

BÀI KẾ SAU BÀI KẾ TIẾP

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ỗ trợ của bootstrap 3, đây là các class sẽ giúp các bạn trong việc tạo ra ...

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 ta, và với bootstrap nó cũng được hỗ trợ một cách tốt nhất để người ...

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 lập trình trở nên đơn giản và thống nhất với nhau. Nhưng bạn có nghĩ trong ...

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ề navs và trong bài học ngày hôm nay thì chúng ta sẽ tiếp tục tìm hiểu về một ...

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 bootstrap 3 , nghe tới cái tên list chắc hẳn các bạn đã hình dung ra ...

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 theo chúng ta sẽ thực hành và tạo ra những mẫu layout với những kiến thức ...

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ì tabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. ...