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
//源码 .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，则会
//源码 .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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 --> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://www.jb51.net/bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> </div> <!-- bootstrap是基于jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://www.jb51.net/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
4.2号横条，也就是row容器的定义,margin-left和margin-right都是-15px，组合row和列后，形成3号横条的效果，也就是左右宽度用满的效果。
//源码 .row { margin-right: -15px; margin-left: -15px; }
有row，则会没边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 --> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://www.jb51.net/bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div> <div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> <div>col-lg-1</div> </div> </div> <!-- bootstrap是基于jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://www.jb51.net/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
1.1.2 基本用法
1.列组合