Bootstrap使用
Bootstrap5的引用
下载了文档
Bootstrap CDN这样就不要下载，直接引入
容器元素
1
2
3
4
网格系统
网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
当容器宽度大于设备宽度时，块将上下堆叠
每个类都是按比例放大的，所以如果你想设置 sm 和 md 具有相同的宽度，你只需要指定 sm 即可。
不等宽响应式列
col-sm-4占容器宽度的三分之一
嵌套式
偏移列
<div class="row">
<div class="col-md-4"style="background-color:pink">.col-md-4</div>
<div class="col-md-4 offset-md-4" style="background-color:pink">.col-md-4 .offset-md-4</div>
</div>
列顺序order-
数字只能是1-5，没有数字的排在数字之前
<div class="row">
<div class="col-md-3 order-3">1 </div>
<div class="col-md-3 order-2">2 </div>
<div class="col-md-3 order-1">3 </div>
</div>
文字排版
对齐
省略文本
<div class="row">
<p class="col-md-1">这是一个很长的段楼</p>
</div>
<div class="row">
<p class="col-md-1 text-truncate">这是一个很长的段楼</p>
</div>多出的部分不换行，而是直接用省略号代替
文本颜色
字体颜色
<div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-body">默认颜色，为黑色。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
背景颜色
<div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">黑色背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
徽章
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化:
例如
<h1>测试标题 <span class="badge bg-secondary">New</span></h1>
<h2>测试标题 <span class="badge bg-secondary">New</span></h2>
<h3>测试标题 <span class="badge bg-secondary">New</span></h3>
<h4>测试标题 <span class="badge bg-secondary">New</span></h4>
<h5>测试标题 <span class="badge bg-secondary">New</span></h5>
<h6>测试标题 <span class="badge bg-secondary">New</span></h6>
药丸状徽章
<span class="badge rounded-pill bg-default">默认</span>
<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-success">成功</span>
<span class="badge rounded-pill bg-info">信息</span>
<span class="badge rounded-pill bg-warning">警告</span>
<span class="badge rounded-pill bg-danger">危险</span>
嵌入
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-warning">!</span>
</button>
列表
unstyled取消圆点或序列
内联列表（横向排列）list-inline-item
<ul class="list-inline">
<li class="list-inline-item">第一项</li>
<li class="list-inline-item">第二项</li>
<li class="list-inline-item">第三项</li>
</ul>
列表组（水平与纵向）
所有子类都要加list-group-item
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
<li class="list-group-item">第四项</li>
</ul>
去除边框：父类添加list-group-flush
鼠标悬停，背景变为浅灰色：子类添加list-group-item-action
设置标题，添加list-group-item-heading为标题 添加list-group-item-text为正文 例子
表格
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>表格整体带上table属性，分为thead和tbody两个部分
大小
.table-sm 类用于通过减少内边距来设置较小的表格:
<table class="table table-bordered table-hover table-sm "><div class="table-responsive"> <table class="table"> 这个表格要用一个盒子框住，盒子添加"table-responsive
条纹
通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：
<table class="table table-striped">
边框
<table class="table table-striped table-bordered">
悬停状态
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）
<table class="table table-bordered table-hover">
背景颜色
<table class="table table-bordered table-hover ">
<thead class="table-active">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec@example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie@example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo@example.com</td>
</tr>
</tbody>
</table>
按钮
添加btn样式
<button type="button" class="btn">基本按钮</button>
链接按钮
<a href="#" class="btn btn-primary ">禁止点击的链接</a>
块级按钮
通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中：
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
</div>此时按钮的大小由盒子的大小决定
边框按钮
<button type="button" class="btn btn-outline-primary">主要按钮</button>
按钮组btn-group
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>使用btn-group-lg|sm控制大小，使用btn-group-vertical让按钮垂直
信息提示框
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert" 类来设置提示框的关闭操作。
实例
<div class="alert alert-success alert-dismissible"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> <strong>成功!</strong> 指定操作成功提示信息。 </div>