BootStrap -- Table

mybwu_com

浏览: 179066 次
性别:

最近访客更多访客>>

devcang

ttcc_123456

WEIQI

夜勿语

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-10 ( 43)
2014-09 ( 34)
2014-08 ( 27)
更多存档...

<script src="jquery.1.9.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<h2>Files Required</h2>
<h3>1.jquery.js</h3>
<h3>2.bootstrap.min.js</h3>
<h3>3.bootstrap.min.css</h3>
<h3>4.bootstrap-theme.min.css</h3>

<body>

<h3>Table</h3>

<p>1.Basic Table & Bordered Table</p>

<table class="table table-bordered">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>

<p>2.Hover Rows </p>
<table class="table table-bordered table-hover">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>

<p>3. Colored Rows</p>

<table class="table table-bordered">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<tr class="active">
<td>Style -- Active</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr class="success">
<td>Style -- Success</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr class="warning">
<td>Style -- Warning</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr class="danger">
<td>Style -- Danger</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
<tr class="info">
<td>Style -- Info</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
</tr>
</table>

</body>

分享到：