Chapter 9: Path Paging Tag and Badge Components

  • 2021-02-17 06:13:10
  • OfStack

Bootstrap, from Twitter, is by far 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 components

3. Tag components

4. Badge components

In this lesson, we will focus on the four components of Bootstrap: path component, paging component, tag component and badge component.

1. The path component

The path component is also called breadcrumb navigation.


// Breadcrumb navigation 
<ol class="breadcrumb">
<li>
<a href="#"> Home page </a>
</li>
<li>
<a href="#"> Product list </a>
</li>
<li class="active">
 Han edition  2015  Year of cashmere sweater 
</li>
</ol> 

2. The paging component

The paging component can provide functionality with display pages.


// The default page 
<ul class="pagination">
<li>
<a href="#">&laquo;</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">&raquo;</a>
</li>
</ul> 
// Preferences and Disables 
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li> 
// Set the size, 4 Kind of  lg , the default, sm  and  xs
<ul class="pagination pagination-lg"> 
// Flip effect 
<ul class="pager">
<li>
<a href="#"> on 1 page </a>
</li>
<li>
<a href="#"> Under the 1 page </a>
</li>
</ul> 
// Align page-turning links 
<ul class="pager">
<li class="previous">
<a href="#"> on 1 page </a>
</li>
<li class="next">
<a href="#"> Under the 1 page </a>
</li>
</ul> 
// Paging entries are disabled 
<li class="previous disabled"><a href="#"> on 1 page </a></li> 

3. The label


// Put a label after the text 
<h3> The label  <span class="label label-default">new</span></h3> 
// Labels in different shades 
<h3> The label  <span class="label label-primary">new</span></h3>
<h3> The label  <span class="label label-success">new</span></h3>
<h3> The label  <span class="label label-info">new</span></h3>
<h3> The label  <span class="label label-warning">new</span></h3>
<h3> The label  <span class="label label-danger">new</span></h3> 

4. The badge


// Number of unread messages badge 
<a href="#"> information  <span class="badge">10</span></a> 
// Use badges in buttons 
<button class="btn btn-success">
 submit  <span class="badge">3</span>
</button> 
// The activated state automatically ADAPTS the tone 
<ul class="nav nav-pills">
<li class="active">
<a href="#"> Home page  <span class="badge">2</span></a>
</li>
<li>
<a href="#"> information </a>
</li>
</ul>

Above described is this site to introduce the Bootstrap component path paging tag and badge components, I hope to help you!


Related articles: