Bootstrap 一篇就够快速入门&使用（中文文档）

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

在线实例

本站的 Bootstrap 教程包含了上百个实例。

你可以使用我们的在线编辑器在线编辑代码，并点击运行按钮查看结果。

Bootstrap 实例

<div class="container"> <div class="jumbotron"> 
<h1>我的第一个 Bootstrap 页面</h1> <p>重置窗口大小，查看响应式效果！</p> </div> 
<div class="row"> <div class="col-sm-4"> <h3>Column 1</h3>
 <p>学的不仅是技术，更是梦想！</p> 
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> </div> 
<div class="col-sm-4"> <h3>Column 2</h3> <p>学的不仅是技术，更是梦想！</p>
 <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> 
</div> <div class="col-sm-4"> <h3>Column 3</h3>
 <p>学的不仅是技术，更是梦想！</p>
 <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p> </div> </div> </div>

Bootstrap 实例2

<div class="table-responsive">
 <table class="table table-striped table-bordered">
 <thead> <tr> <th>#</th> <th>Name</th> <th>Street</th> </tr> 
</thead> <tbody> <tr> <td>1</td> <td>Anna Awesome</td> 
<td>Broome Street</td> </tr> <tr> <td>2</td> <td>Debbie Dallas</td>
 <td>Houston Street</td> </tr> <tr>
 <td>3</td> <td>John Doe</td> <td>Madison Street</td> 
</tr> </tbody> </table> </div>

二、Bootstrap 环境安装

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。

下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构

预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

实例

<!DOCTYPE html>
 <html>
 <head> <title>Bootstrap 模板</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- 引入 Bootstrap --> <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js">
</script> </body> </html>

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览章节详细讲解。

实例

现在让我们尝试使用Bootstrap输出"Hello, world!"：

实例

<h1>Hello, world!</h1>

Staticfile CDN 推荐

国内推荐使用 Staticfile CDN 上的库：

<!-- 新 Bootstrap 核心 CSS 文件 -->
 <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

此外，你还可以使用以下的 CDN 服务：

国际推荐使用：https://cdnjs.com/

三、关于Boostrap的中文文档

Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。

下载：

(1) Bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

(2) jQuery: jQuery

(3.3.1: GitHub - jquery/jquery at 3.3.1)

(3) Popper.js: Releases · floating-ui/floating-ui · GitHub

(下拉菜单dropdowns、提示组件popovers、冒泡组件等都提依赖于Popper.js)

IE浏览器支持：

支持Internet Explorer 10及更高版本，不支持IE9（即使大多兼容，我们依然不推荐）。请注意，IE10中不完全支持某些CSS3属性和HTML5元素，或者需要前缀属性才能实现完整的功能。

如果您需要IE8-9支持，请使用Bootstrap 3 ，它是我们代码中最稳定的版本，官方不再发布新版，但仍然支持严重错误修复和文档维护。

(更多兼容性参考：Browsers and devices · Bootstrap)

重要提示：

1. 响应式meta标签

移动设备优先, Bootstrap 4 不同于历史版本，它首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有的设备的渲染和触摸效果，必须在网页的<head>区添加响应式的视图标签，简要的说就是优先引入下面一行。

2. HTML5 doctype头部规范

HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（对搜索引擎和浏览器友好）。

<!doctype html>

...

</html>

布局

Container容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

(1) .container容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅）：

</div>

(2) .container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）：

</div>

栅格系统

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

(分界点大小：576px、768px、992px、1200px)

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。Bootstrap4是完全基于flexbox流式布局构建的，完全支持响应式标准。

111

</div>

222

</div>

333

</div>

444

</div>

自动布局列

等宽布局

所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

1-1

</div>

1-2

</div>

2-1

</div>

2-2

</div>

2-3

</div>

设置一列宽度

1-1

</div>

1-2(中间占6格,其余6格两边等分)

</div>

1-3

</div>

2-1

</div>

2-2(中间占5格,其余7格两边等分,奇偶都能)

