Bootstrap 基本样式-表格

最新推荐文章于 2024-03-22 01:56:30 发布
最新推荐文章于 2024-03-22 01:56:30 发布
阅读量2.7k 收藏 2
点赞数
分类专栏： 前端-Bootstrap
1 : 基本表格    table
2 : 带斑马线的表格    table table-striped
3 : 带边框的表格    table table-bordered
4 : 有鼠标悬停状态的表格    table table-hover
5 : 更加紧凑的表格    table table-condensed
6 : 多种表格效果整合在一起    table table-striped table-bordered table-hover  table-condensed
7 : 激活样式    active
8 : 成功样式    success
9 : 信息样式    info
10 : 警告样式    warning
11 : 危险样式    danger

  • 基本表格

    拥有横向分割线的表格，宽度占用父容器的

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 带斑马线的表格

    通过斑马线把奇偶行的区别表现出来

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-striped">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 带边框的表格

    给表格的单元格加上边框
    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-bordered">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 有鼠标悬停状态的表格

    鼠标悬停高亮显示


    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-hover">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 更加紧凑的表格

    让表格更加紧凑

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 多种表格效果整合在一起

    多种表格样式混合使用
    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table table-striped table-bordered table-hover  table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td>616</td> 
     </tr>
 <tr>
        <td><img width="20px" src="teemo.png"/></td> 
        <td>提莫</td> 
        <td>383</td> 
     </tr>
 <tr>
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 激活样式

    用于表示该行被选中

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="lol/teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="active">
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 成功样式

    用于表示该行的信息是成功的

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="success">
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 信息样式

    用于表示该行的信息是正常的

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="info">
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 警告样式

    用于表示该行的信息有疑问

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="warning">
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>
  • 危险样式

    用于表示该行的信息有错误

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<table class="table">
    <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="gareen.png"/></td> 
        <td>盖伦</td> 
        <td >616</td> 
     </tr>
 <tr>
        <td ><img width="20px" src="teemo.png"/></td> 
        <td >提莫</td> 
        <td >383</td> 
     </tr>
 <tr  class="danger">
        <td><img width="20px" src="akali.png"/></td> 
        <td>阿卡丽</td> 
        <td>448</td> 
     </tr>
  </tbody>
</table>

