*移动端设备优先
*使用前需在head标签中添加viewport元数据标签和通过meta属性禁用移动端界面缩放功能
1.布局容器
container可以设置宽度的可响应布局的容器
container-fluid不可设置宽度，占据100%的宽度
2.棚格系统
是一种响应式、移动端设备优先的栅格系统，随屏幕或视口（viewport）尺寸的增加，最多可以分配12格。
3.行（row）定义：必须归属于container或container-fluid下
预定义的类：
row是一下所有列（column）的领头军！
-col-xs-（<768px）：排列方式水平；超小宽度自动；使用于手机屏；
-col-sm-（750px）：随屏幕大小改变；适用于平板屏；
-col-md-（970px）：随屏幕大小改变；桌面显示器；
-sol-lg-（1170px）：随屏幕大小改变；大屏幕；
*当列大于12时，包含多余列的元素会被挤下去而另起一行。
**克服以上另起一行的问题：
响应式列重置 clearfix可以使其多余列的元素框并在一行
4.列的偏移
**在class中使用 col-sm-offset-3可以实现向右偏移3个列的宽度；若想清除响应需用到col-sm-offset-0；
5.嵌套列
可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
6.列排序
通过使用col-md-push-3和col-md-pull-9的类可以实现两个位置的调换
7.元素的使用
Bootstrap重新设置了字体、标题、段落、等标签的大小；
另外引入：
lead类 让段落突出显示
<small>标签可以标记副标题
8.内联文本元素
<mark>标签使字体突出显示
<del>标签删除文本
<s>标签用于没有作用的文本
<ins>标签插入额外的文本
<u>标签 下划线文本
<strong>标签 着重强调
<em>标签 斜体
<address>标签 使文本内容正常显示 空格 回车 字符等
<blockquote>引用文本 中用<p>
在 HTML5 中可以放心使用和标签。用于高亮单词或短语，不带有任何着重的意味；而标签主要用于发言、技术词汇等
9.文本对齐
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
10.缩略语
title=attribute鼠标放文本上有问号；
class=initialism使font-size变小
*11.无样式列表
list-style移除项目符号
12.内联列表
display: inline-block;并添加少量的内补（padding），将所有元素放置于同一行。
**13.水平排列
.dl-horizontal可以让短语及其描述排在一行。
为任意<table>标签添加.table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。
添加.table-bordered类为表格和其中的每个单元格增加边框。
通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
垂直方向的内容截断
响应式表格使用了overflow-y: hidden属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。
***14.表单
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-control默认宽度为100%
form-inline左对齐
<select>下拉列表框 class="form-control"
<textare>标签设置多行文本输入框
没有设定placeholder时使用<label>设置文本框提示内容
通过为表单添加.form-horizontal类，并联合使用 Bootstrap 预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
内联单选.radio-inline 和多选框.checkbox-inline
如果需要内没有文字，输入框（input）正是你所期望的。目前只适用于非内联的 checkbox 和 radio。
静态控件
如果需要在表单中将一行纯文本和label元素放置于同一行，为<p>
元素添加.form-control-static类即可。
焦点状态
我们将某些表单控件的默认outline样式移除，然后对:focus状态赋予box-shadow属性
为输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了not-allowed鼠标状态。
只读 为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的.has-feedback类并添加正确的图标即可。
网友评论