Bootstrap the navigation _javascript skills that you must learn every day

1, navigation (basic style)

Navigation is no stranger to a front-end person. It can be said that navigation is one of the important elements of a Web site, you can easily find the site to provide the various functional services. Navigation is also a variety of ways to make a variety of. In this section, you will be briefed on how to use the bootstrap framework to produce a wide variety of navigation.

In the bootstrap framework, the navigation will be independent of the navigation components, according to different versions, you can find the corresponding source code:

☑less version: The corresponding source file is navs.less

☑sass version: The corresponding source file is _navs.scss

☑ compiled version: the corresponding source code is bootstrap.css file No. 3450 line ~ No. 3641 Line

Navigation base Style

The bootstrap frame is made of navigation bar mainly through the ". Nav" style. The default ". Nav" style does not provide a default navigation style and must be attached to another style to be effective, such as "Nav-tabs", "Nav-pills", and so on. For example, a tab navigation bar example, his implementation method is for the UL tag to join. Nav and Nav-tabs two class styles.

<ul class= "Nav nav-tabs" >
 <li><a href= "# #" >Home</a></li>
 <li><a href= "# #" >CSS3</a></li>
 <li><a href= "# #" >Sass</a></li>
 <li ><a href= "# #" >jQuery</a></li>
 <li><a href= "# #" >responsive</a></li >
</ul>

/source Please refer to bootstrap.css file line No. 3450 ~ No. 3493 Line/

. 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-divider {
 height:1px;
 MARGIN:9PX 0;
 Overflow:hidden;
 Background-color: #e5e5e5;
Nav> li > A >img {
 max-width:none;
}

2, Navigation (tab-Type tab navigation)

Label-shaped navigation, also known as tabbed navigation. Especially when many pieces of content are displayed, using this tab to group is ideal.

Tabbed navigation is done through the "nav-tabs" style. You need to append this class name to the original navigation "NAV" when making a label navigation, such as:

<ul class= "Nav nav-tabs" >
  <li><a href= "# #" >Home</a></li>
  <li><a href= "# #" >CSS3</a></li>
  <li><a href= "# #" >Sass</a></li>
  <li ><a href= "# #" >jQuery</a></li>
  <li><a href= "# #" >responsive</a></li >
</ul>

The effect of the operation is as follows:

The implementation principle is very simple, display menu items (li) in blocks, and let them arrange on the same level, and then define the style of the highlight menu and the mouse hover effect. The code is as follows:

/source Please refer to bootstrap.css file line No. 3494 ~ No. 3509 Line/

. 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 previous example and we usually see the effect of the tab is not consistent. In general, the TAB church has a currently selected item. In fact, the bootstrap framework is also provided accordingly. Let's say that we want the "home" item to be the current item, just add the class name "class=" Active to its label:

<ul class= "Nav nav-tabs" >
 <li class= "Active" ><a "# #" >Home</a></li>
 ...
</ul>

The operation effect is as follows:

The corresponding style code is as follows:

/source Please refer to bootstrap.css file line No. 3510 ~ No. 3518 Line/

. 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 state, to achieve this effect, just add "class=" disabled on the label item:

<ul class= "Nav nav-tabs" >
  <li class= "Active" ><a "# #" >Home</a></li>
  ...
  <li class= "disabled" ><a href= "# #" >Responsive</a></li>
</ul>

The operation effect is as follows:

The style that implements this effect is in the default style ". Nav" with:

/source Please view the Bootstrap.css file line No. 3469 ~ No. 3478 Line/

.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: We see the tab effect, click on the menu item can switch content, if you want to achieve such an effect needs to match the JS plug-in, this part will be introduced in the blog later.

3, navigation (capsule-shaped (pills) navigation)

Capsule-shaped (pills) navigation sounds a bit awkward because it looks a bit like a capsule shape. But it's more like the popular type of navigation we see. The current item is highlighted with rounded corners. Its realization method and "Nav-tabs" similar, the same structure, only need to replace the class name "Nav-tabs" with "Nav-pills" can:

<ul class= "Nav nav-pills" >
  <li class= "active" ><a href= "# #" >Home</a></li>
  <li><a href= "# #" >CSS3</a></li>
  <li><a href= "# #" >sass</a></li >
  <li><a href= "# #" >jQuery</a></li>
  <li class= "disabled" ><a href= "# # ">Responsive</a></li>
</ul>

Implement effect style code:

/source Please refer to bootstrap.css file line No. 3563 ~ No. 3577 Line/

. 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 stack of navigation)

In practical use, in addition to horizontal navigation, there are vertical navigation, similar to the previous introduction of the vertical arrangement of buttons. Make vertical stacked navigation only need to add a "nav-stacked" class name on the basis of "nav-pills" (stacked is the meaning of heap):

<ul class= "nav nav-pills nav-stacked" >
  <li class= "active" ><a href= "# #" >home</a></li >
  <li><a href= "# #" >CSS3</a></li>
  <li><a href= "# #" >Sass</a> </li>
  <li><a href= "# #" >jQuery</a></li>
  <li class= "disabled" ><a href= "# #" >Responsive</a></li>
</ul>

The operation effect is as follows:

Vertical stacked navigation, compared with capsule navigation, is mainly to keep the navigation items from floating vertically, and then leave some spacing between adjacent navigation items:

/source Please refer to bootstrap.css file line No. 3578 ~ No. 3584 Line/

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

Do you remember that in the Drop-down menu section, there is a divider line between the Drop-down menu group and the group. In fact, vertical stacked navigation also has the effect of adding only "<li class=" Nav-divider "></li>" to the navigation items:

