<!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>