Bootstrap 三大核心内容的基础，即基础的 CSS 布局语法。其包括基础排版（Typography）、代码（Code）、表 格（Tables）、表单（Forms）、按钮（Buttons）、图片 （Images）、辅助类（Helper Classes）和响应式设计 （Responsive utilities）。

本节目录：

• 概述
• 基础排版
• 代码
• 表格
• 表单
• 按钮
• 图像
• 辅助样式

概述

HTML5 文档类型

由于 Bootstrap 使用了 HTML5 特定的 HTML 元素和 CSS 属性，所 以使用 Bootstrap 的时候，所有的 HTML 文件都需要在其顶部引用 HTML5 的 DOCTYPE 属性

移动先行

在移动设备浏览器上，通过为 viewport meta 标签添加的 userscalable=no 可以禁用其缩放（zooming）功能。

响应式图片

为了能对图片的大小进行自适应缩放，Bootstrap 在 3.x 版里添 加了一个.img-responsive 样式，本质是为图片设置了 maxwidth: 100%；和 height: auto；属性

排版与链接

Bootstrap 为网页设置了一些基本的全局样式、排版和链接风格

1. 在 body 元素上取消了 margin 设置，改为默认为 0，margin:0。
2. 在 body 元素上设置了背景色为白色，background-color: #ffffff。
3. 在布局排版方面，字体、字体大小、行间距使用的标准值

居中容器

一个页面（或元素）要居中显示，可以在外部容器上简单应 用.container 样式即可。由于栅格系统依赖于外部容器的大小设 置，所以默认情况下 container 样式有一个 max-width 属性用于限 制栅格系统的最大宽度

基础排版

标题

bs 为传统的标题元素 h1～h6 重新定义了标准的样式， 使得在所有浏览器下显示效果都一样。

bs 还提供了 h 类的样式， 如.h1 的样式比 h1 标签的样式, 不同的是没有定义 margin-top 和 margin-bottom。

文本

bs 为全局设置的字体大小。

small、strong、em、cite

容器内的文本对齐方式：text-left、text-center、text-right、text-justify

缩略语：abbr(鼠标 hover 显示 title 值)

列表

bs 提供了 6 种形式的列表，分别是：普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。

普通列表 (ul)、有序列表 (ol)、去点列表 (list-unstyled)、描述列表、水平描述列表，只是优化，效果不明显。

内联列表 (list-inline) 将列表项水平显示。类似水平菜单效果

代码

代码样式通常在需要引用代码的地方出现

单行的内联代码需要使用 code 元素包含

<kbd> 元素包含的内容是表示该内容需要用户键盘输入，所 以一般是设置成 input 的效果，用法和 code 类似

pre 元素一般用于显示大块的代码段，并保证原有格式不变。 另外可以在 pre 元素上应用.pre-scrollable 样式，则可以控制该区域 最大高度为 340 像素，并可以在 y 方向滚动

表格

bs 提供了 1 种基础.table 样式、4 种附加样式（.table-striped、.table-bordered、.table-hover、.table-condensed）以及一个支持响应式布局的.table-responsive 容器样式。

.table-striped 样式，其添加了隔行加背景色的设置。

.table-bordered 为表格所有的单元格提供了 1 条 1 像素宽的边框

.table-hover 当鼠标移动上去时对应的部分能够换个颜色的话，那就会显得很有动感，并且有高亮显示的功能

.table-condensed 紧凑型表格，即表格的显示比普通表格稍微紧凑一些， 实现原理是减少单元格的内边距

.tableresponsive 样式包装在.table 样式外部即可创建响应式表格，其会 在小屏幕设备上（小于 768 像素）水平滚动

bs 为表格的 tr 元素提供了 5 种基本的颜色样式（active success info warning danger），用于控制 tr 的背景颜色。

表单

bs 框架中的核心内容，表单提供了丰富的样式（基础、内联、横向）。

先了解 2 个基本样式

form-control: 设置为 100%

form-group: 设置下边距，保证每个控件显示。

如果在 select、input、textarea 元素上应用了.form-control 样式，显示的宽度会变成 100%，并且 placeholder 的颜色都设置成了 #999999

内联表单

有的时候，我们可能需要一个所有控件都在一行中的表单，只需要在普通的 form 元素上应用一个.form-inline 样式

横向表单

与内联表单的使用方式不太一样，其不能在 form 元素上简单应用一个.form-horizontal 样式。

由于.form-horizontal 样式改变了.form-group 的行为，将其表现得像栅格系统中的行（row）一样，因此就无需再使用.row 样式了。

表单控件

对现有 HTML5 语法下的 input 都进行了支持（如 type 为 text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel 和 color 的元素）

input 元素，必须声明 type 类型，否则可能会引 起其他问题

select 元素，多行选择设置 mulitiple 属性为 multiple

textarea 元素，定义了 rows 数字即可定义大文本框的高度，定义 cols 可以定义大文本框的宽度

checkbox 和 radio 元素，是 input 元素里两个非常特殊的 type，由于经常搭配文字显示，bs 做了标准显示

当 checkbox 和 radio 内容很少时, 需要横向显示的时候，可以用 checkbox-inline 和 radio-inline

控件状态

bs 提供了 3 种状态的样式可供使用，分别是：焦点状态（默认提供）、禁用状态、验证提示状态。

使用方式和普通的 disabled 一样，只需要在禁用元素上使用 disabled 属性即可。<input ... disabled>

fieldset 如果使用了 disabled 属性时，内部的控件也将会禁用。

在填写表单的时候，经常要提示用户其输入内容是否合法，bs 提供了.has-warning、.has-error、.has-success 三种样式。

（父容器上的 has-feedback 样式用于 设置定位方式；小图标元素上的 form-control-feedback 样式用于 设置图标的显示大小）

控件大小

bs 提供了两个样式用于设置稍大或者稍小的 input 输入框，分别是：.input-lg 和.input-sm

按钮

按钮样式，定义了标准 5 种颜色、1 个默认和一个 link 按钮。

按钮大小，定义 3 种.btn-lg、.btn-sm、.btnxs。.btn-block 样式可以充满父元素，不随文字符宽度变化。

多标签，支持 button a input3 个标签。为了兼容性，非常建议使用 button。

支持 active 和 disabled 状态。

图像

提供了 3 种风格效果, 在 img 标签上应用.img-rounded、.img-circle、.img-thumbnail 样式即可

使用过程中需要注意，上述样式没有控制图片的显示大小，所以需要额外应用样式或者限制父元素大小来控制图片显示大小.

IE8 及以下版本不支持.img-rounded 和.img-circle 样式特效。

辅助样式

文本

文本样式，bs 提供了 1 个灰色，和 5 个基本标准样式的颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿 （text-success）、信息蓝（text-info）、警告黄（textwarning）、危险红（text-danger）

文本背景样式，bs 还提供了上面的 5 种文本颜色样式对应（muted 样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄 （bg-warning）、危险红（bg-danger）

辅助图标

关闭图标（右浮动）

向下箭头

浮动

对于内容浮动，一般会有 3 种需求 （左浮动、右浮动、居中对齐），分别对应了 pull-left、pull-right 和 center-block 样式

响应式样式

利用媒体查询的特性，对特定的情况进行隐藏或显示的设置。

.visible- 开头的样式表示仅 在某尺寸时显示，其他都隐藏；而.hidden 样式则表示仅在某尺寸 时隐藏，其他都显示。

如：

提供了分别对浏览器和打印机进行隐藏和显示的设置　　visible-print 和 hidden-print

只在大屏幕下显示　　visble-lg