3.4 表格

3.4.1基本表格

通过给<table>元素应用样式类.table可以为其赋予基本表格样式，表现为少量的内边距（padding）和水平方向的分隔线。

<table class="table">

…

</table>

实例：基本表格.html

3.4.2斑马线表格

通过给<table>元素应用样式类.table-striped可以让表格中<tbody>元素内的每一行增加斑马条纹样式。

<table class="table-striped">

…

</table>

实例：斑马线表格.html

3.4.3带边框的表格

通过给<table>元素应用样式类.table-bordered可以为表格和其中的每个单元格增加边框。

<table class=" table-bordered ">

…

</table>

实例：带边框的表格.html

3.4.4鼠标悬停高亮行

通过给<table>元素应用样式类.table-hover可以让表格中<tbody>元素内的每一行对鼠标悬停状态作出响应。

<table class=" table-hover ">

…

</table>

实例：鼠标悬停高亮行.html

3.4.5紧凑型表格 

通过给<table>元素应用样式类.table-condensed可以让表格更加紧凑，单元格中的内边距（padding）均会减半。

<table class=" table-condensed ">

…

</table>

实例：紧凑型表格 .html

3.4.6状态类

Bootstrap为表格提供了五种状态的样式类，通过这些状态类可以为表格中的行或单元格设置不同的背景颜色。

.active：标识当前活动的信息，应用鼠标悬停颜色。

.success：表示一个成功的或积极的动作，应用绿色。

.info：表示普通中立行为，应用蓝色。

.warning：表示一个需要注意的警告，应用黄色。

.danger：表示一个危险的或潜在的负面动作，应用红色。

<table class="table table-condensed">

  <caption>成绩表</caption>

  <thead>

    <tr>

      <th>序号</th>

      <th>分数</th>

   </tr>

  </thead>

  <tbody>

    <tr class="active">…</tr>

    <tr class="danger">…</tr>

    <tr class="success">…</tr>

    <tr class="info">…</tr>

    <tr class="warning">…</tr>

  </tbody>

</table>

实例：状态类.html

3.4.7响应式表格

通过给<table>元素应用样式类.table-responsive可以创建响应式表格。响应式表格会在小屏幕设备上（小于768px）水平滚动，当屏幕大于768px宽度时水平滚动条消失。

<div class="table-responsive">

  <table class="table table-striped">

  …

  </table>

</div>

实例：响应式表格.html

3.5 按钮

3.5.1预定义按钮

Bootstrap为按钮提供了一个基本样式类.btn ，所有按钮元素都使用它。此外，还提供了一些预定义样式类可以用来定义不同风格的按钮。

.btn-default：默认的/标准的按钮。

.btn-primary：提供额外的视觉效果，标识一组按钮中的原始动作。

.btn-success：表示一个成功的或积极的动作。

.btn-info：信息警告消息的上下文按钮。

.btn-warning：表示应谨慎采取的动作。

.btn-danger：表示一个危险的或潜在的负面动作。

.btn-link：并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为。

<button type="button" class="btn btn-default">默认样式按钮</button>

<button type="button" class="btn btn-primary">原始按钮</button>

<button type="button" class="btn btn-success">成功按钮</button>

<button type="button" class="btn btn-info">信息按钮</button>

<button type="button" class="btn btn-warning">警告按钮</button>

<button type="button" class="btn btn-danger">危险按钮</button>

<button type="button" class="btn btn-link">链接按钮</button>

实例:预定义按钮.html

3.5.2按钮尺寸

通过给按钮<button>元素应用样式类.btn-lg、.btn-sm或.btn-xs可以获得不同尺寸的按钮。

<button type="button" class="btn btn-default btn-lg">大按钮</button>

<button type="button" class="btn btn-default btn-sm">小按钮</button>

<button type="button" class="btn btn-default btn-xs">超小按钮</button>

实例:按钮尺寸.html

3.5.3块级按钮

通过给按钮<button>元素应用样式类.btn-block可以将按钮拉伸至其父元素100%的宽度，同时该按钮变为了块级元素。

<button type="button" class="btn btn-primary btn-lg btn-block">块级按钮</button>

实例:块级按钮.html

3.5.4按钮激活状态

当按钮处于激活状态时，它表现为被按压下去的样式（底色更深、边框颜色更深、向内投射阴影）。通过给<button>元素应用样式类.active可以实现这一效果。

<button type="button" class="btn btn-primary btn-lg">原始按钮</button>

<button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>

实例:按钮激活状态.html

3.5.5按钮禁用状态

当一个按钮被禁用时，它的颜色会变淡50%，并失去渐变，呈现出无法点击的效果。对于<button>元素，可以为其添加disabled属性实现这一效果，对于<a>元素则可以通过应用样式类.disabled来实现。

<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>

<button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button> 

<a href="#" class="btn btn-danger btn-lg" role="button">原始按钮</a>

<a href="#" class="btn btn-danger btn-lg disabled" role="button">禁用的原始按按钮</a> 

