1.整体架构
BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台)
表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计
1.1 CSS12栅格系统
12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。
1.1.1 实现原理
栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制作出强大响应式的栅格系统。
1.最外层的边框，伴随着响应式思想，区分了四种类型浏览器，像素分界点768px、992px、1200px 2.第二层的边框，即.container样式容器，针对四种浏览器宽度不一样，值是自动、750px、970px、1170px
rush:css;">
//源码
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
3.1号横条，左内边距和右内边距是15px，是12个col-lg-1，没有row，则会
rush:css;">
//源码
.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>t/css/bootstrap.min.css" rel="stylesheet">