【BootStrap】BootStrap布局容器

最新推荐文章于 2025-06-04 13:55:58 发布

Mahometan

最新推荐文章于 2025-06-04 13:55:58 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44111750/article/details/105180901

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了BootStrap布局容器的重要性和使用方法。布局容器作为页面内容的封装工具，提供了方便的样式控制。内容包括布局容器的作用，如提供页面结构和响应式设计，并通过实例展示了不同类型的布局容器，如带边距的和全屏的，强调了它们不应互相嵌套的规则。

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

BootStrap布局容器

1.布局容器作用

布局容器在我们自己写页面的时候给一个div加上class=container样式那么他就可以是我们的布局容器了但是对于BootStrap布局容器确有不同的意义

BootStrap必须包含至少一个布局容器,才能为页面内容进行封装和方便的样式控制

2.布局容器使用

那么他这里说的是在css文件里有一个class样式叫做 container 和container-fluid代表布局容器

我们来测试一下container

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式布局基本设置 -->
		<meta name="viewport" content="width=device-width,initial-scale = 1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<title>BootStrap布局容器</title>
		<style>
			.container{
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
        <!-- 因为容器我们默认什么都看不着 所以给他加一个颜色 -->
		<div class="container">
            <h1>Hello BootStrap!</h1>
		</div>
	</body>
</html>

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeL0DSLp-1585470224562)(C:\Users\Ronin\AppData\Roaming\Typora\typora-user-images\image-20200328215110717.png)]

看到了这个container样式也如官方所说两端是留白的不过如果我们想多留一些或者少留一些的话那怎么办

我们到源码中查看这个container样式的设置

发现左右paading给了15px 左右margin是自动的然后有三个宽度这里我们是什么意思呢

其实这个@media是一个查询器这段代码的意思是查询我们的视口宽度是多少然后动态的给container赋值宽度

有没有暖暖的很贴心啊哈哈

现在我们抓取一下开发者设置

发现它确实只有一个宽度被加载了也代表现在我们的视口宽度不低于1200px 现在我们做一个实验把这个视口缩小

发现现在宽度已经是970px这其实就是一种响应式并且Bootstrap的很多内容动效等都是相对于container来做

所以container响应式了其他子元素也就响应式了这也是为什么必须要使用container的原因

还有一个container-fluid也来测试一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式布局基本设置 -->
		<meta name="viewport" content="width=device-width,initial-scale = 1">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<title>BootStrap布局容器</title>
		<style>
			.container{
				background-color: lightblue;
			}
			.container-fluid{
				background-color: lightcoral;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<h1 align="center">Hello BootStrap!</h1>
		</div>
		<div class="container-fluid">
			<h1 align="center">Hello BootStrap2!</h1>
		</div>
	</body>
</html>