diff options
Diffstat (limited to 'POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html')
| -rw-r--r-- | POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html | 467 |
1 files changed, 467 insertions, 0 deletions
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html new file mode 100644 index 000000000..ac84e8158 --- /dev/null +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/tables.html @@ -0,0 +1,467 @@ +<div class="bs-docs-section"> + <h1 id="tables" class="page-header">Tables</h1> + + <h2 id="tables-example">Basic example</h2> + <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p> + <div class="bs-example" data-example-id="simple-table"> + <table class="table"> + <caption>Optional table caption.</caption> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>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><!-- /example --> +{% highlight html %} +<table class="table"> + ... +</table> +{% endhighlight %} + + + <h2 id="tables-striped">Striped rows</h2> + <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>.</p> + <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8"> + <h4>Cross-browser compatibility</h4> + <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p> + </div> + <div class="bs-example" data-example-id="striped-table"> + <table class="table table-striped"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>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><!-- /example --> +{% highlight html %} +<table class="table table-striped"> + ... +</table> +{% endhighlight %} + + + <h2 id="tables-bordered">Bordered table</h2> + <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p> + <div class="bs-example" data-example-id="bordered-table"> + <table class="table table-bordered"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>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><!-- /example --> +{% highlight html %} +<table class="table table-bordered"> + ... +</table> +{% endhighlight %} + + + <h2 id="tables-hover-rows">Hover rows</h2> + <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code><tbody></code>.</p> + <div class="bs-example" data-example-id="hoverable-table"> + <table class="table table-hover"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>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><!-- /example --> +{% highlight html %} +<table class="table table-hover"> + ... +</table> +{% endhighlight %} + + + <h2 id="tables-condensed">Condensed table</h2> + <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p> + <div class="bs-example" data-example-id="condensed-table"> + <table class="table table-condensed"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>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><!-- /example --> +{% highlight html %} +<table class="table table-condensed"> + ... +</table> +{% endhighlight %} + + + <h2 id="tables-contextual-classes">Contextual classes</h2> + <p>Use contextual classes to color table rows or individual cells.</p> + <div class="table-responsive"> + <table class="table table-bordered table-striped"> + <colgroup> + <col class="col-xs-1"> + <col class="col-xs-7"> + </colgroup> + <thead> + <tr> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> + <code>.active</code> + </th> + <td>Applies the hover color to a particular row or cell</td> + </tr> + <tr> + <th scope="row"> + <code>.success</code> + </th> + <td>Indicates a successful or positive action</td> + </tr> + <tr> + <th scope="row"> + <code>.info</code> + </th> + <td>Indicates a neutral informative change or action</td> + </tr> + <tr> + <th scope="row"> + <code>.warning</code> + </th> + <td>Indicates a warning that might need attention</td> + </tr> + <tr> + <th scope="row"> + <code>.danger</code> + </th> + <td>Indicates a dangerous or potentially negative action</td> + </tr> + </tbody> + </table> + </div> + <div class="bs-example" data-example-id="contextual-table"> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>Column heading</th> + <th>Column heading</th> + <th>Column heading</th> + </tr> + </thead> + <tbody> + <tr class="active"> + <th scope="row">1</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="success"> + <th scope="row">3</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="info"> + <th scope="row">5</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="warning"> + <th scope="row">7</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="danger"> + <th scope="row">9</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + </tbody> + </table> + </div><!-- /example --> +{% highlight html %} +<!-- On rows --> +<tr class="active">...</tr> +<tr class="success">...</tr> +<tr class="warning">...</tr> +<tr class="danger">...</tr> +<tr class="info">...</tr> + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="active">...</td> + <td class="success">...</td> + <td class="warning">...</td> + <td class="danger">...</td> + <td class="info">...</td> +</tr> +{% endhighlight %} + <div class="bs-callout bs-callout-warning" id="callout-tables-context-accessibility"> + <h4>Conveying meaning to assistive technologies</h4> + <p>Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p> + </div> + + <h2 id="tables-responsive">Responsive tables</h2> + <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p> + + <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow"> + <h4>Vertical clipping/truncation</h4> + <p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p> + </div> + <div class="bs-callout bs-callout-warning" id="callout-tables-responsive-ff-fieldset"> + <h4>Firefox and fieldsets</h4> + <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p> +{% highlight css %} +@-moz-document url-prefix() { + fieldset { display: table-cell; } +} +{% endhighlight %} + <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p> + </div> + + <div class="bs-example" data-example-id="simple-responsive-table"> + <div class="table-responsive"> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> + + <div class="table-responsive"> + <table class="table table-bordered"> + <thead> + <tr> + <th>#</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> + </div><!-- /example --> +{% highlight html %} +<div class="table-responsive"> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} +</div> |