From eaeee93fa34092ee7c107d75edffd6c8274c15fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Aug 2015 23:38:16 -0700 Subject: docs rearrange --- docs/components/tables.md | 611 ---------------------------------------------- 1 file changed, 611 deletions(-) delete mode 100644 docs/components/tables.md (limited to 'docs/components/tables.md') diff --git a/docs/components/tables.md b/docs/components/tables.md deleted file mode 100644 index c99187d8c..000000000 --- a/docs/components/tables.md +++ /dev/null @@ -1,611 +0,0 @@ ---- -layout: page -title: Tables -group: components ---- - -Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any ``. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Basic example - -{% example html %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endexample %} - -## Inverse table - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endexample %} - -## Table head options - -Use one of two modifier classes to make ``s appear light or dark gray. - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endexample %} - -## Striped rows - -Use `.table-striped` to add zebra-striping to any table row within the ``. - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{% endexample %} - -## Bordered table - -Add `.table-bordered` for borders on all sides of the table and cells. - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
-{% endexample %} - -## Hoverable rows - -Add `.table-hover` to enable a hover state on table rows within a ``. - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endexample %} - -## Small table - -Add `.table-sm` to make tables more compact by cutting cell padding in half. - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-{% endexample %} - -## Contextual classes - -Use contextual classes to color table rows or individual cells. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
- .table-active - Applies the hover color to a particular row or cell
- .table-success - Indicates a successful or positive action
- .table-info - Indicates a neutral informative change or action
- .table-warning - Indicates a warning that might need attention
- .table-danger - Indicates a dangerous or potentially negative action
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
-
- -{% highlight html %} - -... -... -... -... -... - - - - ... - ... - ... - ... - ... - -{% endhighlight %} - -## Responsive tables - -Create responsive tables by wrapping any `.table` in `.table-responsive` 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. - -{% callout warning %} -#### Vertical clipping/truncation - -Responsive tables make use of `overflow-y: hidden`, 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. -{% endcallout %} - -{% callout warning %} -#### Firefox and fieldsets - -Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap: - -{% highlight css %} -@-moz-document url-prefix() { - fieldset { display: table-cell; } -} -{% endhighlight %} - -For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). -{% endcallout %} - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-
-
- -{% highlight html %} -
- - ... -
-
-{% endhighlight %} - - -### Reflow - -{% example html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
-{% endexample %} -- cgit v1.2.3