bootstrap断点 sm，md，lg，xl，xxl 用于分辨率大小
Bootstrap的容器
.container默认容器，其宽度为在每个响应断点处之前，都是前一个断点的最大宽度
.container-fluid, 流式容器，始终占浏览器宽度的100%。
断点容器表
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | X-Large ≥1200px | XX-Large ≥1400px | |
|---|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
网格系统
row代表行 col代表单元格，写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）
行必须放置在 容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）
预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度。需要其他的可自己定义
class=“col-12 col-sm-6 col-md-4 col-md-3 col-lg-2” 表示在不同尺寸的屏幕上显示不同的col样式
网格对齐方式align-items-start、align-items-center、align-items-end 上对齐，中对齐，下对齐
.row-cols可以直接批量加col效果，.row-cols-5表示一行5个单元格 写在和row同级
<div style="width: 800px;height: 200px;" class="row row row-cols-3">
内容
</div>
列的排序 order-* 只支持数字1-5 其他数字无效
offset-*可以造成偏移量offset-2表示往右偏移2个单元格；偏移过多会直接挤到下一行 可以响应式偏移，同容器
.ms-auto .me-auto 如果col不满12行，这两个class可以强行实现满行
.img-fluid实现图片的自适应布局；img-thumbnail有缩略图样式的自适应布局
picture标签，用于基于屏幕尺寸展示不同图片用法如下:
<picture>
<source media="(max-width: 600px)" srcset="../public/111111111.png">
<img class="img-thumbnail " src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg">
</picture>
//先匹配source的条件，不匹配就显示img，匹配就显示source
figure标签，用于图片和文字标题的组合展示用法如下：
<figure>
<img src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
</figure>
.figure、.figure-img和.figure-caption会提供一下基本样式
//给盒子加圆边框 rounded
table表格 class里写table会给表格加bootstrap内置基础样式；table-*加颜色 例如table-primary 可以整表加，可以单行加；无法给列加
<table class="table caption-top ">
<caption class="text-center">
<h3>人员登记表</h3>
</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>张三</td>
<td>男</td>
<td>警察</td>
</tr>
<tr>
<th>2</th>
<td>李四</td>
<td>女</td>
<td>护士</td>
</tr>
<tr>
<th>3</th>
<td>王五</td>
<td>男</td>
<td>教师</td>
</tr>
</tbody>
<tfoot>
<th>序号</th>
<td>姓名</td>
<td>性别</td>
<td>职业</td>
</tfoot>
</table>
基本示例，thead表头 tbody表内容 tfoot表尾 caption表格标题
响应式表格：在表格外套一个div中写table-responsive实现响应式，滚动条只在盒子上展示，不会超出页面宽度
table-bordered加表格边框 border-* 加边框颜色 例如border-primary 默认是有行边框的；
table-borderless实现无边框
table-sm实现小表格
table-striped明暗行 table-hover加鼠标hover效果
导航栏 nav
<div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
aria-controls="home" aria-selected="true">首页</button>
</li>
<li role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
aria-controls="profile" aria-selected="false">资料</button>
</li>
<li role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
aria-controls="contact" aria-selected="false">联系方式</button>
</li>
</ul>
<div id="">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h1>首页内容</h1>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h1>个人资料</h1>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h1>联系方式</h1>
</div>
</div>
</div>
// nav-tabs和nav-pills加基础样式 nav-pills会给加按需分配宽度；.nav-justified强制等宽，会压缩文字
添加flex-column flex-sm-row可以响应式变化
使用data-bs-target定义的值 和模块id来进行绑定对应的页面
aria-selected="true"表示当前导航栏是选中的
** 垂直导航选项卡 需要使用直接复制修改**
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
<button class="nav-link " id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile"
type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
<button class="nav-link " id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages"
type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
</div>
<div id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h1>首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h1>个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h1>联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
