Bootstrap8 软件20-4 陈珊珊

最新推荐文章于 2022-05-28 17:45:07 发布

原创最新推荐文章于 2022-05-28 17:45:07 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

本文深入探讨Bootstrap框架，从核心原理到实际应用，详细解析其布局、组件和响应式设计，助你提升网页开发效率。

<!DOCTYPE html>
<html>
	<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>demo1</title>
	</head>
	<body>
		<img src="./img/img1.jpg" width="400px" class="border border-success img-thumbnail">
		<div class="border border-info m-5" style="width: 100px; height: 100px;">aaaa</div>
		
		<div class="c float-md-start border border-success">left</div>
		<div class="c float-md-end border border-success">right</div>
		
		<span class="align-baseline">baseline 基准</span>
		<span class="align-text-top">text-top 文本顶部</span>
		<span class="align-top">top 顶部</span>
		<span class="align-middle">middle 垂直居中</span>
		<span class="align-bottom">bottom 底部</span>
		<span class="align-text-bottom">text-bottom 文本底部</span>
		
		
		<table class="table table-bordered" style="height: 200px;">
		<tbody>
		<tr>
		<td class="align-baseline">baseline</td>
		<td class="align-top">top</td>
		<td class="align-middle">middle</td>
		<td class="align-bottom">bottom</td>
		<td class="align-text-top">text-top</td>
		<td class="align-text-bottom">text-bottom</td>
		</tr>
		</tbody>
		</table>
		
		<style type="text/css">
		   .c{
		   width:200px;
		   height:25px;
		   }        
		</style>
		
		<script src="js/bootstrap.bundle.js" type="text/javascript"></script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<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="d1 bg-warning">
			<div class="d2 bg-info m-3">
				a
			</div>
			<span style="font-size: 3em;">d1文字</span>
		</div>
		<style type="text/css">
		   html{
		    
		   }
		   :root{
		    font-size: 10px;
		   }
		   .d1{
		    /* width: 200px;
		    height: 200px; */
		    font-size: 10px;
		    width: 30rem;
		   }
		   .d2{
		    width: 100px;
		    height: 100px;
		    font-size: 10px;
		   }
		  </style>
		  
		  <script src="js/bootstrap.bundle.js" type="text/javascript"></script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no" />
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<title></title>
	</head>
	<body>
		8. 使用.w-*设置元素的长度，包括25%、50%、75%、100%和auto；
		<div class="p-3 w-25 bg-info">25%</div>
		<div class="p-3 w-50 bg-info">50%</div>
		<div class="p-3 w-75 bg-info">75%</div>
		<div class="p-3 w-100 bg-info">100%</div>
		<div class="p-3 w-auto bg-info">auto</div>
		9. 使用.h-*设置元素的高度，包括25%、50%、75%、100%和auto；
		<div class="border border-success">
			<div class="p-3 h-25 bg-info d-inline-block">25%</div>
			<div class="p-3 h-50 bg-info d-inline-block">50%</div>
			<div class="p-3 h-75 bg-info d-inline-block">75%</div>
			<div class="p-3 h-100 bg-info d-inline-block">100%</div>
			<div class="p-3 h-auto bg-info d-inline-block">auto</div>
		</div>

		10. 使用.mw-*和.mh-*设置max-width 和max-height；
		<div class="p-3 mw-100 mh-100 bg-info">max-100%</div>
		12. 使用.shadow-*实现元素的阴影效果；
		<div class="shadow-none mb-5">Bootstrap4.x</div>
		<div class="shadow-sm mb-5">Bootstrap4.x</div>
		<div class="shadow mb-5">Bootstrap4.x</div>
		<div class="shadow-lg mb-5">Bootstrap4.x</div>

		<style type="text/css">
			span {
				display: inline-block;
			}
		</style>

		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

在这里插入图片描述