A series of bootstrap navigation bar using methods to share _javascript skills

This article includes the Bootstrap Navigation Bar Foundation use method, for everybody reference, the concrete content is as follows

1, bootstrap basic navigation style
The bootstrap frame is made of navigation bar mainly through the ". Nav" style. The default ". Nav" style does not provide a default navigation style and must be attached to another style to be effective, such as "Nav-tabs", "Nav-pills", and so on. For example, the right code Editor has a tab navigation bar example, his implementation is for the UL tag to join. Nav and nav-tabs two class styles

<ul class= "Nav nav-tabs" >
 <li><a href= "# #" >Home</a></li>
 <li><a href= "# #" >CSS3</a></li>
 <li><a href= "# #" >Sass</a></li>
 <li ><a href= "# #" >jQuery</a></li>
 <li><a href= "# #" >responsive</a></li >
</ul>

2. Bootstrap Basic navigation bar
when making a basic navigation bar, the following steps are mainly divided:

Step one: First, add the class name "Navbar-nav" based on the list of <ul class= "NAV" >

Step Two: Add a container (div) outside the list and use the class name "NavBar" and "Navbar-default"

The main function of the ". NavBar" style is to set the effects such as left and right padding and rounded corners, but his color-related styles do not have any settings

<div class= "NavBar navbar-default" role= "navigation" >
 <ul class= "Nav navbar-nav" >
 <li class= " Active "><a href=" # # > Home </a></li>
 <li><a href= "# #" > Series of Tutorials </a></li >
 <li><a href= "# #" > Teacher introduction </a></li>
 <li><a href= "#" > Success Case </a> </li>
 <li><a href= "# #" > About us </a></li>
 </ul>
</div>

3, bootstrap navigation bar add title
in the production of web pages, often in front of the menu will have a title (text size is slightly larger than other text), in fact, in the bootstrap framework for everyone to do this consideration, through the "Navbar-header" and "Navbar-brand" to achieve.

<div class= "NavBar navbar-default" role= "navigation" >
 <div class= "Navbar-header" >
 <a href= "# # "class=" Navbar-brand "> Navigation bar </a>
 </div>
 <ul class=" Nav navbar-nav ">
 <li class=" Active "><a href=" # # > Home </a></li>
 <li><a href= "# #" > Series of Tutorials </a></li >
 <li><a href= "# #" > Teacher introduction </a></li>
 <li><a href= "#" > Success Case </a> </li>
 <li><a href= "# #" > About us </a></li>
 </ul>
</div>

4, bootstrap navigation bar level two menu
adding level Two menus in the navigation bar is also very simple

 <div class= "NavBar navbar-default" role= "navigation" > <div class= "Navbar-he" Ader "> <a href=" # # "class=" Navbar-brand "> Navigation bar </a> </div> <ul class=" Nav navbar-nav "> < Li class= "active" ><a href= "# #" > website home </a></li> <li class= "dropdown" > <a href= "# #" Data-toggle= "dropdown" class= "Dropdown-toggle" > Series of Tutorials <span class= "caret" ></span></a> <ul class= "Dropdown-menu" > <li><a href= "# #" >CSS3</a></li> <li><a href= "# #" >
 javascript</a></li> <li class= "disabled" ><a href= "# #" >PHP</a></li> </ul> </li> <li><a href= "# #" > Teacher introduction </a></li> <li><a href= "#" > Success Case </a>< /li> <li><a href= "# #" > About us </a></li> </ul> </div> 

5, the bootstrap navigation bar
with the form has a search form in the navigation bar, and a "navbar-form" is provided in the bootstrap framework, and is simple to use. Place a form with the Navbar-form class name in the NavBar container. Navbar-left "Let the form float to the left to better align." In the bootstrap framework, the "Navbar-right" style is also provided, allowing elements to align to the right of the navigation bar.

<div class= "NavBar navbar-default" role= "navigation" > <div class= "Navbar-header" > <a href= "# #" class= "Navbar-brand" >Bootstrap</a> </div> <ul class= "Nav navbar-nav" > <li class= "active" ><a H ref= "# #" > website home </a></li> <li class= "dropdown" > <a href= "# #" data-toggle= "dropdown" class= " Dropdown-toggle "> Series Tutorials <span class=" caret "></span></a> <ul class=" Dropdown-menu "> <li ><a href= "# #" >CSS3</a></li> <li><a href= "# #" >JavaScript</a></li> < Li class= "disabled" ><a href= "# #" >PHP</a></li> </ul> </li> <li><a href= "# #" > Teacher Introduction </a></li> <li><a href= "# #" > Success Case </a></li> <li><a href= "#" > About Us </a></li> </ul> <form action= "# #" class= "Navbar-form navbar-left" rol= "search" > <div cl ass= "Form-group" > <input type= "text" class= "form-Control "placeholder=" Please input keyword "/> </div> <button type=" Submit "class=" btn Btn-default "> Search </button

 > </form> </div>

