The Nineth chapter of the path page tag and badge component _javascript tips

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Learning points:

1. Path components

2. Paging component

3. Label components

4. Badge Kit

In this lesson, we'll take a look at the four component features of Bootstrap: path components, paging components, label components, and badge components.

A Path component

The path component is also called breadcrumbs navigation.

Breadcrumbs Navigation
<ol class= "breadcrumb" >
<li>
<a href= "#" > Home </a>
</li>
<li>
<a href= "#" > Product list </a>
</li>
<li class= "active" >
Korean version 2015 Cashmere Sweater
</li>

Two Paging component

The paging component can provide features with a presentation page.

Default paging <ul class= "pagination" > <li> <a href= "#" >«</a> </li> <li> <a href= "#" > 1</a> </li> <li> <a href= "#" >2</a> </li> <li> <a href= "#" >3</a> &
lt;/li> <li> <a href= "#" >4</a> </li> <li> <a href= "#" >5</a> </li> <li> <a href= "#" >»</a> </li> </ul>//preferences and disabling <li class= "active" ><a href= "#" >1 </a></li> <li class= "disabled" ><a href= "#" >2</a></li>//Set dimensions, four LG, default, SM and XS < UL class= "pagination PAGINATION-LG" >//Page Turn effect <ul class= "pager" > <li> <a href= "#" > previous page </a> < /li> <li> <a href= "#" > Next </a> </li> </ul>//aligning page links <ul class= "pager" > <li clas
S= "Previous" > <a href= "#" > Previous page </a> </li> <li class= "Next" > <a href= "#" > next page </a> </li> </ul>//Page entry disabled <li class= "previous disabled "><a href=" # "> Prev </a></li>  

Three Label

Label with label
 
 

Four Badge

Number of unread messages badge
<a href= "#" > Info <span class= "badge" >10</span></a> 
//button use badge
< Button class= "btn btn-success" >
submit <span class= "badge" >3</span>
</button> 
// Active status Auto fit Hue
<ul class= "Nav nav-pills" >
<li class= "active" > <a href=
"#" > Home <span class= "badge" >2</span></a>
</li>
<li>
<a href= "#" > Information </a>
</li>
</ul>

The above is a small set to introduce the bootstrap components of the Path tab and badge components, I hope to help!