Bootstarp Learning (10) Navigation and bootstarp learning navigation

Bootstarp Learning (10) Navigation and bootstarp learning navigation
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 corresponding source file isNavs. 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, there is a tab navigation bar in the code editor on the right. Its implementation method is to add the. nav and nav-tabs class styles to the ul label.

/* Check the source code for the bootstrap.css file line 3,450th ~ 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-divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}.nav> li > a >img {  max-width: none;}

 

Navigation (tab navigation)

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

The label navigation isNav-tabs"Style. When creating a label-based navigation, you must append such names to the original navigation "nav", for example:

<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 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 bootstrap.css file line 3,494th ~ 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:

<ul class="nav nav-tabs">    <li class="active"><a href="##">Home</a></li>    …</ul>

The running effect is as follows:

The corresponding style code is as follows:

/* Check the source code for the bootstrap.css file line 3,510th ~ 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 "" to the label item:

<ul class="nav nav-tabs">     <li class="active"><a href="##">Home</a></li>     …     <li class="disabled"><a href="##">Responsive</a></li></ul>

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. If you want to achieve this effect, you need to use the js plug-in. This part will be introduced in the subsequent tutorial.

<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><br /><ul class="nav nav-tabs">    <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><br /> <ul class="nav nav-tabs">    <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>

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:

<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>

Code for implementing the effect style:

/* Check the source code for the bootstrap.css file line 3,563rd ~ 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;}

 

<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>

Navigation (vertical stack 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 based on "nav-pills:

<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 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 bootstrap.css file line 3,578th ~ 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 just need to add "<li class =" nav-divider "> </li>" between 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 running effect is as follows:

Implementation style:

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

.nav .nav-divider {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.

 

 <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> <br /><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>

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. I changed the class name"Nav-justified". Of course, he needs to work with "nav-tabs" or "nav-pills. For example:

<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 running effect is as follows: (you can click to view in full screen)

Adaptive Navigation (implementation principle)

The implementation principle is not difficult. Set the width to "100%" on the list (<ul>), and set "display: table-cell" for each menu item (<li> ", display the list items in the form of simulated table cells:

/* Check the source code for the bootstrap.css file line 3,585th ~ 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:

Note: In the rightmost code window, you can set the full screen to switch the effect.

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 bootstrap.css file line 3,519th ~ 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;  }}

<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><br /><ul class="nav nav-pills 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>

Navigation plus drop-down menu (second-level 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:

<Ul class = "nav-pills"> <li class = "active"> <a href = "##"> homepage </a> </li> <li class ="Dropdown"> <A href = "##"Class = "dropdown-toggle" data-toggle = "dropdown"> Tutorial <span class = "caret"> </span> </a> <ul class ="Dropdown-menu"> <Li> <a href =" # "> CSS3 </a> </li>... </Ul> </li> <a href = "#"> about us </a> </li> </ul>

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: 3,479th lines to the bootstrap.css File ~ 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 an empty tag like <li class = "nav-divider"> </li>.

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-divider {  height: 1px;  margin: 9px 0;  overflow: hidden;  background-color: #e5e5e5;}

<Ul class = "nav-pills"> <li class = "active"> <a href = "##"> homepage </a> </li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> tutorial <span class = "caret"> </span> </a> <ul class = "dropdown-menu"> <li> <a href = "#"> CSS3 </a> </li> <a href = "#"> Sass </a> </li> <a href = "#"> jQuery </a> </li> <li> <a href = "#"> Responsive </a> </li> </ul> </li> <a href = "#"> about we </a> </li> </ul>

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:

<Ol class ="Breadcrumb"> <Li> <a href =" # "> homepage </a> </li> <a href =" # "> my books </a> </li> <li class ="Active"> Graphic CSS3 </li> </ol>

Implementation principle:

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

/* Source Code: 4,112nd lines to the bootstrap.css File ~ 4,129th rows */

.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}.breadcrumb> li + li:before {padding: 0 5px;color: #ccc;content: "/\00a0";}.breadcrumb> .active {color: #999;}

<Ol class = "breadcrumb"> <li> <a href = "#"> homepage </a> </li> <a href = "#"> me </a> </li> <li class = "active"> graphic CSS3 </li> </ol>