Bootstrap 表格

2017-08-19 09:00:58 来源: 点击:站内收藏

Bootstrap 提供了一个清晰的创建表格的布局。

表格类

下表样式可用于表格中:

描述 实例
.table 为任意 table 添加基本样式 (只有横向分隔线)
.table-striped 在 tbody 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 tbody 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类

tr, th 和 td 类

下表的类可用于表格的行或者单元格:

描述 实例
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本的表格</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>
 
</body>
</html>

可选的表格类

条纹表格:通过使用 <table class="table table-striped"≷ 您将在 tbody 内的行上看到条纹

边框表格:通过使用 <table class="table table-bordered"> 您将看到每个元素周围都有边框,且占整个表格是圆角的

悬停表格:通过使用 <table class="table table-hover"> 当指针悬停在行上时会出现浅灰色背景

精简表格:通过使用 <table class="table table-condensed"> 行内边距(padding)被切为两半,以便让表看起来更紧凑

上下文类,在tr中添加class="active"

描述
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

响应式表格

通过在 table 外加一层<div class="table-responsive"> 您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

相关热词搜索:
评论正在载入