bootstrap 表格

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>test</h1>
    <table class="table table-striped table-bordered table-hover table-responsive">
    	<!-- On rows -->
		<tr clas="">
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
		</tr>
		<tr clas="">
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
		</tr>
		<tr clas="">
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
		</tr>
		<tr clas="">
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
			<td>ttttttttttttt</td>
		</tr>
    </table>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

  

 

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Copy
<table class="table">
  ...
</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

跨浏览器兼容性

条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Copy
<table class="table table-striped">
  ...
</table>

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
Copy
<table class="table table-bordered">
  ...
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Copy
<table class="table table-hover">
  ...
</table>

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
Copy
<table class="table table-condensed">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class描述
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作
#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
Copy
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

Copy
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

更多信息请参考 this Stack Overflow answer.

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
Copy
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值