CSS笔记（Bootstrap概览）

移动设备优先是 Bootstrap 3 的最显著的变化，为了Bootstrap可以在移动端确保适当的绘制和触屏缩放，要在头部添加viewport meta标签。

1 网络系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
创建网络系统布局，主要有以下步骤：

• 创建一个父模块，添加类名container
• 创建行模块（添加类名row），用以包裹列，且唯有列可以是行的直接子元素
• 使用Bootsrap特有的媒体查询规则，定义列的布局

1.1 媒体查询

	移动端（<768px）	平板（>=768px）	中型显示器（>=992px）	大型显示器（>=1200px）
最大容器宽度	auto	750px	970px	1170px
class前缀	cos-xs-*	cos-sm-*	col-md-*	col-lg-*
间隙宽度	30px（一个列的每边分别 15px）	同上	同上	同上

1.2 偏移列

实现列的偏移（本质是增加左右边距），可添加col-*-offset-*类

1.3 列排序

添加col-*-pull-*与col-*-push-*类可以很容易地以一种顺序编写列，然后以另一种顺序显示列，在添加col-*-pull-*与col-*-push-*类之前需要先给原列项定义列的位置信息，如：

<div class="container">
    <div class="row">
        <!-- 先定义原始列位置信息 -->
        <div class="col-lg-8 col-lg-push-4">
            123
        </div>
        <div class="col-lg-4 col-lg-push-8">
            123
        </div>      
    </div>
</div>

---

2 排版样式

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

2.1 文本样式

样式类名：

• text-left：文本右对齐
• text-right：文本左对齐
• text-center：文本居中
• text-muted：文本浅灰色
• text-primary：文本天蓝色
• text-success：文本绿色
• text-info：文本深蓝色
• text-warning：文本黄色
• text-danger：文本红色
• text-justify：文本响应式
• text-nowrap：文本消除响应式

2.2 列表样式

样式类名：

• list-unstyled：消除默认列表样式
• list-inline：display:inline;
• dl-horizontal：用于该类设置了浮动和偏移，应用于 <dl> 元素，作用是使<dt>和 <dd> 元素并排
• list-group：添加到<ul>元素，用于创建列表组块，参考这里
• list-group-item：添加到<li>元素，用于创建列表组块
• list-group-item-heading：添加标题文本
• list-group-item-text：添加文本

2.3 表格样式

样式类名：

• table：只有横向分割线
• table-striped：添加斑马线
• table-bordered：添加表格全部边线
• table-hover：添加悬停动态
• table-coondensed：表格更加紧凑
• active：添加悬停后样式
• success：蓝色
• info：亮蓝色
• warning：淡粉
• danger：深黑粉

2.4 表单样式

创建基本表单的步骤：

• 把标签和控件放在一个带有form-group类的<div>中。这是获取最佳间距所必需的。
• 向所有的文本输入元素<input>、<textarea> 和 <select> 添加类名form-control。

2.4.1 内联表单

创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，可以向<form>标签添加form-inline类

1、默认情况下，Bootstrap中的input、select和textarea有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
2、使用sr-only类，可以隐藏内联表单的标签。

2.4.2 水平表单

水平表单的意思是文本与输入框水平放置，步骤：

• 向父<form>元素添加form-horizontal类名
• 向标签添加control-label类名
• 当需要在一个水平表单内的表单标签后放置纯文本时，可在<p>标签上添加form-control-static类

复选框（Checkbox）和单选框（Radio）水平放置可添加checkbox-inline或 radio-inline class类到包含输入框元素的label标签上

2.4.3 表单控件状态

• disabled：禁用
• has-success：在lebal以及表单元素的父元素上添加，绿色
• has-warning：在lebal以及表单元素的父元素上添加，黄色
• has-error：在lebal以及表单元素的父元素上添加，红色
• input-lg：表格高度
• input-sm：表格高度

2.4.4 输入框组件

• input-group：添加到包裹前缀或后缀元素与输入元素的父类<div>
• input-group-addon：添加到用于放置额外的文本或logo的<span>
• input-group-btn：在父类<div>下放置按钮（<span>包裹<button>），同理下拉菜单按钮也是依靠这个类名实现

2.5 按钮

样式类名：

• btn：基本样式
• btn-default：默认样式
• btn-primary：蓝色
• btn-info：天蓝色
• btn-succese：绿色
• btn-warning：黄色
• btn-danger：红色
• btn-link：链接
• btn-lg：大按钮
• btn-sm：小按钮
• btn-xs：超小按钮
• btn-block：跟随父元素的大小
• active：被点击
• disabled：禁用

按钮组：

• btn-group：用于包裹<button>元素组，形成按钮条
• btn-toolbar：用于包裹btn-group，形成有多条按钮条水平排列的工具栏
• btn-group-*：星号可表示lg，sm，xs
• btn-group-vertical：垂直放置

2.6 图像

类名样式

• img-rounded：圆角
• img-circle：圆形
• img-thumbnail：缩略图样式
• img-responsive：响应式

2.7 辅助类

2.7.1 背景

• bg-primary：蓝色
• bg-success：淡绿色
• bg-info：天蓝色
• bg-warning：淡粉
• bg-danger：淡紫

2.7.2 其他

• pull-left：左浮动
• pull-right：右浮动
• center-block：display:block;且居中
• clearfix：清除浮动
• show：显示
• visible-*-*：媒体查询决定显示形式，最后星号是block，inline，inline-block
• hidden：隐藏
• hidden-*：媒体查询隐藏
• sr-only：除了屏幕阅读器外，其他设备上隐藏元素
• sr-only-focusable：与sr-only类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
• caret：应该是一个字体，形状是三角形，用于添加到button元素中，模仿下拉菜单
• close：应该是一个字体，形状是交叉，用于制作关闭button，添加到button元素上，不仅仅是右上浮动，还有部分样式