一、简介####
1、一套丰富的预定义样式表+一组基于jQuery的js插件集，Bootstrap的响应式原则是移动设备优先。
2、拥有灵活的响应式栅格系统，便于布局
3、Bootstrap采用Normalize.css作为浏览器重置样式库
4、为了确保适当的绘制和触屏缩放，添加viewport元数据标签，当然，为了使网站更像原生应用，可以添加user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1maximum-scale=1,user-scalable-no">
5、布局容器为div添加class=container或者container-fluid，其中container根据栅格系统的定义调整宽度，container-fluid则始终布满整个屏幕
二、栅格系统####
1、通过一系列的行列组合创建页面布局，行必须包含在布局容器中，列作为行的子元素创建布局，Bootstrap中列数为12。
2、Bootstrap采用的浏览器媒体查询断点是（1）<768px （2）>=768px（3）>=992px（4）>=1200px，分别将其称为超小屏幕（xs）、小屏幕（sm）、中等屏幕（md）、大屏幕（lg），所有列的类命名也是根据这个来命名col-xs-、col-sm、col-md-、col-lg-。其中.container布局容器的最大宽度对应的是自动、750px、970px、1170px，所有的列定义布局在大于这个断点范围内以水平排列，小于这个屏幕以堆叠排列，所有的列均可嵌套、偏移、排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
div{
color:#333;
border:1px solid #444;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 col-sm-6">col-md-8</div>
<div class="col-md-4 col-sm-6">col-md-4</div>
</div>
</div>
</body>
</html>
3、列偏移.col-md-offset-、列排序.col-md-push-向右偏移（内部采用相对定位并使用left）、.col-md-pull-向左偏移（内部采用相对定位并使用right）
三、排版####
1、基础：Bootstrap为body设置了字体大小为14px、行高为1.42857143（约为20px）、背景为白色、字体大小为#333，添加响应式图片只需要添加.img-responsive的类，内部使用max-width:100%;height:auto，
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
2、标题
h1-h3：<code>margin-top:20px,margin-bottom:10px</code>
h4-h5：<code>margin-top:10px,margin-bottom:10px</code>
字体大小分别为36px,30px,24px,18px,14px,12px
同样也可以为其他标签添加.h1-.h6的class，表现一样。
同样也可以添加small标签或者.small的类为其添加副标题，字体大小为65%
<h1>第一个标题<span class="small">小标题</span></h1>
<h2>第一个标题<span class="small">小标题</span></h2>
<h3>第一个标题<span class="small">小标题</span></h3>
<h4>第一个标题<span class="small">小标题</span></h4>
<h5>第一个标题<span class="small">小标题</span></h5>
<h6>第一个标题<span class="small">小标题</span></h6>
3、页面主体
p标签添加了margin-bottom:10px，对齐方式有text-center、text-left、text-right、text-justify、text-nowrap，lead类可突出文本
4、引用：blockquote、地址address、缩写abbr
5、无样式列表<ul class="list-unstyled"></ul>；内联列表<ul class="list-inline"></ul>
6、代码：内联代码code，用户输入kbd，代码块pre，变量var，程序输出samp
四、表格####
1、基本样式：添加table类（源代码为少量padding和分割线）
2、条纹状表格：添加table-striped类
3、带边框表格：添加table-bordered类
4、鼠标悬停：添加table-hover类
5、紧缩表格：添加table-condensed类
6、状态类：.active、.success、.info、.warning、.danger
7、响应式表格：添加table-responsive类
五、表单####
1、.form-control为设置宽度100%，.form-group添加了margin-bottom，我们应该将label元素和控件放在.form-group内已获得良好的布局，使用表单控件应该始终添加type属性
2、内联表单：.form-inline
3、水平排列的表单：.form-horizontal
4、多选和单选框：bootstrap制定了标准已获得好的排版
<div class="container">
<div class="checkbox">
<label for="" class="checkbox-inline">
<input type="checkbox" />hhhh
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />hhhh
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />hhhh
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />hhhh
</label>
</div>
<div class="radio">
<label for="radio-inline"></label>
</div>
</div>
5、校验状态：.has-warning、.has-error、.has-success
六、按钮####
1、每个按钮必须添加.btn类，定义的样式的类有.btn-default（默认）、.btn-primary（首选）、.btn-success（成功绿）、.btn-info（信息蓝）、.btn-warning（警告黄）、.btn-danger（危险红）
2、尺寸：除了默认尺寸外，有.btn-lg、.btn-sm、.btn-xs
3、激活和禁用：.active、.disabled
4、button、a、input都可以作为按钮，为了获得最好和跨浏览器一致的绘制效果，官方建议使用button
七、图片####
1、.img-responsive（响应式图片）、.img-rounded（圆角图片）、.img-thumbnail（缩略图效果）
八、辅助类####
1、文字颜色：.text-muted（柔和灰）、.text-primary（主要蓝）、.text-success（成功绿）、.text-info（信息蓝）、.text-warning（警告黄）、.text-danger（危险红）
2、背景颜色：.bg-primary（主要蓝）、.bg-success（成功绿）、.bg-info（信息蓝）、.bg-warning（警告黄）、.bg-danger（危险红）
3、辅助图标：关闭图标
<button type="button" class="close">×</button>
向下箭头（select中可以用上）
<span class="caret"></span>
4、浮动：.pull-left左浮动、.pull-right右浮动、.clearfix清除浮动
5、居中：.center-block
6、显示与隐藏：.show、.hidden，响应式使用的类如下
网友评论