bootstrapテーブルスタイルテンプレート

9084 ワード

https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped Bootstrapインスタンス-ストライプテーブル
ストライプ表のレイアウト
名前
都市
郵便番号
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
tableの最も基本的なtable-striped縞table-bordered外枠table-hoverポインタが行にぶら下がると、薄い灰色の背景table-condensed行の内側余白が半分に切られ、テーブルがよりコンパクトに見えるようにtable-responsiveテーブルを水平にスクロールして小型デバイス(768 px未満)に適応できます.
参照:https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap   -  </title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
	<caption> </caption>
	<thead>
		<tr class="active">
			<th> </th>
			<th> </th>
			<th> </th>
		</tr>
	</thead>
	<tbody>
		<tr class="success">
			<td>Tanmay</td>
			<td>Bangalore</td>
			<td>560001</td>
		</tr>
		<tr class="warning">
			<td>Sachin</td>
			<td>Mumbai</td>
			<td>400003</td>
		</tr>
		<tr class="danger">
			<td>Uma</td>
			<td>Pune</td>
			<td>411027</td>
		</tr>
	</tbody>
</table>

</body>
</html>

table 	 
table-striped	  	
table-bordered 	 
table-hover 	 
table-condensed 	 (padding) , 
table-responsive	 (  768px)