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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
BootStrap的两种模态框方式
May 10 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 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动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Django框架模板的使用方法示例
2019/05/25 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
毕业评语大全
2014/05/04 职场文书
群众路线领导对照材料
2014/08/23 职场文书
学期个人工作总结
2015/02/13 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
致运动员加油稿
2015/07/21 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python