9th Chapter Path page labels and badge components

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="#">&laquo;</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="#">&raquo;</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