Bootstrap(基础)学习笔记1

时间 2019-12-08

原文原文链接

Bootstrap究竟是什么？

欢迎来到Bootstrap课堂，加入高端大气上档次的web前端开发团队。上一小节Bootstrap作了简单的介绍，下面咱们再来了解一下Bootstrap的前世今缘，在右侧是用Bootstrap预设的组件样式，包括按钮、表格、标签、导航等，感兴趣的小伙伴能够先睹为快，后面的章节咱们会对这些组件作详细讲解。javascript

2011年，twitter的“一小撮”工程师为了提升他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和创建，在github上开源以后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化很是快速，官方文档质量极其高(能够说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如屏幕这几个网站页面都是用Bootstrap框架制做的：css

（http://www.ghostchina.com/）html

（http://www.zend.com/）前端

（http://www.uberflip.com/）html5

GitHub上这样介绍 bootstrap：java

☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。css3

☑ 基于html五、css3的bootstrap，具备大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。git

☑ 自定义JQuery插件，完整的类库，基于Less等。github

Bootstrap是否真的很是实用？带着这些问题，咱们将完成接下来的学习旅程——玩转Bootstrap，而且经过Bootstrap构建本身的Web应用程序或者Web网站。web

此课Bootstrap下载等更多信息详见WIKI。

基本的HTML模板

小伙伴们，上一小节的视频课程已经对Bootstrap提供的模板作了详细的介绍，在这一小节中咱们把这个模板代码粘贴过来，以供大家学习查看，大家能够根据实际状况在此基础上进行扩展，只须要确保文件引用顺序一致便可。

如右侧代码编辑器中就是最基本的HTML模板。

咱们来简单解释一下其中几条的重要代码：

bootstrap模板为使IE六、七、8版本（IE9如下版本）浏览器兼容html5新增的标签，引入下面代码文件便可。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE六、七、8版本浏览器兼容css3样式，引入下面代码：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

全局样式

在制做Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库，他并无一味的重置样式，而是注重各浏览器基础表现，下降开发难度。大部分前端人员都具备归零的思想，但实际你会发现，归零以后的样式在开发过程当中会存在着潜在的问题，例如，在全局样式表中将em变成一个普通标记，明明应该是斜体，怎么就没效果了呢？

Bootstrap框架在这一部分作了必定的变动，再也不一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提高一些细节的体验，具体说明以下：

移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局连接颜色，且当连接处于悬浮“:hover”状态时才会显示下划线样式

小伙伴们，大家能够单击查看右侧“style.css”文件，来查看上面所说的全局样式（这个是从下载的boostrap.css中摘取出来的）。

其实Bootstrap的全局样式采用了“normalize.css”，但并无一味的所有使用此重置样式，而是在此基础上进行了一些改良，让其更适合Bootstrap的设计思想。

你能够经过“normalize.less”（LESS版本）或“_normalize.scss”（Sass版本）进行深刻的了解。

标题（一）

Bootstrap和普通的HTML页面同样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在全部浏览器下显示的效果同样，具体定义的规则能够以下表所示：

经过比较能够发现，Bootstrap标题样式进行了如下显著的优化重置：

一、从新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
二、全部标题的行高都是1.1（也就是font-size的1.1倍）,并且文本颜色和字体都继承父元素的颜色和字体。
三、固定不一样级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

标题的具体运用很是简单，和咱们平时运用是同样的，使用<h1>~<h6>标签，分别表示标题一至标题六，h 后面的数字越大，表示级别越小，文本也越小。来看一个简单的效果：右侧代码编辑器中的10-16行的代码。

在Bootstrap中为了让非标题元素和标题使用相同的样式，还特地定义了.h1~.h6六个类名。如右侧代码编辑器中 18-23行代码所示：

对比两个示例的效果图，能够说他们的效果是如出一辙的。

标题（二）

除此以外，咱们在Web的制做中，经常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制做副标题。这个副标题具备其本身的一些独特样式：

一、行高都是1，并且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
二、因为<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}

来简单看其使用方法与最终效果：如右侧代码编辑器中12-17行代码所示。

段落（正文文本）

段落是排版中另外一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

一、全局文本字号为14px(font-size)。

二、行高为1.42857143（line-height），大约是20px(你们看到一串的小数或许会有疑惑，其实他是经过LESS编译器计算出来的，固然Sass也有这样的功能)。

