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>

屏幕较小时，会显示出滚动条