Bootstrap学习4--Table样式（转载：https://blog.csdn.net/Fanbin168/article/details/53208869）
备注：最新Bootstrap手册：http://www.jqhtml.com/bootstraps-syntaxhigh/index.html
将<table>标签添加class=‘table’ 类后的样式
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Table样式</title> <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/bootStrapPager/js/jquery-1.11.1.min.js"></script>
<script src="~/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
</html>
我们可以看到，Table是可以自由缩放的（不是响应式，应该是流媒体式）
class='table table-striped' 条纹状表格（隔行变色）
<body>
<table class="table table-striped">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
class="table table-bordered" 给表格添加边框
<body>
<table class="table table-bordered">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
class="table table-hover" 鼠标悬停变色
<body>
<table class="table table-hover">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
class="sr-only" 隐藏某一行
<body>
<table class="table">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody id="abc">
<tr class="sr-only"><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
在第一行的tr上使用了sr-only样式后，编号为001的那一行被隐藏了
状态类（主要做标记）
可以单独设置每一行的背景样式（总共有5中不同的样式可以选择）
<body>
<table class="table">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr class="active"><td>001</td><td>郭靖</td><td>25</td></tr>
<tr class="success"><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr class="info"><td>003</td><td>杨过</td><td>24</td></tr>
<tr class="warning"><td>004</td><td>黄老邪</td><td>54</td></tr>
<tr class="danger"><td>005</td><td>欧阳锋</td><td>42</td></tr>
</tbody>
</table>
</body>
响应式表格
class="table-responsive 浏览器宽度小于768px时，表格出现边框。（注意：这个样式定义在表格的父元素上）
响应式表格就是当浏览器小于多少宽度或者高度的时候做出什么动作，例如当浏览器的的宽度小于768px的时候表格出现边框
<body class="table-responsive">
<table class="table ">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody id="abc">
<tr><td>001</td><td>郭靖</td><td>25</td></tr>
<tr><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr><td>003</td><td>杨过</td><td>24</td></tr>
</tbody>
</table>
</body>
Bootstrap学习4--Table样式（转载：https://blog.csdn.net/Fanbin168/article/details/53208869）的更多相关文章
- Mui本地打包笔记（一）使用AndroidStudio运行项目 转载 https://blog.csdn.net/baidu_32377671/article/details/79632411
转载 https://blog.csdn.net/baidu_32377671/article/details/79632411 使用AndroidStudio运行HBuilder本地打包的Mui项目 ...
- AutoFac控制反转 转载https://blog.csdn.net/u011301348/article/details/82256791
一.AutoFac介绍 Autofac是.NET里IOC(Inversion of Control,控制反转)容器的一种,同类的框架还有Spring.NET,Unity,Castle等.可以通过NuG ...
- 爬虫出现Forbidden by robots.txt（转载 https://blog.csdn.net/zzk1995/article/details/51628205）
先说结论,关闭scrapy自带的ROBOTSTXT_OBEY功能,在setting找到这个变量,设置为False即可解决. 使用scrapy爬取淘宝页面的时候,在提交http请求时出现debug信息F ...
- MVC和WebApi 使用get和post 传递参数。 转载https://blog.csdn.net/qq373591361/article/details/51508806
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq373591361/article/details/51508806我们总结一下用js请求服务器的 ...
- 已知IP地址和子网掩码求出网络地址、广播地址、地址范围和主机数（转载https://blog.csdn.net/qq_39026548/article/details/78959089）
假设IP地址为128.11.67.31,子网掩码是255.255.240.0.请算出网络地址.广播地址.地址范围.主机数.方法:将IP地址和子网掩码转化成二进制形式,然后进行后续操作. IP地址和子网 ...
- Scrapy框架的学习(6.item介绍以及items的使用（提前定义好字段名）)转载https://blog.csdn.net/wei18791957243/article/details/86259688
在Scrapy框架中的items.py的作用 1.可以预先定义好要爬取的字段 items.py import scrapy class TencentItem(scrapy.I ...
- scala学习（idea编译过程https://blog.csdn.net/guiying712/article/details/68947747）
scala官网 https://www.scala-lang.org/ 菜鸟教程学习 http://www.runoob.com/scala/scala-basic-syntax.html w3sch ...
- jeecms 强大的采集功能优化 转载 https://blog.csdn.net/jeff06143132/article/details/7099003
========================================================= 没办法附件上传不了,AcquisitionSvcImpl.java类: //---- ...
- Mac OS X下把 /etc/sudoers 写错了怎么办？（转载https://blog.csdn.net/robertsong2004/article/details/53725285）
重要的事情先说一下,首先为了回避这个问题,一定要用 visudo 来改 /etc/sudoers 文件. 问题描述: 1. 用 sudo vi 直接改 /etc/sudoers 并覆盖原文件. 2. ...
随机推荐
- 解析Json数据
一.json数据 [{"}] 二.关键代码 public class MainActivity extends Activity { @Override protected void onC ...
- 打造你的前端神器-webstorm11
说起前端编辑器,用过dw,sublime,hbuilder,webstorm也不陌生,之前的版本8有用过一下,但是觉得比sublime重量太多,但是随着后来用node的开始,发现需要打造个web前端神 ...
- Android Asynchronous Http Client 中文教程
本文为译文,原文链接https://loopj.com/android-async-http/ 安卓异步httpclient 概述 这是一个异步的基于回调的Android http客户端,构建于Apa ...
- MySQL 系列教程（二） 你不知道的数据库操作
本章内容: 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网远程连接法 查看\创建\使用\删除\清空\修改 数据库表(是否可空,默认值,主键,自增,外键) 表内容的增删改查 where条件. ...
- SVN版本控制图标未显示或显示异常
TortoiseSVN下载的文件和文件夹如果缺失了那些花花绿绿的状态小图标,很容易逼死某些强迫症患者,更何况这些小图标用处多多 接下来我会逐步展示从常规到非常规的一系列解决方案(不包括重装重启这一类) ...
- Android+git+hudson+gradle持续集成
linux 主机 android sdk安装忽略 jdk安装忽略 hudson安装忽略 gradle安装 1:下载相应的gradle(这里是gradle-2.10-all.zip) 2 : 解 ...
- Linux基础之常用基本命令备忘
Linux基础之常用基本命令备忘 PWD 查询当前所在Linux上的位置 / 根目录 CD(change directory)切换目录 语法 CD /(注意添加空格) LS ...
- 基于JT/T 1078协议设计和开发部标视频服务器
交通部与2016年10月份推出了JT/T 1078-2016标准,全称是<道路运输车辆卫星定位系统视频通信协议>.该标准将改变以往两客一危车辆的视频监控设备通信协议都是设备厂商私有协议的局 ...
- DataUml Design 教程1-初识
DataUml Design 是面向开发人员使用的一个永久免费的软件,提高软件的开发效率和代码的规范度.它主要包括三大功能,数据模型.代码生成和UML建模,数据模型功能类似于PowerDesi ...
- 定时器：Timer：System.Threading.Timer类（转）
最近的一个项目有一些地方需要用到定时功能,在设计过程中,突然发现.net的Timer类居然还有很多我以前没有用过的功能,这里就跟大家分享一下 注:这里的Timer类特指System.Threading ...