Bootstrap表格樣式(附源碼文件)--Bootstrap - 碼上歡樂

相關內容簡體繁體

Bootstrap表格樣式(附源碼文件)--Bootstrap

本文轉載自查看原文 2017-10-16 23:38 1291 Bootstrap/ bootstrap

1、表格默認樣式

<h4>表格默認樣式</h4>
<table>
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

2、表格基礎樣式

<h4>表格基礎樣式</h4>
<table class="table">
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

3、帶背景條紋的表格

<h4>帶背景條紋</h4>
<table class="table table-striped">
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

4、帶邊框的表格

<h4>帶邊框的表格</h4>
<table class="table table-bordered">
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

5、顯示鼠標懸停效果的表格

<h4>鼠標懸停的表格</h4>
<table class="table table-bordered table-hover">
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

6、緊湊型表格

<h4>緊湊型表格</h4>
<table class="table table-bordered table-condensed">
　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
</table>

7、表格行內樣式

<h4>表格行內樣式</h4>
<table class="table table-bordered table-condensed">
　　<tr class="info"><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
</table>

8、響應式表格

<h4>響應式表格</h4>
<div class="row">
　　<div class="col-sm-4">
　　　　<div class="table-responsive">
　　　　　　<table class="table table-bordered table-condensed">
　　　　　　　　<tr class="info"><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　</table>
　　　　</div>
　　</div>
</div>

9、demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap表格樣式</title>
　　<link rel="stylesheet" href="css/bootstrap.css">

　　<meta name="viewport" content="width=device-width, initial-scale=1"/>

</head>
<body>
　　<div class="container">
　　　　<h4>表格默認樣式</h4>
　　　　<table>
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>表格基礎樣式</h4>
　　　　<table class="table">
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>帶背景條紋</h4>
　　　　<table class="table table-striped">
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>帶邊框的表格</h4>
　　　　<table class="table table-bordered">
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>鼠標懸停的表格</h4>
　　　　<table class="table table-bordered table-hover">
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>緊湊型表格</h4>
　　　　<table class="table table-bordered table-condensed">
　　　　　　<tr><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>表格行內樣式</h4>
　　　　<table class="table table-bordered table-condensed">
　　　　　　<tr class="info"><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　</table>
　　　　<h4>響應式表格</h4>
　　　　<div class="row">
　　　　　　<div class="col-sm-4">
　　　　　　　　<div class="table-responsive">
　　　　　　　　　　<table class="table table-bordered table-condensed">
　　　　　　　　　　　　<tr class="info"><th>序號</th><th>姓名</th><th>年齡</th></tr>
　　　　　　　　　　　　<tr class="success"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
　　　　　　　　　　</table>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
</div>
</body>
</html>

Effect Picture：

源碼文件下載：Bootstrap表格樣式.zip

文章原創，轉載請注明出處，感謝大家的合作！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap下拉菜單的使用(附源碼文件)--Bootstrap Bootstrap列表與代碼樣式(附源碼)--Bootstrap bootstrap表格樣式大全 bootstrap 3 之表格（table的各種樣式） bootstrap表格樣式關於bootstrap--表格（tr的各種樣式） Bootstrap -- 表格樣式、表單布局關於bootstrap--表格（table的各種樣式）表格布局----基於bootstrap樣式布局關於bootstrap--表格（table的各種樣式）

粵ICP備18138465號 © 2018-2025 CODEPRJ.COM