Bootstrap-1 表格样式

最新推荐文章于 2022-11-05 15:19:41 发布

梦琪96

最新推荐文章于 2022-11-05 15:19:41 发布

阅读量1k

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap 表格

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Bootstrap框架下表格的各种样式设定，包括基础样式、条纹样式、边框样式、悬停样式、紧凑样式及行样式等，并提供了响应式表格的设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap表格样式分类

基础样式：table
带背条纹表格：table-striped
带边框：table-border
悬停：table-hover
紧凑：table-condensed
行样式：active 、success 、info
响应式表格

操作步骤

在桌面新建一个文件夹作为站点来存放页面，以“我的站点”为文件名。（文件名自己随意写）
使用DW软件新建站点，站点位置选择自己在桌面新建的文件夹“我的站点”。
新建站点的图文教程
在“我的站点”里新建一个html页面“1.html”
复制bootstrap需要用到的文件夹到“我的站点”里

下载bootstrap所需的压缩包，解压后就可以复制到站点里用

注：
css文件夹的是bootstrap设定好的样式，确定网页的布局；
fonts文件夹的是bootstrap用到的字体，确定网页内容的字体；
img文件夹的是自己自定义存放的图片；
js文件夹的是bootstrap设定好的脚本语言，确定网页的行为。

在“1.html”页面里输入以下代码（头文件部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>1</title>
    <meta charset="UTF-8">
    *//width - viewport的宽度 height - viewport的高度
    //initial-scale - 初始的缩放比例
    //minimum-scale - 允许用户缩放到的最小比例
    //maximum-scale - 允许用户缩放到的最大比例
    //user-scalable - 用户是否可以手动缩放*
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    //css文件
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

写表格（简单的）

<body>
<div class="container">
<table>
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
</body>

效果如下：（可以看得出来，表格是没有设全局的table样式的）
在这里插入图片描述

在table上加一个class=“table”，bootstrap定义了一个table，table是一个基础的表格样式。

<table class="table">

效果如下：（我们可以发现这个表格占满了整个屏幕也就是整个container了。）
在这里插入图片描述

把页面缩放到屏幕的一半，可以看到它会依照你的分辨率大小来自适应。
在这里插入图片描述

（注意：我们在给表格样式的时候，一般是先加基础样式再加其它样式。）
table是基础样式，table-striped是附加样式，完整写table table-striped，基础样式＋1个空格+附加样式

带背条纹表格样式：table-striped

<h1>带条纹</h1>
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

效果如下：
在这里插入图片描述

带边框的表格样式：table-border

table-border和table-striped一起用

<h1>带边框</h1>
<table class="table table-bordered table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

效果如下：
在这里插入图片描述

悬停：table-hover

<h1>悬停</h1>
<table class="table table-bordered table-striped table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

效果如下：（当鼠标移动到某一行时，这一行显示成灰色。）
在这里插入图片描述

紧凑：table-condensed

<h1> 紧凑</h1>
<table class="table table-bordered  table-condensed">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

效果如下：（紧凑型表格是自适应分辨率，唯一不同的就是内容离边框相对较近。）
在这里插入图片描述

行样式：active、success、info

<h1> 行样式</h1>
<table class="table table-bordered ">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>

效果如下：
在这里插入图片描述

响应式表格

// 响应式表格”就是通过媒体查询来判断你这个像素是多少，从而设置表格的大小。
<h1> 响应式</h1>
<div class="row">
<div class="col-sm-4">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
</div>
</div>