5.18课堂练习

最新推荐文章于 2024-07-24 14:20:14 发布

kkdejw

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量88

点赞数

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/kkdejw/article/details/124858138

版权

<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 使用.border-0 消减四周的边框，或使用.border-*-0 消减某一边的边框； -->
		<img src="img/005G5fVoly1h0s94zxd0aj30oo1hcgno.jpg" class="border-top-0 m-5 border-danger border-3 img-thumbnail "width="200px">
		
		
		<!-- .rounded 和.rounded-*实现各种方位圆角； -->
			<div class="d1 border  border-danger  rounded"> 
			test
		</div> 
		<!-- 左start  右end -->
		
		
					
		
		</body>
	<script src="js/bootstrap.bundle.js" type="text/javascript"></script>
		<style type="text/css">
		
			.d1{
				margin-left: 200px;
				width: 200px;
				height: 200px;
				
			}/* img{
				width: 400px;
				height: 600px;
			
			} */
				
			
		</style>

在这里插入图片描述

<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<style type="text/css">
			.c{
			   /* width:200px;
			   height:200px;
				*/
			
			   width:20rem;
			   height:10em;
			   font-size: 20px;
			   }   
			  
		</style>	
		
		<!-- <div class="c float-start  ms-5 border border-success text-nowrap text-center">
			dddddddddddddddddddd  dddddddddddddddd  ddd
		</div> -->
		<div class="c float-start  ms-5 border border-success text-break">
			dddddddddddddddddddddddddddddddddddddd
		</div>
		<div class="c float-end border border-success text-rap text-center">
			dddddddddddddddddddd  dddddddddddddddd  dddddddddddd  ddddddd
		</div>

		
			<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>
			<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>
			
			<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>
				
			<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>
			
		<div class="bg-info">
			<span class="p-5">Bootstrap4.x</span>
			<span class="m-5">Bootstrap4.x</span>
			<span class="pt-5">Bootstrap4.x</span>
			<span class="mt-5">Bootstrap4.x</span>
			<span class="py-5">Bootstrap4.x</span>
		</div>
			<hr >
		<div class=" align-baseline">
			
		</div>
		<div class="p-2 text-lowercase">the bootstrap4.x</div>
		<div class="p-2 text-uppercase">the bootstrap4.x</div>
		<div class="p-2 text-capitalize">the bootstrap4.x</div>
		<hr >
		<div class="p-2 font-weight-bold">Bootstrap4.x</div>
		<div class="p-2 font-weight-normal">Bootstrap4.x</div>
		<div class="p-2 font-weight-light">Bootstrap4.x</div>
		<div class="p-2 font-italic">Bootstrap4.x</div>
		<hr >
		<div class="p-2 text-monospace">Bootstrap 4.x</div>
		<hr >
		<div class="text-muted">
		Bootstrap 最新版本： <a href="#" class="text-reset">V4.3</a>
		</div>
		<hr >
		<a href="#" class="text-decoration-none">V4.3</a>
		</body>
		
		
		<script src="js/bootstrap.bundle.js" type="text/javascript"></script>
		<style type="text/css">
				html{
								  
				}
				:root{
						font-size: 15px;
				}
			</style>
				
		

```![在这里插入图片描述](https://img-blog.csdnimg.cn/c9b564e83b79410ca52353b78a237dbf.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/93051bb11b2345da8a7465ffcf0cde5a.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/097520d3d29340559532caf2efd0bae1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2327bd959f144a6db496153d40148b05.png)

kkdejw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.18课堂练习

<meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> </head> <body> <!-- 使用.border-0 消减四周的边框，或使用.border-*-0
复制链接

扫一扫