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="#">«</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="#">»</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!