diff options
| author | Mark Otto <[email protected]> | 2014-07-11 22:34:47 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-11 22:34:47 -0700 |
| commit | d9bb7ddac5c2be077f9d1f250325bb07b4e963ce (patch) | |
| tree | 265a87196368633962f029ac92fe2a7619a1ab2c /docs/components/tables.html | |
| parent | 60cf7d45dbbf21cafcffa1b883101136d609b2a8 (diff) | |
| download | bootstrap-d9bb7ddac5c2be077f9d1f250325bb07b4e963ce.tar.xz bootstrap-d9bb7ddac5c2be077f9d1f250325bb07b4e963ce.zip | |
rearrange docs components
Diffstat (limited to 'docs/components/tables.html')
| -rw-r--r-- | docs/components/tables.html | 458 |
1 files changed, 0 insertions, 458 deletions
diff --git a/docs/components/tables.html b/docs/components/tables.html deleted file mode 100644 index ca9030804..000000000 --- a/docs/components/tables.html +++ /dev/null @@ -1,458 +0,0 @@ -<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"> - <table class="table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <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-example"> - <table class="table table-striped"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <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"> - <table class="table table-bordered"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="2">1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>Mark</td> - <td>Otto</td> - <td>@TwBootstrap</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <td colspan="2">Larry 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"> - <table class="table table-hover"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <td colspan="2">Larry 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"> - <table class="table table-condensed"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Username</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Mark</td> - <td>Otto</td> - <td>@mdo</td> - </tr> - <tr> - <td>2</td> - <td>Jacob</td> - <td>Thornton</td> - <td>@fat</td> - </tr> - <tr> - <td>3</td> - <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> - <td> - <code>.active</code> - </td> - <td>Applies the hover color to a particular row or cell</td> - </tr> - <tr> - <td> - <code>.success</code> - </td> - <td>Indicates a successful or positive action</td> - </tr> - <tr> - <td> - <code>.info</code> - </td> - <td>Indicates a neutral informative change or action</td> - </tr> - <tr> - <td> - <code>.warning</code> - </td> - <td>Indicates a warning that might need attention</td> - </tr> - <tr> - <td> - <code>.danger</code> - </td> - <td>Indicates a dangerous or potentially negative action</td> - </tr> - </tbody> - </table> - </div> - <div class="bs-example"> - <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"> - <td>1</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <td>2</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="success"> - <td>3</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <td>4</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="info"> - <td>5</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <td>6</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="warning"> - <td>7</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr> - <td>8</td> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> - </tr> - <tr class="danger"> - <td>9</td> - <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 %} - - - <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"> - <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"> - <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> - <td>1</td> - <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> - <td>2</td> - <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> - <td>3</td> - <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> - <td>1</td> - <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> - <td>2</td> - <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> - <td>3</td> - <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> |