Bootstrap每天必学之表格

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

1.基本案例
2.条纹状表格
3.带边框的表格
4.鼠标悬停
5.紧缩表格
6.状态class
7.响应式表格
8.总结

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

一个简单的Table示例

 <div class="container">
  <table class="table"> 
   <caption>Table基本案例</caption> 
   <thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th>
     <th>User Name</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>aehyok</td> 
     <td>leo</td> 
     <td>@aehyok</td> 
    </tr>
    <tr> 
     <td>lynn</td> 
     <td>thl</td> 
     <td>@lynn</td> 
    </tr>
   </tbody> 
  </table> 
 </div>

条纹状表格

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。
在上面示例的table元素上再添加一个 样式类
 <table class="table table-striped">
看现在的效果,还是有点变化的。

带边框的表格
利用.table-bordered为表格和其中的每个单元格增加边框。
还是将第一个示例中的table元素上再添加一个样式类
<table class="table  table-bordered">

鼠标悬停
利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。
<table class="table table-hover">
将鼠标移到那一行那一行就会有效果的

紧缩表格
利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。
<table class="table table-condensed">
这个效果没那么明显,主要就是单元格中内容padding减半了。

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

<table class="table table-condensed"> 
   <caption>Table</caption> 
   <thead> 
    <tr> 
     <th>#</th>
     <th>First Name</th> 
     <th>Last Name</th>
     <th>User Name</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr class="active"> 
     <td>1</td>
     <td>aehyok</td> 
     <td>leo</td> 
     <td>@aehyok</td> 
    </tr>
    <tr class="success"> 
     <td>2</td>
     <td>lynn</td> 
     <td>thl</td> 
     <td>@lynn</td> 
    </tr>
    <tr class="warning"> 
     <td>3</td> 
     <td>Amdy</td> 
     <td>Amy</td> 
     <td>@Amdy</td> 
    </tr>
    <tr class="danger"> 
     <td>4</td> 
     <td>Amdy</td> 
     <td>Amy</td> 
     <td>@Amdy</td> 
    </tr>
    <tr > 
     <td class="success">5</td> 
     <td class="danger">Amdy</td> 
     <td class="warning">Amy</td> 
     <td class="active">@Amdy</td> 
    </tr>
   </tbody> 
  </table> 

 

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

<div class="table-responsive">
  <table class="table"> 
   <caption>Table</caption> 
   <thead> 
    <tr> 
     <th>#</th>
     <th>First Name</th> 
     <th>Last Name</th>
     <th>User Name</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr class="active"> 
     <td>1</td>
     <td>aehyok</td> 
     <td>leo</td> 
     <td>@aehyok</td> 
    </tr>
    <tr class="success"> 
     <td>2</td>
     <td>lynn</td> 
     <td>thl</td> 
     <td>@lynn</td> 
    </tr>
    <tr class="warning"> 
     <td>3</td> 
     <td>Amdy</td> 
     <td>Amy</td> 
     <td>@Amdy</td> 
    </tr>
    <tr class="danger"> 
     <td>4</td> 
     <td>Amdy</td> 
     <td>Amy</td> 
     <td>@Amdy</td> 
    </tr>
    <tr > 
     <td class="success">5</td> 
     <td class="danger">Amdy</td> 
     <td class="warning">Amy</td> 
     <td class="active">@Amdy</td> 
    </tr>
   </tbody> 
  </table>
  </div>

看滚动条出现了额。

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

以上就是关于Bootstrap的表格最为常用的各种列表的展示,希望对大家的学习有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性。尤其可以应用在公司照片墙、招聘网站求职者信息展示等等场景。 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果。当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示 源码下载 HTML 首先我们准备页面素材,页面上由多组图片li密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果。 div class="demo" ul id="Album" lia href=#> CSS
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考。具体如下: 起初我Html代码架子是这样的: div class="tabs" ul li class="acss" data-box="#panel-1"标签1/li li class="bcss" data-box="#panel-2"标签2/li li class="bcss" data-box="#panel-3"标签3/li /ul div id="panel-1"内容111111/d
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、效果图一: 2、效果图二: 3、效果图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的。每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加。 插件的实现代码如下: (functio
本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: div id="nav" div class="navItem indexNavItem" ul class="navUl" li首页/li l
实现代码一、 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htmlhead meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title无标题文档/title !--***********开始*************-- script type="text/javascript" //![CDATA[ var tips; var the

Jquery 效果使用详解 - 2015-11-24 17:11:26

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! .hide() 隐藏匹配的元素。 .hide() 这个方法不接受任何参数。 .hide([duration][,complete]) duration 一个字符串或者数字决定动画将运行多久。 complete 在动画执行完时执行的函数。 .hide([duration][,easing][,complete])
HTML中的JavaScript脚本必须位于script与/script标签之间,JavaScript脚本可被放置在HTML页面的body标签和head标签中,这种视情况而定,一般放在head标签内。 一、script 标签 如需在HTML页面中插入JavaScript脚本,请使用script标签。script和/script会告诉JavaScript在何处开始 和结束。script和/script之间的代码行包含了JavaScript: spanscript type="text/javascript"
为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean,Number,String. 实际上,每当读取一个基本类型值的时候,后台应付创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. var s1="some text"; var s2=s1.substring(2); console.log(s2);//me text 这个例子中s1包含了一个字符串,字符串是基本类型值.第二行调用了s1的subsstring()方法,并将返回的结果保存在了s2中
一、垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。 原理: 垃圾收集器会定期(周期性) 找出那些不在继续使用的变量,然后释放其内存。 JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固 定的时间间隔周期性的执行 。 不再使用的变量也就是生命周期结束的变量,当然只可能是局部变量,全局变量的生命

JS鼠标拖拽实例分析 - 2015-11-24 15:11:48

本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考,具体如下: JS代码: scriptwindow.onload=function(){ var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠标按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边