讲给后台程序员看的前端系列教程(48)——Bootstrap全局CSS样式(2)

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

表格样式

在本节教程中,我们重点关注Bootstrap提供的与表格相关的CSS样式。

在Bootstrap中可使用.table为table标签设置基本的样式,可使用.table-bordered为表格设置边框,可使用.table-striped设置每行的相间效果,可使用.table-hover设置表格行的悬停效果。

示例如下:

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>全局CSS样式</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<table class="table table-bordered table-striped table-hover text-center">
			<tr >
				<th class="text-center">学号</th>
				<th class="text-center">姓名</th>
				<th class="text-center">年龄</th>
			</tr>
			<tr>
				<td>9527</td>
				<td>丽丽</td>
				<td>23</td>
			</tr>
			<tr>
				<td>9528</td>
				<td>倩倩</td>
				<td>24</td>
			</tr>
			<tr>
				<td>9529</td>
				<td>茜茜</td>
				<td>25</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值