Bootstrap: Thành phần điều hướng (Navs)

Các thành phần điều hướng trong Bootstrap đều có dạng markup và trạng thái giống nhau, bắt đầu với class cơ sở .nav. Đổi chỗ các class để hoán đổi các style với nhau.

Thành phần điều hướng dạng thẻ

Hãy lưu ý rằng class .nav-tabs luôn yêu cầu class cơ sở .nav.

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Thành phần điều hướng dạng viên thuốc

Sử dụng mã HTML như trên nhưng thay vì sử dụng .nav-tabs, bạn hãy sử dụng .nav-pills:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Thành phần điều hướng dạng viên thuốc cũng có thể xếp chồng lên nhau theo hàng dọc. Để làm được điều đó, bạn chỉ cần thêm.nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Căn đều

Khi kích thước màn hình lớn hơn 768px, bạn có thể dễ dàng biến chiều rộng của thành phần điều hướng dạng thẻ và thành phần điều hướng dạng viên thuốc bằng với chiều rộng của phần tử cha bằng cách sử dụng .nav-justified. Trên các màn hình nhỏ hơn, các liên kết điều hướng được xếp chồng lên nhau.

<ul class="nav nav-tabs nav-justified" role="tablist">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Vô hiệu hóa liên kết

Đối với các thành phần điều hướng (dạng thẻ hoặc dạng viên thuốc), hãy thêm .disabled để biến các liên kết thành màu xám và không các hiệu ứng di chuột khi di chuột qua.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Sử dụng menu sổ xuống

Bạn có thể thêm menu sổ xuống bằng việc sử dụng plugin sổ xuống cùng với một số ít mã HTML.

Thành phần điều hướng dạng thẻ và menu sổ xuống

<ul class="nav nav-tabs" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Thành phần điều hướng dạng viên thuốc và menu sổ xuống

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>