bootstrap的网格系统

最新推荐文章于 2023-04-30 16:51:55 发布

forwardMyLife

最新推荐文章于 2023-04-30 16:51:55 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap的网格系统

本文链接：https://blog.youkuaiyun.com/lucky_ly/article/details/90579123

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Bootstrap的网格系统，它是一个响应式且移动设备优先的不固定网格系统。该系统通过@media查询调整不同屏幕尺寸下的列大小和数量，最大12列。网格样式包括4种类型：.col-xs-, .col-sm-, .col-md-和.col-lg-，对应不同屏幕尺寸。基本结构是将列放在行(row)内，行需置于container中，确保布局合理性。" 131863855,19538466,实现一个支持多种操作的队列,"['数据结构', '算法']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.bootstrap的栅格系统

bootstrap包含了一个响应式的，移动设备优先，不固定的网格系统，可以随着屏幕的伸缩，改变列的大小和数量，同行最多12列。
代码使用@media根据屏幕的大小控制样式。
在这里插入图片描述
网格样式有4中类型，分别对应4中不同尺寸范围的屏幕样式，
.col-xs- 设备小于768px
.col-sm- 大于768px
.col-md- 大于992px
.col-lg- 大于1200px

2.网格的基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

一般我们要求行（row）放置在container 中，其设置了较为合适的内外边距，列包裹在row中，col不能超过12，超过的元素会换行。
例如：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>hello bootstrap</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		
		<style>
			
			div[class*="col-"]{ 
				padding-top: 15px;
				 padding-bottom: 15px; 
				background-color: #007BFF; 
				background-color: rgba(86,61,124,.15); 
				border: 1px solid #ddd;
				border: 1px solid rgba(86,61,124,.2)
			}
		</style>
	</head 
	

	<body>
		<div class="container">
			<div class="row">
				<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">
				<div class="col-md-6">
					col-md-6,col-md-6,col-md-6,col-md-6,col-md-6,col-md-6,col-md-6,
				</div>
				<div class="col-md-6">
					col-md-6
				</div>
			</div>

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

			<div class="row">
				<div class="col-lg-4 col-lg-offset-4">
					col-md-4 col-md-offset-4
				</div>
			</div>

			<div class="row">
				<div class="col-md-4 col-md-push-8">
					col-md-4 col-md-push-8
				</div>
				<div class="col-md-8 col-md-pull-4">
					col-md-8 col-md-pull-4
				</div>
			</div>
		</div>
	</body>

</html>

在这里插入图片描述