Bootstrap navigation bar Each element action method (form, button, text) _javascript skill

This article mainly includes three major aspects, everybody studies carefully.

1, the form in the navigation bar
the form in the navigation bar is not the default class as described in the Bootstrap form chapter, which uses the. Navbar-form class. This ensures that the form is properly vertically folded over the alignment in the narrower viewport. Use the alignment options, which will be explained in detail in the Component Alignment section, to decide where to place the contents of the navigation bar.

The following example demonstrates this:

<! DOCTYPE html>  

Effect:

Black effect

2, the button in the navigation bar
you can use class. Navbar-btn to add buttons to <button> elements that are not in <form>, and the buttons are centered vertically on the navigation bar ... navbar-btn can be used in <a> and <inpu On the t> element.

Do not use. NAVBAR-BTN on <a> elements within. Navbar-nav, because it is not a standard button class.
The following example demonstrates this:

<! DOCTYPE html>  

The effect is as follows:

3, the text in the navigation bar
If you need to include a text string in the Navigator, use class. Navbar-text. This is commonly used with <p> tags to ensure proper leading and color. The following example demonstrates this:

<div class= "Navbar-header" > 
 <a class= "Navbar-brand" href= "#" > Lin Bingwen in this ~</a> 
 </div> 
 <div> 
 <p class= "navbar-text" > Navigation bar text </p> 
 </div> 
 <div> 

The effect is as follows:

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 more skillfully realize the bootstrap navigation bar.