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>

巴特西

Bootstrap学习笔记-栅格系统

最新文章

热门文章