874 lines
25 KiB
HTML
874 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="UTF-8" />
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||
|
<title>Material Design for Bootstrap</title>
|
||
|
<!-- MDB icon -->
|
||
|
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
|
||
|
<!-- Font Awesome -->
|
||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
|
||
|
<!-- Google Fonts Roboto -->
|
||
|
<link
|
||
|
rel="stylesheet"
|
||
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||
|
/>
|
||
|
<!-- MDB -->
|
||
|
<link rel="stylesheet" href="../../css/mdb.min.css" />
|
||
|
<!-- PRISM -->
|
||
|
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
|
||
|
<!-- Custom styles -->
|
||
|
<style></style>
|
||
|
</head>
|
||
|
|
||
|
<body>
|
||
|
<div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr class="border-dark">
|
||
|
<td></td>
|
||
|
<th scope="col">
|
||
|
Extra small<br />
|
||
|
<span class="fw-normal"><576px</span>
|
||
|
</th>
|
||
|
<th scope="col">
|
||
|
Small<br />
|
||
|
<span class="fw-normal">≥576px</span>
|
||
|
</th>
|
||
|
<th scope="col">
|
||
|
Medium<br />
|
||
|
<span class="fw-normal">≥768px</span>
|
||
|
</th>
|
||
|
<th scope="col">
|
||
|
Large<br />
|
||
|
<span class="fw-normal">≥992px</span>
|
||
|
</th>
|
||
|
<th scope="col">
|
||
|
X-Large<br />
|
||
|
<span class="fw-normal">≥1200px</span>
|
||
|
</th>
|
||
|
<th scope="col">
|
||
|
XX-Large<br />
|
||
|
<span class="fw-normal">≥1400px</span>
|
||
|
</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>540px</td>
|
||
|
<td>720px</td>
|
||
|
<td>960px</td>
|
||
|
<td>1140px</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-sm</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>540px</td>
|
||
|
<td>720px</td>
|
||
|
<td>960px</td>
|
||
|
<td>1140px</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-md</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>720px</td>
|
||
|
<td>960px</td>
|
||
|
<td>1140px</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-lg</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>960px</td>
|
||
|
<td>1140px</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-xl</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>1140px</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-xxl</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td>1320px</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row" class="fw-normal"><code>.container-fluid</code></th>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
<td class="text-muted">100%</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">Class</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">Default</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
|
||
|
<tr class="table-primary">
|
||
|
<th scope="row">Primary</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-secondary">
|
||
|
<th scope="row">Secondary</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-success">
|
||
|
<th scope="row">Success</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-danger">
|
||
|
<th scope="row">Danger</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-warning">
|
||
|
<th scope="row">Warning</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-info">
|
||
|
<th scope="row">Info</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-light">
|
||
|
<th scope="row">Light</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr class="table-dark">
|
||
|
<th scope="row">Dark</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-dark">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-primary table-striped">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-striped">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<h1 class="p-4 bg-primary text-white">Ta tabela jest z efektem na hover</h1>
|
||
|
<table class="table table-hover">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-striped table-hover">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr class="table-active">
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2" class="table-active">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-bordered">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-bordered border-primary">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-borderless">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-sm">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table align-middle">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr class="align-bottom">
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td class="align-top">@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table table-striped table-bordered">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td colspan="4">
|
||
|
<table class="table mb-0">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">Header</th>
|
||
|
<th scope="col">Header</th>
|
||
|
<th scope="col">Header</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">A</th>
|
||
|
<td>First</td>
|
||
|
<td>Last</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">B</th>
|
||
|
<td>First</td>
|
||
|
<td>Last</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">C</th>
|
||
|
<td>First</td>
|
||
|
<td>Last</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td>Larry</td>
|
||
|
<td>the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead class="table-light">
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr class="align-bottom">
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td class="align-top">@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead class="table-dark">
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr class="align-bottom">
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td class="align-top">@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<thead class="table-light">
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td>Larry</td>
|
||
|
<td>the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
<tfoot>
|
||
|
<tr>
|
||
|
<td>Footer</td>
|
||
|
<td>Footer</td>
|
||
|
<td>Footer</td>
|
||
|
<td>Footer</td>
|
||
|
</tr>
|
||
|
</tfoot>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table">
|
||
|
<caption>
|
||
|
List of users
|
||
|
</caption>
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td colspan="2">Larry the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<table class="table caption-top">
|
||
|
<caption>
|
||
|
List of users
|
||
|
</caption>
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">First</th>
|
||
|
<th scope="col">Last</th>
|
||
|
<th scope="col">Handle</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Mark</td>
|
||
|
<td>Otto</td>
|
||
|
<td>@mdo</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Jacob</td>
|
||
|
<td>Thornton</td>
|
||
|
<td>@fat</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td>Larry</td>
|
||
|
<td>the Bird</td>
|
||
|
<td>@twitter</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</section>
|
||
|
|
||
|
<section class="border p-4 text-center mb-4">
|
||
|
<div class="table-responsive">
|
||
|
<table class="table">
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th scope="col">#</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
<th scope="col">Heading</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th scope="row">1</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">2</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th scope="row">3</th>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
<td>Cell</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</section>
|
||
|
</div>
|
||
|
|
||
|
<!-- MDB -->
|
||
|
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||
|
<!-- PRISM -->
|
||
|
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
|
||
|
<!-- MDB SNIPPET -->
|
||
|
<!-- <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script> -->
|
||
|
<!-- Custom scripts -->
|
||
|
<script type="text/javascript"></script>
|
||
|
</body>
|
||
|
</html>
|