Bootstrap，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，本博客将从基础开始讲解，逐步学习。 参考链接：https://www.runoob.com/bootstrap/bootstrap-grid-system.html
一.搭建Bootstrap环境，有以下两种方式可供参考： （1）通过下载对应的文件到本地通过相对路径引入 （2）通过官网链接直接引入（该方法可以根据引入文件版本的更新来下载对应文件，但在运行过程中速度可能会受到网络影响） 二.网格系统 1.绘制网格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网格系统</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <style> body{ margin:30px; } .container{ outline:1px solid black; } .col-md-1,.col-md-3,.col-md-9{ outline:1px solid black;; padding: 10px; } </style> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-1">第1列</div> <div class="col-md-1">第2列</div> <div class="col-md-1">第3列</div> <div class="col-md-1">第4列</div> <div class="col-md-1">第5列</div> <div class="col-md-1">第6列</div> <div class="col-md-1">第7列</div> <div class="col-md-1">第8列</div> <div class="col-md-1">第9列</div> <div class="col-md-1">第10列</div> <div class="col-md-1">第11列</div> <div class="col-md-1">第12列</div> <div class="col-md-3">col-md-3</div> <div class="col-md-9">col-md-9</div> </div> </div> </div> </div> </body> </html>效果如图： 2.网格系统的偏移列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网格偏移列</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <style> body{ margin:30px; } .container{ outline:1px solid black; } .col-md-3{ outline:1px solid black;; padding: 10px; background:orange; } .col-md-2{ outline:1px solid black;; padding: 10px; background:pink; } </style> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-2">col-md-3</div> <div class="col-md-3 col-md-offset-2">col-md-3</div> <div class="col-md-2 col-md-pull-4">col-md-4</div> <div class="col-md-2 col-md-offset-3">col-md-4</div> </div> </div> </body> </html>效果图： col-md-2是设置宽度为2份的网格宽度 ，使用.col-md-offset-* 类向右偏移对应列数。要实现偏移还有两种方式： （1）col-md-pull偏移数值 //向左偏移 （2）col-md-push-偏移数值 //向右偏移 在网格系统系统中，列排序就是通过 .col-md-push-* 和 .col-md-pull-* 类来实现的。 3.网格系统的嵌套列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网格嵌套</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <style> body{ margin:30px; } .container{ outline:1px solid black; } .col-md-4,.col-md-8{ outline:1px solid black; background:orange; height:40px; } .col-md-6{ outline:1px solid black;; background:#9cff; } </style> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <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 class="row"> <div class="col-md-6 ">col-md-6</div> <div class="col-md-6 ">col-md-6</div> </div> </div> </div> </div> </body> </html>效果图： 至此，网格系统的简单学习完成。
