12th rounds of Bootstrap3.0 Learning (navigation, labels, and breadcrumb navigation)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the following content:

The available navigation in Bootstrap has similar tags and uses the base class.navIt is similar. You can change the style of a modifier.

1. Tab

Note: The nav-tabs class requires. navBase class.

<ul =>  <li =><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

For the moment, we will only discuss simple styles.

2. Capsule Tab

Use the same HTML tag, but use.nav-pills.

<ul =>  <li =><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

Pills can be stacked vertically. Add.nav-stacked.

 

 

3. Navigation on both ends

On a screen larger than 768px.nav-justifiedIt is easy to make tabs or capsule labels show the same width. On a small screen, navigation links are stacked.

<ul =>  <li =><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul><ul =>  <li =><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

4. Disabled links

Add to any navigation (including tabs, pills, or lists).disabledEnableThe link is gray with no mouse hover Effect.

 

The link function is not affected.

This class only changes<a>Rather than its functions. Disable the link here with custom JavaScript.

<ul =>  <li =><a href=>Home</a></li>  <li =><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

By hovering over the mouse, you can view the simple effect.

5. Use the drop-down menu

<ul =>  <li =>    <a = data-toggle= href=><span =></span>    </a>    <ul =>        <li><a href=>Home</a></li>          <li><a href=>Profile</a></li>          <li><a href=>Messages</a></li>    </ul>  </li>  <li><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

6. Capsule tab with drop-down menu

<ul =>  <li =>    <a = data-toggle= href=><span =></span>    </a>    <ul =>        <li><a href=>Home</a></li>          <li><a href=>Profile</a></li>          <li><a href=>Messages</a></li>    </ul>  </li>  <li><a href=>Home</a></li>  <li><a href=>Profile</a></li>  <li><a href=>Messages</a></li></ul>

 

 

 

Simple case

Available variants
Use any of the following classes to change the label appearance.
<span =>Default</span><span =>Primary</span><span =>Success</span><span =>Info</span><span =>Warning</span><span =>Danger</span>


The position of the current page is indicated by a horizontal hierarchy.
The Delimiter is automatically passed through the CSS:beforeAndcontentAdded.
<ol =>  <li><a href=>Home</a></li>  <li><a href=>Library</a></li>  <li =>Data</li></ol>


This article has been updated to Bootstrap3.0 getting started learning series http://www.cnblogs.com/aehyok/p/3404867.html