Bootstrap 2 ways to implement navigation bar _javascript tips

Navigation is one of the important element components of a website, which makes it easy for users to find the function services provided by the website. Navigation is also a variety of ways to make a variety of. In the following sections, there are two ways to make a navigation bar.

one, with the button group implementation, the code is as follows:

<div style= "width:100%; Background: #ff0 ">
 <div class=" Btn-group ">
 <button class=" btn btn-default "type=" button "> Home </button>
 <button class= "btn btn-default" type= "button" > Product show </button>
 <button class= " BTN btn-default "type=" button "> Case Analysis </button>
 <button class=" btn btn-default "type=" button "> Contact us </button>
 <div class= "Btn-group" >
 <button class= "btn btn-default dropdown-toggle" Data-toggle= "dropdown" type= "button" > About us <span class= "caret" ></span></button>
 <ul class= "Dropdown-menu" >
 <li><a href= "#" > Company Profile </a></li>
 <li><a href= "# "> Corporate culture </a></li>
 <li><a href=" # "> Organizational structure </a></li>
 <li><a href= "#" > Customer service </a></li>
 </ul>
 </div>
 </div>
</div>

second, bootstrap for the navigation has done a corresponding CSS class, the code is as follows:

<div style= "width:100%; Background: #ff0 ">
<ul class=" nav nav-pills nav-justified ">
 <li><a href=" # # "> Home </a ></li>
 <li><a href= "# #" > Contact us </a></li>
 <li><a href= "# #" > Products </a></li>
 <li class= "dropdown" >
 <a href= "# #" class= "Dropdown-toggle" data-toggle= " Dropdown "> About us <span class=" caret "></span></a>
 <ul class=" Dropdown-menu ">
 < Li><a href= "#" > Company Profile </a></li>
 <li><a href= "#" > Corporate Culture </a></li>
 <li><a href= "#" > Organizational structure </a></li>
 <li><a href= "#" > Customer service </a></ li>
 </ul>
 </li>
</ul>
</div>

If you want the navigation bar to be displayed vertically, the first method is appended after Div.btn-group. Btn-group-vertical is OK, the second is appended after Div.nav. nav-stacked.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.