一:表格基本格式

<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. 【转】How Many Boyfriends

    如果一个女人遇到不同星座男的概率相同 那么这个女人期望遇到多少个男人就能集齐12个不同星座的男人 我们简化一下问题. 如果只有一个星座,那么期望值为1 如果只有两个星座,那遇到第一个男人后 期望再遇到 ...

  2. 虚拟机win7 自动休眠

    1.问题描述:vmware 虚拟机,windows7系统.当一段时间不操作时,任务会休眠. 2.原因:win7系统自动休眠引起的. 3.解决方法:关闭win7系统的自动休眠. 依次打开“控制面板”-- ...

  3. Jmeter 学习imooc

    https://www.imooc.com/video/14718 1. BS Vs CS BS架构: browser server CS架构: Client server(安装到本地)

  4. 【ACM】hdu_1276_士兵队列训练问题_201308131032

    士兵队列训练问题Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  5. PHP包管理工具composer简单总结

    前言 接触laravel之后,才知道有PSR,composer之类的东西,PHP已经不再是一门草根语言了.最近在尝试玩thrift,需要安装PHP thrift依赖库,使用composer insta ...

  6. RDS for MySQL Online DDL 使用

    https://help.aliyun.com/knowledge_detail/41733.html?spm=5176.7841698.2.17.u67H3h

  7. spring mvc dispatcherservlet处理request流程

    1.dispatcherservlet接收到请求后,doDispatch(request,response) 2.doDispatch()里进行handlermapping,handlermappin ...

  8. Android 外部存储权限分析

    不知道你有么有发现.来自菜鸟的成长史:http://blog.csdn.net/zjbpku/article/details/25161131. KitKat之后的版本号不再支持用户对外置SDcard ...

  9. Android View的onTouch和onClick和onLongClick事件

    这三个事件的调用顺序是: onTouch->onLongClick->onClick 先看这三个事件的处理函数: public boolean onTouch(View v, Motion ...

  10. multiple web application host under the same website on IIS (authentication mode)

    第一种方式,修改forms的name how to set the forms authentication cookie path assume you have already solved th ...