bootstrap4|颜色|表格

bootstrap4.1.3.zip

链接: https://pan.baidu.com/s/1lGFoaifVjGER-BBfnbiWAA 提取码: 6w6w

1、颜色

（1）Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light。

<div class="container">
	<h4>指定有特别意义的文本颜色</h4>
	<p class="text-muted">柔和的颜色(#6c757d)</p>
	<p class="text-primary">重要的文本(#007bff)</p>
	<p class="text-success">执行成功的文本(#28a745)</p>
	<p class="text-info">代表一些提示信息的文本(#17a2b8)</p>
	<p class="text-warning">警告文本(#ffc107)</p>
	<p class="text-danger">危险操作文本(#dc3545)</p>
	<p class="text-secondary">副标题(#6c757d)</p>
	<p class="bg-dark text-white">白色文本</p>
	<p class="text-dark">深灰色文本(#343a40)</p>
	<p class="bg-dark text-light">浅灰色背景（白色背景下不清楚）(#343a40)</p>
</div>

（2）bootstrap4提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

<div class="container">
 	<h4>背景颜色</h4>
 	<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-50">深色背景颜色</p>
 	<p class="bg-light text-dark">浅色背景颜色</p>
 </div>

（3）所有源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap颜色</title>
<!--width=device-width 表示宽度是设备屏幕的宽度,initial-scale=1 表示初始的缩放比例,shrink-to-fit=no 
自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</head>

<body>
<!--文本颜色-->
<!--.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, 
.text-secondary, .text-white, .text-dark  .text-light-->
<div class="container">
	<h4>指定有特别意义的文本颜色</h4>
	<p class="text-muted">柔和的颜色(#6c757d)</p>
	<p class="text-primary">重要的文本(#007bff)</p>
	<p class="text-success">执行成功的文本(#28a745)</p>
	<p class="text-info">代表一些提示信息的文本(#17a2b8)</p>
	<p class="text-warning">警告文本(#ffc107)</p>
	<p class="text-danger">危险操作文本(#dc3545)</p>
	<p class="text-secondary">副标题(#6c757d)</p>
	<p class="bg-dark text-white">白色文本</p>
	<p class="text-dark">深灰色文本(#343a40)</p>
	<p class="bg-dark text-light">浅灰色背景（白色背景下不清楚）(#343a40)</p>
</div>
<!--背景颜色-->
<!--.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary,
 .bg-dark .bg-light。-->
 <div class="container">
 	<h4>背景颜色</h4>
 	<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-50">深色背景颜色</p>
 	<p class="bg-light text-dark">浅色背景颜色</p>
 </div>
</body>
</html>

2、表格

//写表格时，一定要写<thead>、<tbody>,否则默认所有的<tr>都属于<tbody>内

.table 类来设置基础表格的样式

.table-striped 类，您将在 <tbody> 内的行上看到条纹

.table-bordered 类可以为表格添加边框

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

.table-dark 类可以为表格添加黑色背景

.table-dark 和 .table-striped 类可以创建黑色的条纹表格

.table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果

.table-sm 类用于通过减少内边距来设置较小的表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）

//在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景.

//在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。

源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap4.x表格</title>
<!--width=device-width 表示宽度是设备屏幕的宽度,initial-scale=1 表示初始的缩放比例,shrink-to-fit=no 
自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--.table设置基础表格的样式-->
	<table class="table">
		<thead>
			<tr>
				<th>A</th>
				<th>B</th>
				<th>C</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>active</td>
				<td>action</td>
				<td>attr</td>
			</tr>
			<tr>
				<td>bootstrap</td>
				<td>book</td>
				<td>background</td>
			</tr>
		</tbody>
	</table>
    <br/>
<!--	条纹表格-->
<!--.table-striped将在<tbody>内的行上看到条纹-->
	<table class="table table-striped">
		<thead>
			<tr>
				<th>A</th>
				<th>B</th>
				<th>C</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>active</td>
				<td>action</td>
				<td>attr</td>
			</tr>
			<tr>
				<td>bootstrap</td>
				<td>book</td>
				<td>background</td>
			</tr>
			<tr>
				<td>css</td>
				<td>css</td>
				<td>cackground</td>
			</tr>
		</tbody>
	</table>
	<br/>
<!--带边框表格-->
<!--.table-bordered可以为表格添加边框-->
	<table class="table table-bordered">
		<tr>
			<th>A</th>
			<th>B</th>
			<th>C</th>
		</tr>
		<tr>
			<td>active</td>
			<td>action</td>
			<td>attr</td>
		</tr>
		<tr>
			<td>bootstrap</td>
			<td>book</td>
			<td>background</td>
		</tr>
	</table>
<!--	鼠标悬停状态表格-->
<!--.table-hover可以为表格的每一行添加鼠标悬停效果（灰色背景）rgba(0,0,0,0.05)-->
	<table class="table table-hover">
		<tr>
			<th>A</th>
			<th>B</th>
			<th>C</th>
		</tr>
		<tr>
			<td>active</td>
			<td>action</td>
			<td>attr</td>
		</tr>
		<tr>
			<td>bootstrap</td>
			<td>book</td>
			<td>background</td>
		</tr>
	</table>
    <br/>
<!--    黑色背景颜色-->
<!--.table-dark-->
  <table class="table table-dark table-striped">
		<thead>
			<tr>
				<th>A</th>
				<th>B</th>
				<th>C</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>active</td>
				<td>action</td>
				<td>attr</td>
			</tr>
			<tr>
				<td>bootstrap</td>
				<td>book</td>
				<td>background</td>
			</tr>
			<tr>
				<td>css</td>
				<td>css</td>
				<td>cackground</td>
			</tr>
		</tbody>
	</table>
   <br/>
  <table class="table table-dark table-hover">
		<thead>
			<tr>
				<th>A</th>
				<th>B</th>
				<th>C</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>active</td>
				<td>action</td>
				<td>attr</td>
			</tr>
			<tr>
				<td>bootstrap</td>
				<td>book</td>
				<td>background</td>
			</tr>
		</tbody>
	</table>
   <br/> 
<!-- 指定意义的颜色类-->
	<table class="table">
		<thead>
<!--thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景-->
			<tr>
				<td>Class名</td>
				<td>指定颜色解释</td>
			</tr>
		</thead>
		<tbody>
			<tr class="table-primary">
				<td>table-primary</td>
				<td>蓝色： 指定这是一个重要的操作</td>
			</tr>
			<tr class="table-success">
				<td>table-success</td>
				<td>绿色: 指定这是一个允许执行的操作</td>
			</tr>
			<tr class="table-danger">
				<td>table-danger</td>
				<td>红色: 指定这是可以危险的操作</td>
			</tr>
			<tr class="table-info">
				<td>table-info</td>
				<td>浅蓝色: 表示内容已变更</td>
			</tr>
			<tr class="table-warning">
				<td>table-warning</td>
				<td>橘色: 表示需要注意的操作</td>
			</tr>
			<tr class="table-active">
				<td>table-active</td>
				<td>灰色: 用于鼠标悬停效果</td>
			</tr>
			<tr class="table-secondary">
				<td>table-secondary</td>
				<td>灰色: 表示内容不怎么重要</td>
			</tr>
			<tr class="table-light">
				<td>table-light</td>
				<td>浅灰色，可以是表格行的背景</td>
			</tr>
			<tr class="table-dark">
				<td>table-dark</td>
				<td>深灰色，可以是表格行的背景</td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>