litengbin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ttkbootstrap pythony库
03-06
ttkbootstrap pythony库
零基础Bootstrap入门教程(7)--使用表格
程序员大阳
04-26 3147
表单控件 添加.form-control样式即可将基本表单控件转化为Bootstrap样式 .form-control 应用于表单控件 .input-lg 大号控件 .input-sm 小号控件 Bootstrap基本表单 &amp;lt;form&amp;gt;&amp;lt;!--表单--&amp;gt; &amp;lt;div class=&quot;form-group&quot;&amp;gt;&amp
Bootstrap Table数据表格的使用指南，作为一个Java程序员
最新发布
m0_60388117的博客
03-22 438
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
【Python将excel数据绘制成图表并打包成exe】
qq_40605196的博客
06-27 1002
Test_Data_Statistics.py是GUI主文件；-w：不打开console，-c：打开console。生成dist和build文件夹，exe文件存放在dist文件夹中，双击即可运行。3.python项目虚拟环境和系统环境均需要安装pyinstaller。这里修改了spec文件名称：GUI_TDS.spec。GUI交互界面：Test_Data_Statistics.py。2.打包成exe前系统环境需要安装使用到的第三方库。绘制饼图和柱状图：graph_handle.py。
Python使用Treeview制作表格（二）
活动的笑脸的博客
08-01 1967
Python编写GUI界面
BootStrap_学习
killerhz的博客
04-15 145
BootStrap框架 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 好处： 1、定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2、响应式布局。即同一套页面可以兼容不同分辨率的设备。 使用...
52-tkinter-ttkbootstrap-tableview表视图模块
*****
07-14 1295
基于小部件构建的类，用于在 中排列数据 行和列。基础树视图对象及其方法是 暴露在物业中。表视图对象包含各种功能，例如具有条带化行， 分页，以及自动调整大小和自动对齐的列。加载大量数据时，建议使用分页选项，因为 表记录是按需插入的。表记录仅 在请求在页面视图中创建。这允许表 即使有数十万个，也能非常快速地加载 记录。所有表列都是可排序的。单击列标题将切换 在排序“升序”和“降序”之间。可以通过传递一个简单的标头名称列表来配置列或 通过传入带有设置的列名字典。
Python使用Treeview制作表格
活动的笑脸的博客
05-15 2572
本文需要以下的库文件，读者可以按照下方的方法进行安装： """ 需安装的库文件： pip install ttkbootstrap 换源网址： - 豆瓣：http://pypi.douban.com/simple/ - 中科大：https://pypi.mirrors.ustc.edu.cn/simple/ - 清华：https://pypi.tuna.tsinghua.edu.cn/simple 换源安装，例如：pip install ttkbootstrap -i https://pypi.tuna
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
bootstrap--表格制作
sunnyboysix的博客
11-30 773
bootstrap--表格制作
ttkbootstrap 学习
qq_56402474的博客
10-14 2281
ttkbootstrap 第三方库学习，创建python GUI 界面
ttkbootstrap:Tkinter TTK的现代主题集合
03-26
ttkbootstrap Tkinter TTK的现代主题的集合，这些主题使用标准的跨平台主题（“蛤”，“ alt”，“经典”，“默认”）构建。 这些主题中的大多数都是从发布的开源引导主题改编和/或启发而来的。 安装 pip install ttkbootstrap 示范 您可以通过在python解释器中执行以下代码，在现场演示中查看以下示例 >> from ttkbootstrap import Demo >> Demo () 基本用法 from ttkbootstrap import BootStyle , ttk style = BootStyle () style . theme_use ( 'flatly' ) root = style . master # create widget with primary colors ttk . Label ( root , text
bootstrap-table+treegrid实现树形表格
10-16
主要为大家详细介绍了bootstrap-table+treegrid实现树形表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
用Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板，具有筛选、分页、排序等功能，全屏页面。表格制作精美，数据显示清晰合理，可直接应用于前端的开发。
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
Bootstrap基本样式学习笔记之表格(2)
09-01
Bootstrap提供了一个清晰的创建表格的布局，这篇文章主要介绍了Bootstrap学习笔记之表格基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap树型表格和多标题表格
06-23
从bootstrap修改出来的与ext treegrid相似的插件，能当树形和普通多标题插件用，自带行内编辑
38-tkinter-ttkbootstrap-主题
*****
07-13 867
标准主题在模块中定义。
Bootstrap 全局CSS样式：表格类的使用
WangMin@汪末末
08-30 1321
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 基本实例 给任意 <table> 标签添加类 .table 可以给表格添加基本的样式 — 少量的内补（padding）和水平方向的分隔线。 实例： <table class="table"> <tr> <th>#</th> <th>表格标题</th> <th>表格标
bootstrap-table-export
07-13
### 回答1： bootstrap-table-export是一个基于Bootstrap框架的表格插件，用于导出表格数据为不同格式的文件。 通过使用bootstrap-table-export插件，我们可以方便地将表格数据导出为Excel、CSV、JSON等格式的文件，以便于后续的数据分析、存档或分享。 bootstrap-table-export提供了一些简单易用的API，使得我们可以灵活地控制导出的文件格式、文件名、是否包含表头、是否仅导出当前页的数据等。 使用bootstrap-table-export，我们只需要在表格中添加相应的导出按钮，并绑定相应的事件，即可实现导出功能。对于需要导出的表格，还可以通过一些配置选项，对导出的数据进行进一步的筛选和格式化。 除了导出功能，bootstrap-table-export还支持一些其他的扩展功能，如自定义表格的样式、分页、搜索、排序等。可以帮助我们更好地展示和管理表格数据。 总的来说，bootstrap-table-export是一个非常方便实用的表格导出插件，能够帮助我们轻松地导出表格数据为不同格式的文件，提高了数据的利用价值和效率。 ### 回答2： bootstrap-table-export是一款基于Bootstrap框架的表格导出插件。该插件可以让我们方便地将Bootstrap表格中的数据导出为Excel、PDF、CSV等常见的文件格式，以便进行保存或进一步处理。 首先，使用bootstrap-table-export插件可以很方便地实现表格数据的导出功能，无需手动编写复杂的导出代码。只需在Bootstrap表格上添加相应的配置选项，即可实现点击按钮或菜单即可导出表格数据。 其次，bootstrap-table-export支持导出多种常见的文件格式。无论是Excel、PDF还是CSV文件，我们都可以选择导出我们需要的格式。这样在对数据进行保存或者与其他软件进行交互时，更加灵活、方便。 此外，bootstrap-table-export插件提供了丰富的配置选项，可以满足不同的导出需求。我们可以根据自己的需要设置导出的文件名、导出的表头、文件格式等等。还可以对导出文件的样式进行自定义，使得导出的文件与我们的需求更加匹配。 总之，bootstrap-table-export是一款功能强大且易于使用的表格导出插件。它可以让我们在使用Bootstrap表格时，轻松实现表格数据的导出功能，并通过提供多种文件格式和丰富的配置选项，满足不同需求，方便我们对数据进行保存或进一步处理。 ### 回答3： bootstrap-table-export是一个基于Bootstrap框架开发的表格插件，用于将数据表格导出为不同格式的文件，如Excel、CSV和PDF等。它提供了一种简便的方式来导出数据，方便用户进行数据的分析和处理。 使用bootstrap-table-export非常简单，只需要在HTML中引入必要的CSS和JavaScript文件，然后在表格上添加相应的类和属性即可。插件会自动将表格转换为可导出的格式，并提供下载或在线预览的功能。 该插件提供了丰富的配置选项，可以根据自己的需求进行定制，如选择导出的文件类型、设置导出文件的名称、隐藏不需要导出的列等。此外，它还支持导出选中的行、当前页的数据或者全部数据，使得导出更加灵活可控。 另外，bootstrap-table-export还支持自定义导出按钮的样式和位置，方便用户能够灵活的控制导出功能的展示形式。同时，它还提供了一些回调函数用于对导出过程进行处理，如在导出前进行数据格式的转换、导出完成后进行一些操作等。 总之，bootstrap-table-export是一个功能强大、易于使用的数据表格导出插件，给用户提供了便捷的导出数据的方式，使得数据分析和处理变得更加高效和方便。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值