[Bài đọc] Thanh điều hướng (navbar)

Thanh điều hướng là thành phần responsive thường được sử dụng trong phần header trong website của bạn. Thông thường, ban đầu chúng được thu gọn lại (và mở ra khi kích hoạt) trên khung nhìn của điện thoại di động và sẽ được mở rộng ra khi chiều rộng của khung nhìn tăng lên.

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

Để tạo một Navbar mặc định ta làm các bước sau:

• Thêm các class .navbar, .navbar-default cho thẻ <nav>
• Thêm role = “navigation” vào phần tử ở trên, trợ giúp tiếp cận.
• Thêm class .navbar-header  vào phần từ <div>. Gồm phần từ <a> với class  .navbar-brand. Điều này sẽ cho văn bản một 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 class của .nav, .navbar-nav.

Xem ví dụ dưới đây:

HTML :

<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>

Responsive navbar

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

Hãy theo dõi ví dụ dưới đây:

HTML :

<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>

Forms

Thay vì sử dụng các class forms mặc định từ Chương Bootstrap Forms ta sẽ dụng forms trong navbar bằng cách sử dụng class .navbar-form. Đặt nội dung của form vào bên trong .navbar-form để form được căn theo chiều dọc và có thể thu gọn khi kích thước khung nhìn đủ hẹp. Hãy sử dụng các tùy chọn căn chỉnh để xác định vị trí mà form nằm bên trong nội dung của thanh điều hướng.

Xem ví dụ dưới đây:

HTML :

<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 các class .navbar-btn cho các phần tử <button> không nằm trong <form> để đặt chúng ở trung tâm 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>.

Tương tự như các class cho nút, .navbar-btn có thể được sử dụng trên các phần tử <a> và <input>. Tuy nhiên, cả .navbar-btn và các class cho nút không nên sử dụng trên phần tử <a> nằm bên trong .navbar-nav.

Ví dụ:

HTML :

<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>

Text

Hãy bọc chuỗi các text bằng một phần tử có class .navbar-text, phần tử đó thường là thẻ <p> để hiển thị được tốt.

Ví dụ:

HTML :

<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>

Các liên kết không điều hướng

Nếu bạn muốn thêm một liên kết vào bên trong thanh điều hướng nhưng không dùng để điều hướng, hãy sử dụng class .navbar-link để hiển thị màu mặc định của một liên kết phân biệt với các thành phần điều hướng.

<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>

Sắp xếp các thành phần

Bạn có thể căn chỉnh các liên kết, form, nút, hoặc text trong thanh điều hướng bằng cách sử dụng các class .navbar-left hoặc .navbar-right. Cả hai class sẽ thêm các thuộc tính CSS float theo các hướng cụ thể.

Ví dụ, để căn chỉnh các liên kết điều hướng, hãy đặt chúng vào bên trong một <ul> riêng biệt và áp dụng các class căn chỉnh lên thẻ <ul> đó.

HTML :

<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 trên

Nếu bạn muốn thanh định vị cố định ở trên cùng, hãy thêm lớp .navbar-fixed-top vào class .navbar 

Yêu cầu padding cho body

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

 Ví dụ:

HTML :

<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>

Cố định xuống dưới

Nếu bạn muốn thanh navbar cố định ở cuối trang, hãy thêm lớp .navbar-fixed-bottom vào class .navbar.

Ví dụ:

HTML :

<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>

Không cố định

Nếu bạn muốn tạo ra một thanh điều hướng không cố định khi cuộn trang, hãy thêm .navbar-static-top và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

Không giống như các class .navbar-fixed-*, bạn sẽ không cần phải thay đổi padding của body.

HTML :

<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

Bạn có thể thay đổi hình thức của thanh điều hướng bằng cách sử dụng class .navbar-inverse.

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

HTML :

<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>