Boottarp学习(二)表格

表格

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用。

同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本:

?  LESS版本,对应的文件是 tables.less

?  Sass版本,对应的文件是 _tables.scss

如果你不懂LESS或Sass也不妨,你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长,此处不一一列举。

刚已经说了,Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

?  .table:基础表格

?  .table-striped:斑马线表格

?  .table-bordered:带边框的表格

?  .table-hover:鼠标悬停高亮的表格

?  .table-condensed:紧凑型表格

?  .table-responsive:响应式表格

<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>

基础表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

斑马线表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

带边框的表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

鼠标悬浮高亮的表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

紧凑型表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

响应式表格

表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

表格--表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

其使用非常的简单,只需要在<tr>元素中添加上表对应的类名,就能达到你自己需要的效果:

<tr class="active">
    <td>…</td>
</tr>

对应的源码,请查看bootstrap.css文件中第1484行~第1583行。

特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态,需要在<table>标签上加入table-hover类。

如下代码:

<table class="table-hover">
<table class="table table-bordered">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告,需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table> 
类名 描述
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为

表格--基础表格

大家对表格并不太陌生,但对于Bootstrap中的表格如何使用,或许还有点陌生,接下来的内容,将根据不同的表格类型向大家介绍Bootstrap表格的实际使用方法。

对表格的结构,跟我们平时使用表格是一样的:

<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
     …
</tbody>
</table>

如无特别声明,下面介绍表格类型的时候,结构都是类似上面的代码。

基础表格

在Bootstrap中,对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在<table>元素上添加“.table”类名,就可以得到Bootstrap的基础表格:

<table class="table">
…
</table>

Bootstrap的基础表格,大致长得像下图所示的样子:

主要源码查看bootstrap.css文件第1402行~第1441行,由于代码太长,此处不一一列举。

“.table”主要有三个作用:

?  给表格设置了margin-bottom:20px以及设置单元内距

  ?  在thead底部设置了一个2px的浅灰实线

  ?  每个单元格顶部设置了一个1px的浅灰实线

<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>
表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

表格--斑马线表格

有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”即可:

<table class="table table-striped">
…
</table>

其效果与基础表格相比,仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用CSS3的结构性选择器“:nth-child”来实现,所以对于IE8以及其以下浏览器,没有背景条纹效果。

源码请查看bootstrap.css文件第1465行~第1468行:

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
<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>
表格标题 表格标题 表格标题
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格
表格单元格 表格单元格 表格单元格

表格--带边框的表格

基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。

Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可:

<table  class="table table-bordered">
  …
</table>

样式如下图所示:

其源码可以查看bootstrap.css文件第1450行~第1464行:

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

表格--鼠标悬浮高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望,他也考虑到这种效果,其提供了一个“.table-hover”类名来实现这种表格效果。

鼠标悬停高亮的表格使用也简单,仅需要<table class="table">元素上添加类名“table-hover”即可:

<table class="table table-hover">
…
</table>

效果图如下:

从效果图中可以看出,当你鼠标悬浮在某一单元格上时,单元格所在行的背景色都会变成浅灰色

鼠标悬浮高亮的效果主要是通过“hover”事件来实现,设置了“tr:hover”时的th、td的背景色为新颜色。

其源码请查看bootstrap.css文件中第1469行~第1472行:

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

注:其实,鼠标悬浮高亮表格,可以和Bootstrap其他表格混合使用。简单点说,只要你想让你的表格具备悬浮高亮效果,你只要给这个表格添加“table-hover”类名就好了。例如,将前面介绍的几种表格结合使用:

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

表格--紧凑型表格

何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置了单元格内距值。

紧凑型表格的运用,也只是需要在<table class="table">基础上添加类名“table-condensed”:

<table class="table table-condensed">
…
</table>

效果图如下:

从上面效果图可以看出,Bootstrap中紧凑型的表格与基础表格差别不大,因为只是将单元格的内距由8px调至5px

源码请查看bootstrap.css文件第1442行~第1449行:

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

正如上一小节中悬浮高亮表格中所讲解的,在Bootstrap中制作表格中,可以将上面几种表格样式结合在一起使用,从而制作出更为精美的表格。结合的方法也很简单,就是在<table class="table">基础上添加你需要的表格样式类型。

另外从上面的示例中大家可能也发现了,不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时,千万注意,你的<table>元素中一定不能缺少类名“table”

表格--响应式表格

随着各种手持设备的出现,要想让你的Web页面适合千罗万像的设备浏览,响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果,将其称为响应式表格

Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

运行效果如下:

(宽屏效果)

