Bootstrap 第9章 途径分页标签和徽章组件
Bootstrap 第9章 路径分页标签和徽章组件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>路径分页标签和徽章组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 200px;"> <ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li><a href="#">韩版2015羊绒大衣</a></li> </ol> <ul class="pagination pagination-lg"> <li><a href="#">«</a></li> <li><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 class="previous"><a href="#">上一页</a></li> <li class="next"><a href="#">下一页</a></li> </ul> <ul class="pager"> <li class="previous disabled"><a href="#">上一页</a></li> <li class="next"><a href="#">下一页</a></li> </ul> <h3>标签 <span class="label label-default">new</span></h3> <h3>标签 <span class="label label-success">new</span></h3> <a href="#">信息 <span class="badge">10</span></a> <button class="btn btn-default"> 提交 <span class="badge">3</span> </button> <button class="btn btn-success"> 提交 <span class="badge">3</span> </button> <ul class="nav nav-pills"> <li class="active"><a href="#">首页 <span class="badge">2</span></a></li> <li><a href="#">关于</a></li> </ul> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：