Bootstarp5第四弹
六、颜色
<div class="container mt-3">最基本的文本
<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-light">浅灰色文本</p>
<p class="text-white">白色文本</p>
</div>
设置颜色透明度和背景颜色(
)<div class="container mt-3">最基本的文本
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info-50 bg-primary">带有提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险性文本</p>
<p class="text-secondary">深灰色文本</p>
<p class="text-dark bg-danger">黑色文本</p>
<p class="text-light bg-dark">浅灰色文本</p>
<p class="text-white bg-dark">白色文本</p>
</div>
在链接中使用（）
<a href="#" class="text-muted">柔和链接</a>
<a href="#" class="text-primary">重要的文本</a>
<a href="https://www.runoob.com/bootstrap5/bootstrap5-colors.html" class="text-success">Bootstarp5教程</a>
<!--在href中放置网页链接，点击即可跳转-->
背景颜色与文本颜色应用除了text和bg不同，其余相同
七、表格
Bootstrap5 通过 .table 类来设置基础表格的样式
基础表格
<div class="container mt-3">
<table class="table">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
条纹表格（便于区分相邻的信息）
<div class="container mt-3">
<table class="table table-striped">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
<!--table-striped-->
边框表格
<div class="container mt-3">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
<!--table-bordered-->
鼠标悬停效果
<div class="container mt-3">
<table class="table table-hover">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
<!--table-hover-->
黑色背景表格
<div class="container mt-3">
<table class="table table-dark">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
<!--table-dark-->
以上效果可以共同使用：例如，黑色背景+条纹效果
无边框表格
<div class="container mt-3">
<table class="table table-borderless">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
<!--table-borderless-->
指定颜色到表格中
<div class="container mt-3">
<table class="table table-borderless">
<thead>
<tr class="table-danger">
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-primary">
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
表头颜色
<div class="container mt-3">
<table class="table table-dark">
<thead class="table-dark">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
较小的表格
<div class="container mt-3">
<table class="table table-dark table-sm">
<thead class="table-dark">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
响应式表格
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>John.com</td>
</tr>
</tbody>
</table>
</div>
屏幕较小时，会显示出滚动条
