Operation methods of each element in the Bootstrap navigation bar (Form, button, text), and the bootstrap navigation bar

Operation methods of each element in the Bootstrap navigation bar (Form, button, text), and the bootstrap navigation bar

This article mainly includes three main aspects for you to study carefully.

1. Form in the navigation bar
The form in the navigation bar is not the default class mentioned in the Bootstrap form section. It uses. navbar-form class. This ensures the proper vertical alignment of the form and the behavior of folding in a narrow view. Use the alignment option (which will be detailed in the component alignment section) to determine where the content in the navigation bar is placed.

The following example demonstrates this:

<! DOCTYPE html> 
Effect:

Black Effect

2. buttons in the navigation bar
You can use class. navbar-btn to add a button to the <button> element not in <form>. The button is vertically centered in the navigation bar .. Navbar-btn can be used on <a> and <input> elements.
Do not use. navbar-btn on the <a> element in. navbar-nav because it is not a standard button class.
The following example demonstrates this:

<! DOCTYPE html> 
The effect is as follows:

3. Text in the navigation bar
To include a text string in the navigation bar, use class. navbar-text. This is usually used with the <p> label to ensure proper leading and color. The following example demonstrates this:

<Div class = "navbar-header"> <a class = "navbar-brand" href = "#"> Lin bingwen ~ </A> </div> <p class = "navbar-text"> text in the navigation bar </p> </div> <div>
The effect is as follows:

The above is all the content of this article. I hope it will help you learn more and you can implement the Bootstrap navigation bar more skillfully.
Articles you may be interested in:

  

 
   
Every day, Bootstrap must learn
 
   
Navigation bar required by Bootstrap every day
 
   
Bootstrap implements the default navigation bar Effect
 
   
Implement responsive navigation bar using Bootstrap