Bootstrap入门基础（六）

布局组件（二）

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>

3，徽章

徽章与标签相似，主要的区别在于徽章的边角更加圆滑

默认徽章 .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-bar-*

条纹进度条 .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-footer

带语境颜色的面板   panel-primary、panel-success、panel-info、panel-warning、panel-danger

带表格的面板 .class

带列表组的面板 .panel    ,  .panel-default

11,Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可

尺寸 well-*