bootstrap表格样式
一:表格基本格式
<table>
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>单元格内容一</td>
<td>单元格内容二</td>
</tr>
</table>
1、首先所有的表格内容,肯定都包含在<table>标签内
2、<tr>表示一行
3、<th>表示表格标题
4、<td>表示表格单元格内容
二、表格的bootstrap样式
定义类名为.table的表格
<table class="table">……</table>
1、斑马线表格: .table-striped
2、带边框表格: .table-bordered
3、鼠标悬停时,高亮显示: .table-hover
4、紧凑型表格:.table-condensed
5、响应式表格:.table-responsives
三、<thead>用法
<table>
<thead>
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内容一</td>
<td>单元格内容二</td>
</tr>
</tbody>
</table>
1、在表格的标题添加<thead></thead>,标题底部会显示2px的浅灰色实线
2、<tbody></tbody>表示表格的主体,配合<thead></thead>使用
bootstrap表格样式的更多相关文章
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
- Bootstrap 表格 笔记
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...
- bootstrap表格插件——Bootstrap-Table
注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可 ...
- 第二百三十三节,Bootstrap表格和按钮
Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...
- BootStrap带样式打印
在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式. 我在jquery.PrintArea.js的基础上改造了下打印的方法: (function ($) { var pri ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
随机推荐
- 18清明校内测试T1
消失的数字(number) Time Limit:1000ms Memory Limit:128MB 题目描述 rsy拥有n个数,这n个数分别是a1,a2,…,an. 后来出现了一个熊孩子zhw, ...
- ThinkPHP5 自定义异常
1.配置config.php 自定义异常路径: // 默认AJAX 数据返回格式,可选json xml ...'default_ajax_return' => 'json', 'exceptio ...
- 手机访问pc版网站自动跳转为手机版页面
1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...
- hdu2010 水仙花数【C++】
水仙花数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- hdu 4975 最大流解决行列和求矩阵问题,用到矩阵dp优化
//刚开始乱搞. //网络流求解,如果最大流=所有元素的和则有解:利用残留网络判断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环,见上一篇4888 //至少四个点构成的环,第二种是用矩 ...
- 同余方程 2012年NOIP全国联赛提高组
时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Descriptio ...
- Jquery书写ajax
根据API学习本章 Jquery书写ajax 使用ajax发送表单到servlet,发送时显示等待图片,servlet处理完返回信息,在页面显示返回信息,并且隐藏等待图片 <%@ page la ...
- 运维系列之一 Linux的文件与目录权限解析
在Linux中,万事万物皆文件,普通文件是文件,目录是文件,硬件设备也是文件,因此学习了解Linux中的文件非常重要. Linux中有三种文件类型: (1) 普通文件:又分为文本文件和二进制文件 (2 ...
- SQL Server内核架构剖析与NUMA
http://www.cnblogs.com/lyhabc/p/4272053.html http://www.cnblogs.com/lyhabc/archive/2013/02/05/289247 ...
- Ubuntu14.04下Android系统与应用开发软件完整apt-get 源。
# deb cdrom:[Ubuntu 14.04.1 LTS _Trusty Tahr_ - Release amd64 (20140722.2)]/ trusty main restricted# ...