Bootstrap 使用
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
【省略细节，纠结细节的话就学不了整个复杂系统，况且现代前端开发不是仅仅就一个Bootstrap】【不学js插件只学样式】【关注使用有问题再深究】
第一步 【全局样式 normalize.css】抹除浏览器差异
…………………………………………………………………………………………………………
【标题】.h1~.h6 类名 和 标签 <h1> 相同效果。
【副标题】 <h1><small>
【强调】.lead
【粗体】<b> | <strong>
【斜体】<i> | <em>
【有颜色的强调】
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
【文本对齐】
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {//中文慎用 以及 浏览器解析不一致。
text-align: justify;
}
………………………………………………………………………………
【列表】
去编号 去点 列表
.list-unstyled {
padding-left: 0;
list-style: none;
}
去编号 改内联块级
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
【水平 定义列表】
dl-horizontal 媒体查询 宽度是768px以上奏效。
【代码】
单行 <code>
多行 <pre> + 滚动条 .pre-scrollable
用户键盘输入 <kbd>
【表格】
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
修饰 行
active
info
success
warning
danger
………………………………………………………………………………
【表单】Fucking importance
【常用样式】.form-control
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且【元素得到焦点】之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
【html 5 新增】role="form" 告诉设备这一块扮演的是表单角色。
【对表单 分组】<div class="form-group" 这是惯性做法，为了我们想要方便变换样式，例如基本表单 => 内联表单
【水平表单】form-horizontal 应用这个类会改变form-group样式
【内联表单】form-inline
内联表单的 label 常常设置 sr-only 类名 ，sr 是 屏幕阅读器的缩写，意思是照顾不方便的人士。
【下拉框】<select><option>
【多行模式】<select multiple><option>
【文本区域】<textarea rows="3"> 如果应用.form-control就不用再设置cols属性，因为已经100%显示。
【单选框和复选框在Bootstrap要跟包饺子一样使用】
<div class="checkbox"> <!-- 这里无所谓 checkbox 也可以是 form-group 只要包饺子。 -->
<label>
<input type="checkbox"> 记住密码
</label>
</div>
【水平单选、复选框】label应用.radio-inline类名或者checkbox-inline即可。
【按钮】btn
【有颜色的按钮】btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
【为保证各大浏览器解析建议使用】<button>和 <a>
【按钮大小】btn-xs btn-sm btn-lg
【块级按钮 占满容器】btn-block
【有状态的按钮】活动状态有三种 :hover :active :focus ，另外就是禁用 添加disabled属性即可。
………………………………………………………………………………………………………………
【表单控件大小控制】Bootstrap 提供了 .input-sm .input-sg 对控件高度进行控制。
要对高度进行控制，使用 网格系统 提供的 .col-xx-<number>。
【表单控件焦点状态】.form-control
【表单控件禁用状态】加属性 disable
【禁用整个表单】<fieldset disable></fieldset>
【特别的fieldset disable管不到灰暗带】<legend><input>，不过把 submit 关掉也是白搭。
【表单控件验证状态】+【表单控件提示】
<div class="form-group has-error has-feedback"> <label class="control-label" for="email">email地址</label> <input type="text" class="form-control" id="email" placeholder="在这里输入你的email地址">
<span class="helpblock">你输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span> </div>
……………………………………………………………………………………………………………………………………………………
【图像】<img src="https://placehold.com/140x140" alt=...
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
【图标】原理是通过@font-face加载字体
使用 http://glyphicons.com/ 搜索
常用 http://www.bootcss.com/p/font-awesome/
…………………………………………………………………………………………………………………………………………………………
【网格系统】 Fucking Importance
响应式的原理 【定义容器大小】+【事先平均分12份 / 24份 / 32份】+ 【调整下内外边距配合媒体查询】
boilerplate code
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
【列组合】调整 float 和 width 百分比可以自由组合出效果。
【列偏移】col-md-offset-xx
<div class="row"> <div class="col-md-2">.col-md-2</div> <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div> <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div> <div class="col-md-3 col-md-offset-1">.col-md-3列向右移动1列的间距</div> </div>
【列排序】向右推 col-md-push-xx ，向左拉 col-md-pull-xx
………………………………………………………………………………………………………………………………………………………………
