<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
border: 1px solid #eee;
overflow: hidden;
}
</style>
</head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
border: 1px solid #eee;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Smith</td>
<td>jsmith</td>
</tr>
<tr class='table-danger'>
<th>2</th>
<td>Jacob</td>
<td class="bg-info">Thornton</td>
<td>jacobs</td>
</tr>
<tr>
<th>3</th>
<td class="bg-primary">Laurence</td>
<td class="bg-success">Svekis</td>
<td class="bg-warning">lsvekis</td>
</tr>
</tbody>
</table>
</div>
</body>
<table class="table table-bordered table-hover table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Smith</td>
<td>jsmith</td>
</tr>
<tr class='table-danger'>
<th>2</th>
<td>Jacob</td>
<td class="bg-info">Thornton</td>
<td>jacobs</td>
</tr>
<tr>
<th>3</th>
<td class="bg-primary">Laurence</td>
<td class="bg-success">Svekis</td>
<td class="bg-warning">lsvekis</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
===================================================
| Class | Description | Example |
|---|---|---|
| .table | Adds basic styling (light padding and only horizontal dividers) to any <table> | |
| .table-striped | Adds zebra-striping to any table row within <tbody> (not available in IE8) | |
| .table-bordered | Adds border on all sides of the table and cells | |
| .table-hover | Enables a hover state on table rows within a <tbody> | |
| .table-condensed | Makes table more compact by cutting cell padding in half |
<tr>, <th> and <td> Classes
Use the classes below to color table rows or cells:
| Class | Description | Example |
|---|---|---|
| .active | Applies the hover color (light-grey) to a particular row or cell | |
| .success | Indicates a successful or positive action | |
| .info | Indicates a neutral informative change or action | |
| .warning | Indicates a warning that might need attention | |
| .danger | Indicates a dangerous or potentially negative action |
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
沒有留言:
張貼留言