css 系统
Table of Contents

css

网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

移动设备优先策略

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

img

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

基本的网格结构

Bootstrap 网格系统如何跨多个设备工作

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px） 30px （一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

下面是 Bootstrap 网格的基本结构：

<div class="container">   
  <div class="row">      
    <div class="col-*-*"></div>      
    <div class="col-*-*"></div>         
  </div>   
  <div class="row">...</div>
  </div>
  <div class="container">....

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 范围是从 *1 到 11。

在下面的实例中，我们有

..
，我们将使用 .col-md-offset-3 class 来居中这个 div。

<div class="container">   
  <h1>Hello, world!</h1>   
  <div class="row" >      
    <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">         
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>      
    </div>   
  </div> 
</div> 

网格系统偏移列

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-*列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

<div class="container">   
  <h1>Hello, world!</h1>   
  <div class="row">      
    <div class="col-md-3" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">         
      <h4>第一列</h4>         
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>     
    </div>      
    <div class="col-md-9" style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">         
      <h4>第二列 - 分为四个盒子</h4>         
      <div class="row">            
        <div class="col-md-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">               
        <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p>            
      </div>            
      <div class="col-md-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">               
        <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>            
      </div>         
    </div>         
    <div class="row">            
      <div class="col-md-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">               
        <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>            
      </div>               
      <div class="col-md-6" style="background-color: #B18904;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">               
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>            
      </div>         
    </div>      
  </div>   
 </div> 
 </div> 

网格系统嵌套列

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1到 11**。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。 

<div class="container">   
   <h1>Hello, world!</h1>   
   <div class="row">      
     <p>排序前</p>      
     <div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在左边</div>     
     <div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">我在右边</div>   
   </div> 
   <br>   
   <div class="row">      
     <p>排序后</p>      
     <div class="col-md-4 col-md-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">我在左边</div>      
     <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">我在右边</div> 
   </div> 
</div>

网格系统排序列

排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

内联子标题

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联子标题</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
   <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
   <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
   <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
   <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
   <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
   <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
</body>
</html>

内联子标题

引导主体副本

为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
</p>
</body>
</html>

结果如下所示：

引导主体副本

强调

HTML 的默认强调标签 （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。

Bootstrap 提供了一些用于强调文本的类，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

结果如下所示：

强调

缩写 \

HTML元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 缩写</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>

结果如下所示：

缩写

地址（Address）

使用

标签，您可以在网页上显示联系信息。由于
默认为 display:block;，您需要使用
标签来为封闭的地址文本添加换行。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 地址</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890</address><address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a></address>
</body>
</html>

结果如下所示：

地址

引用（Blockquote）

您可以在任意的 HTML 文本旁使用默认的

。其他选项包括，添加一个 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。下面的实例演示了这些特性：

结果如下所示：

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 引用</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote><p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
</body>
</html>

引用

列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表：有序列表是指以数字或其他有序字符开头的列表。
  • 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
  • 定义列表：在这种类型的列表中，每个列表项可以包含
    和
    元素。
    代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，
    是
    的描述。您可以使用 class dl-horizontal 把
    行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 列表</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><h4>有序列表</h4><ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ol><h4>无序列表</h4><ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul><h4>未定义样式列表</h4><ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul><h4>内联列表</h4><ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul><h4>定义列表</h4><dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd></dl><h4>水平的定义列表</h4><dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd></dl></body></html>

结果如下所示：

列表

更多排版类

下表提供了 Bootstrap 更多排版类的实例：

