Bootstrap navigation bar (ii) _JAVASCRIPT skills

First, the 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"

<div class= "NavBar navbar-default" > <!--navigation bar title--> <div class= "Navbar-header" > <a href= "# #" CLA ss= "Navbar-brand" >LOGO</a> </div> <!--base navigation bar--> <ul class= "Nav navbar-nav" > <li>< A href= "# #" > Site home </a></li> <!--level two menu--> <li class= "dropdown" > <a href= "# #" data-toggle= "D Ropdown "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> <!--search form--> <form action= "# # class=" Navbar-form navbar-left "> <div class=" Form-group ">; input type= "text" class= "Form-control" placeholder= "Please enter the keyword"/> </div> <button type= "Submit" class= "BTN btn
 -default "> Search </button> </form> </div>

1, in the production of web pages, often in front of the menu will have a title (text size than other text slightly larger), it through the "Navbar-header" and "Navbar-brand" to achieve.

 <!--navigation Bar title-->
 <div class= "Navbar-header" >
 <a href= "# #" class= "Navbar-brand" >logo</a >
 </div>

2, two level menu through <ul> nesting to achieve.

 <!--level Two menu-->
 <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>

3, in the bootstrap framework provides a "navbar-form", using the method is very simple, in the NavBar container to place a Navbar-form class name form.

"Navbar-left" lets the form float to the left, the "navbar-right" style, so that the elements are aligned to the right of the navigation bar.

 <!--search Form-->
 <form action= "# #" class= "Navbar-form navbar-left" >
 <div class= "Form-group" >
 <input type= "text" class= "Form-control" placeholder= "Please enter the keyword"
 /> </div>
 <button type= " Submit "class=" btn Btn-default "> Search </button>
 </form>

Second, anti-color navigation bar

Anti-color navigation bar is actually the bootstrap framework for you to provide a second style navigation bar, only the "Navbar-deafult" class name replaced by "Navbar-inverse."

<div class= "NavBar navbar-inverse" role= "navigation" >
 <div class= "Navbar-header" >
 <a href= " # # "class=" Navbar-brand ">LOGO</a>
 </div>
 <ul class=" Nav navbar-nav ">
 <li Class= "Active" ><a href= "" > Home </a></li>
 <li><a href= "" > Tutorials </a></li >
 <li><a href= "" > About us </a></li>
 </ul>
</div>

Third, fixed navigation bar

In many cases, the designer wants the navigation bar to be fixed at the top or bottom of the browser.

The bootstrap framework provides two ways to fix a navigation bar:

☑.navbar-fixed-top: The navigation bar is fixed at the top of the browser window

☑.navbar-fixed-bottom: Navigation bar fixed at the bottom of the browser window

The use of the method is simple, only to make the navigation bar on the outermost container navbar to append the corresponding class name.

<!--navigation bar is fixed at the top of the browser window-->
<div class= "NavBar navbar-default navbar-fixed-top" >
 ...
</div>
<!--navigation bar fixed at the bottom of the browser window-->
<div class= "NavBar navbar-default navbar-fixed-bottom" > ...
</div>

Iv. response-Type navigation bar

<div class= "NavBar navbar-default" > <div class= "Navbar-header" > <!--. navbar-toggle style is used for toggle shrinking content, That is, the element--> the Nav-collapse collapse style <button class= "Navbar-toggle" type= "button" data-toggle= "Collapse" data-target = "#demo" > <span class= "sr-only" >toggle navigation</span> <span class= "Icon-bar" ></span> & Lt;span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button> <!-- Ensure that both widescreen and narrow screens, Navbar-brand display--> <a href= "# #" class= "Navbar-brand" >LOGO</a> </div> <!-- When the screen width is less than 768px, the contents of the Div.navbar-responsive-collapse container are hidden, displaying the Icon-bar icon, and then expanding when the Icon-bar icon is clicked. When the screen is larger than 768px, the default display. --> <div class= "collapse navbar-collapse navbar-responsive-collapse" id= "demo" > <ul class= "Nav navbar-nav"
 > <li><a href= "# #" > website home </a></li> <li><a href= "# #" > Series of Tutorials </a></li> <li><a href= "# #" > Teacher introduction </a></li> <li><a href= "# # "> Success Stories </a></li> <li><a href=" # "> About us </a></li> </ul> </div>
 </div>

In widescreen mode:

In narrow screen mode:

How to use:

1, to ensure that the narrow screen needs to be folded in the content must be wrapped in a div, and for this div add collapse, navbar-collapse two class names. Finally, add a class class name or ID name for this div.

2, to ensure that the narrow screen when the icon to display the style (fixed wording):

<button class= "Navbar-toggle" type= "button" data-toggle= "collapse" >
 <span class= "Sr-only" >toggle navigation</span>
 <span class= "Icon-bar" ></span>
 <span class= "Icon-bar" ></ span>
 <span class= "Icon-bar" ></span>
</button>

3, and Add data-target= for button ". Class name/#id名"

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

The above is the entire content of this article, I hope to help you learn, we can also combine the "bootstrap every day must learn the navigation bar" this article to learn.