Bootstrap 框架-排版

概述

GitHub上这样介绍 bootstrap：

• 简单灵活可用于架构流行的用户界面和交互接口的 html、css、javascript 工具集。
• 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
• 自定义 JQuery 插件，完整的类库，基于 Less 等。

https://getbootstrap.com/

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

标题

Bootstrap 对标题样式进行了显著的优化重置。

副标题，使用 <small> 来制作副标题 ，副标题具有自己独特的样式。

• 行高都是1，而且 font-weight 设置了 normal，变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
• <small> 内的文本字体在 h1-h3 内，其大小都设置为当前字号的 65%；而在 h4-h6 内的字号都设置为当前字号的 75%。

<h1>Bootstrap标题一<small>我是副标题</small></h1>

段落（正文文本）

源码默认样式：

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

p {
 margin: 0 0 10px;
}

强调内容

一个段落p突出显示，可以通过添加类名 lead 实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

<p>我是一个普通的段落，我不需要强调显</p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>

源码样式：

.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> 给文本做突出样式处理。

粗体

粗体就是给文本加粗，在普通的元素中我们一般通过 font-weight 设置为 bold 关键词给文本加粗。在 Bootstrap 中，可以使用 <b> 和 <strong> 标签让文本直接加粗。

斜体

除了可以给元素设置样式 font-style 值为 italic 实现之外，在 Bootstrap 中还可以通过使用标签 <em> 或 <i> 来实现。

强调相关的类

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

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

<div class="text-danger">.text-danger效果</div>

文本对齐风格

Bootstrap 通过定义四个类名来控制文本的对齐风格：

• .text-left：左对齐

• .text-center：居中对齐

• .text-right：右对齐

• .text-justify：两端对齐

列表

在 HTML 文档中，列表结构主要有三种：有序列表、无序列表和定义列表。

<!--无序列表-->
<ul>
    <li>…</li>
</ul>

<!--有序列表-->
<ol>
    <li>…</li>
</ol>

<!--定义列表-->
<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

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

• 普通列表
• 有序列表
• 去点列表
• 内联列表
• 描述列表
• 水平描述列表

无序列表、有序列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用 ul，有序列表使用 ol 标签），在样式方面，Bootstrap 只是在此基础上做了一些细微的优化，只是在 margin 上做了一些调整。在 Bootstrap 中列表也是可以嵌套的。

去点列表

通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

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

除了项目编号之外，还将列表默认的左边内距也清０了。

内联列表

Bootstrap 像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

源码样式：

.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 并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<dl>
    <dt>北京</dt>
    <dd>北京是中国的首都，是政治文化集中地</dd>
    <dt>上海</dt>
    <dd>上海号称东方的巴黎</dd>
</dl>

水平定义列表

水平定义列表就像内联列表一样，Bootstrap 可以给 <dl> 添加类名“.dl-horizontal”给定义列表实现水平显示效果。

代码风格

用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：

1. 使用 <code></code> 来显示单行内联代码，一般是针对于单个单词或单个句子的代码。
2. 使用 <pre></pre> 来显示多行块代码，一般是针对于多行代码（也就是成块的代码）。
3. 使用 <kbd></kbd> 来显示用户输入代码，一般是表示用户要通过键盘输入的内容。

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

注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于 <pre> 代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap 也考虑到这一点，你只需要在 pre 标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为 340px，一旦超出这个高度，就会在 Y 轴出现滚动条。

源码：

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

如果您了解 LESS 或 Sass 这样的 CSS 预定定义处理器，你完全可以通过 code.less 或者 _code.scss 文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。

表格

表格是 Bootstrap 的一个基础组件之一，Bootstrap 为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

• .table：基础表格

• .table-striped：斑马线表格

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

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

• .table-condensed：紧凑型表格

• .table-responsive：响应式表格

表格行的类

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

注意：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给 tr 元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

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

基础表格（table）

对表格的结构，跟我们平时使用表格是一样的：

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

在 Bootstrap 中，对于基础表格是通过类名“.table”来控制。如果在 <table> 元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在 <table> 元素上添加“.table”类名，就可以得到 Bootstrap 的基础表格：

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

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

• 给表格设置了margin-bottom:20px 以及设置单元内距；
• 在 thead 底部设置了一个 2px 的浅灰实线；
• 每个单元格顶部设置了一个 1px 的浅灰实线。

斑马线表格（table-striped）

让表格带有背景条纹效果，在 Bootstrap 中实现这种表格效果并不困难，只需要在 <table class="table"> 的基础上增加类名“.table-striped”即可：

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

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

带边框的表格（table-bordered）

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

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

鼠标悬浮高亮的表格（table-hover）

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

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

紧凑型表格（table-condensed）

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的 内距 padding 的值。那么在 Bootstrap 中，通过类名“table-condensed”重置了单元格内距值。

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

注意，不管制作哪种表格都离不开类名“table”。所以大家在使用 Bootstrap 表格时，千万注意，你的 <table> 元素中一定不能缺少类名“table”。

响应式表格（）

Bootstrap 提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将 <table class="table">置于这个容器当中`，这样表格也就具有响应式效果。

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

Bootstrap 中响应式表格效果表现为：当你的浏览器可视区域小于 768px 时，表格底部会出现水平滚动条。当你的浏览器可视区域大于 768px 时，表格底部水平滚动条就会消失。