作者:朱泊潇 | 来源:互联网 | 2022-01-26 01:18
本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示:
1.基本案例
2.条纹状表格
3.带边框的表格
4.鼠标悬停
5.紧缩表格
6.状态class
7.响应式表格
8.总结
基本案例
为任意
标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将其样式独立出来。
一个简单的Table示例
Table基本案例
First Name |
Last Name |
User Name |
aehyok |
leo |
@aehyok |
lynn |
thl |
@lynn |
条纹状表格
利用.table-striped可以给
之内的每一样增加斑马条纹样式。
在上面示例的table元素上再添加一个 样式类
看现在的效果,还是有点变化的。
带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
还是将第一个示例中的table元素上再添加一个样式类
鼠标悬停
利用.table-hover可以让
中的每一行响应鼠标悬停状态。
将鼠标移到那一行那一行就会有效果的
紧缩表格
利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。
这个效果没那么明显,主要就是单元格中内容padding减半了。
状态Class
通过这些状态class可以为行货单元格设置颜色。
Table
# |
First Name |
Last Name |
User Name |
1 |
aehyok |
leo |
@aehyok |
2 |
lynn |
thl |
@lynn |
3 |
Amdy |
Amy |
@Amdy |
4 |
Amdy |
Amy |
@Amdy |
5 |
Amdy |
Amy |
@Amdy |
响应式表格
将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
Table
# |
First Name |
Last Name |
User Name |
1 |
aehyok |
leo |
@aehyok |
2 |
lynn |
thl |
@lynn |
3 |
Amdy |
Amy |
@Amdy |
4 |
Amdy |
Amy |
@Amdy |
5 |
Amdy |
Amy |
@Amdy |
看滚动条出现了额。
简简单单的几个样式类,可以将页面搞到这种程度,很不错,以后再也不用愁调样式了。
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程
Bootstrap实战教程
以上就是关于Bootstrap的表格最为常用的各种列表的展示,希望对大家的学习有所帮助。
推荐阅读
-
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
-
本文纠正了网上关于自定义一个类叫java.lang.System/String的错误答案,并详细解释了为什么这种方法是错误的。作者指出,虽然双亲委托机制确实可以阻止自定义的System类被加载,但通过自定义一个特殊的类加载器,可以绕过双亲委托机制,达到自定义System类的目的。作者呼吁读者对网上的内容持怀疑态度,并带着问题来阅读文章。 ...
[详细]
蜡笔小新 2023-12-11 16:54:20
-
-
本文整理了Java中org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的一些代码示例,展示了Icon.ad ...
[详细]
蜡笔小新 2023-10-17 22:46:43
-
查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ...
[详细]
蜡笔小新 2023-10-17 19:40:17
-
1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ...
[详细]
蜡笔小新 2023-10-17 19:08:29
-
RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ...
[详细]
蜡笔小新 2023-10-17 18:57:35
-
初识java关于JDK、JRE、JVM 了解一下 ...
[详细]
蜡笔小新 2023-10-17 17:17:17
-
主讲人网神(新浪微博:豆角茄子麻酱凉面)网神(66707180)18:57:18大家好,今天我们讲一下第14章combiningmodel ...
[详细]
蜡笔小新 2023-10-17 17:04:24
-
ElasticSearch成功安装完毕。 测试数据添加出现{ error:{ root_cause ...
[详细]
蜡笔小新 2023-10-17 15:46:32
-
这一节来做二级分类,为了快速开发,一级分类只做新增,暂时不考虑修改和删除,如果一定要删,就去数据库删吧。我们接下来,需要通过一级分类,获取所有的二级分类。开始 ...
[详细]
蜡笔小新 2023-10-17 15:30:11
-
systemd-nspawn可以创建最轻量级的容器(ns的意思就是namespace),本文的实验平台是Ubuntu16.04,x86_64机器。本文的目的是:在Ubuntu中用syst ...
[详细]
蜡笔小新 2023-10-17 14:49:15
-
媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日,许多内容早已逾期或是许多近期优异组件未被收录,所以小肆 ...
[详细]
蜡笔小新 2023-10-17 14:33:46
-
1、DashAPI文档Dash是一个API文档浏览器,使用户可以使用离线功能即时搜索无数API。程序员使用Dash可访问iOS,MacOS, ...
[详细]
蜡笔小新 2023-10-17 10:15:42
-
Bootstrap3 排版缩略语 ...
[详细]
蜡笔小新 2023-10-17 09:02:39
-
本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ...
[详细]
蜡笔小新 2023-10-16 19:59:28
-