[Bootstrap] Phần 19: Thanh điều hướng

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
Thanh điều hướng thường là menu chính, đóng vai trò quan trọng về mặt cấu trúc của 1 trang Web. Trong Bootstrap, 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="#">Dammio.com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Trang chủ</a></li>
      <li><a href="#">Thiết kế Web</a></li>
      <li><a href="#">Lập trình Web</a></li> 
      <li><a href="#">Lập trình Python</a></li> 
    </ul>
  </div>
</nav>
</div>

Bạn có thể thêm thay lớp .navbar-default bằng lớp .navbar-inverse để tạo thanh điều hướng có màu đen.

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í thanh điều hướng ở 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.

<nav class="navbar navbar-inverse navbar-fixed-top">

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ụ sau, 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="#">Dammio.com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Trang chủ</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Giới thiệu
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Cơ cấu</a></li>
          <li><a href="#">Nhân sự</a></li>
          <li><a href="#">Mục tiêu</a></li> 
        </ul>
      </li>
      <li><a href="#">Lập trình Web</a></li> 
      <li><a href="#">Thiết kế Web</a></li> 
    </ul>
  </div>
</nav>
</div>

Thanh điều hướng canh phải
Lớp .navbar-right dùng để canh các nút thanh điều hướng bên phải. Trong ví dụ sau, chúng ta sẽ chèn các nút “Đăng nhập” và “Đăng ký” ở bên phải thanh điều hướng kèm theo các glyphicon.

<div class="container">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Dammio.com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Trang chủ</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Giới thiệu
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Cơ cấu</a></li>
          <li><a href="#">Nhân sự</a></li>
          <li><a href="#">Mục tiêu</a></li> 
        </ul>
      </li>
      <li><a href="#">Lập trình Web</a></li> 
      <li><a href="#">Thiết kế Web</a></li> 
    </ul>
	<ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Đăng nhập</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Đăng ký</a></li>
    </ul>
  </div>
</nav>
</div>

Thanh điều hướng co giãn
Tính chất quan trọng của Bootstrap là giúp giao diện Web có thể hiển thị ở bất cứ kích thước màn hình nào. Do 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 type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Dammio.com</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Trang chủ</a></li>
        <li><a href="#">Thiết kế Web</a></li>
        <li><a href="#">Lập trình Web</a></li> 
        <li><a href="#">Tiếng Anh</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Đăng ký</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Đăng nhập</a></li>
      </ul>
    </div>
  </div>
</nav>
</div>

Trong ví dụ trên, chúng ta thấy 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 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ị.

Kết luận: thanh điều hướng rất có ý nghĩa trong 1 giao diện Web dùng Bootstrap, giúp người dùng và search engine có thể định hình việc phân loại nội dung chính của website. Bài viết này đã cung cấp cho bạn các kiến thức cần thiết để xây dựng thanh điều hướng cơ bản, bạn có thể kết hợp thêm nhiều phong cách khác để tạo được thanh điều hướng như ý.