Bootstrap navigation and bootstrap navigation menu

Bootstrap navigation and bootstrap navigation menu
Previous

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, so that users can easily find the various functional services provided by the website. This topic describes Bootstrap navigation in detail.

 

Basic 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" or "nav-pills ".

If you are using the navigation component to implement the navigation bar function, you must<ul>On the outermost logical parent elementrole="navigation"Attribute, or use<nav>The element wraps the entire navigation component. Do not add the role attribute<ul>Because it can be recognized as a real list of auxiliary devices (for the disabled ).

.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;}

<ul class="nav">  <li><a href="#">Home</a></li>  <li><a href="#">Profile</a></li>  <li><a href="#">Messages</a></li></ul>

 

Tab

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. This type of name must be appended to the original "nav" when creating a label-based navigation.

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.

In general, the tab has a selected item. In fact, the Bootstrap framework also provides a corresponding solution. You only need to add the class name "active" to its label ". In addition to the current item, some tabs also have a disabled status. To achieve this effect, you only need to add the class name "disabled" to the label item"

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

 

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

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

[Vertical direction]

The capsule tab can also be stacked vertically. Just add.nav-stackedClass

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

 

Adaptive Navigation

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, it must be used together with "nav-tabs" or "nav-pills ".

On a screen larger than 768px.nav-justifiedClass can easily make tabs or capsule labels show the same width. On a small screen, navigation links are stacked

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

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

 

Level 2 navigation

In many cases, the effect of second-level navigation is indispensable in Web pages. It is easier to create a second-level 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. That is, add a drop-down menu

<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 (breadcrumb) is generally used for navigation. It is mainly used to tell the user the location of the current page (the current location). It is easy to use. It is added to the Breadcrumb class for ol:

BreadcrumbNavigation comes from the fairy tale Hansel and Gret. when Hansel and Gret pass through the forest, they accidentally get lost, but they found that all the parts along the way were covered with bread chips to help them find their way home. Therefore, the function of bread navigation is to tell visitors where they are currently on the website and how to return

<Ol class = "breadcrumb"> <li> <a href = "#"> homepage </a> </li> <a href = "#"> frontend </a> </li> <li class = "active"> CSS </li> </ol>