简介：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目。由Twitter于2011年8月在GitHub上发布，，它将常见的CSS布局小组件和JavaScript插件进行了完整的封装，大大提升工作效率。
<html lang="zh-CN">
<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>H</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
asdfasdfdsafdsaaa
</div>
</body>
</html>
栅格系统
1.row(行）必须在.container中；
2.使用行在水平方向创建列组；
3.具体内容在列中；
<!DOCTYPE html>
<html lang="zh-CN">
<head>***</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>
<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 class="col-md-8">col-md-8</div>
</div>
</div>
</body>
</html>
媒体查询：用于在不同的分辨率下设置不同的css样式，屏幕宽度小于某个值时候显示特定的内容。
@media (max-767px) {
div{
background: #AC2925;
}
}
列偏移：
<div class="col-md-4 col-md-offset-4">
col-md-4
</div>
列排序
<div class="row">
<div class="col-md-3 col-md-push-5">
col-md-3
</div>
<div class="col-md-6 col-md-pull-2">
col-md-6
</div>
</div>
清除浮动
默认使用float:left排列
<div class="row">
<div class="col-xs-6 col-sm-3">
col-xs-6 col-sm-3 1<br>asdfasdfdsfdsa
</div>
<div class="col-xs-6 col-sm-3">
col-xs-6 col-sm-3 2
</div>
<div class="clearfix visible-xs">
</div>
<div class="col-xs-6 col-sm-3">
col-xs-6 col-sm-3 3
</div>
<div class="col-xs-6 col-sm-3">
col-xs-6 col-sm-3 4
</div>
</div>
1.BootStrap全局样式
body背景为白色，margin:0,字体、大小，行间距都进行了设置，所有默认样式都在normalize less 和scaffolding less
Normalize.css BootStrap第三方库，将不同浏览器css样式效果统一的css库。