<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <style> div[class*="col-"]{ background: #999; border:1px solid blue ; height: 50px; color:#fff; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-1">col-lg-1</div> <div class="col-lg-11">col-lg-11</div> </div> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-4">col-lg-4</div> </div> <div class="row"> <div class="col-lg-6">col-lg-6</div> <div class="col-lg-6">col-lg-6</div> <div class="col-lg-6">col-lg-6</div> </div> </div> </body> <!-- 引入jqurry.js bootstrap.js 基于JQ开发的--> <script src="js/jqurry-1.11.3.min.js"></script> <script scr="js/bootstrap.js"></script> </html> <!-- bootstrap栅格系统 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <style> div{ border:1px solid #000 ; } </style> </head> <body> <div class="container-fluid"> aaaaaaaaaaa </div> <div class="container"> bbbbbbbbbb </div> </body> <!-- 引入jqurry.js bootstrap.js 基于JQ开发的--> <script src="js/jqurry-1.11.3.min.js"></script> <script scr="js/bootstrap.js"></script> </html> <!-- bootstrap栅格系统 --> <script> /* bootstrap栅格系统 概念 - 分12列 》row 》col - 阈值 》1200>= 》992>= 》768>= 》768< 语法 》col-lg- 》col-md- 》col-sm- 》col-xs- 容器 container-fluid 》 流体 布局 container 》 固定 布局 》 1170 》 970 》 750 》 auto 其它 -列偏移 》col-{*}-offset-* 往后 -列排序 》col-{*}-push-* 往后 》col-{*}-pull-* 往前 -嵌套 -清浮动 clearfix 注：使用固定宽度 设置：1000px !important; 栅格跟浮动的区别是：浮动换行的时候会留下空隙，而栅格不会; */ </script>