【无标题】

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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>
		<img src="img/img1.jpg" class="border-top-0 m-3 border-danger border-3 img-thumbnail" width="300px">
		<div class="d1 border rounded-lg border-warning">
			test
		</div>
		
		<div class="p-2 mb-2 bg-primary">p-2 mb-2 bg-primary</div>
		<div class="p-2 mb-2 bg-secondary">p-2 mb-2 bg-secondary</div>
		<span class="text-primary">text-primary</span>
		<span class="text-secondary">text-secondary</span>
		<span class="text-success">text-success</span>
		<span class="text-danger">text-danger</span>
		<span class="text-warning">text-warning</span>
		<span class="text-info">text-info</span>
		<style type="text/css">
			.d1{
				width: 200px;
				height: 200px;
			}
		</style>
	</body>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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:10em;
		   font-size: 20px;
		   }        
		</style>
		
		<div class="c float-start border m-5 border-success"></div>
		<div class="c float-end border border-success"></div>
		<div class="c p-2 text-nowrap text-center"
		style="width: 6rem;">Bootstrap 4.x</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>
		<div class="p-2 text-monospace">Bootstrap 4.x</div>
		<a href="#" class="text-decoration-none">V4.3</a>
		<div class="text-muted">
		Bootstrap 最新版本: <a href="#" class="text-reset">V4.3</a>
		</div>
		<div class="p-2 font-weight-bold">dd</div>
		<div class="p-2 font-weight-normal">ccx</div>
		<div class="p-2 font-weight-light">wwx</div>
		<div class="p-2 font-italic">zz.x</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="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="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>
		
	</body>
	<style type="text/css">
		html{
			font-size: 10px;
		}
		:root{
			font-size: 20px;
		}
	</style>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值