bootstrap--表格（table的各种样式）

2024-05-29 10:54:34

目录

bootstrap--表格（table的各种样式）

Bootstrap 表格类样式

☑ .table：基础表格，为任意 <table> 添加基本样式 (只有横向分隔线)

☑ .table-striped：斑马线表格

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

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

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

1、“.table”主要有三个作用：

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

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

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

样式图如下：

2、table-striped：斑马线表格

样式图如下：

3、table-bordered：带边框的表格

样式图如下：

4、table-hover：鼠标悬停高亮的表格

样式图如下：

5、table-condensed：紧凑型表格(单元格的内距由8px调至5px。)

样式图如下：

6、table-responsive：响应式表格(当浏览器可视区域小于768px时，表格底部会出现水平滚动条；可视区域大于768px时，表格底部水平滚动条就会消失)

样式图如下：

7、综合应用

样式图如下：

源代码如下：

<div class="container"><h2>表格</h2><p>联合使用所有表格类:</p>                                          <table class="table table-striped table-bordered table-hover table-condensed"><thead><tr><th>#</th><th>Firstname</th></tr></thead><tbody><tr><td>1</td><td>Anna</td></tr><tr><td>2</td><td>Debbie</td></tr><tr><td>3</td><td>John</td></tr></tbody></table>
</div>

Bootstrap的JS,CSS等我就不贴出来了，自行引入，具体可参考Bootstrap 中文网

8、状态类：这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.info	标识普通的提示信息或动作
.success	标识成功或积极的动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

bootstrap--表格（table的各种样式）相关推荐

POI处理PPT的表格table，XSLFTable样式设置
POI版本3.14 ppt中插入表格(table),是可以设置表格的样式的:抬头行有背景颜色,抬头行文字默认成白色,数据行分奇数偶数行有间隔背景色,这个样式是附加在表格元素上的,而不是加在行或者格子上 ...
Bootstrap 表格行的样式
除了可以为表格添加样式外,Bootstrap还专门表格的行提供了 4 个可选的情景类,来为表格的行添加特殊的背景颜色.这些情景类及含义见表 3‑2: 表 3‑2 表格行的情景类类含义 .succe ...
Bootstrap 表格的默认样式
只需为任意的 <table> 元素应用 .table 类,即可使用表格的默认样式.Bootstrap中表格的默认样式相当简单,它仅仅在每个 <td> 上方添加了一个边框.如: ...
bootstrap table 光标_第三章之Bootstrap 表格与按钮功能
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表 ...
说说 Bootstrap 表格样式
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. <thead> 表格 ...
BootStrap table的各种样式效果
Bootstrap 表格类样式 ☑ .table:基础表格,为任意 <table> 添加基本样式 (只有横向分隔线) ☑ .table-striped:斑马线表格 ☑ .table- ...
Bootstrap表格样式使用方法
基本Bootstrap表格样式 Bootstrap最基本的表格样式就是在<table>标签中加入table类,然后在标签内嵌套thead和tbody元素即可. 例如:<table c ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
手机端自适应表格table样式如何写
有时候我们的网页需要展示一些表格的内容,在pc端是很好控制它的展现方式的,但是到移动端就非常难控制了,那么该怎么做呢? 比如上图就是没控制好的移动端的表格table样式,展示非常的凌乱. 这个就是写好 ...
去除bootstrap的table样式中单元格边框线
使用bootstrap的table样式,在非纯白背景下,会有单元格边框线,影响美观. 去除方式: <style type="text/css"> bod ...

最新文章

热门文章