Bootstrap - Phần tử điều hướng

Bootstrap cung cấp một vài tùy chọn khác nhau để tạo kiểu cho các phần tử điều hướng. Tất cả chúng đều có chung lớp đánh dấu và lớp cơ sở,.nav. Bootstrap cũng cung cấp một lớp trợ giúp, để chia sẻ đánh dấu và trạng thái. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.

Điều hướng dạng bảng hoặc Tab

Để tạo menu điều hướng theo tab -

Bắt đầu với một danh sách không có thứ tự cơ bản với lớp cơ sở là .nav
Thêm lớp học .nav-tabs.

Ví dụ sau đây chứng minh điều này -

<p>Tabs Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Điều hướng thuốc

Thuốc cơ bản

Để biến các tab thành viên thuốc, hãy làm theo các bước tương tự như trên, sử dụng lớp .nav-pills thay vì .nav-tabs.

Ví dụ sau đây chứng minh điều này -

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Thuốc dọc

Bạn có thể xếp các viên thuốc theo chiều dọc bằng cách sử dụng lớp .nav-stacked cùng với các lớp - .nav, .nav-pills.

Ví dụ sau đây chứng minh điều này -

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Điều hướng hợp lý

Bạn có thể tạo các tab hoặc viên thuốc có chiều rộng bằng nhau như tab gốc của chúng ở màn hình rộng hơn 768px bằng cách sử dụng class .nav-justified cùng với .nav, .nav-tabs hoặc là .nav, .nav-pillstương ứng. Trên 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.

Ví dụ sau đây chứng minh điều này -

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Liên kết bị vô hiệu hóa

Đối với mỗi .nav các lớp học, nếu bạn thêm .disabled lớp, nó sẽ tạo ra một liên kết màu xám cũng vô hiệu hóa :hover trạng thái như trong ví dụ sau:

<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   
   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   
   <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

Lớp này sẽ chỉ thay đổi giao diện của <a> chứ không phải chức năng của nó. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết tại đây.

Trình đơn thả xuống

Menu điều hướng chia sẻ cú pháp tương tự với menu thả xuống. Theo mặc định, bạn có một mục danh sách có một liên kết hoạt động cùng với một số thuộc tính dữ liệu để kích hoạt một danh sách không có thứ tự với.dropdown-menu lớp học.

Tab có menu thả xuống

Để thêm danh sách thả xuống vào tab -

Bắt đầu với một danh sách không có thứ tự cơ bản với lớp cơ sở là .nav
Thêm lớp học .nav-tabs.
Bây giờ, hãy thêm một danh sách không có thứ tự với .dropdown-menu lớp học.

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java 
         <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Thuốc có thả xuống

Để làm điều tương tự với thuốc, chỉ cần hoán đổi .nav-tabs lớp học với .nav-pills như thể hiện trong ví dụ sau.

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   
   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>