<ul class= "nav nav-pills nav-stacked" >
 <li class= "active" ><a href= "# #" >home</a></li >
 <li><a href= "# #" >CSS3</a></li>
 <li><a href= "# #" >Sass</a> </li>
 <li><a href= "# #" >jQuery</a></li>
 <li class= "Nav-divider" ></ li>
 <li class= "disabled" ><a href= "# #" >Responsive</a></li>
</ul>

The operation effect is as follows:

To implement a style:

/source Please consult Bootstrap.css file line No. 3485 ~3490 Line/

. Nav. nav-divider {
height:1px;
MARGIN:9PX 0;
Overflow:hidden;
Background-color: #e5e5e5;
}

Perhaps you would ask, if I add "nav-stacked" on "Nav-tabs" is it also possible to implement vertical label option navigation? The answer is: in the bootstrap v2.x version can be, but in the bootstrap v3.x version of this effect is canceled, perhaps the author found that vertical selection is not too common, it is not beautiful.

4, adaptive Navigation (use)

Adaptive navigation means that the navigation occupies the entire width of the container, and the menu item can be as adaptive as the width of a table cell. Adaptive navigation is the same as the Adaptive button group that was previously made using "btn-group-justified". Only another class name, "Nav-justified", was replaced while making adaptive navigation. Of course he needs to work with "nav-tabs" or "nav-pills". Such as:

<ul class= "nav nav-tabs nav-justified" >
  <li class= "active" ><a href= "# #" >home</a></li >
  <li><a href= "# #" >CSS3</a></li>
  <li><a href= "# #" >Sass</a> </li>
  <li><a href= "# #" >jQuery</a></li>
  <li><a href= "# #" > Responsive</a></li>
</ul>

The operation effect is as follows:

Adaptive navigation (Implementation principle)

The implementation principle is not difficult, the list (<ul>) is set to a width of "100%", and then each menu item (<li>) sets "Display:table-cell" so that the list items are displayed in the form of a mock table cell:

/source Please refer to bootstrap.css file line No. 3585 ~ No. 3607 Line/

. 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 the image style only if the browser window is wider than 768px. When your browser window is less than 768px wide, it will be displayed in the style shown below:

The effect can be learned from the above, "Nav-tabs" and "nav-justified" together with the use, that is, Adaptive tab navigation, browser window width less than 768px, in the style of another processing.

/source Please refer to bootstrap.css file line No. 3519 ~ No. 3562 Line/

. 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 pull-down menu (level two navigation)

The previous introduction is to use the bootstrap framework to create a level of navigation, but many times, in the Web page is inseparable from the two-level navigation effect. It's much easier to make two-level navigation in the bootstrap frame. Just use the Li as a parent container, using the class name "dropdown" and nesting another list of UL in Li, using the previous Drop-down menu method to:

<ul class= "Nav nav-pills" >
  <li class= "active" ><a href= "# #" > Home </a></li>
  < Li class= "dropdown" >
  <a href= "# #" class= "Dropdown-toggle" data-toggle= "dropdown" > Tutorials <span class= " Caret "></span></a>
  <ul class=" Dropdown-menu ">
   <li><a href=" # # ">CSS3< /a></li> ...
  </ul>
  </li>
  <li><a href= "# #" > About us </a></li>
</ul>

The operation effect is as follows:

Through the browser debugging tools, it is not difficult to find, click on the two-level navigation menu items, will automatically add the "open" class name, click again will delete the added "open" class name:

The simple point is to rely on this class name to control whether level two navigation is displayed, and to set the background color and border:

/Source view Bootstrap.css file line No. 3479 ~3484 Line/

Nav. Open > A,
. Nav. Open >a:hover,
. Nav. Open >a:focus {
background-color: #eee;
Border-color: #428bca;
}

Recall that when making a drop-down menu, you can use the divider line, then in level two navigation can it? Let's look at it together:

No need to say too much, just add "<li class=" Nav-divider "></li>" such an empty tag.

The operation effect is as follows:

/source Please view the Bootstrap.css file line No. 3485 ~ No. 3490 Line/

. Nav. nav-divider {
 height:1px;
 MARGIN:9PX 0;
 Overflow:hidden;
 Background-color: #e5e5e5;
}

6, bread-chip navigation

Breadcrumbs (BREADCRUMB) are generally used for navigation, primarily to tell the user where the page is now (current position). Breadcrumbs are also a stand-alone module component in the bootstrap framework:

• Less version: corresponding source file breadcrumbs.less
• Sass version: corresponding source file _breadcrumbs.scss
• Compiled version: source corresponds to bootstrap.css file No. 4112 line ~ No. 4129 Line

How to use:

Use the way is very simple, for OL to join the Breadcrumb class:

<ol class= "breadcrumb" >
 <li><a href= "#" > Home </a></li>
 <li><a href= "# > My book </a></li>
 <li class= "active" > "Diagram CSS3" </li>
</ol>

Think about it, the current menu item does not need to link, so also do not use a label.

Implementation principle:

Looks good! The author uses Li+li:before to implement the separator between Li and Li, so this scheme is miserable (not supported) in IE low version.

/Source view Bootstrap.css file line No. 4112 ~ No. 4129 Line/

. breadcrumb {
padding:8px 15px;
margin-bottom:20px;
List-style:none;
Background-color: #f5f5f5;
Border-radius:4px
}

. Breadcrumb> li {
display:inline-block;
}

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.