6. Buttons, text, and links in the bootstrap navigation bar
Other elements can be used in the navigation bar of the bootstrap frame in addition to the UL and navbar-form of the A element and Navbar-nav in Navbar-brand. The framework provides three other styles:
1). Buttons in the navigation bar NAVBAR-BTN

2. Text Navbar-text in navigation bar

3. Common links in the navigation bar Navbar-link
However, these three styles are limited when used in the framework and need to be used in conjunction with Navbar-brand and Navbar-nav. And there are certain restrictions on the number, the general situation in the use of one or two will not have problems, more than two will have problems.

 <div class= "NavBar navbar-default" role= "navigation" > <div class= "Navbar-he" 
 Ader "> <a href=" # # "class=" Navbar-brand ">Bootstrap</a> </div> <ul class=" Nav navbar-nav "> <li><a href= "# #" class= "Navbar-text" >navbar text</a></li> <li><a href= "# #" class= " Navbar-text ">navbar text</a></li> <li><a href=" # # "class=" Navbar-text ">Navbar Text</a ></li> </ul> </div> <div class= "NavBar navbar-default" role= "navigation" > <div class= "NA Vbar-header "> <a href=" # # "class=" Navbar-brand ">Bootstrap</a> </div> <div class=" Nav navbar- Nav "> <a href=" # # "class=" Navbar-text ">navbar" text</a> <a href= "# #" class= "Navbar-text" >Navbar Text</a> <a href= "# #" class= "Navbar-text" >navbar text</a> </div> </div> 

7. Bootstrap Fixed navigation bar
in many cases, the designer wants the navigation bar to be anchored to the top or bottom of the browser, and the application of this fixed navigation bar is more common in mobile-side development. The bootstrap framework provides two ways to fix a navigation bar:
. Navbar-fixed-top: Navigation bar docked at the top of the browser window
. Navbar-fixed-bottom: Navigation bar docked at the bottom of the browser window

<div class= "NavBar navbar-default navbar-fixed-top" role= "navigation" > ...
</div>
<div class= "Content" > I am Contents </div>
<div class= "NavBar Navbar-default Navbar-fixed-bottom "role=" navigation "> ...
</div>

8, Bootstrap paging navigation
paging navigation with page numbers is probably the most common kind of paging navigation, especially when the content of a list page is too large, giving users a way to navigate the page. At ordinary times, many students like to use DIV>A and div>span structure to make pagination navigation with page numbers. However, in the bootstrap framework is used ul>li>a such a structure, in the UL tag added pagination method.

<ul class= "pagination" >
 <li><a href= "#" >«</a></li>
 <li><a href= "#" >1</a></li>
 <li><a href= "#" >2</a></li>
 <li><a href= "#" >3</a></li>
 <li><a href= "#" >4</a></li>
 <li><a href= "#" >5</a></li>
 <li><a href= "#" >»</a></li>
</ul>

In the bootstrap framework, you can also set the paging button size in several different situations.
1. Through the "PAGINATION-LG" to make paging navigation become larger;
2. Make paging navigation smaller by "PAGINATION-SM"

<ul class= "pagination Pagination-lg" > ...
</ul>
<ul class= "pagination" >
 ...
</ul>
<ul class= "pagination pagination-sm" >
 ...
</ul>

The bootstrap framework provides paging navigation in addition to pagination navigation with page numbering. This kind of paging navigation is often seen on some simple websites, such as personal blogs, magazine websites and so on. This kind of paging navigation does not see the specific page number, only provides a "previous page" and "Next Page" button.
In actual use, page paging navigation and page numbering page navigation similar to the UL tag to add pager class.

<ul class= "Pager" >
 <li><a href= "#" >«previous page </a></li>
 <li><a href= "#" > next page»</a></li>
</ul>

By default, page-paging navigation is centered, but sometimes we need a left and a right. The bootstrap framework provides two styles
Previous: Let the "back" button reside left
Next: Let "next" button reside right

<ul class= "Pager" >
 <li class= "Previous" ><a href= "#" >«previous page </a></li>
 <li Class= "Next" ><a href= "#" > Next page»</a></li>
</ul>

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 about the bootstrap navigation bar of the entire content, I hope to help you learn.