BootStrap -- Table
4240 ワード
<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>