<!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>
浙公网安备 33010602011771号