Bootstrap 路径分页标签和徽章组件（七）

最新推荐文章于 2021-03-01 20:08:54 发布

weixin_30343157

最新推荐文章于 2021-03-01 20:08:54 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/rainy0496/p/6627625.html

版权

一、面包屑导航（路径组件）

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li class="active">产品详细名称</li>
</ol>

.breadcrumb // 定义面包屑导航

.active // 当前项

二、分页组件

<ul class="pagination ">
     <li><a href="#">&laquo;</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 class="disabled"><a href="#">5</a></li>
     <li><a href="#">&raquo;</a></li>
</ul> 
<ul class="pager">
      <li><a href="#">上一页</a></li>
      <li><a href="#">下一页</a></li>
</ul>
<ul class="pager">
      <li class="previous disabled"><a href="#">上一页</a></li>
      <li class="next"><a href="#">下一页</a></li>
</ul>

.pagination // 定义这是一个分页

.active // 首选项

.disabled // 禁用项

设置尺寸在 ul 上（从大到小）：

.pagination-lg

默认
.pagination-sm

.pagination-lxs

// 翻页效果

.pager // ul 上设置，默认100% 居中

.previous // li 上设置，上一页对齐左侧翻页

.next // li 上设置，下一页对齐右侧翻页

.disabled // li 上设置，禁用项

三、标签组件

<h3>标签 <span class="label label-default">news</span></h3>
<h5>标签 <span class="label label-success">pros</span></h5>

文字大小根据 h 标签的变化而变化

.label // 基本的定义，控制圆角padding 等属性

.label-default // 默认的背景样式，灰色

// 不同色调的标签,与之前的按钮定义的颜色一样

.label-primary // 默认蓝

.label-success // 成功绿

.label-info // 信息蓝

.label-warning // 警告黄

.label-danger // 危险红

四、徽章组件

<a href="#">信息 <span class="badge">5</span></a>
<button class="btn btn-default">提交 <span class="badge">3</span></button>   // btn-success 亦可，badge的样式会跟着变化。
<ul class="nav nav-pills">
     <li class="active"><a href="#">首页 <span class="badge">3</span></a></li>
     <li><a href="#">内页</a></li>
</ul>