`
9秒学院
  • 浏览: 37383 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

bootstrap中六种表格样式

阅读更多
表格

表格是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:响应式表格



表格--表格行的类

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

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

<tr class="active">
    <td>…</td>
</tr>
对应的源码,请查看bootstrap.css文件中第1484行~第1583行。

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

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

表格--基础表格

大家对表格并不太陌生,但对于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.css文件第1402行~第1441行,由于代码太长,此处不一一列举。

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

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

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

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

表格--斑马线表格

有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在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;
}
表格--带边框的表格

基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可:

<table  class="table table-bordered">
  …
</table>
表格--鼠标悬浮高亮的表格

当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。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>           
分享到:
评论

相关推荐

    bootstrap集成table样式的总结

    在Bootstrap中,Table组件是一个重要的部分,它允许开发者轻松地创建美观、可定制的表格。本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式,包括水平...

    第六篇Bootstrap表格样式介绍

    总之,Bootstrap表格样式提供了丰富的选项,帮助开发者快速创建出既美观又实用的表格,适应不同场景和设备的需求。掌握这些样式,能极大地提升网页设计的效率和用户体验。在实际项目中,根据需求灵活运用,可以打造...

    Bootstrap-中文(完整版)-API

    Bootstrap的网格系统是一种灵活的布局工具,基于12列的栅格结构。通过设置行(row)和列(column),开发者可以轻松创建对齐、响应式的页面布局。 四、组件 1. 布局组件:如导航栏(navbar)、页脚(footer)、...

    Bootstrap离线参考手册

    3. 表格(table):通过简单的类,可实现表格的样式增强,包括条纹、边框和hover效果。 4. 图像(images):有圆角、响应式等修饰类,使图像在不同设备上展示效果更佳。 5. 弹出内容:模态框(modals)、下拉菜单(drop-...

    bootstrap-table,前端分页框架

    Bootstrap-Table是一款强大的前端表格插件,它充分利用了Twitter Bootstrap的样式和组件,为开发者提供了在Web应用中实现美观、可交互的表格功能。这款框架不仅支持基本的表格展示,还具备分页、排序以及丰富的数据...

    bootstrap table中文API

    接下来可以选择以下三种方式之一来设置表格的语言为中文: - **方式一**:通过扩展默认配置的方式: ```javascript $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']); ``` - **...

    bootstrap 界面Demo

    2. **预定义的CSS样式**:Bootstrap提供了大量的预定义样式,如按钮、表单、表格、导航、警告提示等,这些样式可以快速应用到网页元素上,大大提高了开发效率。在Demo中,你会看到各种样式的实际效果,学习如何调用...

    16套bootstrap后台管理系统模版UI框架

    3. "6套bootstrap后台模版.zip":这个文件包含了六个不同的Bootstrap后台模板,每个模板可能有独特的设计风格和布局,供开发者选择使用。 4. "9个大气简洁的bootstrap后台模板,放出来.zip":这又是一批后台模板,...

    bootstrap3.3.7版本

    Bootstrap的CSS覆盖了字体、颜色、间距、边框、背景等基本样式,还有诸如排版、表格、媒体对象、代码高亮等更高级的样式。3.3.7版本中对这些样式进行了优化,以确保在各种环境下都能呈现出一致的外观。 四、...

    前端项目-twitter-bootstrap.zip

    Bootstrap包含大量预定义的CSS样式,如按钮、表单、表格、导航、提示、警告、图像等。这些组件可以快速应用到网页上,大大减少了自定义样式的工作量。此外,Bootstrap还提供了丰富的主题和变量,允许开发者轻松地...

    bootstrap3.4.1源代码,bootstrap

    Bootstrap 3.4.1包含许多预设的CSS组件,如排版样式、表格、表单、按钮、图像、代码高亮等。这些组件遵循一致的设计原则,易于实现并能快速提供专业外观。 四、导航组件 Bootstrap的导航组件包括导航栏(navbar)、...

    SmartAdmin 全套bootstrap后台模板

    SmartAdmin包含了多种常见的后台页面示例,如仪表盘、表单、表格、图表、通知、地图等,这些页面已经预设了完整的结构和样式,开发者可以直接使用或作为模板进行修改,大大节省了开发时间。 五、响应式设计 在移动...

    ASP.NET MVC5 六层框架+Bootstrap+Unity依赖注入

    BootstrapAdminTemplate可能是一个预设计的后台管理模板,包含了使用Bootstrap框架构建的常见管理界面元素,如仪表板、表格、图表等,开发者可以快速利用这些组件构建出专业级别的后台管理界面。 总的来说,"ASP...

    Bootstrap在老旧站点升级中的应用Demo

    3. 样式替换:将原有的CSS样式替换为Bootstrap提供的类,如按钮、表格、导航等。 4. 动态功能添加:引入必要的JavaScript插件,实现下拉菜单、模态框等交互效果。 5. 自定义与优化:根据项目需求,可以进一步自定义...

    BootStrap视频教程

    - **栅格系统**:理解Bootstrap中的栅格系统原理,掌握如何利用容器、行和列来创建响应式布局。 - **响应式实用类**:介绍`.visible-*`、`.hidden-*`等类,用于控制元素在不同设备上的可见性。 - **预定义样式**:...

    bootstrap后台模版(6款)

    在这个压缩包中,包含的是六款基于Bootstrap的后台管理模版,分别是"matrix-admin00-04"和"metronic"。这些模版都是为了帮助开发者快速构建功能完善的后台管理系统而设计的。 首先,让我们深入了解一下Bootstrap的...

    6套基于Bootstrap的后台管理系统

    在这个“6套基于Bootstrap的后台管理系统”压缩包中,你将找到六款精心设计的Moltran模板,这些模板专为后台管理界面而设计,具有美观、高效和易用的特点,可以极大地提升你的工作效率。 首先,我们要理解什么是...

    Angualrjs和bootstrap相结合实现数据表格table

    知识点一:AngularJS的简介及使用 AngularJS是一个开源的前端JavaScript框架,用于构建...在本例的CSS链接中提到了Bootstrap的样式表,可见在完整的应用中应当考虑将表格数据以响应式的方式呈现给用户,优化用户体验。

Global site tag (gtag.js) - Google Analytics