Learning Essentials:
1. Path components
2. Paging Components
3. Label components
4. Badge Kit
Keynote Teacher: Li Tinghui
In this lesson, we'll focus on the four component features of Bootstrap: Path component, paging component, label component, and badge component.
A Path component
The path component is also called breadcrumbs navigation.
Breadcrumbs Navigation
<olclass= "breadcrumb"> <Li> <ahref="#">Home</a> </Li> <Li> <ahref="#">Product List</a> </Li> <binclass= "Active">Korean version 2015 cashmere sweater</Li></ol>
Two Paging component
The paging component can provide functionality with a presentation page.
Default paging
<ulclass= "pagination"> <Li> <ahref="#">«</a> </Li> <Li> <ahref="#">1</a> </Li> <Li> <ahref="#">2</a> </Li> <Li> <ahref="#">3</a> </Li> <Li> <ahref="#">4</a> </Li> <Li> <ahref="#">5</a> </Li> <Li> <ahref="#">»</a> </Li></ul>
Preferences and disabling
<Liclass= "Active"><ahref="#">1</a></Li><Liclass= "Disabled"><ahref="#">2</a></Li>
Set size, four LG, default, SM and XS
<class= "pagination Pagination-lg">
Page Turn effect
<ulclass= "Pager"> <Li> <ahref="#">Previous page</a> </Li> <Li> <ahref="#">Next page</a> </Li></ul>
Snap To page links
<ulclass= "Pager"> <Liclass= "Previous"> <ahref="#">Previous page</a> </Li> <Liclass= "Next"> <ahref="#">Next page</a> </Li></ul>
Page Turn Item disabled
<class= "previous disabled"><href= "#" > prev </a></li>
Three Label
Bring a label behind the text
< H3 > < class= "Label Label-default">new</span></ h3>
Labels in different shades
<H3>Label<spanclass= "Label label-primary">New</span></H3><H3>Label<spanclass= "Label label-success">New</span></H3><H3>Label<spanclass= "Label Label-info">New</span></H3><H3>Label<spanclass= "Label label-warning">New</span></H3><H3>Label<spanclass= "Label Label-danger">New</span></H3>
Four Badge
Unread Information Quantity Badge
<href= "#"><class= "badge" ></span></a>
Use the badge in the button
<class= "btn btn-success"> < class = "badge" >3</span></button>
Activation state Auto-fit tone
<ulclass= "Nav nav-pills"> <Liclass= "Active"> <ahref="#">Home<spanclass= "badge">2</span></a> </Li> <Li> <ahref="#">Information</a> </Li></ul>
9th Chapter Path page labels and badge components