Bootstrap全局样式 - 表格
2017-06-08 本文已影响97人
蝴蝶结199007
知识点
表格样式
.table -----> 赋予基本的样式，少量的内补（padding）和水平方向的分隔线；
.table-striped -----> 条纹状表格，可以给 <tbody> 之内的每一行增加斑马条纹样式；
.table-bordered -----> 带边框的表格，为表格和其中的每个单元格增加边框；
.table-hover -----> 鼠标悬停，让 <tbody> 中的每一行对鼠标悬停状态作出响应；
.table-condensed -----> 让表格更加紧凑，单元格中的内补（padding）均会减半；
状态类
.active -----> 鼠标悬停在行或单元格上时所设置的颜色
.success -----> 标识成功或积极的动作
.info -----> 标识普通的提示信息或动作
.warning -----> 标识警告或需要用户注意
.danger -----> 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
垂直方向的内容截断：
响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。
Firefox 和 fieldset 元素：
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，这些代码并未集成在 Bootstrap 中，我们需要自己添加到自己的代码中。
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
实践
table
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>表格</title>
<meta name="Resource-type" content="Document" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.example-padding p{padding:15px;}
-->
</style>
</head>
<body>
<div class="container example-padding table-responsive">
<p class="bg-primary">基本表格样式</p>
<table class="table">
<thead>
<tr>
<th colspan="2">.table 基本表格样式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">.table .table-striped 条纹状表格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">.table .table-bordered 带边框的表格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-hover">
<thead>
<tr>
<th colspan="2">.table .table-hover 鼠标悬停状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-condensed">
<thead>
<tr>
<th colspan="2">.table .table-condensed 表格更紧凑，padding减半</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th colspan="2">所有样式集合</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
</tr>
</tbody>
</table>
<p class="bg-primary">状态类</p>
<table class="table">
<tbody>
<tr class="active">
<td>active</td>
<td>鼠标悬停在行或单元格上时所设置的颜色</td>
</tr>
<tr class="success">
<td>success</td>
<td>标识成功或积极的动作</td>
</tr>
<tr class="infor">
<td>infor</td>
<td>标识普通的提示信息或动作</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>标识警告或需要用户注意</td>
</tr>
<tr class="danger">
<td>danger</td>
<td>标识危险或潜在的带来负面影响的动作</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
