Every day, Bootstrap must learn the navigation_javascript skills

Every day, Bootstrap must learn the navigation. This article describes the navigation that everyone will be exposed to when working on projects. If you are interested, please refer to it. 1. Navigation (basic style)

Navigation is no stranger to a front-end employee. It can be said that navigation is one of the important element components of a website, allowing users to easily find the various functional services provided by the website. The method for making navigation is also strange and varied. This section describes how to use the Bootstrap framework to create a wide range of navigation tasks.

In the Bootstrap framework, the navigation is independent from each other to become a navigation component. The corresponding source code can be found based on different versions:

☑LESS version: the source file is navs. less.

☑Sass version: The corresponding source file is _ navs. scss.

☑Compiled version: the source code is the 3,450th line of the bootstrap.css file ~ 3,641st rows

Basic navigation style

The ". nav" style is used to create a navigation bar in the Bootstrap framework. The default ". nav" style does not provide the default navigation style. It must be appended with another style, such as "nav-tabs" and "nav-pills. For example, for a tab navigation bar, its implementation method is to add the. nav and nav-tabs class styles to the ul label.

 
 
  
  
  
Home
  
  
  
CSS3
  
  
  
Sass
  
  
  
jQuery
  
  
  
Responsive
 
 

/Check the source code for the 3,450th rows of the bootstrap.css file ~ 3,493rd rows/

