第九章之路径分页标签与徽章组件
Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
学习要点：
1.路径组件
2.分页组件
3.标签组件
4.徽章组件
本节课我们主要学习一下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>
以上所述是小编给大家介绍的Bootstrap组件之路径分页标签与徽章组件，希望对大家有所帮助！