学习周记④

最新推荐文章于 2023-12-17 18:25:58 发布

Gggc

最新推荐文章于 2023-12-17 18:25:58 发布

阅读量46

点赞数

本文链接：https://blog.csdn.net/SwagGccc/article/details/118248221

版权

Week4# 学习目标：

掌握Bookstrap

学习内容：

Bootstrap 表格

————————————————

学习产出：

1 Bootstrap 表格
1.1基本元素
标签描述
< table > 为表格添加基础样式。
< thead> 表格标题行的容器元素（< tr>），用来标识表格列。
< tbody> 表格主体中的表格行的容器元素（< tr>）。
< tr> 一组出现在单行上的表格单元格的容器元素（< td> 或 < th>）。
< td> 默认的表格单元格。
< th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 < thead> 内使用。
< caption> 关于表格存储内容的描述或总结。

1.2表格类
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	
<div class="container">
	<h2>用于表格的行或者单元格</h2>
	<p>联合使用以上所有表格类:</p> 
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>类</th>
				<th>描述</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>.active</td>
				<td>将悬停的颜色应用在行或者单元格上</td>
			</tr>
			<tr>
				<td>.success</td>
				<td>表示成功的操作</td>
			</tr>
			<tr>
				<td>.info</td>
				<td>表示信息变化的操作</td>
			</tr>
			<tr>
				<td>.warning</td>
				<td>表示一个警告的操作</td>
			</tr>
			<tr>
				<td>.danger</td>
				<td>表示一个危险的操作</td>
			</tr>
		</tbody>
	</table>
</div>

</body>
</html>

在这里插入图片描述
表格应用
通过对以上内容的应用
可以构建基本的表格和可选的表格类
基本的表格
添加 class .table，只带有内边距（padding）和水平分割
可选的表格
类除了基本表格的内容，还可以加一些标记定义的类
a.条纹表格
添加 .table-striped class，在 < tbody > 内的行上看到条纹
b.边框表格
添加 .table-bordered class，使每个元素周围都有边框
c.悬停表格
添加 .table-hover class，使当指针悬停在行上时会出现浅灰色背景
d.精简表格
添加 .table-condensed class，使行内边距被切为两半
还可以构建上下文类和响应式表格
上下文类
使用.active、.success、.warning、.danger，改变单元格或表格行背景颜色
响应式表格
通过把任意的 .table 包在 .table-responsive class 内，使表格水平滚动以适应小型设备（小于 768px）

Bootstrap 图片
1.三个简单样式
Bootstrap 提供了三个可对图片应用简单样式的 class
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

响应式图片
通过在 < img > 标签添加 .img-responsive 类来让图片支持响应式设计。
图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：