HTML5文档类型
Bootstrap 使用的某些HTML元素与CSS属性都需要文档声明是HTML5文档类型。
移动设备优先
Bootstrap 是移动设备优先的，对移动设备的样式融入到了框架的方方面面。
为确保绘制和缩放效果，要在<head>标签中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width,initial-scale=1">移动设备浏览器上，为视口设置meta属性为user-scalable=no可以禁止用户缩放。
容器
容器有两种：流体容器（container-fluid） 和固体容器 （container）
两种容器之间不能相互嵌套。
固体容器固定宽度并且支持响应式，有三个阈值，在不同尺寸视窗下显示不同的固定宽度。
| 视窗尺寸 | 容器大小 | 备注 |
|---|---|---|
| >= 1200px | width = 1170px; | PC |
| >= 992px && < 1200px | width = 970px; | 小PC |
| >=768px && < 992px | width = 750px; | 平板 |
| < 768px | auto | width = 100% 和 width = auto不同 |
将最外面的布局div class改为 .container-fluid，就可以将容器设置为流体容器，宽度为100%。
栅格系统
栅格系统通过行(row)与列(column)来进行页面的布局。
行必须包含在 容器 中.
行在水平方向创建一组列，每一行将页面宽等均的分为12列。
页面内容要放在列中，并且只有列可以作为行的直接子元素。
为列 设置 padding 属性，可以为列与列之间设置间距，为 row 设置负值 margin ，抵消为容器设置的 padding 间接为行抵消了 padding 。
如果一行中包含的列大于12，多余的列会另起一行。
在没有给大屏幕设置栅格类的情况下，小屏幕的栅格类可以在大屏幕下起作用。
栅格系统对不同尺寸屏幕有不用的前缀
| 属性 | < 768px(超小设备，手机) | >= 768px（平板小型设备） | >= 992px（中型PC） | >=1200px(大型pc) |
|---|---|---|---|---|
| 最大容器宽度 | auto | 750px | 970px | 1170px |
| Class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 最大列宽 | auto | 60px | 78px | 95px |
| 槽宽 | 30px | 30px | 30px | 30px |
槽宽：每列与内容之间的间隙，30px ，平均到两边，每边15px 。
从小到大是兼容的，但是大分辨率在小分辨率下是会从水平排列变垂直排列
列偏移： .col-xx-offset-x ，列会向右偏移设定的多少列。
列排序：.col-md-push-* 和 .col-md-pull-*类可以很容易的改变列的顺序。
排版
除了标题标签<h1><h6>之外，还提供了.h1 到.h6 类，可以给内联元素提供标题样式。
- 标题内包含
<small>标签或添加.small类的元素。可以添加副标题。 .lead类突出显示段落。- <head> 标签，高亮内联文本。
- <del>被删除的文本。
- <s>无用文本。类似于删除文本。
- <ins> 插入文本，文本底部添加下划线。
- <u>带下划线文本。
- <strong>强调一段文本，font-weight。
- <i>斜体，主要用于发言技术词汇 ，<b> 高亮单词或短语。
- 文本对齐通过
.text-*,left、center、right、justify、nowrap。 - 改变大小写，
.text-lowercase,.text-uppercase,.text-capitalize（每个单词头大写）。 - 缩略语 ：
<abbr title="attribute">attr<abbr>. 页面显示标签内的内容，鼠标移到attr 上会显示title的内容。 - 为缩略语添加
.initialism类，可以让 font-size 变小。 - 地址： <address></address>标签。
- 文档引用内容 用<blockquote></blockquote> 标签。直接引用建议用 <p> 标签包住。
- 多样式引用：引用来源添加<footer> 标签 ，来源名称包裹进<cite> 标签。
- 引用内容默认左对齐，为 <blockquote>添加
.blockquote-reverse类可以右对齐。
列表
无序列表和有序列表，添加.list-unstyled 列表无样式，作用在直接子元素上。
内联列表 通过类.list-inline，将所有元素放置在同一行。
<dl></dl> ,<dt> </dt> ,<dd></dd>,
为<dt> 添加 类 .dl-horizontal 可以让 <dt> 内的短语及其描述在一行。
代码
内联代码： <code> 标签包裹内联样式的代码片段。
用户输入：通过 <kbd> 标签标记用户通过键盘输入的内容。
代码块：多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
还可以使用 .pre-scrollable 类，作用是为代码块添加高度，自动添加滚动条。
变量： 通过 <var> 标签标记变量。
程序输出： 通过 <samp> 标签来标记程序输出的内容。
表格
为任意 <table> 标签添加 .table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
条纹状表格：添加类 .table-striped 可以给表格添加斑马条纹样式。
带边框表格：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停 ：通过添加 .table-hover 类可以让<tbody> 中的每一行对鼠标悬停状态作出响应。
紧凑表格：通过添加 .table-condensed 类可以让表格更加紧凑，减小padding。
状态类：
| 类名 | 效果 |
|---|---|
| .active | 鼠标悬停在行或单元格上时所设置的颜色，浅灰 |
| .success | 标识成功或积极的动作，浅绿 |
| .info | 标识普通的提示信息或动作，浅黄 |
| .warning | 标识警告或需要用户注意，浅红， |
| .danger | 标识危险或潜在的带来负面影响的动作，浅蓝 |
响应式表格： 将任何.table元素包裹在.table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。
表单
所有设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签
水平排列表单 ： 为表单添加 .form-horizontal 类，可以将 label 标签和控件组水平并排布局。
输入框：括大部分表单控件、文本输入域控件，还支持所有 HTML5。
类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正确设置了type、属性的输入控件才能被赋予正确的样式）
文本域：<textarea class="form-control" rows="3"></textarea> 可以通过改变 row 属性值改变文本域大小。
多选框和单选框：默认堆叠排列。通过将 .checkbox-inline或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
下拉列表：为 <select>添加类 .form-control ，可以显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来说，默认显示多选项。
静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<p> 元素添加 .form-control-static 类。
自动获取焦点：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>禁用状态：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>被禁用的 filedset ：为<fieldset>设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
只读状态：
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>状态检验：状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。使用时，.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和.help-block元素都将接受这些校验状态的样式.
添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.
控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过.col-lg-* 类似的类可以为控件设置宽度。通过添加 .form-group-lg 或 .form-group-sm类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
按钮
可作为按钮的标签或元素：为<a>、<button>或 <input>元素添加 .button 就可以作为按钮显示。
注意： <a> 元素作为按钮使用时，务必设置 role = “button” 属性。
预定义样式： .btn-default , .btn-primary, .btn-success , .btn-info, .btn-warning , .btn-danger , .btn-link 。
按钮尺寸： 使用 .btn-lg、.btn-sm或 .btn-xs就可以获得不同尺寸的按钮。
给按钮添加 .btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态：通过 .active 类实现。
禁用状态：为<button>元素添加 disabled 属性，使其表现出禁用状态。为基于 <a>元素创建的按钮添加 .disabled 类。
图片
响应式图片：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。使用 .center-block 类，让使用了 .img-responsive 类的图片水平居中。
图片形状：通过为<img>元素添加以下相应的类，可以让图片呈现不同的形状。class=”img-rounded” ， class=”img-circle” ， class=”img-thumbnail”
辅助
情景文本颜色：
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>情景背景色：
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>关闭按钮：
通过使用一个象征关闭的图标，可以让模态框和警告框消失
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>三角符号：
<span class="caret"></span>快速浮动：
<div class="pull-left">...</div>
<div class="pull-right">...</div>快速浮动不能用于导航条组件：排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。
内容快居中：
<div class="center-block">...</div>清除浮动：
<div class="clearfix">...</div>显示隐藏内容：.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
<div class="show">...</div>
<div class="hidden">...</div>屏幕阅读器：.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
