首页 > 教程 > 关键词  > Bootstrap3.0学习最新资讯  > 正文

Bootstrap3.0学习第五轮:表格

2013-12-05 15:03 · 稿源: aehyok博客园

上一篇:Bootstrap3.0学习第四轮:排版

本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼。下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?

基本案例

为任意

标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将其样式独立出来。

一个简单的Table示例

条纹状表格

利用.table-striped可以给之内的每一样增加斑马条纹样式。

在上面示例的table元素上再添加一个 样式类

看现在的效果,还是有点变化的。

带边框的表格

利用.table-bordered为表格和其中的每个单元格增加边框。

还是将第一个示例中的table元素上再添加一个样式类

鼠标悬停

利用.table-hover可以让中的每一行响应鼠标悬停状态。

将鼠标移到那一行那一行就会有效果的

紧缩表格

利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

这个效果没那么明显,主要就是单元格中内容padding减半了。

状态Class

通过这些状态class可以为行货单元格设置颜色。

响应式表格

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

看滚动条出现了额。

总结

简简单单的几个样式类,可以将页面搞到这种程度,很不错,以后再也不用愁调样式了。

下一篇:Bootstrap3.0学习第六轮:表单

  • 相关推荐
  • 大家在看
  • T-Mobile宣布Ultra Capacity 5G网络已覆盖2亿人

    美国无线运营商 T-Mobile 周一宣布,其“Ultra Capacity”5G 网络已经覆盖了 2 亿人。据悉,该公司原计划在 2021 年底实现这一目标。Ultra Capacity 服务建立在中频 2.5GHz 频谱之上,宣称能够带来较 4G LTE 快得多的连接体验、甚至比 5G Wi-Fi 还要快。资料图(来自:T-Mobile)T-Mobile 补充道,其扩展范围(Extended Range)5G 网络依赖于低频段频谱,来提供较超容量(Ultra Capacity)5G 网络更强大、但相对较慢的连接选项,现

  • 首发18GB+1TB存储!一图看懂中兴Axon 30 Ultra航天版

    11月25日消息,今日,全球首款18GB+1TB手机中兴Axon 30 Ultra航天版正式发布,售价6998元,将于11月26日全渠道开售。那么中兴Axon 30 Ultra航天版究竟有哪些强悍之处?不妨通过官方发布的一图详细了解。外观设计上,中兴Axon 30 Ultra航天版机身背面印有TAIKONAUT”(中国航天员)标志,以此致敬中国航天英雄,同时,专属礼盒上为多层丝印的透明磨砂封套,表面展现了空间站环绕地球的运行轨迹,极具科幻感。据了解,中兴Axon 30Ult

  • 传Galaxy Tab S8 Ultra采用刘海屏 但缺口没MacBook Pro那么夸张

    自 2017 年苹果 iPhone X 发布以来,为前摄传感器留出空间的“刘海屏”就一直延续至今。一些消费者实在接受不了这种设计审美,于是厂商又设想了许多别出心裁的方案,比如 Infinity-O 打孔屏、甚至屏下隐藏摄像头。没想到的是,随着 2021 款 Apple Silicon MacBook Pro 的发布,刘海开槽也有向大屏设备进发的趋势。(图 via @OnLeaks x 91Mobiles)最新消息是,作为苹果的头号竞争对手,三星也很有可能尝试在 Galaxy Tab S8 Ultra ?

  • Chrome 97 Beta版发布:初步支持WebTransport 引入CSS媒体查询

    在 Chrome 96 稳定版发布之后,开发团队的重心已经偏移到 Chrome 97 版本中。在今天发布的 Chrome 97 Beta 版本中,最引人注意的是添加了对 WebTransport 的初步支持。WebTransport 是一个类似于WebRTC数据通道的协议框架,但主要是用于受网络安全模型限制的客户端,使用安全、多复式传输与远程服务器进行通信。WebTransport使用HTTP/3协议进行双向传输。与基于TCP的WebSockets不同,WebTransport依赖于类似UDP的数据包和可取消的?

  • 中兴Axon 30 Ultra航天版采用铠侠1TB UFS 3.1闪存 大V:第一次见

    本周,中兴发布Axon 30 Ultra航天版,今天上午已经开售,定价6998元。该机最大的特点就是,系全球第一款18GB+1TB组合的旗舰手机。据数码大V@肥威 测得,Axon 30 Ultra航天版采用的是来自铠侠的1TB UFS 3.1闪存,后者在规格表中标称的最快数据传输速率可达2332MB/s。铠侠是六大闪存(含Intel)原厂之一,品质值得信赖,看来中兴此次也是不惜成本采购和打磨。回到手机本身,Axon 30 Ultra航天版采用6.67英寸AMOLED全面屏,搭载高通骁

  • 全球首发18GB+1TB 中兴Axon 30 Ultra航天版细节图公布:彰显身份

    安卓的手机内存容量总能超乎想象。此前,中兴手机宣布,将于11月25日发布全球首款18G+1TB旗舰中兴Axon 30 Ultra航天版。今日,@中兴手机 官微再发预告:#中兴Axon30# Ultra航天版,移动影像融合算法,计算影像再进化,11月25日,海南文昌见! ”据了解,中兴Axon 30 Ultra航天版将搭载多主摄阵列融合影像系统6400万像素主摄+6400万像素超广角+6400万像素人文镜头。具体来说,这三颗都是主摄,再加上800万像素5倍光学变焦潜望镜头,

  • 中兴通讯推出Axon 30 Ultra Aerospace版本,配备18GB RAM和1TB存储空间

    第一款16GB内存的智能手机于2020年初问世,一年后第一款18GB内存的手机问世。我们会在2021年结束前看到第一部20GB手机吗?也许吧,但我们还没到那里中兴通讯宣布了其目前旗舰产品中兴Axon 30 Ultra Aerospace edition的限量版。这一模式将由女演员刘浩存在电影《一秒钟》中推广。除了电影《天人合一》外,该装置还庆祝了中国航天局的成功,该局成功地将一个轨道器和着陆器(天文一号)和三个宇航员送入了中国空间站(天宫)中兴Axo

  • Beats发布Beats Fit Pro耳机 停产Powerbeats等三款旧耳机

    据国外媒体报道,Beats正式推出了全新主打运动属性的入耳式耳机Beats Fit Pro,售价1599元(199.99美元)。Beats Fit Pro主动降噪、通透模式等功能,还增加了新耳翼设计。其内置苹果H1芯片支持通透、降噪、关闭三种模式,并且可使用与AirPods Pro相同的带动态头部跟踪功能的空间音频。其还采用全新定制的传感器,通气系统可最大限度地减少柔性振膜产生的高音失真。

  • Hoo虎符交易所研究院|Web3.0的发展(上): 从Web到Web3.0

    人工智能、区块链、5G、云计算、Web3. 0 等技术概念被视为是下一代科技创新的核心概念。其中,Web3. 0 随着区块链技术的的火热发展也多次被带入公众视野。虎符交易所研究院的cici认为,在讨论Web3. 0 之前,必要先了解Web的概念。Web概念的诞生Web的概念最早可以溯源到 1989 年,在CERN(欧洲粒子物理研究所)的Tim Berners-Lee领导的小组提出了一个针对互联网的新协议,以及一个使用该协议的文档系统,这个新系统被命名 World Wid

  • Google Arts & Culture新增Pet Portraits功能:宠物照可匹配艺术品

    Google ArtsCulture 在 2018 年曾短暂推出过一项相机功能,可以将你自拍和著名的肖像画进行比较而一时走红。现在该应用程序现在为宠物提供了同样的功能。在 Android 端升级到 9.0.27 版本之后,点击底栏中间的相机按钮就能进入“Pet Portraits”。给你的宠物拍照,Google 会将其与“来自世界各地博物馆的艺术品”进行比较。在官方介绍中写道:“在艺术作品中畅游,发现哪些作品最像你的宠物。这项新的实验性功能使用计算机视觉技术

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天