示例
导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../bootstrap-5.0.0-beta1-dist/css/bootstrap.css" rel="stylesheet">
<title>bootstrap - nav</title>
</head>
<body>
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<script src="../bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../bootstrap-5.0.0-beta1-dist/css/bootstrap.css" rel="stylesheet">
<title>bootstrap - tables</title>
</head>
<body>
<table class="table table-striped table-bordered">
<tr>
<th>Head Colume 01 </th>
<th>02</th>
<th>03</th>
<th>Head Colume 04 </th>
</tr>
<tr>
<td>Item Row 1</td>
<td>02</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Item Row 2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Item Row 3</td>
<td>m</td>
<td>m</td>
<td>m</td>
</tr>
</table>
<script src="../bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="../bootstrap-5.0.0-beta1-dist/css/bootstrap.css" rel="stylesheet">
<title>bootstrap - nav</title>
<style>
.bbgb{background-color: blue;}
.bbgr{background-color: red;}
</style>
</head>
<body style="margin:20px;">
<div class="container">
<div class="row">
<div class="col-sm-12 clo-md-3 col-lg-5 col-xl-4 bbgr">
<h1>News</h1>
<h1>Blog</h1>
<h1>About</h1>
</div>
<!--
<div class="col-sm-12 clo-md-9 col-lg-7 col-xl-8"> -->
<div class="col-sm-12 clo-md-9 col-lg-7 col-xl-8 bbgb">
<p>This is a first page of bootstrap.</p>
</div>
</div>
</div>
<script src="../bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>基本概念
bootstrap基于sass编写样式，再构建成css发行。基于rollup构建js。
全局样式
定义了一系列颜色、边白等。如scss目录下的_variables.scss文件内容。
栅格系统
12栅格个，可分大小屏幕设定。
<div class="row mb-3">
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
<div class="col-1 themed-grid-col">.col-1</div>
</div>
<div class="row mb-3">
<div class="col-xl-1 themed-grid-col">.col-xl-4</div>
<div class="col-xl-2 themed-grid-col">.col-xl-4</div>
<div class="col-xl-3 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-2 themed-grid-col">.col-xl-4</div>
</div>
<div class="row mb-3">
<div class="col-lg-1 themed-grid-col">.col-lg-4</div>
<div class="col-lg-1 themed-grid-col">.col-lg-4</div>
<div class="col-lg-2 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
</div>
<div class="row mb-3">
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-8 themed-grid-col">.col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
</div>页面布局
提供了固定container、流式-fluid、响应式d-flex三种布局方法。
其他
与weui一样，提供了导航、表格、进度条等等组件。可参考https://getbootstrap.com/docs/5.0/examples/ 查看，容易上手