(窄屏效果)

时间: 2024-10-11 22:58:26

Boottarp学习(二)表格的相关文章

[Python 学习] 二、在Linux平台上使用Python

这一节,主要介绍在Linux平台上如何使用Python 1. Python安装. 现在大部分的发行版本都是自带Python的,所以可以不用安装.如果要安装的话,可以使用对应的系统安装指令. Fedora系统:先以root登入,运行 yum install python Ubuntu系统:在root组的用户, 运行 sudo apt-get install python 2. 使用的Python的脚本 Linux是一个以文件为单位的系统,那么我们使用的Python是哪一个文件呢? 这个可以通过指令

OpenCV for Python 学习 (二 事件与回调函数)

今天主要看了OpenCV中的事件以及回调函数,这么说可能不准确,主要是下面这两个函数(OpenCV中还有很多这些函数,可以在 http://docs.opencv.org/trunk/modules/highgui/doc/user_interface.html 找到,就不一一列举了),然后自己做了一个简单的绘图程序 函数如下: cv2.setMouseCallback(windowName, onMouse[, param]) cv2.createTrackbar(trackbarName,

Makefile持续学习二

Makefile概述 一.Makefile里有什么? Makefile里主要包含5个东西:显式规则.隐晦规则.变量定义.文件指示和注释 1.显式规则:显式规则说明如恶化生成一个或多的目标文件,包含要生成的文件,文件的依赖文件,生成的命令 2.隐晦规则:由make自动推动功能完成 3.变量定义:变量一般都是字符串,类似C语言中的宏定义,当Makefile被执行时,其中的变量都会被扩展到相应的引用位置上 4.文件指示: 在一个Makefile中引用另一个Makefile 根据某些情指定Makefil

redis ruby客户端学习( 二)

接上一篇redis ruby客户端学习( 二) 对于redis的五种数据类型:字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets),上一篇介绍了字符串. 1,哈希(Map) hset.设置 key 指定的哈希集中指定字段的值.如果 key 指定的哈希集不存在,会创建一个新的哈希集并与 key 关联.如果字段在哈希集中存在,它将被重写. require "redis" r = Redis.new r.hset 'my_h

Duilib学习二 第一个程序 Hello World

Duilib学习二  第一个程序 Hello World #pragma once #include <UIlib.h> using namespace DuiLib; #ifdef _DEBUG # ifdef _UNICODE # pragma comment(lib, "DuiLib_ud.lib") # else # pragma comment(lib, "DuiLib_d.lib") # endif #else # ifdef _UNICOD

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Oracle学习(二):过滤和排序

1.知识点:可以对照下面的录屏进行阅读 SQL> --字符串大小写敏感 SQL> --查询名叫KING的员工信息 SQL> select * 2 from emp 3 where ename = 'KING'; SQL> --日期格式敏感 SQL> --查询入职日期为17-11月-81的员工 SQL> select * 2 from emp 3 where hiredate='17-11月-81'; --正确例子 SQL> ed 已写入 file afiedt.b

Jetty学习二:配置概览-怎么配置Jetty

Jetty POJO配置 Jetty的核心组件是Plain Old Java Objects(POJOs):配置Jetty的大部分工作就是在Jetty POJOs上的初始化.装配和设置域的处理,你能通过以下的方式来实现:  1)直接通过Java代码初始化和装配Jetty对象.这个在后面Embedding Jetty讲. 2)用Jetty XML配置(一个控制反转(IoC)框架)初始化和装配Jetty对象.etc/jetty.xml文件是基本的Jetty XML配置文件,但有一些其它的etc/je

nodejs学习二 深入了解console

上一篇我们用console.log编写了第一个程序,虽然如此简单.那么我就从它来说说Node.js中的对象. 对于学过Java .net 的人来说,对象这个词应该都很亲切,如果不觉得亲切,还是先学习一下面向对象. 我们编程中,一切皆对象.你可以把任何一个东西当做对象. 然而,Node.js中也存在对象,而console也是一种对象.既然是对象,他应该有公有的方法.正如你所看到的,log就是它的方法,貌似还是静态的. 那么console中有哪些方法呢,那我们就让他输出一下吧. 噢,原来consol

JBPM学习(二):ProcessEngine与Service API

1.获取processEngine的方法: a) 方法一 private ProcessEngine processEngine = new Configuration().setResource("jbpm.cfg.xml").buildProcessEngine(); b) 方法二 // 获取单例的ProcessEngine对象,使用的是默认的配置文件(jbpm.cfg.xml) private ProcessEngine processEngine = Configuration