<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>grid-system</title> <!-- grid-system是bootstrap的核心概念. 在同一行row内分成12个等份,所有的元素划定其占用等份. 超过12则不在一行. colum列 响应四种屏幕宽度, col-lg- ==> colum-large (屏幕)列- 大 1200px及 以上 col-md- ==> colum-middle (屏幕)列- 中 992px及 以上 col-sm- ==> colum-small (屏幕)列- 小 768px及 以上 col-xs- ==> colum-extrasmall (屏幕)列- 特小 768px以下 理解为每行row有12个colum列块,每个元素响应不同屏幕时候应占多少列块. --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <style type="text/css"> .grid_system{ background: tan; border: 1px solid #000; height: 30px; } </style> </head> <body> <div class="container"> <div class="row"> <!-- 行row 是bootstrap的既定式样, 需在容器container内, 表一行的内容(表12个栅格grid) --> <div class="grid_system col-lg-3"></div> <div class="grid_system col-lg-3"></div> <div class="grid_system col-lg-6"></div> </div> <br> <div class="row"> <div class="grid_system col-md-1"></div> <div class="grid_system col-md-3"></div> <div class="grid_system col-md-1"></div> <div class="grid_system col-md-4"></div> <div class="grid_system col-md-2"></div> <div class="grid_system col-md-1"></div> </div> <br> <div class="row"> <div class="grid_system col-sm-1"></div> <div class="grid_system col-sm-3"></div> <div class="grid_system col-sm-1"></div> <div class="grid_system col-sm-4"></div> <div class="grid_system col-sm-2"></div> <div class="grid_system col-sm-1"></div> </div> <br> <div class="row"> <div class="grid_system col-xs-1"></div> <div class="grid_system col-xs-3"></div> <div class="grid_system col-xs-1"></div> <div class="grid_system col-xs-4"></div> <div class="grid_system col-xs-2"></div> <div class="grid_system col-xs-1"></div> </div> </div> </body> </html>