Bootstrap - grid system

最新推荐文章于 2024-10-08 17:48:41 发布

李亚有鸭梨

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量86

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/LYYQCC/article/details/131849551

版权

该文章展示了如何在HTML文档<head>部分添加Bootstrap5的CSS和JSCDN链接，以构建一个响应式的网页布局。通过使用Bootstrap的网格系统，实现了在不同设备尺寸下（如笔记本、平板、手机）的适配显示。

摘要由CSDN通过智能技术生成

构建响应式网页，在head中添加bootstrap 5 的css js的cdn链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>responsive-test</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
			integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
		</script>
		<link rel="stylesheet" href="css/styles.css">
	</head>
	<body>
		<div class="row">
			<div class="col-lg-4 col-md-3 col-sm-12" style="background-color: yellow; border: 1px solid;">
				col-lg-2 col-md-3 col-sm-12
			</div>
			<div class="col-lg-4 col-md-3 col-sm-12" style="background-color: yellow; border: 1px solid;">
				col-lg-2 col-md-3 col-sm-12
			</div>
			<div class="col-lg-4 col-md-3 col-sm-12" style="background-color: yellow; border: 1px solid;">
				col-lg-2 col-md-3 col-sm-12
			</div>
			<div class="col-lg-4 col-md-3 col-sm-12" style="background-color: yellow; border: 1px solid;">
				col-lg-2 col-md-3 col-sm-12
			</div>
		</div>
	</body>
</html>

笔记本全屏网页：