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宽度时,水平滚动条消失。


  看滚动条出现了额。

  总结

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

时间: 2025-01-25 12:24:24

Bootstrap3.0表格基础知识讲解的相关文章

JavaScript组成、引入、输出、运算符基础知识讲解_javascript技巧

javascript简介: JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. 下文重点给大家介绍js组成,引入,输出,运算符基础知识,具体详解如下所示: JavaScript组成: ECMAscript 浏览器对象模型 BOM 文档对象模型 DOM // ecmascript bom dom dom (文档对象模型) 用来访问和操纵htm

无线Mesh网络接入技术基础知识讲解

无线Mesh网络接入技术还是很值得我们学习的,这里主要给大家讲解了什么是无线Mesh网络接入技术,同时也介绍了无线Mesh网络接入技术的特点,希望 对大家了解无线Mesh网络接入技术有所帮助."Mesh"这个词原来的意思就是指所 有的节点都互相连接,无线Mesh网络接入技术是一种与传统的无线网络完全不同的网络.传统的无线网络必须首先访问集中的接入点(AP)才能进行无线连接.这样,即使两个802.11b的节点互相挨着,它们也必须通过接入点才能进行通信.而在无线Mesh(网状)网络中,每个

开始ITGEGE教育社区的视频录制----嵌入式基础知识讲解

从8月份开始,陆陆续续要对我的第一份兼职工作ITGEGE讲师做教学视频录制了,本人水平有限,我只讲一些开发在工作中的应用,其它细节的东西不做深究,毕竟本人工作经验和精力也有限,白天要上班,特别是最近又有新的项目要来了,要学习新的东西,平时也会在CSDN的特邀编辑选拔一些CSDN的精选文章,这也算是第二份兼职吧,和CSDN社区合作了,我觉得挺不错的,既有收益又能学到CSDN社区一些大神写的东西,感谢CSDN的陈秋歌女士的信任和支持.再者我比较喜欢玩的,毕竟适当学习要适当放松,愉悦一下也不错.欢迎一

讲解JavaScript中for...in语句的使用方法_基础知识

 这里是JavaScript支持的另外一个循环.它被称为for...in循环.这个循环是用于循环一个对象的属性. 因为我们还没有讨论的对象,所以使用这一循环可能会感觉不太明白.但是,一旦你会对JavaScript对象了解后,那么会发现这个循环非常有用.语法 for (variablename in object){ statement or block to execute } 从对象每次迭代一个属性分配给变量名(variablename),这个循环持续到该对象的所有属性都用尽.例子: 下面是打

关于js原型的面试题讲解_基础知识

今天遇到关于javascript原型的一道面试题,现分析下: 原题如下: function A(){ } function B(a){ this.a = a; } function C(a){ if(a){ this.a = a; } } A.prototype.a = 1; B.prototype.a = 1; C.prototype.a = 1; console.log(new A().a); console.log(new B().a); console.log(new C(2).a);

Bootstrap3.0入门知识

前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. Bootstrap深受广大屌丝喜爱的原因到底是什么呢? 1.节省时

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

ASP基础知识Command对象讲解_php基础

Coonamd 对象定义了将对数据源执行的命令,可以用于查询数据库表并返回一个记录集,也可以用于对数据库表进行添加.更改和删除操作.一.使用Command 对象的步骤:当在 ASP 页面中使用 Command 对象处理数据时,应首先设置命令类型.命令文本以及相关的活动数据库连接等,并通过 Parameter 对象传递命令参数,然后通过调用 Execute 方法来执行 SQL 语句或调用存储过程,以完成数据库记录的检索.添加.更改和删除任务.其步骤如下: 1.使用 ActiveCommand 属性

Red Flag Linux Desktop 6.0用户手册:文件和资源管理基础知识

Red Flag Linux http://www.aliyun.com/zixun/aggregation/16493.html">Desktop 6.0中的资源管理器作为一个集多重功能于一身的高效文件管理器,能够在图形环境中更加安全.方便.全方位地管理.操作文件,还包括了浏览文本.图像.访问和共享网络资源等功能. Red Flag Linux Desktop 6.0资源管理器的操作界面和使用都类似于 Windows下的资源管理器,熟悉 Windows的用户可以轻松地适应它的操作.它集成