Every day, Bootstrap must learn the navigation bar (2) _ javascript skills

Every day, Bootstrap must learn the navigation bar. It further explains how to use the elements in the navigation bar and how to use them. If you are interested, refer I. basic navigation bar

When creating a basic navigation bar, take the following steps:

Step 1: first create a navigation list (

) And add the class name "navbar-nav"

Step 2: Add a container (p) outside the list and use the class name "navbar" and "navbar-default"


 
    　
LOGO
 
   
  
  
 
   
   
Homepage
 
    
   
   
Series tutorials 
    
 
     
CSS3
 
     
JavaScript
 
     
PHP
 
    
 
 
   
   
Instructor Introduction
 
   
   
Success stories
 
   
   
About us
 
  
  
 
   

1. In Web page creation, there is often a title in front of the menu (the text font size is slightly larger than other text ), it is implemented through "navbar-header" and "navbar-brand.

 
   　
LOGO

2. The level-2 menu is passed

Nested.

 
    
Series tutorials
    
    
 
     
CSS3
 
     
JavaScript
 
     
PHP
 
    
 

3. A "navbar-form" is provided in the Bootstrap framework, which is easy to use. Put a form with the navbar-form class name in the navbar container.

"Navbar-left" float the left of the form and the "navbar-right" style to align the elements on the navigation bar to the right.


Ii. Reversed navigation bar

The reversed navigation bar is actually the second style of navigation bar provided by the Bootstrap framework for everyone. It only replaces the "navbar-deafult" class name with "navbar-inverse ".

 
LOGO
 
   
   
 
    
    
Homepage
 
    
    
Tutorial
 
    
    
About us
 
   
   




3. 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 fixed navigation bar methods:

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

☑. Navbar-fixed-bottom: the navigation bar is fixed at the bottom of the browser window.

The method is simple. You only need to append the corresponding class name to navbar, the most external container of the navigation bar.


   
...
   
...

Iv. Responsive navigation bar


 
 　
     Toggle Navigation 
    LOGO
 
    
 
   
   
 
    
    
Homepage
 
    
    
Series tutorials
 
    
    
Instructor Introduction
 
    
    
Success stories
 
    
    
About us
 
   
   
 

In the wide screen mode:

In narrow screen mode:

Usage:

1. Ensure that the content to be folded in the narrow screen must be wrapped in a p with two class names: collapse and navbar-collapse. Finally, add a class name or id name for this p.

2. Ensure the icon style to be displayed when the screen is narrow (fixed ):

 Toggle Navigation   

3. Add data-target = ". Class Name/# id name" to the button"

To learn more about Bootstrap, clickBootstrap learning tutorialDeep Learning.

The above is all the content of this article, hoping to help you learn.

You can also combineA daily guide to BootstrapThis article will be learned.