217 lines
8.1 KiB
HTML
217 lines
8.1 KiB
HTML
{% extends "layouts/base.html" %}
|
||
|
||
{% block title %} Tables {% endblock title %}
|
||
|
||
<!-- Specific CSS goes HERE -->
|
||
{% block stylesheets %}{% endblock stylesheets %}
|
||
|
||
{% block content %}
|
||
|
||
<!-- ### $App Screen Content ### -->
|
||
<main class='main-content bgc-grey-100'>
|
||
<div id='mainContent'>
|
||
<div class="container-fluid">
|
||
<h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||
<h4 class="c-grey-900 mB-20">Simple Table</h4>
|
||
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First Name</th>
|
||
<th scope="col">Last Name</th>
|
||
<th scope="col">Username</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||
<h4 class="c-grey-900 mB-20">Table head options</h4>
|
||
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge"><thead></code>s appear light or dark gray.</p>
|
||
<table class="table">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First Name</th>
|
||
<th scope="col">Last Name</th>
|
||
<th scope="col">Username</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||
<h4 class="c-grey-900 mB-20">Striped rows</h4>
|
||
<p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.</p>
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First Name</th>
|
||
<th scope="col">Last Name</th>
|
||
<th scope="col">Username</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||
<h4 class="c-grey-900 mB-20">Bordered table</h4>
|
||
<p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First Name</th>
|
||
<th scope="col">Last Name</th>
|
||
<th scope="col">Username</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>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@TwBootstrap</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">4</th>
|
||
<td colspan="2">Larry the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="bgc-white bd bdrs-3 p-20">
|
||
<h4 class="c-grey-900 mB-20">Hoverable rows</h4>
|
||
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge"><tbody></code>.</p>
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">#</th>
|
||
<th scope="col">First Name</th>
|
||
<th scope="col">Last Name</th>
|
||
<th scope="col">Username</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{% endblock content %}
|
||
|
||
<!-- Specific Page JS goes HERE -->
|
||
{% block javascripts %}{% endblock javascripts %}
|