Full contact with the Magic Bootstrap navigation section _javascript tips

The navigation bar (NavBar) is a separate component in the bootstrap, and the navigation bar (NavBar) and navigation (NAV) are significantly different in bootstrap. There is a background color in the navigation bar (NavBar), and the navigation bar can be a combination of pure links, forms, forms, and navigation.

1. Combat One- navigation bar with level two menus and forms

<! DOCTYPE html>  

The effect chart is as follows:

Other elements can be used in the bootstrap navigation bar in addition to the UL and navbar-form of the A element and Navbar-nav in Navbar-brand:

1 the button in the navigation bar NAVBAR-BTN
2 The text in the navigation bar Navbar-text
3 The normal link in the navigation bar Navbar-link

2. Combat Two- fixed navigation bar

 <!--top navigation bar--> <div class= "NavBar navbar-default navbar-fixed-top" role= " 
  Navigation "> <div class=" Navbar-header "> <a href=" # # "class=" Navbar-brand "> title </a> </div> <ul class= "Nav navbar-nav" > <li class= "active" ><a href= "# #" > Home </a></li> <li>< A href= "# #" > Blog </a></li> <li><a href= "# #" > Forum </a></li> </ul> </div > <!--bottom navigation bar--> <div class= "NavBar navbar-default navbar-fixed-bottom" role= "navigation" > <div class= "Navbar-header" > <a href= "# #" class= "Navbar-brand" > title </a> </div> <ul class= "Nav navbar-nav" > <li class= "active" ><a href= "# #" > Home </a></li> <li><a href= "# #" > Blog </a>& Lt;/li> <li><a href= "# #" > Forum </a></li> </ul> </div> <!--body content--> <DIV CL ass= "Content" > Web page body contents </div> 

The effect chart is as follows:

3. Combat three- Response navigation bar

The effect chart is as follows:

Sometimes there is a need to reverse the color of the situation, bootstrap to provide the inverse color navigation bar, just the Navbar-deafult class name replaced by Navbar-inverse, and then the background color of the navigation bar and the color of the text will be modified.

4. Combat four- Page-Navigation

1 pagination navigation with page numbers

<!--pagination: normal size
 PAGINATION-LG: Make paging navigation larger 
 PAGINATION-SM: let page navigation become smaller-->
<ul class= "pagination Pagination ">
 <li><a href=" # ">«home </a></li>
 <li><a href=" # ">1</a ></li>
 <li><a href= "#" >2</a></li>
 <!--current status-->
 <li class= " Active "><a href=" # ">3</a></li>
 <li><a href=" # ">4</a></li>
 <li><a href= "#" >5</a></li>
 <!--disabled status-->
 <li class= "disabled" ><a href= "#" > Last»</a></li>
</ul> 

The effect chart is as follows:

2 Page Paging navigation

<ul class= "Pager" >
 <li><a href= "#" >«last page </a></li>
 <!--disabled status-->
 <li class= "Disabled" ><a href= "#" > Next page»</a></li>
</ul> 
<!--aligned-->
<ul class= "Pager" >
 <li class= "Previous" ><a href= "#" >«previous page </a></li>
 < Li class= "Next" ><a href= "#" > Next page»</a></li>
</ul> 

The effect chart is as follows:

5. Combat five- Label

In some Web pages, a label is often added to tell the user some additional information, such as:

Bootstrap this effect to become a label component, and the ". Label" style to achieve highlighting. Like button element buttons, the label style also provides a variety of colors, mainly through the names of these classes to modify the background color and text color:

The effect chart is as follows:

6. Combat Six- Badges

Badges are used to remind you of how many unread messages are needed, and in Bootstrap, the "badge" style is used to achieve the badge effect.

<!--navbar-default navigation bar-->
<div class= "NavBar navbar-default" role= "navigation" >
 <div Class = "Navbar-header" >
 <a href= "# #" class= "Navbar-brand" > title </a>
 </div>
 <ul class= " Nav navbar-nav ">
  <li class=" active "><a href=" # # "> Home </a></li>
  <li><a href= "# #" > Blog </a></li>
  <li><a href= "# #" > Forum <span class= "badge" >10</span ></a></li>
  <li><a href= "# #" > Feedback </a></li>
 </ul>
</ Div>

The effect chart is as follows:

7. Combat seven- a pop-up box that drives the drawing transition

<! DOCTYPE html>  

The effect chart is as follows:

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.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course