三、颜色为深灰色（#333）；

四、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对咱们中文并不太合适，但在实际项目中，你们能够根据本身的需求进行重置，在此咱们不作过多阐述，咱们回到这里。该设置都定义在<body>元素上，因为这几个属性都是继承属性，因此Web页面中文本（包括段落p元素）如无重置都会具备这些样式效果。

/*源码请查看bootstrap.css文件中第274行~280行*/

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

另外在Bootstrap中，为了让段落p元素之间具备必定的间距，便于用户阅读文本，特地设置了p元素的margin值（默认状况之下，p元素具备一个上下外边距，而且保持一个行高的高度）：
/*源码请查看bootstrap.css文件中第467行~469行*/

p {
 margin: 0 0 10px;
}

若是你对CSS预处理器有所了解，那么你彻底能够根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：

LESS版本：

@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14

Sass版本：

$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14

第一条语句用于设置字体大小，第二条语句用于设置行高。系统默认使用这两个值产生整个页面相应的margin、padding和line-height的值。换句话说，你只须要修改这两个变量的值，而后从新编译，就能够自定义本身的Bootstrap排版样式。（有兴趣的同窗能够尝试一下，此处对于LESS或Sass版本运用不作过多阐述）。

强调内容

在实际项目中，对于一些重要的文本，但愿突出强调的部分都会作另外的样式处理。Bootstrap一样对这部分作了一些轻量级的处理。

若是想让一个段落p突出显示，能够经过添加类名“.lead”实现，其做用就是增大文本字号，加粗文本，并且对行高和margin也作相应的处理。用法以下：

<p>我是普通文本，个人样子长成这样我是普通文本，个人样子长成这样我是普通文本，</p>
<p class="lead">我是特地要突出的文本，个人样子成这样。我是特地要突出的文本，个人样子长成这样。</p>

效果查看最右侧结果窗口。

“.lead”对应的样式以下：
/*源码查看bootstrap.css文件第470行~480行*/

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
  }
}

除此以外，Bootstrap还经过元素标签:<small>、<strong>、<em>和<cite>给文本作突出样式处理。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {
  font-weight: bold; /*文本加粗*/
}

/*源码查看bootstrap.css文件第481行~第484行*/

small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差很少12px*/
}

/*源码查看bootstrap.css第485行~第487行*/

cite {
font-style: normal;
}

粗体

粗体就是给文本加粗，在普通的元素中咱们通常经过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可使用<b>和<strong>标签让文本直接加粗。
/*源码查看bootstrap.css文件第55行~第58行*/

b,strong {
  font-weight: bold; /*文本加粗*/
}

例如，下面的代码使用<strong>标签订义了强调文本：

<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知识。</p>

斜体

在排版中，除了用加粗来强调突出的文本以外，还可使用斜体。斜体相似于加粗同样，除了能够给元素设置样式font-style值为italic实现以外，在Bootstrap中还能够经过使用标签<em>或<i>来实现。
例如，下面的代码使用了<em>和<i>标签订义了强调文本：

<p>我在慕课网上跟<em>大漠</em>一块儿学习<i>Bootstrap</i>的使用。我必定要学会<i>Bootstrap</i>。</p>

效果查看最右侧结果窗口。

强调相关的类

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（相似前面说的“.lead”）,这些强调类都是经过颜色来表示强调，具本说明以下：

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

具本源码查看bootstrap.css文件第500行~第532行：

.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}

咱们来看看这些强调类对应的效果：查看右侧代码编辑器。

文本对齐风格

在排版中离不开文本的对齐方式。在CSS中经常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操做，方便使用，Bootstrap经过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

具体源码查看bootstrap.css文件第488行~第499行：

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

例以下面的四行代码，分别定义文本的四种不一样的对齐风格：

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

特别声明：目前两端对齐在各浏览器下解析各有不一样，特别是应用于中文文本的时候。因此项目中慎用

列表--简介

在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明以下：
无序列表

<ul>
    <li>…</li>
</ul>

有序列表

<ol>
    <li>…</li>
</ol>

定义列表

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表

接下来，咱们一块儿来学习Bootstrap提供的这六种列表的使用方法。

列表--无序列表、有序列表

无序列表

无序列表和有序列表使用方式和咱们平时使用的同样（无序列表使用ul，有序列表使用ol标签），在样式方面，Bootstrap只是在此基础上作了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行：

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