</div>

2-3

</div>

可变宽度的弹性空间

用 .col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

1-1

</div>

1-2

</div>

1-3

</div>

等宽多行

创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。

1-1

</div>

1-2

</div>

<!-- </div>

2-1

</div>

2-2

</div>

响应式的class选择器

混合布局

111

</div>

222

</div>

333

</div>

444

</div>

555

</div>

666

</div>

777

</div>

888

</div>

对齐

垂直对齐

1. 在row上加 .align-items-start/center/end

111

</div>

222

</div>

333

</div>

2. 在col上加 .align-self-start/center/end

111

</div>

222

</div>

333

</div>

水平对齐

在row上加 .justify-content-start/center/end/around/between

111

</div>

222

</div>

间隙沟槽清除

在row上加 .no-gutters

111

</div>

222

</div>

重排序

Class顺序重定义

使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-12 12个级别的顺序，在五种浏览器和设备宽度上都能生效。

还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。

111

</div>

222

</div>

333

</div>

列偏移

可以使用两种方式进行列偏应：

1、使用响应式的.offset-*栅格偏移方法。

2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。

1. class偏移选择器

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。

111

</div>

222

</div>

2. Margin移动布局

在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。

111

</div>

222

</div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个（其实，没有要求你必须占满12列-否则应对页面进行重新规划布局）。

111

</div>

222

</div>

333

</div>

禁用响应式

(1) 设定容器宽度。如.container {width: 980px;}。

(2) 栅格布局使用 .col-*（最小设备栅格类）的样式来代替.col-sm-*、.col-md-*、.col-lg-*、.col-xl-*，这样就能确保栅格能够在所有设备中展开。

(3) 移除此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。

(4) 如果使用了导航条，需要移除所有导航条的折叠和展开行为。

响应式的分界点

Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries ）方法，为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

//Extra small devices (portrait phones, less than 576px)

// No media query since this is the default in Bootstrap

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

<style>

.topTt{font-size:12px;}

@media(min-width: 576px){

.topTt{font-size:20px;}

}

@media(min-width: 992px){

.topTt{font-size:30px;}

}

</style>

偶尔也会使用其它方面的媒体查询（指定屏幕的尺寸或更小）：

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)

@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)

@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)

@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)

// No media query since the extra-large breakpoint has no upper bound on its width

以及使用最小和最大断点宽度定位单个屏幕尺寸段的媒体查询和混合定义：

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

内容

排版

标题

兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现。

CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感）。

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

<p class="h1">h1. Bootstrap heading</p>

<p class="h2">h2. Bootstrap heading</p>

<p class="h3">h3. Bootstrap heading</p>

<p class="h4">h4. Bootstrap heading</p>

<p class="h5">h5. Bootstrap heading</p>

<p class="h6">h6. Bootstrap heading</p>

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本。

<h3>

主标题主标题

<small class="text-muted">副标题副标题</small>

</h3>

显式标题

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式。

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>

Lead中心内容

通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。

<p>苹果苹果苹果苹果</p>

<p class="lead">香蕉香蕉香蕉香蕉</p>

<p>橘子橘子橘子橘子</p>

<p>梨子梨子梨子梨子</p>

文本内联元素

del能更形象的描述意思。ins 代表被插入的文字，u 代表有下划线。

strong、em等有强调作用，有利于seo(搜索引擎优化)。

<p>看看我是不是<mark>高亮</mark>文本</p>

<p>看看我是不是<span class="mark">高亮</span>文本</p>

<p><small>小号字小号字小号字</small></p>

<p><span class="small">小号字小号字小号字</span></p>

<p><del>删除线删除线删除线</del></p>

<p><s>删除线删除线删除线</s></p>

<p><ins>下划线下划线下划线</ins></p>

<p><u>下划线下划线下划线</u></p>

<p><strong>粗体粗体粗体</strong></p>

<p><b>粗体粗体粗体</b></p>

<p><em>斜体斜体斜体</em></p>

