Bootstrap学习笔记-栅格系统

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/airycode/p/4831805.html

文章标签：

#javascript #ViewUI

本文详细介绍了栅格系统的工作原理及使用方法。通过将界面划分为12个等分的格子来实现灵活布局，根据不同屏幕尺寸选择合适的样式类如col-md、col-sm和col-xs。文中还提供了具体的HTML代码示例，帮助读者更好地理解如何实现响应式布局。

　　　　　　　　栅格系统的原理就是在这个界面中这个栅格被分成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>

转载于:https://www.cnblogs.com/airycode/p/4831805.html