Bootstrap表格样式(附源码文件)--Bootstrap

最新推荐文章于 2023-04-19 17:43:33 发布
最新推荐文章于 2023-04-19 17:43:33 发布
阅读量195 收藏
点赞数
原文链接：http://www.cnblogs.com/qikeyishu/p/7679517.html
版权

1、表格默认样式

<h4>表格默认样式</h4>
<table><!--默认样式-->
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

2、表格基础样式

<h4>表格基础样式</h4>
<table class="table"><!--表格基础样式-->
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

3、带背景条纹的表格

<h4>带背景条纹</h4>
<table class="table table-striped">
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

4、带边框的表格

<h4>带边框的表格</h4>
<table class="table table-bordered">
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

5、显示鼠标悬停效果的表格

<h4>鼠标悬停的表格</h4>
<table class="table table-bordered table-hover">
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

6、紧凑型表格

<h4>紧凑型表格</h4>
<table class="table table-bordered table-condensed">
　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

7、表格行内样式

<h4>表格行内样式</h4>
<table class="table table-bordered table-condensed">
　　<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>

8、响应式表格

<h4>响应式表格</h4>
<div class="row">
　　<div class="col-sm-4">
　　　　<div class="table-responsive">
　　　　　　<table class="table table-bordered table-condensed">
　　　　　　　　<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　</table>
　　　　</div>
　　</div>
</div>

9、demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap表格样式</title>
　　<link rel="stylesheet" href="css/bootstrap.css">
　　<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
　　<div class="container">
　　　　<h4>表格默认样式</h4>
　　　　<table><!--默认样式-->
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>表格基础样式</h4>
　　　　<table class="table"><!--表格基础样式-->
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>带背景条纹</h4>
　　　　<table class="table  table-striped">
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>带边框的表格</h4>
　　　　<table class="table table-bordered">
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>鼠标悬停的表格</h4>
　　　　<table class="table table-bordered table-hover">
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>紧凑型表格</h4>
　　　　<table class="table table-bordered table-condensed">
　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>表格行内样式</h4>
　　　　<table class="table table-bordered table-condensed">
　　　　　　<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>响应式表格</h4>
　　　　<div class="row">
　　　　　　<div class="col-sm-4">
　　　　　　　　<div class="table-responsive">
　　　　　　　　　　<table class="table table-bordered table-condensed">
　　　　　　　　　　　　<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
　　　　　　　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　</table>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
</div>
</body>
</html>
Effect Picture：

 

源码文件下载：Bootstrap表格样式.zip

文章原创，转载请注明出处，感谢大家的合作！

转载于:https://www.cnblogs.com/qikeyishu/p/7679517.html

