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 ...
随机推荐
- String s = new String("xyz");创建了几个对象?
两个或一个都有可能 . ”xyz”对应一个对象,这个对象放在字符串常量池,常量”xyz”不管出现多少遍,都是常量池中的那一个. new String每写一遍,就创建一个新的对象,它使用常量”xyz”对 ...
- web前端习总结--JavaScript
JavaScript 什么是JavaScript JavaScript是嵌入HTML中在浏览器中的脚本语言,有与Java和C语言类似的语法 一种网页编程技术,用来向HTML页面添加交互行为 直接嵌入H ...
- Chrome Headless模式
在 Chrome 59 版本开始已经开始支持了 Headless 模式,也就是无界面模式,这样爬取的时候就不会弹出浏览器了,如果要使用此模式请把 Chrome 升级到 59 版本及以上,启用 Head ...
- 一个电商项目的Web服务化改造3:改进方案の规范和约定、单表、单一职责
最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA. 有点挑战,做完了,会有很大进步. 上一篇,我们描述了原有项目中的问题. 或者说是,本篇的基本 ...
- 【hdu 2108】Shape of HDU
[题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=2108 [题意] [题解] 逆时针; 可以想象一下; 如果是凸多边形的话; 逆时针的相邻的两条边; ...
- JavaSE 学习笔记之String字符串(十四)
API:(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源 ...
- Python 5 运算符
数学运算符: + 加 1 + 1 = 2 - 减 2 - 1 = 1 × 乘 2 × 2 = 4 / 除 3 / 2 = 1.5 不同版本可能显示小数位数不同 ...
- springcloud(十一):服务网关Zuul高级篇
时间过的很快,写springcloud(十):服务网关zuul初级篇还在半年前,现在已经是2018年了,我们继续探讨Zuul更高级的使用方式. 上篇文章主要介绍了Zuul网关使用模式,以及自动转发机制 ...
- java web解决表单重复提交
首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提交?2.什么情况下会出现表单重复提交?3.什么情况需要避免表单重复提交? 什么叫表单提交问题,说白了,就是同一份信息,重 ...
- RDS for MySQL查询缓存 (Query Cache) 的设置和使用
https://help.aliyun.com/knowledge_detail/41717.html?spm=5176.7841698.2.11.aCvOXJ RDS for MySQL查询缓存 ( ...