关于Bootstrap学习总结
一、Bootstrap的介绍
1，Bootstrap是Twitter公司开发基于Html+css+js的前端框架
2，为实现Web应用程序快速开发提供的一套前端工具包
3，响应式布局
4，移动设备优先
5，Bootstrap全局样式用法
6，Viewport的意义
7，栅格化布局用法
8，字体与图标
9，实现响应式布局的开发
二、Bootstrap的特性
1，响应式设计
2，栅格布局
3，完整的类库
4，JQuery的插件
5，不同的使用场景
三、Bootstrap的基础文件有css font js 三种 在引用JQuery文件的时候需要1.9.1以上的版本
四，Bootstrap中的排版
标题 (h1~h6) 文本 (段落 P标签) 对齐 大小写 表格
h1: 36px; 默认: 14px; .text-left .text-lowercase(换小写) .table-bordered(带边框表格)
h2: 30px; 行高: 20px; .text-center .text-uppercase(换大写) .table-striped(条纹状表格)
h3: 24px; 底部外边框: 10px; .text-right .text-capitalize(首字母大写) .table-hover(悬停变色)
h4: 18px; .table-condensed(紧凑风格)
h5: 14px;
h6: 12px;
表单
⑴，input框
.form-group 与 .form-control
⑵，按钮
a标签也可适用如上 ⑶，形状
圆角 .img-rounded 圆形 .img-circle 带有边框的圆角图形 .img-thumbnail
辅助类：文本颜色，背景颜色，状态设置，三角符号
五，关于Viewport
meta标签中的Viewport（实用标签）
1，width，height。
2，user-scalable (用户缩放)，initial-scale (初始窗口)
3，maximum-scale (最大缩放)，minimun-scale (最小缩放)
栅格化布局
.col-xs-*超小屏幕 手机 (<768px),
.col-sm-*小屏幕 平板 (≥768px),
.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).
六，单位
1，-px 相对于显示屏幕分辨率的长度单位
2，-em 相对于当前文本内的字体尺寸
3，-rem 与 em类似，相对于HTML根节点的字体单位
1，⑴ - px是相对于屏幕分辨率的单位
⑵ - px的大小无法跟随屏幕放大缩小
⑶ - 所有浏览器都支持px单位
2，⑴ - 1em = 16px（不同浏览器的em不一样，火狐 1em=18px ; 谷歌 1em=12px;不稳定则出现rem）
⑵ - em会继承父级元素的字体大小。（当父元素改变时候em会跟着调整，一般用于移动端）
⑶ - IE的部分浏览器并不支持em
3， ⑴ - rem与em类似
⑵ - rem会继承根元素的字体大小
⑶ - 1rem = 稳定的10px
七，Bootstrap的组件
1，字体
2，下拉菜单
⑴ .dropdown 控制组件为下拉
⑵ .dropdown-menu-right 代替 .pull-right 右对齐
⑶ divider 分割线
divider 分割线
3，控件组
xx
4，导航
⑴，以一个带有class.nav的无序列表开始。
⑵，.nav-tabs 代表可切换的导航。 下面有下划线 可做类似于选项卡
⑶，.nav-pills 代表胶囊导航。 下面没有下划线 有圆角
⑷，.nav-justified 使导航垂直。
5，分页
⑴，.pagination在父元素中添加 表示分页。
⑵，.pager放置 在 翻页 区域。
⑶，.previous把链接向左对齐， .next把链接向右对齐。
6，进度条
⑴，.porgress表示进度条。
⑵，通过状态类改变进度条的颜色。
⑶，.progress-bar-striped使得进度条颜色渐变。
7，列表
⑴，.list-group 代表 列表组。
⑵，.badge 代表 状态数。
-
-
⑴，.panel 代表 面板。
⑵，.panel-body 代表 面板内容。
⑶，.panel-footer 代表 面板的注脚。
八，Bootstrap的插件
1，引用
⑴，Bootstrap插件依赖Bootstrap.js。
⑵，Bootstrap.js 基于 JQuery。
2，data属性
⑴，通过data属性控制页面交互。
⑵，$(document).off('.data-api')解除绑定。
九，示例
解:为Button按钮添加样式 并 放大 且换成 深蓝色按钮 data-toggle添加切换事件 data-target做页面弹出
解:使用modal插件 fade为弹窗时的淡入淡出样式 并将弹的窗口命名id为myModal
解:modal-dislog为modal插件弹出后 距离页面的顶部 使 modal-content 具有更好的弹出效果