从源码上咱们能够得知，Bootstrap对于列表，只是在margin上作了一些调整。咱们来看一个简单的示例(右侧代码编辑器10-16行)。

列表嵌套

在Bootstrap中列表也是能够嵌套的，如右侧编辑器中的代码就是有序列表（25-35行）。

列表--去点列表

小伙伴们能够看到，在Bootstrap中默认状况下无序列表和有序列表是带有项目符号的，但在实际工做中不少时候，咱们的列表是不须要这个编号的，好比说用无序列表作导航的时候。Bootstrap为众多开发者考虑的很是周道，经过给无序列表添加一个类名“.list-unstyled”,这样就能够去除默认的列表样式的风格。
/*源码请查看bootstrap.css文件第580行~第583行*/

.list-unstyled {
padding-left: 0;
list-style: none;
}

从示例中能够看出，除了项目编号以外，还将列表默认的左边内距也清０了。

具体使用，咱们来看简单的两个示例（代码编辑器11-45行）

列表--内联列表

Bootstrap像去点列表同样，经过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，并且去掉项目符号（编号），保持水平显示。也能够说内联列表就是为制做水平导航而生。
/*源码查看bootstrap.css文件第584行~第593行*/

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

看个示例：

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

列表--定义列表

对于定义列表而言，Bootstrap并无作太多的调整，只是调整了行间距，外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

对于定义列表使用，其实很简单，与咱们之前的使用定义列表的方法是相同的：

列表--水平定义列表

水平定义列表就像内联列表同样，Bootstrap能够给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具备水平定义列表效果。其实现主要方式：
一、将dt设置了一个左浮动，而且设置了一个宽度为160px
二、将dd设置一个margin-left的值为180px，达到水平的效果
三、当标题宽度超过160px时，将会显示三个省略号

其用法以下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
    <dt>慕课网</dt>
    <dd>一个专业的，真心实意在作培训的网站</dd>
    <dt>我来测试一个标题，我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>

宽屏下的效果（屏幕大于768px）：

当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。

注：结果能够在最右侧结果窗口中看到（鼠标滑过结果窗口时会出现“全屏”按钮）

代码（一）

本节内容相对来讲比较简单，通常在我的博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
一、使用<code></code>来显示单行内联代码
二、使用<pre></pre>来显示多行块代码
三、使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来：
一、LESS版本，请查阅code.less文件
二、Sass版本，请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，因为代码太长，此处不一一列举。

在使用代码时，用户能够根据具体的需求来使用不一样的类型：
一、<code>：通常是针对于单个单词或单个句子的代码
二、<pre>：通常是针对于多行代码（也就是成块的代码）
三、<kbd>:通常是表示用户要经过键盘输入的内容

虽然不一样的类型风格不同，但其使用方法是相似的。
code风格：

<div>Bootstrap的代码风格有三种：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre风格：

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

kbd风格：

<div>请输入<kbd>ctrl+c</kbd>来复制代码，而后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

无论使用哪一种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。并且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好，例如查看右侧代码编辑器上的15-19行。

代码（二）