<p><i>斜体斜体斜体</i></p>

abbr缩略语

<p><abbr title="请填写您的邮箱" class="initialism">email</abbr></p>

blockquote 来源备注与引用

引用文档中另一个来源的内容块，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用。为了显示直接引用，我们推荐使用<p>作为子级包裹容器。

底部来源：<footer class="blockquote-footer"> 用于标识来源，一般用于页脚（所以有*-footer)，然后配合 <cite>使用。

(<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。)

对齐处理：如果需要居中对齐或右对齐，使用.text-center、.text-right方法配合即可。

<p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>

<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>

</blockquote>

列表

列表样式初始化

在ul(或ol）上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距（只针对直接子元素），这只生效于在直接子列表项目上，不影响你嵌套的子列表。

<li>

<ul>

</ul>

</li>

</ul>

分行或单行多列并排

使用.list-inline 、 .list-inline-item结合，可以实现列表逐行显示（默认不引用且无父元素影响也是逐行显示）、或单行并多列并排（遵循从左对右的原则、并清除margin方法）。

<ul>

</ul>

</ul>

dl表格式水平描述

使用BootStrap栅格系统的预定义类（或者说语义化mixins），可以水平对齐条目和描述。对于较长的条目，你可以视情况添加一个.text-truncate类，从而用省略号截断文本。

<dt class="col-sm-2 text-truncate">是否有过带团队的经验以及团队遇到过的问题和解决办法</dt>

<dd class="col-sm-10">有过6年带领团队开发经验</dd>

</dl>

</dd>

</dl>

代码

内联代码

用<code>包裹内联代码片断，勿忘转义HTML尖括号。

示例： <code><section></code> 代码嵌入到文本段中。

代码块

<pre><code><p>Sample text here...</p>

<p>And another line of sample text here...</p>

</code></pre>

Var变量

推荐使用 <var>标签包裹标示变量。

y = mx + b <br />

用户输入(键盘动作提示)

使用 <kbd> 标签，标明这是一个键盘输入操作。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

示例标注

<samp> 标签代表这是一个示例。

这是一个代码示例. <br>

<samp>这是一个代码示例.</samp>

图片

响应式图片&缩略图处理

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

您可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式（你也可以使用系统提供的边隙间距方法，如.p-1再加上边框颜色定义达成）。

</div>

</div>

</div>

图像对齐处理

对于.block属性的块状图片，我们也可以使用浮动定义规范或文字对齐规范，来实现对图像的对齐、浮动控制，带.block块属性的图片，可以自动获得 .mx-auto 的位置对齐属性。

</div>

</div>

<!-- <div class="text-center" style="border: 1px solid #F00;">

</div> -->

Html 5 标准之Picture元素

HTML5标准提供了一个全新的<picture> 元素，它可以为 <img>指定多个<source> 定义，请确保在<img> 标签里使用使用.img-* CSS样式进行定义绑定，而不是仅仅认为引用了 <img> 就达成了。

</picture>

图文框

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。

文字对齐控制：结合我们的文本实用工具可以轻松对齐图文框的说明文字（比如右对齐、左对齐，只要引用.text-*方法即可）。

<figcaption class="figure-caption">A caption for the above image.</figcaption>

</figure>

</div>

<figcaption class="figure-caption text-center">A caption for the above image.</figcaption>

</figure>

</div>

<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>

</figure>

</div>

表格

(1) 在第三方部件例如日历和日期选择器中广泛使用表格，我们设计了视情况需要加入的表格类。只需要向某个<table>添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。

使用最基本的表格标记，下面是Bootstrap中 .table表格的样式（基本样式）， Bootstrap 4继承了所有的表格样式，这意味着任何嵌套表格都将以与父类型相同的方式进行样式化。

(2) 你可使用.table-dark class选择器来产生颜色反转对比效果，即深色背景和浅色文本。

Head表头处理：与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

(3) 条纹状表格：使用 .table-striped 样式定义 <tbody>，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。(可同.table-dark结合使用)

(4) 表边框处理：添加 .table-bordered 类可以产生表格边框与间隙系统。(同)

无边框：添加.table-borderless无边界表格。(同)

(6) 行悬停效果：将 .table-hover 定义上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。(同)

(7) 紧缩表格：添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。(同)

(8) Captions表格辅助标题：<caption> 标签如同一个表格的标题，它默认是隐藏的，可以协助屏幕阅读器用户找到表格、了解表格内容，且决定是否需要阅读它。

<thead>

<tr>

<th>First Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Jacob</td>

<td>Thornton</td>

</tr>

<tr>

<td>Larry</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

语义状态化

使用语义状态样式对表格逐行或单个单元格进行着色表达。(On rows or On cells (`td` or `th`))

<thead>

<tr>

<th>Column heading</th>

</tr>

</thead>

<tbody>

<th>Active</th>

<td>Column content</td>

</tr>

<tr>

<th>Default</th>

<td>Column content</td>

</tr>

<th>Primary</th>

<td>Column content</td>

</tr>

<!-- <tr>

<th class="table-primary">Primary</th>

<td class="table-primary">Column content</td>

<td>Column content</td>

</tr> -->

<th>Secondary</th>

<td>Column content</td>

</tr>

<th>Success</th>

<td>Column content</td>

</tr>

<th>Danger</th>

<td>Column content</td>

</tr>

<th>Warning</th>

<td>Column content</td>

</tr>

<td>Column content</td>

</tr>

<th>Light</th>

<td>Column content</td>

</tr>

<td>Column content</td>

</tr>

</tbody>

</table>

深色表格上没有固定的背景，你可以使用文字或背景通用样式获得类似的样式：

<thead>

<tr>

<th>Column heading</th>

</tr>

</thead>

<tbody>

<th>primary</th>

<td>Column content</td>

</tr>

<!-- <tr>

<th class="bg-primary">primary</th>

<td class="bg-primary">Column content</td>

<td>Column content</td>

</tr> -->

<th>success</th>

<td>Column content</td>

</tr>

<th>warning</th>

<td>Column content</td>

</tr>

<th>danger</th>

<td>Column content</td>

</tr>

<td>Column content</td>

</tr>

</tbody>

</table>

响应式表格

当表格想要始终呈现水平滚动，可在.table上加入.table-responsive获得响应式表现，从而支持任何viewport窗口。也可以在.table上，加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。

<thead>

<tr>

<th>HeadingHeadingHeading</th>

</tr>

</thead>

<tbody>

<tr>

<td>CellCellCell</td>

</tr>

</tbody>

</table>

</div>

公共样式

边框

使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或任何其他元素。

边框

<style>

span{display:inline-block;width:75px;height:75px;margin:5px;border:1px solid;background:#F5F5F5;}

</style>

最低0.47元/天解锁文章

Bootstrap 一篇就够 快速入门&使用（中文文档）

一、Bootstrap 简介

什么是 Bootstrap？

历史

为什么使用 Bootstrap？

Bootstrap 包的内容

在线实例

Bootstrap 实例

更多实例

Bootstrap 实例2

二、Bootstrap 环境安装

下载 Bootstrap

文件结构

预编译的 Bootstrap

Bootstrap 源代码

HTML 模板

实例

实例

实例

Staticfile CDN 推荐

三、关于Boostrap的中文文档

布局

Container容器

栅格系统

自动布局列

响应式的class选择器

对齐

重排序

列嵌套

禁用响应式

响应式的分界点

内容

排版

标题

显式标题

Lead中心内容

文本内联元素

abbr缩略语

blockquote 来源备注与引用

列表

代码

内联代码

代码块

Var变量

用户输入(键盘动作提示)

示例标注

图片

响应式图片&缩略图处理

图像对齐处理

Html 5 标准之Picture元素

图文框

表格

语义状态化

响应式表格

公共样式

边框

边框

Bootstrap 一篇就够快速入门&使用（中文文档）