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 ...
随机推荐
- 【VIP视频网站项目】VIP视频网站项目v1.0.3版本发布啦(程序一键安装+电影后台自动抓取+代码结构调整)
在线体验地址:http://vip.52tech.tech/ GIthub源码:https://github.com/xiugangzhang/vip.github.io 项目预览 主页面 登录页面 ...
- Vivaldi解决flash插件问题
Vivaldi浏览器 Vivaldi是Opera联合创始人.前CEO谭咏文(Jon von Tetzchner)2015年1月27日发布的一款浏览器,具有个性化的笔记功能,带有迷你屏幕截图的书签,以及 ...
- 一个电商项目的Web服务化改造3:改进方案の规范和约定、单表、单一职责
最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA. 有点挑战,做完了,会有很大进步. 上一篇,我们描述了原有项目中的问题. 或者说是,本篇的基本 ...
- Maven学习总结(7)——eclipse中使用Maven创建Web项目
Maven学习总结(七)--eclipse中使用Maven创建Web项目 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如 ...
- 洛谷 P3258 BZOJ 3631 [JLOI2014]松鼠的新家
题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在”树“上. 松鼠想邀请小熊维尼前 ...
- [luoguP1816] 忠诚(st表 || 线段树)
传送门 其实我就是想练练 st表 本以为学了线段树可以省点事不学 st表 了 但是后缀数组中用 st表 貌似很方便 所以还是学了吧,反正也不难 ——代码 #include <cstdio> ...
- 从事分布式系统,计算,hadoop
作者:廖君链接:https://www.zhihu.com/question/19868791/answer/88873783来源:知乎 分布式系统(Distributed System)资料 < ...
- 输入法InputConnection
/** * The InputConnection interface is the communication channel from an * {@link InputMethod} bac ...
- [Algorithms] The Bayes Rule
Prior odd: The idea is to take the odds for something happening (against it not happening), which we ...
- 翻翻git之---自己定义邮件发送buttonSendButton(流程分析,实现思路能够学习下)
转载请注明出处:王亟亟的大牛之路 距离过春节还有1天.继续这一系列的git翻料之旅. 昨天的工具类真的非常棒,这里再推崇一下 传送门:http://blog.csdn.net/ddwhan0123/a ...