实例:按钮禁用状态.html

3.5.6按钮标签

Bootstrap允许在<a>、<button>或<input>元素上应用按钮的样式，但是建议尽量不要这么做，目的是为了避免跨浏览器产生的不一致性问题。

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

实例:按钮标签.html

3.6 图像

3.6.1响应式图像

通过给图片<img>元素应用样式类.img-responsive可以让图片支持响应式布局。其实质是为图片设置了max-width: 100%;和height: auto;的属性，从而让图片在其父元素中能够更好的缩放。

<img src="img/pic.jpg" class="img-responsive" alt="响应式图像" />

实例:响应式图像.html

3.6.2图像形状

通过给图像<img>元素应用下面几个样式类，可以让图像呈现出不同的形状。

img-rounded：添加border-radius:6px ;获得图像圆角。

img-circle：添加border-radius:500px ;让整个图像变成圆形。

img-thumnail：添加一些内边距（padding）和一个灰色的边框，图像呈现缩略图样式。

<img src="img/pic.jpg" alt="圆角" class="img-rounded" />

<img src="img/pic.jpg" alt="圆形" class="img-circle" />

<img src="img/pic.jpg" alt="缩略图样式" class="img-thumbnail" />

实例:图像形状.html

3.7 辅助类

3.7.1情景文本颜色

Bootstrap 给文本提供了一组样式类，可以让文本展现不同的情景色，从而表达不同的意图。这些样式类也可以应用于链接，并会像我们的默认链接样式一样在悬停时变暗。

<p class="text-muted">柔和文本：浅灰色</p>

<p class="text-primary">主要文本：蓝色</p>

<p class="text-success">成功文本：绿色</p>

<p class="text-info">信息文本：浅蓝色</p>

<p class="text-warning">警告文本：黄色</p>

<p class="text-danger">危险文本：褐色</p>

实例:情景文本颜色.html

3.7.2情景文本背景色

和情景文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。这些样式类也可以应用于链接，并会像我们的默认链接样式一样在悬停时变暗。

<p class="bg-primary">主要背景：蓝色</p>

<p class="bg-success">成功背景：绿色</p>

<p class="bg-info">信息背景：浅蓝色</p>

<p class="bg-warning">警告背景:红色</p>

<p class="bg-danger">危险背景：褐色</p>

实例:情景文本背景色.html

3.7.3关闭按钮

通过给按钮<button>元素应用样式类.close可以得到关闭按   钮符号的样式，这种样式通常用于模态框和警告框上。

<p>关闭按钮实例

   <button type="button" class="close"><span  aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

</p>

实例:关闭按钮.html

3.7.4三角符号

通过给空的<span>元素应用样式类.caret可以得到三角符号。三角符号一般用来指示某个元素具有下拉菜单的功能，注意在向上弹出式菜单中的三角符号是反方向的。

<p>三角符号实例<span class="caret"></span></p>

实例:三角符号.html

3.7.5快速浮动

通过给任意元素应用样式类.pull-left或.pull-right可以将元素快速向左或向右浮动。

<div class="pull-left">向左浮动</div>

<div class="pull-right">向右浮动</div> 

实例:快速浮动.html

3.7.6块级居中显示

通过给给短语元素应用样式类.center-block可以让元素以块级的方式居中显示。

<span class="center-block">块级居中显示</span> 

实例:块级居中显示.html

3.7.7清除浮动

Bootstrap提供了样式类.clearfix用来清除浮动。

<div class="pull-left">向左浮动</div>

<div class="pull-right">向右浮动</div>

<span class="clearfix"></span>

<div>清除浮动后面的内容</div>

实例:清除浮动.html

3.7.8显示或隐藏

通过给任意元素应用样式类.show和.hidden、.invisible可以使元素对所有设备显示或隐藏（包括屏幕阅读器）。需要注意的是，它们都对元素块级显示或隐藏。另外，.hidden和.invisible的区别是前者不占用文档流，而后者占用。

<span class="show">显示内容1</span> 

<span class="hidden">hidden隐藏内容：不占用文档流</span>

<span class="show">显示内容2</span> 

<span class="invisible">invisible隐藏内容：占用文档流</span> 

<span class="show">显示内容3</span>

实例:显示或隐藏.html

3.7.9屏幕阅读器和键盘焦点

Bootstrap提供了样式类.sr-only可以将元素对所有设备隐藏，除了屏幕阅读器。此外，还提供了样式类.sr-only-focusable可以使元素在获得键盘焦点时显示。

<a class="sr-only sr-only-focusable" href="#content">请读下面的内容</a> 

实例:屏幕阅读器和键盘焦点.html

3.7.10图像替换

使用样式类.text-hide可以将文本元素隐藏，同时可以在样式中定义背景图像来替换文本。

<h1 class="text-hide">图像替换标题</h1> 

其中添加了下面的CSS样式：

.text-hide{

  background:url(img/bg.jpg);

  height:100px;

}

实例:图像替换.html

CSS布局所有实例源代码

Bootstrap3.rar