Bootstrap 目录
- bootstrap 全局样式用法
- viewport的意义
- 栅格化布局用法
- 字体 图标
- 实现响应式布局的开发
特性：
响应式设计、栅格布局、完整的类库、JQuery插件、不同的使用场景
Bootstrap框架的核心是轻量的CSS基础代码库
Bootstrap 样式
一、排版-标题
标题 （h1~h6 / .h1~.h6）
h1:36px h2:30px h3:24px h4:18px h5:14px h6:12px
副标题 （small）
<code> 一般是针对于单个单词或单个句子的代码
<pre> 一般是针对于多行代码（也就是成块的代码）
<kbd> 一般是表示用户要通过键盘输入的内容
在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代
二、排版-文本
对齐： .text-left .text-center .text-right
大小写： .text-lowercase .text-uppercase .text-capitalize
颜色： .text-muted (浅灰色) .text-primary(蓝色) .text-success(浅绿色)
三、排版-表格
.table-responsive 响应式表格
tr： .warning（黄色 警告） .info（蓝色） .success（绿色） .danger(红色) .active（灰色）
四、表单
form、input
button
五、图片
六、viewport
meta viewport 有6个属性:
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no"> //初始化移动浏览显示
isRetina 判断是否是retina屏幕
<meta http-equiv="X-UA-Compatible" content="IE=dege" > //在IE运行最新的渲染模式
七、栅格布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
.col-lg- (1170px)
.col-md- (970px)
.col-sm- (750px)
.col-xs- (none)
八、单位
九、图标
bootstrap 组件
一、图标
二、下拉菜单
三、控件组
.input-group 表示控件组
.input-group-addon 可放置额外内容以及图标
四、导航
五、分页
.pagination 在父元素中添加表示分页
.pager 放置在翻页区域
.previous 把链接向左对齐
.next 把链接向右对齐
六、进度条
七、列表
.list-group 列表组
.badge 状态数
.active 选中的状态
.list-inline 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示
八、面板
九、插件
1> 引用
bootstrap 插件依赖 bootstrap.js
bootstrap.js 基于JQuery
2> data属性
通过data属性控制页面交互
$(document).off(" .data-api ") 解除属性绑定
响应式布局
一、CSS3-Media Query (最简单的方式)
二、借助原生JavaScript (成本高 不推荐使用)
三、第三方开源框架 (可以很好的支持浏览器响应式布局的设计)