正如前面所示，<pre>元素通常用于显示大块的代码，并保证原有格式不变。但有时候代码太多，并且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只须要在pre标签上添加类名“.pre-scrollable”，就能够控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
/*源码请查看bootstrap.css第731行~第734行*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

友情提示：若是您了解LESS或Sass这样的CSS预约定义处理器，你彻底能够经过code.less或者_code.scss文件修改样式，而后从新编译，你就能够获得属于本身的代码样式风格。

表格

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程当中，只须要添加对应的类名就能够获得不一样的表格风格，在接下来的内容中，咱们会详细介绍Bootstrap的表格使用。

一样的，若是你对CSS预处理器熟悉，你可使用Bootstrap提供的预处理版本：
☑ LESS版本，对应的文件是 tables.less
☑ Sass版本，对应的文件是 _tables.scss

若是你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中能够查阅到全部有关于table的样式代码。因为代码太长，此处不一一列举。

刚已经说了，Bootstrap为表格不一样的样式风格提供了不一样的类名，主要包括：

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

表格--表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不一样的类名，每种类名控制了行的不一样背景颜色，具体说明以下表所示：

其使用很是的简单，只须要在<tr>元素中添加上表对应的类名，就能达到你本身须要的效果：

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

对应的源码，请查看bootstrap.css文件中第1484行~第1583行。

特别提示：除了”.active”以外，其余四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也作了相应的悬浮状态的样式设置，因此若是须要给tr元素添加其余颜色样式时，在”.table-hover”表格中也要作相应的调整。

注意要实现悬浮状态，须要在<table>标签上加入table-hover类。

以下代码：

<table class="table-hover">

表格--基础表格

你们对表格并不太陌生，但对于Bootstrap中的表格如何使用，或许还有点陌生，接下来的内容，将根据不一样的表格类型向你们介绍Bootstrap表格的实际使用方法。
对表格的结构，跟咱们平时使用表格是同样的：

<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
     …
</tbody>
</table>

如无特别声明，下面介绍表格类型的时候，结构都是相似上面的代码。
基础表格
在Bootstrap中，对于基础表格是经过类名“.table”来控制。若是在<table>元素中不添加任何类名，表格是无任何样式效果的。想获得基础表格，咱们只须要在<table>元素上添加“.table”类名，就能够获得Bootstrap的基础表格：

<table class="table">
…
</table>

Bootstrap的基础表格，大体长得像下图所示的样子：

主要源码查看bootstrap.css文件第1402行～第1441行，因为代码太长，此处不一一列举。

“.table”主要有三个做用：

☑ 给表格设置了margin-bottom:20px以及设置单元内距

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每一个单元格顶部设置了一个1px的浅灰实线

表格--斑马线表格

有时候为了让表格更具阅读性，须要将表格制做成相似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只须要在<table class="table">的基础上增长类名“.table-striped”便可：

<table class="table table-striped">
…
</table>

其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。其实现原理也很是的简单，利用CSS3的结构性选择器“:nth-child”来实现，因此对于IE8以及其如下浏览器，没有背景条纹效果。

源码请查看bootstrap.css文件第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

表格--带边框的表格

基础表格仅让表格部分地方有边框，但有时候须要整个表格具备边框效果。Bootstrap出于实际运用，也考虑这种表格效果，即全部单元格具备一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法相似，只须要在基础表格<table class="table">基础上添加一个“.table-bordered”类名便可：

<table  class="table table-bordered">
  …
</table>

样式以下图所示：

其源码能够查看bootstrap.css文件第1450行~第1464行：

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每一个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

表格--鼠标悬浮高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
鼠标悬停高亮的表格使用也简单，仅须要<table class="table">元素上添加类名“table-hover”便可：

<table class="table table-hover">
…
</table>

效果图以下：

从效果图中能够看出，当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色。

鼠标悬浮高亮的效果主要是经过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。
其源码请查看bootstrap.css文件中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

注：其实，鼠标悬浮高亮表格，能够和Bootstrap其余表格混合使用。简单点说，只要你想让你的表格具有悬浮高亮效果，你只要给这个表格添加“table-hover”类名就行了。例如，将前面介绍的几种表格结合使用：

<table class="table table-striped table-bordered table-hover">
…
</table>

表格--紧凑型表格

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其余表格的内距更小。换句话说，要实现紧凑型表格只须要重置表格单元格的内距padding的值。那么在Bootstrap中，经过类名“table-condensed”重置了单元格内距值。
紧凑型表格的运用，也只是须要在<table class="table">基础上添加类名“table-condensed”：

<table class="table table-condensed">
…
</table>

效果图以下：

从上面效果图能够看出，Bootstrap中紧凑型的表格与基础表格差异不大，由于只是将单元格的内距由8px调至5px。

源码请查看bootstrap.css文件第1442行~第1449行：

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,

表格--响应式表格

随着各类手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声愈来愈高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，而且此容器设置类名“.table-responsive”,此容器就具备响应式效果，而后将<table class="table">置于这个容器当中，这样表格也就具备响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例以下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

运行效果以下：

（宽屏效果）

（窄屏效果）

.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px; }

正如上一小节中悬浮高亮表格中所讲解的，在Bootstrap中制做表格中，能够将上面几种表格样式结合在一块儿使用，从而制做出更为精美的表格。结合的方法也很简单，就是在<table class="table">基础上添加你须要的表格样式类型。

另外从上面的示例中你们可能也发现了，无论制做哪一种表格都离不开类名“table”。因此你们在使用Bootstrap表格时，千万注意，你的<table>元素中必定不能缺乏类名“table”。