• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)

bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含bootstrap3.0教程,表格效果,条纹状表格等相关知识,佚名 希望在学习及工作中可以帮助到您

前言

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

1.基本案例

2.条纹状表格

3.带边框的表格

4.鼠标悬停

5.紧缩表格

6.状态class

7.响应式表格

8.总结

基本案例

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

一个简单的Table示例

条纹状表格

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

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

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

带边框的表格

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

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

鼠标悬停

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

紧缩表格

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

状态Class

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



响应式表格

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


看滚动条出现了额。

您可能想查找下面的文章:

  • bootstrap3.0教程之表单(form)使用详解
  • bootstrap3.0教程之多种表格效果(条纹状表格、条纹状表格、鼠标悬停等)
  • bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等用法)
  • bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
  • bootstrap3.0教程之栅格系统原理(布局)

相关文章

  • 2017-08-06CSS3对背景图片的裁剪及尺寸和位置的设定方法
  • 2017-08-06css3让div随鼠标移动而抖动起来
  • 2017-08-06CSS3 制作绽放的莲花采用效果叠加实现
  • 2017-08-06CSS3实现千变万化的文字阴影text-shadow效果设计
  • 2017-08-06关于ol和ul的padding和margin默认值
  • 2017-08-06CSS expression在Chrome的问题
  • 2017-08-06外部引用CSS中 link与@import的区别
  • 2017-08-06纯CSS打造忙碌光标适用于忙碌等待的情况
  • 2017-08-06用CSS样式描述表格Table边框
  • 2017-08-06pre标签的css代码,防止代码pre中代码过长等问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 针对不同浏览器获取到css文件里相关属性的两种方法
    • CSS 解决未知高度垂直居中实现代码
    • ul里面如何让li居中不用FLAOT改为display:inline可实现
    • CSS控制DIV永远固定在页面底部不随滚动而滚动
    • 5个DIV并排在一行的一种方法
    • 兼容ie的内阴影和外阴影实现效果及测试代码
    • Jacascript和CSS实现Mac OS导航菜单
    • firefox中div重叠覆盖之前ul的两种解决方法
    • 页面宽度自适应 jquery动态设置css样式
    • 设置一个DIV块固定在屏幕中央的两种方法(推荐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有