Bootstrap响应式布局可以使用栅格化系统，其实就是不同的列组合，配合起来便能组合出强大的功能，系统会自动分为最多12列，超出12列会作为一个整体另起一行，像制作表格table的合并列，功能跟colspan类似。
使用方法：
1、包含在.container或.container-fluid中
<div class="container-fluid"> <div class="row"> ... </div> </div>
2、创建栅格系统
.col-lg-* 桌面栅格类，适合大屏幕 大桌面显示器 (≥1200px)
.col-md-* 桌面栅格类，适合中等屏幕 桌面显示器 (≥992px)
.col-xs-* 移动栅格类，适合超小屏幕 手机 (<768px)
.col-sm-* 平板栅格类，适合小屏幕 平板 (≥768px)
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <style> body{padding-top: 50px;} [class^="col"]{ border:1px solid #000; height: 30px; background: #ccc; line-height: 30px;; } </style> </head> <body> <div class="container"> <div class="row"> <!--12个 col-md-1 --> <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-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </body> </html>
.col-xs-* 移动端适配
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <!--移动适配--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{padding-top: 50px;} [class^="col"]{ border:1px solid #000; height: 30px; background: #ccc; line-height: 30px;; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> </div> </body> </html>
叠加使用：在移动端5:7 ，在PC端8:4
<div class="container"> <div class="row"> <div class="col-xs-5 col-md-8">.col-xs-5 .col-md-8</div> <div class="col-xs-7 col-md-4">.col-xs-7 .col-md-4</div> </div> </div>
叠加使用2：在移动端5：7，在平板端4：8，PC端8：4
<div class="row"> <div class="col-xs-5 col-sm-4 col-md-8">.col-xs-5 .col-sm-4 .col-md-8</div> <div class="col-xs-7 col-sm-8 col-md-4">.col-xs-7 .col-sm-8 .col-md-4</div> </div>
3、偏移，原理有多少*，就有多少*倍的margin-left
.col-md-* 对应.col-md-offset-*
.col-xs-* 对应.col-xs-offset-*
.col-sm-* 对应.col-sm-offset-*
.col-lg-* 对应.col-lg-offset-*
<div class="container"> <div class="row" style="background: #ff0000"> <div class="col-md-8 col-md-offset-2">col-md-8</div> <div class="col-md-2">col-md-2</div> </div> </div>