类 描述 实例
.lead 使段落突出显示 尝试一下
.small 设定小文本 (设置为父文本的 85% 大小) 尝试一下
.text-left 设定文本左对齐 尝试一下
.text-center 设定文本居中对齐 尝试一下
.text-right 设定文本右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
.text-nowrap 段落中超出屏幕部分不换行 尝试一下
.text-lowercase 设定文本小写 尝试一下
.text-uppercase 设定文本大写 尝试一下
.text-capitalize 设定单词首字母大写 尝试一下
.initialism 显示在 元素中的文本以小号字体展示 尝试一下
.blockquote-reverse 设定引用右对齐 尝试一下
.list-unstyled 移除默认的列表样式，列表项中左对齐 (
    和
      中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
 尝试一下
.list-inline 将所有列表项放置同一行 尝试一下
.dl-horizontal 该类设置了浮动和偏移，应用于
元素和
元素中，具体实现可以查看实例
 尝试一下
.pre-scrollable 使 
 元素可滚动 scrollable
 尝试一下

显示代码

Bootstrap 允许您以两种方式显示代码：

  • 第一种是 \ 如果您想要内联显示代码，那么您应该使用 标签。
  • 第二种是 \
     如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 
     标签。

请确保当您使用 

 和  标签时，开始和结束标签使用了 unicode 变体： < 和 >。


让我们来看看下面的实例：


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 代码</title>
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
  &lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
  &lt;/article&gt;
</pre>
</body>
</html>





代码


表格


Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

、




标签
描述






），用来标识表格列。）。 内使用。


为表格添加基础样式。







表格标题行的容器元素（








表格主体中的表格行的容器元素（







一组出现在单行上的表格单元格的容器元素（ 或 ）。





默认的表格单元格。





特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 







关于表格存储内容的描述或总结。






表格类


下表样式可用于表格中：

 内的行上看到条纹，如下面的实例所示：
<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 条纹表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table table-striped">
   <caption>条纹表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table></body></html>

结果如下所示：
条纹表格
边框表格
通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 边框表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table table-bordered">
   <caption>边框表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table></body></html>

结果如下所示：
边框表格
悬停表格
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 悬停表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table></body></html>

结果如下所示：
悬停表格
精简表格
通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 精简表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table table-condensed">
   <caption>精简表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table></body></html>

结果如下所示：
精简表格
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。




类
描述
实例






.table
为任意  添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态


尝试一下




.table-striped
在 


尝试一下




.table-bordered
为所有表格的单元格添加边框
尝试一下




.table-hover
在 


尝试一下




.table-condensed
让表格更加紧凑
尝试一下




联合使用所有表格类
尝试一下







<tr>, <th> ,<td>


下表的类可用于表格的行或者单元格：






类
描述
实例






.active
将悬停的颜色应用在行或者单元格上
尝试一下




.success
表示成功的操作
尝试一下




.info
表示信息变化的操作
尝试一下




.warning
表示一个警告的操作
尝试一下




.danger
表示一个危险的操作
尝试一下






基本的表格


如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：


<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 基本的表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody></table></body></html>





结果如下所示：


基本的表格


可选的表格类


除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。


条纹表格


通过添加 .table-striped class，您将在 


































类
描述






.active
对某一特定的行或单元格应用悬停颜色




.success
表示一个成功的或积极的动作




.warning
表示一个需要注意的警告




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






这些类可被应用到 
 或 。


<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 上下文类</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td>
         <td>23/11/2013</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2013</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2013</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2013</td>
         <td>已退货</td>
      </tr>
   </tbody></table></body></html>





结果如下所示：


上下文类


响应式表格


通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。


<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 响应式表格</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><div class="table-responsive">
   <table class="table">
      <caption>响应式表格布局</caption>
      <thead>
         <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
         </tr>
         <tr>
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
         </tr>
         <tr>
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
         </tr>
         <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
         </tr>
      </tbody>
   </table></div>   </body></html>  





结果如下所示：


响应式表格


表单


表单布局


Bootstrap 提供了下列类型的表单布局：


    

  • 垂直表单（默认）
    • 

  • 内联表单
    • 

  • 水平表单
    • 



垂直或基本表单


基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：


    

  • 向父  元素添加 role="form"。
    • 

  • 把标签和控件放在一个带有 class .form-group 的 
     中。这是获取最佳间距所必需的。
    • 

  • 向所有的文本元素 、