bootstrap学习笔记<四>（table表格）

表格

bootstrap为table表格定制多个常用样式：基本样式，隔行变色样式，带边框样式，荧光棒样式，紧凑样式，响应样式。

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

bootsrtap大大提高了表格制作的效率

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>基础表格</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<h1>基础表格</h1>

<table class="table">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>斑马线表格</h1>

<table class="table table-striped">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>带边框的表格</h1>

 <table class="table table-bordered">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>鼠标悬浮高亮的表格</h1>

<table class="table table-striped table-bordered table-hover">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

 <h1>紧凑型表格</h1>

  <table class="table table-condensed">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

 <h1>响应式表格</h1>

 <div class="table-responsive">

   <table class="table table-bordered">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

</div>

</body>

</html>

效果图

PS：表格内元素样式

分别对应：

<tr class="active">      <!--活动灰-->

<tr class="success">   <!--成功绿-->

<tr class="info">        <!--信息蓝-->

<tr class="warning">   <!--警告橙-->

<tr class="danger">    <!--危险红-->

效果图

bootstrap学习笔记<四>（table表格）的更多相关文章

bootstrap学习（四）表格
基础样式: 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名 ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
Bootstrap入门（四）表格
Bootstrap入门(四)表格 <table>标签首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
MySql学习笔记四
MySql学习笔记四 5.3.数据类型数值型整型小数定点数浮点数字符型较短的文本:char, varchar 较长的文本:text, blob(较长的二进制数据) 日期型原则:所选择类 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

随机推荐

JQuery知识快览之一—选择器
阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...
周赛-KIDx's Pagination 分类：比赛 2015-08-02 08:23 7人阅读评论(0) 收藏
KIDx's Pagination Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...
Linux是如何管理内存的
物理内存的管理 Linux管理物理内存是使用分页机制实现的.为了使分页机制在32位和64位体系结构下高效工作,Linux采用了一个四级分页策略. Linux支持多种内存分配机制.分配物理内存页框的主要 ...
hrtimer和work工作队列的使用
1.hrtimers - 为高分辨率kernel定时器,可作为超时或周期性定时器使用 1). hrtimer_init初始化定时器工作模式. hrtimer_init(&vibe_timer, ...
nginx配置SSL证书(使用startSSL申请到的免费证书)
1. 在startSSL注册申请免费证书,此处不赘述,参考 http://www.freehao123.com/startssl-ssl/ 申请过程中会生成Private Key,将Private K ...
Android Https
/** * HttpUrlConnection支持所有Https免验证,不建议使用 * * @throws KeyManagementException * @throws NoSuchAlgorit ...
JAVA中线程池启动定时任务
/** * 用线程池启动定时器 * @param args */ public static void main(String[] args) { //10秒启动 Executors.newSched ...
关于打开MTK_SDCARD_SWAP 宏后MTK目前升级方案和关于打开MTK_SHARED_SDCARD宏后MTK目前升级方案
如果设置宏MTK_SDCARD_SWAP=yes:默认是优先从外卡获取升级包,外卡没有包,才会去内卡获取! 1.插入外卡,升级包update.zip放入外卡,升级可以成功! 2.插入外卡,升级 ...
.Net操作.exe文件
Process proc = new Process(); proc.StartInfo.FileName = @"D:\Program Files\Foxmail\Foxmail.exe& ...
GZFramwork数据库层《一》普通表增删改查
运行结果: 使用代码生成器(GZCodeGenerate)生成tb_MyUser的Model 生成器源代码下载地址: https://github.com/GarsonZhang/GZCode ...

bootstrap学习笔记<四>（table表格）

bootstrap学习笔记<四>（table表格）的更多相关文章

随机推荐

热门专题