Bootstrap组件功能：路径组件、分页组件、标签组件和徽章组件
本节课我们主要学习一下Bootstrap的四个组件功能：路径组件、分页组件、标签组件和徽章组件。
一．路径组件
路径组件也叫做面包屑导航。
//面包屑导航
<olclass="breadcrumb">
<li><ahref="#">首页</a></li>
<li><ahref="#">产品列表</a></li>
<liclass="active">韩版2015年羊绒毛衣</li>
</ol>
二．分页组件
分页组件可以提供带有展示页面的功能。
//默认分页
<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>
//首选项和禁用
<liclass="active"><ahref="#">1</a></li>
<liclass="disabled"><ahref="#">2</a></li>
//设置尺寸，四种lg、默认、sm和xs
<ulclass="paginationpagination-lg">
//翻页效果
<ulclass="pager">
<li><ahref="#">上一页</a></li>
<li><ahref="#">下一页</a></li>
</ul>
//对齐翻页链接
<ulclass="pager">
<liclass="previous"><ahref="#">上一页</a></li>
<liclass="next"><ahref="#">下一页</a></li>
</ul>
//翻页项禁用
<liclass="previousdisabled"><ahref="#">上一页</a></li> 三．标签
//在文本后面带上标签
<h3>标签<spanclass="labellabel-default">new</span></h3> //不同色调的标签
<h3>标签<spanclass="labellabel-primary">new</span></h3> <h3>标签<spanclass="labellabel-success">new</span></h3> <h3>标签<spanclass="labellabel-info">new</span></h3>
<h3>标签<spanclass="labellabel-warning">new</span></h3> <h3>标签<spanclass="labellabel-danger">new</span></h3> 四．徽章
//未读信息数量徽章
<ahref="#">信息<spanclass="badge">10</span></a>
//按钮中使用徽章
<buttonclass="btnbtn-success">
提交<spanclass="badge">3</span>
</button>
//激活状态自动适配色调
<ulclass="navnav-pills">
<liclass="active">
<ahref="#">首页<spanclass="badge">2</span></a>
</li>
<li><ahref="#">资讯</a></li>
</ul>。