Bootstrap框架制作漂亮web网页（1）——表格、按钮

最新推荐文章于 2024-04-12 12:12:32 发布

留家里哦哦哦

最新推荐文章于 2024-04-12 12:12:32 发布

阅读量1.5k

点赞数 2

分类专栏： Bootstrap学习文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_46304554/article/details/120285502

版权

表格

默认样式：table类，后来加上斑马效果：table-striped，加上边框：table-bordered
鼠标悬停的效果：table-hover
表格紧凑：table-condensed
效果展示图：
在这里插入图片描述
以上是几款不一样的表格：其中鼠标悬停是当鼠标移在上方时，当前行会变色。
不需要自己建立样式，直接采纳Bootstrap框架，第一步导入Bootstrap的css样式。
下载链接：Bootstrap下载链接
然后利用其中的样式，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <!-- 1. 导入CSS的全局样式 -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap学习</title>
</head>

<body >
<div class="container-fluid">

<table class="table table-striped">
<caption>条纹状表格</caption>
<tr>
<th>hhh</th>
<td>hjh</td>
</tr>
<tr>
<th>hhh</th>
<td

最低0.47元/天解锁文章

留家里哦哦哦

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap框架制作漂亮web网页（1）——表格、按钮

以上是几款不一样的表格：其中鼠标悬停是当鼠标移在上方时，当前行会变色。不需要自己建立样式，直接采纳Bootstrap框架，第一步导入Bootstrap的css样式。下载链接：Bootstrap下载链接然后利用其中的样式，代码如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD H.
复制链接

扫一扫