Bootstrap the navigation component _javascript skills that you must learn every day

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

LESS:navs.less

SASS: _navs.scss

Tabbed navigation, also called Tab navigation

Tabbed navigation is done through the. Nav-tabs style, and you need to append the class name to the container with the original navigation class named. Nav when making the label navigation. Nav-tabs

<ul class= "Nav nav-tabs" >
  <li><a href= "#" > Navigation title 1</a></li>
  <li><a href= "#" > Navigation title 2</a></li>
  <li><a href= "#" > Navigation title 3</a></li>
  <li ><a href= "#" > Navigation title 4</a></li>
  <li><a href= "#" > Navigation title 5</a></li>
 </ul>

Principle:

Display the menu item Li as a block, arrange them on the same level, and then define the style of the non-highlight menu and the mouse hover effect

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

Typically, a tab has a currently selected item, just add the class name to its (LI) tab. Active can

<ul class= "Nav nav-tabs" >
  <li class= "active" ><a href= "#" > Navigation title 1</a></li>
  <li><a href= "#" > Navigation title 2</a></li>
  <li><a href= "#" > Navigation title 3</a></li >
  <li><a href= "#" > Navigation title 4</a></li>
  <li><a href= "#" > Navigation title 5</a ></li>
</ul>

. 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 options, some tabs also have a disabled state to achieve this effect by simply adding the class name to the label item disabled

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

If you want to achieve click menu items can switch the effect of the content, you need to match the JS plugin

Capsule shape (pills) navigation

Currently highlighted, with rounded corners, the implementation method and tab navigation similar to the same structure, simply change the class name. Nav-tabs to the class name. 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;
}

Vertical-Stacked Navigation

In addition to horizontal navigation and vertical navigation, a vertically stacked navigation simply appends the class name to the. Nav-pills. nav-stacked

Compared with capsule-shaped navigation, the main is to make the navigation items do not float, so that the vertical arrangement, and then to the adjacent navigation to leave a certain amount of space

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

<ul class= "nav nav-pills nav-stacked" >
  <li><a href= "#" > Navigation title 0</a></li>
  <li Class= "Active" ><a href= "#" > Navigation title 1</a></li>
  <li><a href= "#" > Navigation title 2</a> </li>
  <li><a href= "#" > Navigation title 3</a></li>
  <li><a href= "#" > Navigation Title 4 </a></li>
  <li class= "disabled" ><a href= "#" > Navigation title 5</a></li>
</ul >

Vertical stacked navigation Like a Drop-down menu group with a split line between groups, navigation items also have a split line effect, simply add <li class= "divider" between navigation items ></li>

<ul class= "nav nav-pills nav-stacked" >
  <li ><a href= "#" > Navigation title 0</a></li>
  <li Class= "Active" ><a href= "#" > Navigation title 1</a></li>
  <li><a href= "#" > Navigation title 2</a> </li>
  <li class= "Nav-divider" ></li>
  <li><a href= "#" > Navigation title 3</a></li >
  <li><a href= "#" > Navigation title 4</a></li>
  <li class= "Disabled" ><a "#" > Navigation title 5</a></li>
 </ul>

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

Adaptive navigation

Adaptive navigation means that the navigation occupies the full 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 an adaptive button component made by the previously mentioned. Btn-group-justified, but the class name when making adaptive navigation. Nav-justified need to be used in conjunction with. Nav-tabs or. nav-pills

Principle:

List ul set width to 100%, then each menu item Li set the Display:table-cell, let the list simulate table cell form display;

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

There is a media query condition: @media (min-width:768px) {...} Indicates that adaptive navigation can be displayed only if the browser window is wider than 768px, but the browser window is less than 768px and will be displayed as shown in the following image style

Nav-tabs and. Nav-justified used together, that is, Adaptive tab navigation, browser window width less than 768px, the style of the other processing

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

Navigation plus pull-down menu (level two navigation)

Make two-level navigation just use Li as the parent container, using the class name. Dropdown and nested another UL list in Li

<ul class= "Nav nav-tabs" >
  <li><a href= "#" > Navigation menu 1</a></li>
  <li><a href= "#" > Navigation menu 2</a></li>
  <li><a href= "#" > Navigation menu 3</a></li>
  <li ><a href= "#" > Navigation menu 4</a></li>
  <li class= "dropdown" >
   <a class= "Dropdown-toggle" "Data-toggle=" dropdown >
    navigation menu 5
    <span class= "caret" ></span>
   </a>
   <ul class= "Dropdown-menu" >
    <li><a href= "#" > Drop-down menu 1</a></li> <li><a
    "#" > Pull-down menu 2</a></li>
    <li><a href= "#" > Pull-down menu 3</a></li>
    <li> <a href= "#" > Pull-down menu 4</a></li>
   </ul>
  </li>
  <li><a href= "#" > Navigation menu 6</a></li>
 </ul>

Breadcrumbs-type navigation

Crumbs are generally used for navigation, the main role is to tell the user where the page is now located, in the bootstrap framework of the bread crumbs is a separate module components.

LESS:breadcrumbs.less

Sass:_breadcrumbs.scss

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

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

The above uses Li+li:before to implement the separator between Li and Li, which is not supported in the low version ie

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.