一:表格基本格式

<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表格样式的更多相关文章

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

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

  2. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  3. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

  4. Bootstrap 表格 笔记

    Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  5. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...

  6. bootstrap表格插件——Bootstrap-Table

    注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可 ...

  7. 第二百三十三节,Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...

  8. BootStrap带样式打印

    在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式. 我在jquery.PrintArea.js的基础上改造了下打印的方法: (function ($) { var pri ...

  9. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

随机推荐

  1. SprinMVC接收参数乱码解决篇

    1.Spring 默认的字符编码格式为iso-8859-1,为此Spring专门提供了字符过滤器org.springframework.web.filter.CharacterEncodingFilt ...

  2. 安装RHEL7红帽操作系统

    1.单击“开启此虚拟机”启动RHEL 7系统安装. 开启虚拟机 2.通过键盘方向键选择Install Red Hat Enterprise Linux 7.0选项,然后回车,开始安装RHEL7操作系统 ...

  3. python爬虫20 | 小帅b教你如何使用python识别图片验证码

    当你在爬取某些网站的时候 对于你的一些频繁请求 对方会阻碍你 常见的方式就是使用验证码 验证码的主要功能 就是区分你是人还是鬼(机器人) 人 想法设法的搞一些手段来对付技术 而 技术又能对付人们的想法 ...

  4. file.seek()/tell()-笔记

    ---------------------------------------------------------------------------------------------------- ...

  5. 9.3.4 BeaufitulSoup4

    BeautifulSoup 是一个非常优秀的Python扩展库,可以用来从HTML或XML文件中提取我们感兴趣的数据,并且允许指定使用不同的解析器. 使用 pip install BeaufifulS ...

  6. CentOS7版本的新特性

    综述 XFS  比 EXT 4更适合大文件处理,但消耗的CPU资源是EXT4的两倍 XFS 最大支持单文件16TB ,EXT4:50TB 最小1GB/建议每个逻辑CPU 1GB 逻辑CPU:核数,而非 ...

  7. HDU 5446 Unknown Treasure

    Unknown Treasure Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  8. Python 3 条件语句

    条件语句:  用于判定,判定是否符合某条件,符合则执行,不符合则不执行该条件所定义的操作. 一步判定:  用于理解不会这样使用. if  1==1:    if条件判定只能出现一次. print(&q ...

  9. 洛谷 P1469 找筷子

    题目描述 经过一段时间的紧张筹备,电脑小组的“RP餐厅”终于开业了,这天,经理LXC接到了一个定餐大单,可把大家乐坏了!员工们齐心协力按要求准备好了套餐正准备派送时,突然碰到一个棘手的问题,筷子!CX ...

  10. [bzoj2654]tree_二分_kruskal

    tree bzoj-2654 题目大意:给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树.题目保证有解. 注释:$1\le V\le 5\cdot 10^4 ...