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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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实现mysql事务处理的方法
2014/12/25 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
jQuery之按钮组件的深入解析
2013/06/19 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
基于vuejs实现一个todolist项目
2017/04/11 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
详解python程序中的多任务
2020/09/16 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
优秀生推荐信范文
2013/11/28 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
交通安全寄语大全
2014/04/08 职场文书
食品工程专业求职信
2014/06/15 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
我爱我班主题班会
2015/08/13 职场文书
运动会广播稿200字
2015/08/19 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js