一:表格基本格式

<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. 1、DataGridView

    DataGridView赋值后 通过RowPostPaint事件绘制行号 private void AddXh() { DataGridViewTextBoxColumn col = new Data ...

  2. Mac 执行 gulp 报错 -bash: gulp: command not found

    在mac系统下安装gulp,之后执行gulp 报如下错误: -bash: gulp: command not found 回溯安装过程发现问题如下 1.执行 npm root: Application ...

  3. Linux之iptables(三、命令--->单主机)

    iptables命令规则格式: iptables [-t table] SUBCOMMAND chain [-m matchname[per-match-options]] -j targetname ...

  4. 渗透实战(周六):Hydra&Metasploit暴力破解SSH登录口令

    一. SSH服务开启前基础配置 1.1 修改配置文件

  5. Linux - redis哨兵集群实例

    目录 Linux - redis哨兵集群实例 命令整理 配置流程 Linux - redis哨兵集群实例 命令整理 官网地址:http://redisdoc.com/ redis-cli info # ...

  6. PatentTips – RDMA data transfer in a virtual environment

    BACKGROUND Embodiments of this invention relate to RDMA (remote direct memory access) data transfer ...

  7. OSI七层参考模型每一层都有哪些协议

    OSI七层参考模型每一层都有哪些协议 第七层应用层 协议:DHCP • DNS • FTP • Gopher • HTTP • IMAP4 • IRC • NNTP • XMPP • POP3 • S ...

  8. mongodb之用户/认证/角色/权限管理

    前言 用户权限管理很重要,只给需要的权限,防止应用系统漏洞导致脱库 认证和授权 Authentication 认证识别,解决我是谁 Authorization 操作授权,我能做什么 认证机制 MONG ...

  9. SUSE Linux Enterprise Serve 12 试用体验

    SUSE Linux Enterprise Serve 12 试用体验 大家都知道德国出产的奔驰.宝马.等车型以精美.可靠.耐用而著称.而相同出自德国人之手的Suse Linux .即使是被收购也是一 ...

  10. 关于创建Android Library所须要知道的一切

    关于创建Android Library所须要知道的一切 Android 库(Library)在结构上与 Android 应用模块同样.应用模块所能够包括的东西.在库中都同意存在,包括代码文件.资源文件 ...