软件20-4 陈珊珊 Bootstrap 8

ddPengPengbb

已于 2022-05-28 17:45:58 修改

阅读量66

点赞数

文章标签： php 开发语言 html bootstrap

于 2022-05-28 17:45:07 首次发布

本文链接：https://blog.csdn.net/ddPengPengbb/article/details/125020820

版权

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<title>圣杯布局</title>
	</head>
	<body>
		<div class="container">
			<div class="header">header</div>
			<div class="main d-flex justify-content-between  ">
				<div class="f-item d-md-block d-none">item1</div>
				<div class="f-item d-md-block">item2</div>
				<div class="f-item d-md-block d-none">item3</div>
			</div>
			<div class="footer">footer</div>
		</div>

		<style>		
			.d-none{
				background-color: #aaaa7f;
			}
			.f-item {
				width: 200px;
			}
			.header {
				background-color: #aa557f;
				height: 150px;
				text-align: center;
			}
			.main {
				background-color: lightyellow;
				height: 400px;
				text-align: center;
			}
			.footer {
				background-color: #aa557f;
				height: 150px;
				text-align: center;
			}
		</style>

		<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		 crossorigin="anonymous"></script>
		<script src="./js/bootstrap.bundle.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi"
		 crossorigin="anonymous"></script>

	</body>
</html>

在这里插入图片描述

ddPengPengbb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件20-4 陈珊珊 Bootstrap 8

<!doctype html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.
复制链接

扫一扫