Bootstrap component learning navigation, labeling, breadcrumbs (boutique) _javascript tips

Navigation

The navigation available in the bootstrap has a similar tag, starting with the base class. Nav, which is a similar part. Changing the cosmetic class can change the style.

<!
DOCTYPE html>  

1. Label page

Note that. The Nav-tabs class requires a. NAV base class. Just Add. nav-stacked, you can stack vertically.

<ul class= "Nav nav-tabs" >
<li class= "active" ><a href= "#" >Home</a></li>
< Li><a href= "#" >Profile</a></li>
<li><a href= "#" >messages</a></li >
</ul>

2, Capsule-type label page

Nav-tabs use. Nav-pills instead.

Disabled Links:

<li ><a >Profile</a></li>

No mouse hover effect, link function not affected

3, use the Pull-down menu

<ul class= "Nav nav-pills" >
<li class= "dropdown active" >
<a class= "Dropdown-toggle" Data-toggle= "dropdown" href= "#" >dropdown 
<span class= "Caret" > 
</span>
</a>
<ul class= "Dropdown-menu" >
<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>

4. Available variants

<span class= "Label Label-default" >Default</span>
<span class= "label Label-primary" >primary </span>
<span class= "label label-success" >Success</span>
<span class= "label Label-info ">Info</span>
<span class=" label label-warning >Warning</span>
<span class= "Label Label-danger" >Danger</span>

5, bread crumbs Navigation

<ol class= "breadcrumb" >
<li><a href= "#" >Home</a></li>
<li><a href = "#" >Library</a></li>
<li class= "active" >Data</li>
</ol>

The above is a small set to introduce the bootstrap components of learning navigation, labeling, breadcrumbs Navigation (boutique) related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!