BootStrap3 表格系列

最新推荐文章于 2022-05-04 17:04:46 发布
最新推荐文章于 2022-05-04 17:04:46 发布
阅读量301 收藏
点赞数
分类专栏： BootStrap3 文章标签： BootStrap3 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103113696
版权

目录

官方地址

https://v3.bootcss.com/css/#tables

基类

.table

条纹状表格

.table-striped

<table class="table table-striped">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

带边框

.table-bordered

<table class="table table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

鼠标悬停

.table-hover

<!-- 鼠标悬停 -->
<table class="table table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

紧缩表格

.table-condensed

<!-- 紧缩 -->
<table class="table table-condensed">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

状态类

为行或单元格设置

  • .active
  • .success
  • .info
  • .warning
  • .danger
<!-- 状态类 -->
<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Column heading</th>
        <th>Column heading</th>
        <th>Column heading</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
        <th scope="row">1</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="success">
        <th scope="row">3</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">4</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="info">
        <th scope="row">5</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">6</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="warning">
        <th scope="row">7</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">8</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="danger">
        <th scope="row">9</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    </tbody>
</table>

响应式表格

.table-responsive

<!-- 响应式表格 -->
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        </tbody>
    </table>
</div>

整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>05表格</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color: #ccc;">

<pre class="pre-scrollable">
    基类
        .table
    条纹状表格
        .table-striped
    带边框
        .table-bordered
    鼠标悬停
        .table-hover
    紧缩表格
        .table-condensed
    状态类（为行或单元格设置）
        .active
        .success
        .info
        .warning
        .danger
    响应式表格
        .table-responsive
</pre>

<!-- 条纹状表格 -->
<table class="table table-striped">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<!-- 带边框 -->
<table class="table table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<!-- 鼠标悬停 -->
<table class="table table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<!-- 紧缩 -->
<table class="table table-condensed">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<!-- 状态类 -->
<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Column heading</th>
        <th>Column heading</th>
        <th>Column heading</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
        <th scope="row">1</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="success">
        <th scope="row">3</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">4</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="info">
        <th scope="row">5</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">6</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="warning">
        <th scope="row">7</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr>
        <th scope="row">8</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    <tr class="danger">
        <th scope="row">9</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
    </tr>
    </tbody>
</table>

<!-- 响应式表格 -->
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        </tbody>
    </table>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap笔记3—表格table
erdouzhang
03-08 566
表格具体参考Bootstrap中文网手册。1.基础样式class="table"<table class="table"> <tr> <th>序号</th><th>姓名</th><th>年龄</th> </tr> <tr> <td>1</td><td>张三</td><td>18</td> </tr>
JS组件系列之Bootstrap table表格组件神器【终结篇】
10-22
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】，一起学习吧
Bootstrap3 表格-基本表格
weixin_34247032的博客
11-25 46
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。 <table class="table"> ... &l...
Bootstrap3 表格样式
歪脖先生的博客
05-05 1170
表格 HTML表格是数据的二维容器，它的基本作用是用来存放数据。表格能够清晰、直观地描述数据间的逻辑关系，如果借助CSS设计表格的样式，阅读数据将会变得更轻松。 表格结构包括众多标签，这些标签各司其职，共同完成二维数据的呈现功能。Bootstrap支持的表格标签及其功能描述见表 2‑1： 表 2‑1 Bootstrap支持的表格标签 标签 描述 <table> ...
看程序学bootstrap3-基本样式之表格
tujiahao1的博客
06-24 148
示例 1 : 基本表格 <!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" re...
BootStrap3--全局CSS之表格
吴声子夜歌的博客
11-22 391
表格 基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 Optional table caption. # First Name Last Name ...
bootstrap动态表格模板
09-23
首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持各种类型的表格样式，如 striped（斑马纹）、hover（鼠标悬停高亮）和bordered（带边框）。通过简单的HTML标记和类名，可以轻松...
ABP入门系列应用BootstrapTable表格插件
10-20
Bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。下面通过本文给大家介绍ABP入门系列应用BootstrapTable表格插件，感兴趣的朋友一起学习吧
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
10-22
`oInit.InitSubTable`方法负责加载子表格，通常会通过Ajax请求获取子数据，并使用这些数据初始化新的Bootstrap Table。在这个过程中，我们可以设置子表格的URL、列定义等参数。 接下来，我们讨论行列调序。...
Bootstrap表格编辑生成器插件.rar
04-29
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
Bootstrap3 表格处理
weixin_44055272的博客
05-12 1209
1 表格基本功能回顾 1.1 定义表格总结，定义行及行内元素 1.table标签表示一整张表 2.tr标签表示一行 3.td标签表示一个单元格 1.2 合并单元格 1.通过col，row 1.3 其他标签 1.caption标签 2. 2 表格样式 2.1 基础样式 2.2 有边框的表格 2.3 条纹状表格 2.4 点击会有悬浮样式的表格 2.5 紧凑型表格 2.6 响应式表格 ...
【技巧】Bootstrap3表格之实战
zuncle的博客
03-16 758
先来看效果：全部代码在下面：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <meta name="viewport" content="in
Bootstrap3 表单
歪脖先生的博客
05-07 688
表单 Bootstrap 为表单和表单控件提供了一些全局样式，不需要添加任何辅助类，即可让表单使用默认布局。默认布局中，表单元素采用垂直布局，标签和输入框采用顶对齐方式。 Bootstrap 中创建表单的基本步骤如下： 为每个表单控件<input>、<textarea>和<select>元素添加.form-control类； 把成对的<labe...
bootstrap3-表格
weixin_34358092的博客
02-07 57
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>bootstrap3</title><li...
Bootstrap03(媒体对象&表格&模态框&图标&)
m0_67294268的博客
05-04 318
今天带大家了解一些组件 ： 1、媒体对象 媒体对象有助于构建复杂且重复的组件，其中一些媒体位于不环绕所述媒体的内容旁边。 <div class="media"> <img src="img/1.png" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0"><b>冷间谍</b></h5>
基于bootstrap3的表格组件
acweilisky0825的专栏
07-29 7850
表格在自己目前的开发中很常用，每次都写那么多重复的代码，感觉很繁琐。为了以后的开发中表格使用方便，特将表格封装成了一个组件，调用方式类似jquery的easyui，比较方便通用。 样子大概如下： 调用方式：引入jquery、bootstrap、lodash，之后在html页面写如下代码： 新建
Bootstrap3 带表格的面板
歪脖先生的博客
05-24 696
带表格的面板 在使用面板组件时，往往可能需要在面板中放很多内容，如图片、表格等。如果在面板中添加表格，建议使用无边框的表格，这让整个面板看上去是一个整体。 如果是带有.panel-body的面板，我们还在表格的上方，添加了一个边框来将它们隔离开来。如： <divclass="panel panel-default"> <!—默认的面板内容 --> ...
bootstrap jquery 表格编辑
最新发布
06-12
Bootstrap 和 jQuery 都有着非常好用的表格编辑功能，可以方便地实现表格的增删改查等功能。 Bootstrap 的表格编辑需要使用一个插件，如 Bootstrap Table，它提供了一系列的 API 和事件，可以方便地对表格进行编辑和操作。 jQuery 的表格编辑则需要使用 jQuery 插件，如 DataTables，它也提供了一些 API 和事件，可以实现快速的表格操作。 无论是使用 Bootstrap 还是 jQuery，都需要在 HTML 页面中引入相关的库文件和样式表，并且编写相应的 JavaScript 代码来实现表格编辑功能。具体实现方法可以参考相关文档和示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值