weixin_30273931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-table源码解读
ronon77的专栏
05-21 849
1.使用 简单场景： Js代码   &lt;table id="table"&gt;&lt;/table&gt;      $("#table").bootstrapTable({       url: options.url,        method: options.method || 'get',      //请求方式（*）       //toolb...
基于bootstrap的漂亮表格.rar
07-27
一套基于bootstrap的漂亮表格，支持响应式布局，包含动态效果的图表，供大家研究学习
bootstrap-table所有源码
02-13
基本包含所有可能用到的js 如数据导出 本地化等
bootstrap table表格实例,基于javaweb的bootstrap table实例源码下载
02-07
本实例针对bootstrap中table的使用方法，通过ajax远程调用服务器实现table的显示、分页、查询。
bootstrap可编辑表格完整代码
11-07
bootstrap可编辑表格，包含编辑单元格文本、日期类型、下拉框(代码可运行)
BootStrap CSS全局样式和表格样式源码解析
08-31
在本文中，我们将深入探讨BootStrap的全局样式和表格样式，以理解其源码工作原理。 首先，BootStrap的全局样式包括布局容器、标题样式、行内文本样式、文本对齐以及列表样式。 1. **布局容器类样式**： - `....
BOOTSTRAP-TABLE源码
01-05
在`cttp_13_x_fresh_table`这个文件中，可能包含了BOOTSTRAP-TABLE的源代码、示例、文档和资源文件。开发者可以研究这些源码，了解其实现细节，也可以直接在项目中引用以快速构建具有高级功能的表格。 总的来说，...
基于Bootstrap的树形表格设计源码
最新发布
04-18
本项目是基于Bootstrap的树形表格设计源码，包含31个文件，其中主要包含7个js脚本文件，5个css样式文件等。系统采用了JavaScript、CSS和HTML技术，实现了基于Bootstrap的树形表格功能。该项目最初出现在guns项目中，...
易语言Bootstrap类模块2.13源码-易语言
06-13
Bootstrap类.e是这个模块的核心文件，它包含了Bootstrap的各种组件和样式定义，如导航栏、按钮、表单、网格系统、模态框、下拉菜单等。这些组件都是预先编写好的易语言代码，开发者可以通过调用相应的函数或方法来...
Bootstrap 实现表格样式、表单布局的实例代码
10-17
主要介绍了Bootstrap 实现表格样式、表单布局的实例代码,需要的朋友可以参考下
测试可用bootstrap可编辑表格完整代码
11-09
测试可用bootstrap可编辑表格完整代码，测试可用bootstrap可编辑表格完整代码
Bootstrap Table 搜索框和查询功能
12-29
1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量  /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询匹配对象 var $button = $('<div class=columns><button class=btn btn-default type=button name=refresh title=查询><i class=g
jQuery bootstrap带分页表格数据搜索筛选代码
11-11
jQuery bootstrap带分页表格数据搜索筛选代码
bootstrap-代码与表格
西元
06-01 434
代码 小标签提示 通过  标签包裹内联样式的代码片段。 For example,  should be wrapped as inline. For example, <section> should be wrapped as inline. 代码块 多行代码可以使用  标签。为了正确的展示代码，注意将尖括号做转义处理。 if
【BootStrap】简单聊一聊CSS全局样式和表格样式-附有源码
谙忆-陈浩翔
01-17 4229
转载请注明出处：http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签，c
BootStrap（1）——排版、代码、表格和按钮
Ascend2015的博客
11-21 629
从今天开始，正式地开始记录一些关于前端的笔记，前端还是能够很好很快地反映出自己学过的东西，立等可见的东西最容易有成就感。基本的html、css、js、jQuery的概念都有，所以就直接从bootstrap开始了，当然因为都是一带而过，所以基础并不牢靠，如果出现关于基础知识的疑惑，我会倒回去看，然后再记录过来，所有的知识都按部就班学实在太过费时费力。 BootStrap的排版 1. 标题（.
1.BootstrapTable组件
qq_41891186的博客
04-19 1034
用于格式化操作列的内容 ，会在每一行数据的操作列中调用该函数，以生成操作列的内容。3.Bootstrap-table其它常用方法如下。该函数将从服务器返回的数据进行处理，并返回一个包含。属性的对象,从而让bootstrap进行数据渲染。让超过一行的数据只展示一行加上省略号。1.先在页面声明一个表格对象。让超过一行的数据进行弹出展示。2.生成表格JS代码如下。
Bootstrap表格
weixin_34247299的博客
06-23 155
前面的话 　　表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，本文将详细介绍Boostrap表格   基本实例 　　Boostrap将表格&lt;table&gt;的样式重置如下 table { backgroun...
bootstrap表格样式
kxj19980524的博客
11-21 160
bootstarp和jquery的文件别忘了引入  &lt;table class="table table-bordered table-hover table-condensed"&gt;    &lt;thead&gt;        &lt;tr&gt;            &lt;th&gt;用户名&lt;/th&gt;            &lt;th&gt;年龄&
可视化表格大屏bootstrap源码
06-26
接下来，需要将表格样式和布局进行调整，以适应大屏幕的显示。可以使用Bootstrap的网格系统来创建自适应的布局。例如： ```html <div class="col-lg-8"> ... <div class="col-lg-4"> <div id="chart"></...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值