<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>路径分页和徽章组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin:50px;"> <!-- breadcrumb ：路径组件 面包屑导航 --> <ul class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li class="active"><a href="#">衣服</a></li> </ul> <!-- agination 分页组件 pagination-lg 大图标 pagination-xs 小图标 pagination-sm 超小图标 pager 翻页效果 previous 上一页对齐翻页效果 next 下一页 disabled 禁用 --> <ul class="pagination pagination-sm"> <li><a href="#">«</a></li> <li class="active"><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> <!--翻页效果--> <ul class="pager"> <li href="previous disabled"><a href="previous">上一页</a></li> <li href="next"><a href="next">下一页</a></li> </ul> <!--标签 label-primary label-success label-info label-warning label-danger --> <h3>标签<span class="label label-default">new</span></h3> <!--徽章 --> <a href="#">信息<span class="badge">10</span></a> <button class="btn btn-warning">信息<span class="badge">10</span></button> <ul class="nav nav-pills"> <li class="active"> <a href="#">首页<span class="badge">10</span></a> </li> <li><a href="#">咨询</a></li> </ul> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </body> </html>