免費AI編程助手
Bootstrap 表格
2018-03-20 18:19 更新
HTML表格以網(wǎng)格格式呈現(xiàn)數(shù)據(jù)。
下表列出了Bootstrap支持的各種元素。
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 封裝元素，用于以表格格式顯示數(shù)據(jù) |
| <thead> | 容器元素，用于標(biāo)記表格列的表格標(biāo)題行（<tr>） |
| <tbody> | 容器元素，用于表格主體中的表格行（<tr>） |
| <tr> | 容器元素，用于顯示在單個行上的一組表格單元格（<td>或<th>） |
| <td> | 默認(rèn)表格單元格 |
| <th> | 特殊表格單元格，用于標(biāo)識列（或行，具體取決于范圍和位置）。必須在<thead>內(nèi)使用 |
| <caption> | 關(guān)于表格存儲內(nèi)容的描述或總結(jié)。 |
基礎(chǔ)表格樣式
如果你想要一個美觀的、基礎(chǔ)的表格樣式，只帶有一些淺的填充和水平分隔線，可添加.table的基類到任意表格。這些基本布局在所有<td>元素上都有頂部邊框:
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>對于基礎(chǔ)樣式是：只有淺填充和水平分隔符 - 將基類.table添加到任意<table>。
邊框表格
添加.table-bordered類為表格和其中的每個單元格增加邊框。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-bordered">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>緊縮表格
添加 .table-condensed類可以使表格更加緊湊，單元格中的內(nèi)補（padding）均會減半。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-condensed">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>上下文表格類
使用上下文表格類來對表格行或單個單元格設(shè)置顏色。
| 類 | 描述 |
|---|---|
| .success | 表示成功或正確的動作 |
| .danger | 表示危險或潛在的負(fù)面的動作 |
| .warning | 表示用戶需要注意的警告 |
| .active | 將懸停顏色應(yīng)用于特定的行或單元格 |
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-condensed">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="danger">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="active">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="warning">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>懸停行
添加.table-hover以在<tbody>中的表格行上啟用懸停狀態(tài)。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-hover">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>條紋狀表格
使用.table-striped在<tbody>中的任意表格行中添加斑馬條紋樣式。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-striped">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>響應(yīng)式表格
我們可以創(chuàng)建響應(yīng)式表格，以便在小屏幕設(shè)備（<768px）上啟用滾動功能。<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>j@mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>p@mail.com</td>
<td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Smith</td>
<td>j@mail.com</td>
<td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：