布局组件(二)
1,分页
默认分页 .pagination
<ul class="pagination">
<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>
</ul>
分页状态 .disabled \ active
分页大小 .pagination-*
默认的翻页 .pager
对齐的链接 .previous / .next用法
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
翻页效果 .disabled
2,标签
默认标签 .label
修饰的 class
label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
徽章与标签相似,主要的区别在于徽章的边角更加圆滑
默认徽章 .badge
4,巨屏
巨屏 .jumbotron
- 创建一个带有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>,字体粗细 font-weight 被减为 200px。
5,页面标题
页面标题 .page-header
子标题 <small>
6,缩略图
- 在图像周围添加带有 class .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距(padding)和一个灰色的边框。
- 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
- 把带有 class .thumbnail 的 <a> 标签改为 <div>。
- 在该 <div> 内,您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。
- 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
7,警告
创建一个 <div>,并向其添加一个
.alert class 和四个上下文 class(即
.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框
取消警告 .alert-dismissable
警告中的链接 .alert-link
8,进度条
- 添加一个带有 class .progress 的 <div>。
- 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>。
- 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。
条纹进度条 .progress-striped
动画进度条 ,progress-stripe active
8,媒体对象
媒体对象 .media .media-list
9,列表组
- 向元素 <ul> 添加 class .list-group。
- 向 <li> 添加 class .list-group-item。
10,面板
创建一个基本的面板,只需要向 <div> 元素添加 class
.panel 和 class
.panel-default 即可
面板标题
- 使用 .panel-heading class 可以很简单地向面板添加标题容器
- 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。
带语境颜色的面板
panel-primary、panel-success、panel-info、panel-warning、panel-danger
带表格的面板 .class
带列表组的面板 .panel , .panel-default
11,Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可
尺寸 well-*