Thanh điều hướng Navigation bar thường là menu chính và đóng vai trò quan trọng về mặt cấu trúc của 1 trang Web. Với trang web ko sử dụng Bootstrap chúng ta thường mất rất nhiều thời gian cho việc tạo và style cho nó tuy nhiên với Bootstrap 3 thì không phải vất vả như thế. Trong bài viết này chúng ta sẽ học cách tạo các thanh điều hướng trong Bootstrap.
Thanh điều hướng trong bootstrap 3
Trong Bootstrap 3, thanh điều hướng có thể được mở rộng hay thu hẹp, phụ thuộc vào kích thước màn hình.
Thanh điều hướng được tạo bằng phần tử nav với 2 lớp .navbar và .navbar-default.
<div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Hoc.tv</a> </div> <ul class="nav navbar-nav"><li> </li><li class="active"><a href="#">Trang chủ</a></li><li> </li><li><a href="#">Học lập trình</a></li><li> </li><li><a href="#">Thủ thuật máy tính</a></li><li> </li><li><a href="#">Học Office</a></li><li> </li></ul> </div> </nav> </div>
Kết quả:
Cố định thanh điều hướng (Navigation bar)
Để cố định thanh điều hướng chúng ta có thể thêm 2 lớp .navbar-fixed-top và .navbar-fixed-bottom để cố định vị trí ở top (trên) hay bottom (dưới). Khi dùng chuột kéo lên và xuống, thanh điều hướng vẫn giữ cố định vị trí mà không biến mất.
Thanh điều hướng với dropdown
Thanh điều hướng cũng có thể chứa 1 menu dropdown. Trong ví dụ dưới đây, menu dropdown được đặt ở mục “Giới thiệu”.
<div class="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Hoc.tv</a> </div> <ul class="nav navbar-nav"><li> </li><li class="active"><a href="#">Trang chủ</a></li><li> </li><li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Giới thiệu </a> <ul class="dropdown-menu"><li> </li><li><a href="#">Chính sách</a></li><li> </li><li><a href="#">Hỗ trợ</a></li><li> </li><li><a href="#">Liên hệ</a></li><li> </li></ul> </li><li> </li><li><a href="#">Học lập trình</a></li><li> </li><li><a href="#">Thủ thuật công nghệ</a></li><li> </li></ul> </div> </nav> </div>
Kết quả:
Thanh điều hướng được căn phải
Trong Bootstrap 3 thanh điều hướng có thể căn phải bằng cách sử dụng lớp .navbar-right
Ví dụ:
<div class="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Hoc.tv</a> </div> <ul class="nav navbar-nav"><li> </li><li class="active"><a href="#">Trang chủ</a></li><li> </li><li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Giới thiệu </a> <ul class="dropdown-menu"><li> </li><li><a href="#">Chính sách</a></li><li> </li><li><a href="#">Hỗ trợ</a></li><li> </li><li><a href="#">Liên hệ</a></li><li> </li></ul> </li><li> </li><li><a href="#">Học lập trình</a></li><li> </li><li><a href="#">Thủ thuật công nghệ</a></li><li> </li></ul> <ul class="nav navbar-nav navbar-right"><li> </li><li><a href="#"> Đăng nhập</a></li><li> </li><li><a href="#"> Đăng ký;</a></li><li> </li></ul> </div> </nav> </div>
Kết quả :
Thanh điều hướng co giãn
Thanh điều hướng chứa nhiều mục và khi thu hẹp các mục này thì nội dung có thể bị tràn xuống dòng, để giải quyết điều đó Bootstrap cung cấp cách ẩn đi thanh điều hướng, và thay thế nó bằng 1 nút với icon nào đó.
<div class="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"> </button> <a class="navbar-brand" href="#">Hoc.tv</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"><li> </li><li class="active"><a href="#">Trang chủ</a></li><li> </li><li><a href="#">Bóng Đá</a></li><li> </li><li><a href="#">Thể Thao</a></li><li> </li><li><a href="#">Xã Hội</a></li><li> </li></ul> <ul class="nav navbar-nav navbar-right"><li> </li><li><a href="#"> Đăng ký</a></li><li> </li><li><a href="#"> Đăng nhập</a></li><li> </li></ul> </div> </div> </nav> </div>
Kết quả:
Nút button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar” dùng để tạo nút collapse (thu giãn) với icon là 3 dấu vạch ngang, nút thu giãn này sẽ xuất hiện ở thiết bị có màn hình hẹp (như di động) và khi nhấn vào nút này, nội dung thanh điều hướng sẽ được hiển thị.
Lời kết:
Thanh điều hướng có ý nghĩa rất quan trọng trong một giao diện Web dùng Bootstrap, nó giúp người dùng và bộ máy tìm kiếm có thể định hình việc phân loại nội dung chính của website dễ dàng hơn.
