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系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
删除节点的jquery代码
Jan 13 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
给初学PHP的5个入手程序
2006/11/23 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python zip文件 压缩
2008/12/24 Python
python求众数问题实例
2014/09/26 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
平安建设实施方案
2014/03/19 职场文书
先进工作者申报材料
2014/12/23 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
贷款担保书范本
2015/09/22 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript