Bootstrap - Thanh điều hướng

Thanh điều hướng là một trong những tính năng nổi bật của các trang Bootstrap. Thanh điều hướng là các thành phần 'meta' đáp ứng đóng vai trò là tiêu đề điều hướng cho ứng dụng hoặc trang web của bạn. Các thanh điều hướng thu gọn trong các chế độ xem trên thiết bị di động và nằm ngang khi chiều rộng của chế độ xem khả dụng tăng lên. Về cốt lõi, thanh điều hướng bao gồm việc tạo kiểu cho tên trang web và điều hướng cơ bản.

Thanh điều hướng mặc định

Để tạo một thanh điều hướng mặc định -

• Thêm các lớp học .navbar, .navbar-default vào thẻ <nav>.

• Thêm vào role = "navigation" vào phần tử trên, để trợ giúp khả năng tiếp cận.

• Thêm một lớp tiêu đề .navbar-headervào phần tử <div>. Bao gồm một phần tử <a> với lớpnavbar-brand. Điều này sẽ làm cho văn bản có kích thước lớn hơn một chút.

• Để thêm liên kết vào thanh điều hướng, chỉ cần thêm một danh sách không có thứ tự với các lớp của .nav, .navbar-nav.

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

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Thanh điều hướng đáp ứng

Để thêm các tính năng đáp ứng vào thanh điều hướng, nội dung bạn muốn thu gọn cần được bao bọc trong <div> với các lớp .collapse, .navbar-collapse. Bản chất thu gọn được vấp bởi một nút có lớp.navbar-togglevà sau đó có hai phần tử dữ liệu. Đầu tiên,data-toggle, được sử dụng để cho JavaScript biết phải làm gì với nút và thứ hai, data-target, cho biết phần tử nào cần chuyển đổi. Sau đó với một lớp học .icon-bartạo ra thứ mà chúng tôi muốn gọi là nút hamburger. Thao tác này sẽ chuyển đổi các phần tử trong .nav-collapse<div>. Để tính năng này hoạt động, bạn cần bao gồm Plugin thu gọn Bootstrap .

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

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle" 
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>
		
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">
	
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
			
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Biểu mẫu trong Navbar

Thay vì sử dụng các biểu mẫu dựa trên lớp mặc định từ Biểu mẫu Bootstrap Chương , biểu mẫu nằm trong thanh điều hướng, hãy sử dụng.navbar-formlớp học. Điều này đảm bảo rằng căn chỉnh theo chiều dọc thích hợp của biểu mẫu và hành vi thu gọn trong các cửa sổ xem hẹp. Sử dụng các tùy chọn căn chỉnh (được giải thích trong phần Căn chỉnh thành phần) để quyết định vị trí của nó trong nội dung thanh điều hướng.

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

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
         <button type = "submit" class = "btn btn-default">Submit</button>
         
      </form>    
   </div>
   
</nav>

Các nút trong Navbar

Bạn có thể thêm các nút bằng cách sử dụng lớp .navbar-btn đến các phần tử <button> không nằm trong một <form> để căn giữa chúng theo chiều dọc trong thanh điều hướng. .navbar-btn có thể được sử dụng trên các phần tử <a> và <input>.

Không được dùng .navbar-btncũng không phải các lớp nút tiêu chuẩn trên <a> các phần tử bên trong .navbar-nav.

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

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <form class = "navbar-form navbar-left" role = "search">
         <div class = "form-group">
            <input type = "text" class = "form-control" placeholder = "Search">
         </div>
			
         <button type = "submit" class = "btn btn-default">Submit Button</button>
      </form>  
		
      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Văn bản trong Navbar

Để bọc các chuỗi văn bản trong một phần tử, hãy sử dụng lớp .navbar-text. Điều này thường được sử dụng với thẻ <p> để dẫn đầu và màu sắc phù hợp. Ví dụ sau đây chứng minh điều này -

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

Liên kết không điều hướng

Nếu bạn muốn sử dụng các liên kết chuẩn không nằm trong thành phần điều hướng thanh điều hướng thông thường, thì hãy sử dụng lớp navbar-link để thêm màu thích hợp cho các tùy chọn thanh điều hướng mặc định và nghịch đảo như được hiển thị trong ví dụ sau:

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <p class = "navbar-text navbar-right">
         Signed in as 
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

Căn chỉnh thành phần

Bạn có thể căn chỉnh các thành phần như liên kết điều hướng, biểu mẫu, nút hoặc văn bản sang trái hoặc phải trong thanh điều hướng bằng cách sử dụng các lớp tiện ích.navbar-left hoặc là .navbar-right. Cả hai lớp sẽ thêm một CSS float theo hướng được chỉ định. Ví dụ sau đây chứng minh điều này -

<nav class = "navbar navbar-default" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      
      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form> 
      
      <p class = "navbar-text navbar-left">Left align-Text</p>
      
      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
      
      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form> 
		
      <p class = "navbar-text navbar-right">Right align-Text</p>
      
   </div>
</nav>

Cố định lên hàng đầu

Thanh điều hướng Bootstrap có thể linh hoạt trong vị trí của nó. Theo mặc định, nó là một phần tử cấp khối có vị trí dựa trên vị trí của nó trong HTML. Với một vài lớp trợ giúp, bạn có thể đặt nó ở đầu hoặc cuối trang, hoặc bạn có thể làm cho nó cuộn tĩnh theo trang.

Nếu bạn muốn thanh điều hướng được cố định ở trên cùng, hãy thêm lớp .navbar-fixed-top đến .navbar class. Ví dụ sau đây chứng minh điều này -

Để ngăn thanh điều hướng nằm trên nội dung khác trong phần nội dung của trang, hãy thêm ít nhất 50 pixel đệm vào thẻ <body> hoặc thử các giá trị của riêng bạn.

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Đã sửa thành Bottom

Nếu bạn muốn thanh điều hướng được cố định ở cuối trang, hãy thêm lớp .navbar-fixed-bottom đến .navbar class. Ví dụ sau đây chứng minh điều này -

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Tĩnh trên cùng

Để tạo thanh điều hướng cuộn với trang, hãy thêm .navbar-static-toplớp học. Lớp này không yêu cầu thêm phần đệm vào <body>.

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
				
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>

Thanh điều hướng đảo ngược

Để tạo thanh điều hướng ngược với nền đen và văn bản màu trắng, chỉ cần thêm .navbar-inverse lớp học .navbar lớp như được minh họa trong ví dụ sau:

Để ngăn thanh điều hướng nằm trên nội dung khác trong phần nội dung của trang, hãy thêm ít nhất 50 pixel đệm vào thẻ <body> hoặc thử các giá trị của riêng bạn.

<nav class = "navbar navbar-inverse" role = "navigation">
   
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>
   
   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
</nav>