前言
根据上一章博客我们讲解了Bootstrap的安装
这一章来讲解一下12栅格系统 排版等等
一，Bootstrap 12栅格系统
1.1，Bootstrap 12栅格系统原理
- 栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局，设置的内容可以放入这些创建好的布局中
- 实现原理
- 通过定义容器的大小，平分为12份
- 调整内外边距
- 结合媒体查询
1.2，Bootstrap 12栅格系统的使用
- 列组合
- 列偏移
- 列嵌套
- 列排序
1.3，列组合 col-md
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4" >第一行：.col-md-4</div> <div class="col-md-8">第一行：.col-md-8</div> </div> <div class="row"> <div class="col-md-2">第二行：.col-md-2</div> <div class="col-md-10">第二行：.col-md-10</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> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
- 通过更改数字来合并列就是列组合
1.3，列偏移 col-md-offset
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-1" >第一行：.col-md-4</div> <div class="col-md-8">第一行：.col-md-8</div> </div> <div class="row"> <div class="col-md-2 col-md-offset-1">第二行：.col-md-2</div> <div class="col-md-4 col-md-offset-1">第二行：.col-md-4</div> </div> <div class="row"> <div class="col-md-10 col-md-offset-1">第三行：.col-md-10</div> <div class="col-md-4">第三行：.col-md-4</div> </div> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
- 使用 .col-md-offset-* 类可以将列向右侧偏移
- 一行12占满之后会自动下一行
1.3，列嵌套 col-md
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-10">第一行：.col-md-10</div> <div class="col-md-2">第一行：.col-md-2</div> </div> <div class="row"> <div class="col-md-6">第二行：.col-md-6</div> <div class="col-md-6"> <div class="row"> <div class="col-md-6">1-1</div> <div class="col-md-6">1-2</div> </div> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6">2-1</div> <div class="col-md-6">2-2</div> </div> </div> <div class="col-md-6">2-2</div> </div> </div> </div> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
- 为了使用内置的栅格系统将内容再次嵌套，可以在已存在的 .col-md-* 元素内添加一个新的 .row 元素和一系列 .col-md-* 元素。需要注意的是，被嵌套的行所包含的列的个数不能超过12
1.3，列排序 col-md-push | col-md-pull
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bootstrap基础模板</title> <!-- bootstrap的CSS文件 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <style> .row{ border: 1px solid cadetblue; } .row>div{ border: 1px solid darkblue; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-10">第一行：.col-md-10</div> <div class="col-md-2">第一行：.col-md-2</div> </div> <div class="row"> <div class="col-md-4 col-md-push-1" >第二行：.col-md-4</div> <div class="col-md-4 col-md-pull-1">第二行：.col-md-4</div> </div> </div> </body> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap的JS插件--> <script src="../js/bootstrap.min.js"></script> </html>
- 通过使用col-md-push 和 col-md-pull 类就可以改变列的顺序
