Bootstrap每天必学之表格


Posted in Javascript onNovember 23, 2015

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

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

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

Bootstrap每天必学之表格

一个简单的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>

Bootstrap每天必学之表格

条纹状表格

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

Bootstrap每天必学之表格

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

Bootstrap每天必学之表格

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

Bootstrap每天必学之表格

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

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

Bootstrap每天必学之表格

<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>

Bootstrap每天必学之表格 

响应式表格
将任何.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每天必学之表格

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

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

Javascript 相关文章推荐
javascript分页代码实例分享(js分页)
Dec 13 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
js比较日期大小的方法
May 12 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
js实现3D图片展示效果
Mar 09 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
js同时按下两个方向键
2007/12/01 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Django框架封装外部函数示例
2019/05/28 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
最感人的道歉情书
2015/05/12 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
创业计划书之宠物店
2019/09/19 职场文书
python实现过滤敏感词
2021/05/08 Python