Bootstrap初学基础总结
Bootstrap
1>.Web UI 框架
可以帮助菜鸟程序员 ，迅速简便的搭建起专业级界面效果
2>如何快速掌握利用框架
1.框架的整合和搭建，让框架能够正常跑起来
2.通过复制粘贴文档中的代码，实验框架中的各个组件 记住关键组件的图像 （长什么样）
3>Bootstrap需要导入的文件
1.在head标签中，通过link导入bootstrap.css样式表（核心文件，必须导入）
2.如果使用bootstrap的交互功能和插件需要导入
A) jquery.js
B) bootstrap.js
4>Bootstrap 容器
.container 宽度是“固定”（不同浏览器窗口宽度对应不同的尺寸）居中
.container-fluid 100% 两侧有边距
如果没有特殊情况，所有内容都应该放在容器中
5>导航条 navbar
1.两种配色
default（浅色系） navbar navbar-default
inverse（深色系） navbar navbar-inverse
2.行为
A.默认（圆角，随页面滚动）
B.固定（直角，100%，可以固定在顶部或底部）navbar navbar-default navbar-fixed-top/bottom C.静态（直角，100%，随页面滚动） navbar navbar-default navbar-static-top
3.手机模式
会将导航条上的人内容隐藏起来，同时在右侧出现一个按钮（汉堡图标）
通过按钮控制隐藏内容的显示
6>表格 table
1.形态
默认：只有表格行下横线，表头文字加粗
交替：.table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
边框：添加 .table-bordered 类为表格和其中的每个单元格增加边框，同时有竖线。
紧凑：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
悬停：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
响应式表格（手机模式）：将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
7>按钮 btn
颜色
<button type="button" class="btn btn-default">（默认样式）白色Default </button>
<button type="button" class="btn btn-primary">（首选项）深蓝Primary </button>
<button type="button" class="btn btn-success">（成功）绿色Success </button>
<button type="button" class="btn btn-info">（一般信息）浅蓝Info </button>
<button type="button" class="btn btn-warning">（警告）橙色Warning </button>
<button type="button" class="btn btn-danger">（危险）红色Danger </button>
<button type="button" class="btn btn-link">（链接）白色Link </button>
尺寸（主要是高度和文字大小）
大号：btn-lg
默认
小号：btn-sm
超小：btn-xs
形态
默认：鼠标指向会变色
按下：向下凹陷
禁用：不会变色，鼠标指针会变成禁止图片，颜色发白，为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
手机默认
通过btn-block将按钮设置为宽度撑满容器100%
8>表单
结构
<form>
.form-group
<label>
.form-control
形态
默认：上下结构，form-group及其内部的label与form-control都是上下排列
水平表单：form-group仍然是上下排列，但其内部的label与form-control是左右排列的
行内表单：左右结构，from-group及其内部全部左右排列
导航条内表单：专门在导航条中使用
Bootstrap的单选框和复选框
形态
垂直排列：
Div.checkbox
Label
Input[type=checkbox]
水平排列：
表单的3种状态
1.焦点状态：我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。
2.禁用状态：为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed鼠标状态。
3.只读状态：为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
表单控件的装饰
第一种：添加帮助文档
第二种：左侧addon
第三种：右侧加图标（通常用来做输入验证）
分页 pagination
方形，有上一页，下一页，还有页码
翻页 pager
圆角，没有页码！可以水平居中或两端对齐
面板 .pannel
.pannel-heading
.pannel-body
圆角矩形区域，可以带标题栏，也可以不带
图标
Bootstrap自带图标，比较少
推荐使用font-awesome图标
（需要css和fonts这两个文件夹，同时在页面上导入font-awesome.css）
<i class =”glyphicon glyphicon-图标名”>
<i class =”fa fa-图标名”
嵌套使用
<a class=”btn btn-success”>
<i class=”fa fa-图标名”>按钮
</a>
<a class=”btn btn-success fa fa-search”>按钮</a>
插件的使用规律
1.必须导入jquery.js和Bootstrap.js这个js脚本，否则 不能正常工作
2.插件可以通过html属性实现基本功能（如：打开、关闭，此时不需要写js代码）
3.如果想实现更多的控制，就需要写js
模态框
1.通过HTML属性控制模态框打开和关闭的重要属性
A.打开按钮上的2个
data-toggle=”modal”
data-target=”样式类或样式id”指定要打开的模态框
B.关闭：
在模态框内部的任意按钮或标签上
data-dismiss=”modal” 会关闭当前所在的模态框
2.通过JavaScript调用，控制模态框的打开和关闭
使用$()找到模态框，然后调用modal()方法
传入文档中指明的参数即可
只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：
$(\'#myModal\').modal(\'show\') //打开
$(\'#myModal\').modal(\'hide\') //隐藏
3.模态框的基本样式
.modol
.modol-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
下拉菜单
结构
.dropdown
.btn 按钮
.caret 下拉按钮图标
ul.dropdown-menu
基本不需要js控制
选项卡
结构：
ul.nav.nav-tabs
li.active(激活)>a[href=#id][data-toggle=tab]
.tab-content
.tab-pane[id]
工具提示
Tooltip/Popover弹出提示
因为性能原因默认没有激活，需要在页面底部加上相应方法调用初始化一下
Bootstrap布局特性-栅格系统
1.容器.container被栅格系统平分成12份（12列）
2.通过col-lg/md/sm/xs-1（1-12）表示标签所占的份数
3.如果col-*-x中的x之和超过12则超过的标签换行
注意：
lg:表示宽屏桌面显示尺寸 >=1200px
md：方屏显示器的宽度 >=992px
sm:平板 >=768px
xs：手机 <768px
如果浏览器尺寸比col-[*]-1大，则指定的列有效
如果浏览器尺寸比col-[*]-1小，则指定的列无效，变成100%
4、.container这个容器左右各有15px的padding
如果发现因为这15px的padding导致不能对齐
则在.container中添加.row来抵消15px
<div class="row"></div>
列的位置
可以通过 col-*-pull-1 往左边拉
可以通过 col-*-push-1 往右边推
只在列有效时起作用！
列的再拆分--列嵌套
在col-*-1中使用.row作为容器，可以再次拆分，使用.container不行！
更多源代码实例和样式详解课访问Bootstrap中文网，网址：http://www.bootcss.com/