BootStrap栅格系统
比较简单
总代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap栅格系统</title>
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/css/bootstrap.min.css">
<script src="./jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="./bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1><strong>Hello,world!</strong></h1><br>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<h2>区域一</h2>
<hr>
<p>Bootstrap has a few easy ways to quickly get started,each one appealing to a different skill level and use case.Read through to see
what suits your particular needs.</p>
<br>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<h2>区域二</h2>
<hr>
<p>If you work BootStrap's uncompiled source code,you need to compile the LESS files to produce useable CSS files.For compiling LESS files
into CSS,we only Officially support Recess,which is TWitter's CSS hinter based on less.js.</p>
<br>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<h2>区域三</h2>
<hr>
<p>Within the download you'll find the following directories and files,logically grouping common resources and providing both
compiled and minified variations.</p>
<br>
</div>
</div>
</div>
</body>
</html>