一:表格基本格式

<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. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  2. jdk编译安装及tomcat编译安装

    这里我安装的jdk版本为1.8版本,tomcat版本为8.5(请上官网下载) 运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) jdk部署: 1.前往软件所在路径 [root@web ...

  3. iptables简单了解

    简介 Iptables是unix/linux自带的一款优秀且开源的基于包过滤的防火墙工具. 怎么用 可以用来做主机防火墙. 可以做局域网共享上网. 可以做ip及端口映射. Iptables工作流程 i ...

  4. 举枪消灭"烂代码"的实战案例

    前言 之前我写过一篇如何少写PHP "烂"代码 https://segmentfault.com/a/11...感觉很多新人对此不太理解.今天以打卡功能为例,去讲解其中的奥秘.那篇 ...

  5. 基于CNONIX国家标准的出版社ERP系统建设分享

    目录 一.出版社ERP系统建设面临的三大挑战 在系统建设中如何贯彻CNONIX国家标准 新ERP系统建设面临的挑战 技术体系及架构选择面临的挑战 二.系统建设实施过程控制 项目组织管控 项目技术管控 ...

  6. 使用外部LDAP用户认证后,DJANGO用户如何作登陆的操作?

    公司的要求,使用公司的UM帐号验证密码,然后,在DJANGO里登陆. 因为没有authenticate函数,只有login函数,所以不能简单的使用用户来login,而需要加一个backend参数... ...

  7. wait-notify模型面试题

    一道面试题: 启动两个线程, 一个输出 1,3,5,7-99, 另一个输出 2,4,6,8-100 最后 STDOUT 中按序输出 1,2,3,4,5-100 错误实现1: public class ...

  8. POJ 3311

    设dp状态为dp[i][j]为当前访问过的结点状态为i且当前停留点为j时的最短路径.用二进制存存储访问过的状态,访问过为1,否则为0. #include <iostream> #inclu ...

  9. 前台JSON字符串,spring mvc controller也接收字符串

    前台JSON字符串,spring mvc controller也接收字符串 前台: $.post(url, { data : JSON.stringify(obj) }, function(data) ...

  10. HDU 5392 Infoplane in Tina Town

    Infoplane in Tina Town Time Limit: 14000/7000 MS (Java/Others)    Memory Limit: 524288/524288 K (Jav ...