Bootstrap学习笔记-栅格系统

　　　　　　　　栅格系统的原理就是在这个界面中这个栅格被分成12个格子，你根据自己的想要的布局就把这个界面分割成你想要的部分就行了。一般如果我们用电脑作为显示器的我们用的样式是col-md

如果你用的显示期变小的情况下，他是会堆叠显示的。如果不想堆叠显示的话你就col-sm等其他的样式，如果是手机显示屏的话你需要用col-xs.

　　　　代码：

<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src = "bootstrap/js/bootstrap.js"></script>
	<meta name="viewport" content="width-device-width,initial-scale=1">

</head>
<body>
	<div class="container">

	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>
	<div class="col-md-1">.col-md-1</div>

    </div>

   	<div class="row show-grid">
   		<div class="col-md-8">.col-md-8</div>
   		<div class="col-md-4">.col-md-4</div>

   	</div>

   	<div class="row show-grid">
   		<div class="col-md-4">.col-md-4</div>
   		<div class="col-md-4">.col-md-4</div>
   		<div class="col-md-4">.col-md-4</div>

   	</div>

   	<div class="row show-grid">
   		<div class="col-md-6">.col-md-6</div>
   		<div class="col-md-6">.col-md-6</div>

   	</div>



</body>
</html>

　　

posted on 2015-09-23 11:51  airycode  阅读(263)  评论(0)  编辑  收藏  举报

导航