Detailed explanation of how to use JS component Bootstrap navigation bar_javascript skills

Navigation bar is a responsive meta component that serves as the navigation header in your app or website.

1. Default navigation bar

The navigation bar is collapsible (and can be opened and closed) on mobile devices, and becomes horizontally expanded as the available viewport width increases
Customize the thresholds for folding mode and horizontal mode
Depending on the length of the content you place on the navbar, you may need to adjust the threshold at which the navbar enters collapsed mode and horizontal mode. You can achieve your needs by changing the value of the @grid-float-breakpoint variable or adding your own media query CSS code.
Step one:
The outermost container nav tag, and add the nav-bar style class to indicate that it belongs to the navigation bar

<nav class="navbar navbar-default" role="navigation"> 
</nav>

Effect:

Step 2: Add header

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
  </nav>

There are three span icons nested in the button label. Then give the navbar-toggle style class and attribute collapse (collapse), and the target is data-target when clicked.
When the window is reduced to a certain extent, the effect on the right appears.

Step 3: Nested drop-down menu, form form, drop-down menu.
Code:

<h1 id="导航条">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!--嵌套下拉菜单--> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      下拉<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
    </ul> 
     
    <!--嵌套表单--> 
    <form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav> 

Preview:

Enhance the accessibility of the navigation bar
To enhance accessibility, be sure to add role="navigation" to each navigation bar.

2. Form
Placing the form within a .navbar-form can provide good vertical alignment and a collapsed state in a narrower viewport. Use the alignment options to determine where it appears on the navigation bar.

A lot of code is shared by using mixins, .navbar-form and .form-inline.

Code

<form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 

Add a label to the input box
If you don't add a label to the input field, screen readers will have problems. For forms within the navigation bar, you can hide the label label through .sr-only class.

3. Button
Code:
Login
Preview:

4. Text
When wrapping text in .navbar-text, in order to have correct line spacing and color, the

tag is usually used.
Code snippet:

text

5. Non-navigation links
Maybe you want to add standard links in addition to the standard navigation components. Then, use the .navbar-link class to give the links the correct default color and inverse color.
Code snippet:

Copy code The code is as follows:

This is< ;a href="#" class="navbar-link">Link

6. Component alignment
Use the .navbar-left or .navbar-right tool classes to align navigation links, forms, buttons or text. Both classes use CSS float styles in specific directions. For example, to align navigation links, place them in a separate

that has a utility class applied to them.

These classes are mixin versions of .pull-left and .pull-right, but they are limited to media queries, which makes it easier to handle the navigation bar component on various screen sizes.

7. Fixed at the top
Add .navbar-fixed-top to fix the navigation bar at the top. The effect is gone.
Need to set padding for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding above the

. Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-top: 70px; }
It must be placed after the core file of Bootstrap CSS. (Coverage issue)
8. Fixed at the bottom
Use .navbar-fixed-bottom instead.
Need to set the inner (padding) for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding at the bottom of the

. Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-bottom: 70px; }
Be sure to use it after loading the core of Bootstrap CSS.
9. Still at the top
Create a navigation bar with the page by adding .navbar-static-top. It disappears as you scroll down the page. Unlike the .navbar-fixed-* classes, you don’t need to add padding to the body.
10. Inverted navigation bar
The appearance of the navigation bar can be changed by adding the .navbar-inverse class.

The above is a detailed introduction on how to use the Bootstrap navigation bar. I hope it will be helpful to everyone's learning.