.nav { padding-left: 0; margin-bottom: 0; list-style: none;}.nav> li { position: relative; display: block;}.nav> li > a { position: relative; display: block; padding: 10px 15px;}.nav> li >a:hover,.nav> li >a:focus { text-decoration: none; background-color: #eee;}.nav>li.disabled> a { color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;}.nav .open > a,.nav .open >a:hover,.nav .open >a:focus { background-color: #eee; border-color: #428bca;}.nav .nav-pider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}.nav> li > a >img { max-width: none;}

2. Navigation (tab navigation)

Label navigation, also known as Tab navigation. This option card is especially suitable for grouping when many parts are displayed.

Label navigation is implemented through the "nav-tabs" style. When creating a label-based navigation, you must append such names to the original navigation "nav", for example:

 
 
   
  
  
Home
   
  
  
CSS3
   
  
  
Sass
   
  
  
jQuery
   
  
  
Responsive
 
 

The running effect is as follows:

The implementation principle is very simple. The menu items (li) are displayed in blocks, arranged horizontally, and the non-highlighted menu style and mouse suspension effect are defined. The Code is as follows:

/Check the source code for the 3,494th rows of the bootstrap.css file ~ 3,509th rows/

.nav-tabs {border-bottom: 1px solid #ddd;}.nav-tabs > li {float: left;margin-bottom: -1px;}.nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;}.nav-tabs > li >a:hover {border-color: #eee #eee #ddd;}

In fact, the effect of the above example is not consistent with the tab effect we usually see. In general, the tab shows a selected item. In fact, the Bootstrap framework is also available. If you want to set the "Home" item to the selected item, you only need to add the class name "class =" active "" to its label:

 
 
  
  
  
Home
  …
 
 

The running effect is as follows:

The corresponding style code is as follows:

/Check the source code for the 3,510th rows of the bootstrap.css file ~ 3,518th rows/

.nav-tabs >li.active> a,.nav-tabs >li.active>a:hover,.nav-tabs >li.active>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent;}

In addition to the current item, some tabs also have a disabled status. To achieve this effect, you only need to add "class =" disabled "on the label item:

 
 
   
  
  
Home
   …   
  
  
Responsive
 
 

The running effect is as follows:

The style to achieve this effect is included in the default style ". nav:

/For the source code, refer to the 3,469th lines of the bootstrap.css file ~ 3,478th rows/

.nav>li.disabled> a { color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent;}

Note: you can click the menu item to switch the content of the tab. To achieve this effect, you need to use the js plug-in. This part will be introduced in the blog below.

3. Navigation (capsule navigation)

Pills navigation sounds awkward because it looks a bit like a capsule. But it is more like the general navigation we usually see. The current item is highlighted with a rounded corner. The implementation method is similar to "nav-tabs". In the same structure, you only need to replace the class name "nav-tabs" with "nav-pills:

 
 
   
  
  
Home
   
  
  
CSS3
   
  
  
Sass
   
  
  
jQuery
   
  
  
Responsive
 
 

Code for implementing the effect style:

/Check the source code for the 3,563rd rows of the bootstrap.css file ~ 3,577th rows/

.nav-pills > li { float: left;}.nav-pills > li > a { border-radius: 4px;}.nav-pills > li + li { margin-left: 2px;}.nav-pills >li.active> a,.nav-pills >li.active>a:hover,.nav-pills >li.active>a:focus {color: #fff; background-color: #428bca;}

4. Navigation (vertical navigation)

In practical use, in addition to horizontal navigation, there are vertical navigation, just like the vertical arrangement button described above. To create a vertical stack navigation, you only need to add a "nav-stacked" class name on the basis of "nav-pills" (stacked indicates the heap ):

 
 
   
  
  
Home
   
  
  
CSS3
   
  
  
Sass
   
  
  
jQuery
   
  
  
Responsive
 
 

The running effect is as follows:

Compared with the capsule navigation, the vertical stacked navigation mainly keeps the navigation items unchanged, vertically arranges them, and leaves a certain margin for the adjacent navigation items:

/Check the source code for the 3,578th rows of the bootstrap.css file ~ 3,584th rows/

.nav-stacked > li { float: none;}.nav-stacked > li + li { margin-top: 2px; margin-left: 0;}

Do you still remember that there is a separation line between the drop-down menu group and the group in the drop-down menu section. In fact, vertical stacked navigation also has this effect, you only need to add"

:

 
 
  
  
  
Home
  
  
  
CSS3
  
  
  
Sass
  
  
  
jQuery
  
  
  
  
  
  
Responsive
 
 

The running effect is as follows:

Implementation style:

/Check the source code for the 3,485th rows of the bootstrap.css file ~ 3490 rows/

.nav .nav-pider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}

Maybe you will ask, if I add "nav-stacked" to "nav-tabs", can I implement vertical tag option navigation? The answer is: yes in bootstrap V2.x, but in Bootstrap V3.x, this effect is canceled. The author may think that vertical selection is not very common or beautiful.

4. Adaptive Navigation (use)

Adaptive Navigation means that the navigation occupies the full width of the container, and the menu items can be adaptive as the cells in the table. Adaptive Navigation is the same as the adaptive button group created with "btn-group-justified. However, the class name "nav-justified" was changed when the Adaptive Navigation was created ". Of course, he needs to work with "nav-tabs" or "nav-pills. For example:

 
 
   
  
  
Home
   
  
  
CSS3
   
  
  
Sass
   
  
  
jQuery
   
  
  
Responsive
 
 

The running effect is as follows:

Adaptive Navigation (implementation principle)

Implementation principle is not difficult, list (

), Set the width to 100%, and then each menu item (
• Set "display: table-cell" to display the list items in the form of a simulated table cell:

  /Check the source code for the 3,585th rows of the bootstrap.css file ~ 3,607th rows/

  .nav-justified { width: 100%;}.nav-justified > li { float: none;}.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; }}

  Here is a media query condition: "@ media (min-width: 768px ){...}" Indicates that Adaptive Navigation can be displayed in style only when the browser window width is greater than 768px. When the window width of your browser is smaller than PX, it will be displayed in the following style:

  We can see from the results that "nav-tabs" and "nav-justified" are used together, that is, adaptive tab navigation. When the browser window width is less than PX, the style is also processed.

  /Check the source code for the 3,519th rows of the bootstrap.css file ~ 3,562nd rows/

  .nav-tabs.nav-justified { width: 100%; border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }.nav-tabs.nav-justified > li > a { margin-bottom: 0; }}.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px;}.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border-bottom-color: #fff; }}

  5. Navigation plus drop-down menu (secondary navigation)

  The previous section describes how to use the Bootstrap framework to create a level-1 navigation. However, in many cases, the effect of level-2 navigation is indispensable in Web pages. It is easier to create a secondary navigation in the Bootstrap framework. You only need to use li as the parent container, use the class name "dropdown", and nest another list ul in li. You can use the drop-down menu method described earlier:

     
     
     
      
      
  Homepage
     
      
      
  Tutorial 
       
   
        
  CSS3
  ... 
       
   
     
      
      
  About us
     
     

  The running effect is as follows:

  By using the browser debugging tool, it is not difficult to find that the "open" class name will be automatically added when you click the menu item with the level-2 navigation. Then, the added "open" class name will be deleted after you click it again:

  To put it simply, the class name is used to control whether the second-level navigation is displayed or not, and the background color and border are set:

  /Source Code bootstrap.css file 3,479th lines ~ 3484 rows/

  .nav .open > a,.nav .open >a:hover,.nav .open >a:focus {background-color: #eee;border-color: #428bca;}

  As you may recall, when creating a drop-down menu, you can use a separation line. Is it possible in the second-level navigation? Let's take a look:

  You just need to add"

"This is an empty tag.

The running effect is as follows:

/For the source code, refer to the 3,485th lines of the bootstrap.css file ~ 3,490th rows/

.nav .nav-pider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

6. Bread navigation

Breadcrumb is generally used for navigation. It mainly serves to tell the user the current location of the page ). In the Bootstrap framework, breadcrumb is also an independent module component:

• LESS version: The corresponding source file breadcrumbs. less
• Sass version: corresponding source file _ breadcrumbs. scss
• Compiled version: the source code matches the 4,112nd line of the bootstrap.css file ~ 4,129th rows

Usage:

It is easy to use. Add the breadcrumb class to ol:

  
  
 
   
   
Homepage
 
   
   
My books
 
   
   
Graphic CSS3
  
  

Think about it, the current menu item does not need to be linked, so a label is not needed.

Implementation principle:

It looks good! The author uses li + li: before to implement the separator between li and li, so this solution is miserable in earlier IE versions (not supported ).

/Source Code bootstrap.css file 4,112nd lines ~ 4,129th rows/

.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}

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