From 0156f9a2379b68cd3cf284bc4e7799fda221203e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Apr 2015 12:41:49 -0700 Subject: move remaining files to components subdir --- docs/components/tables.md | 602 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 602 insertions(+) create mode 100644 docs/components/tables.md (limited to 'docs/components/tables.md') diff --git a/docs/components/tables.md b/docs/components/tables.md new file mode 100644 index 000000000..d2f9acece --- /dev/null +++ b/docs/components/tables.md @@ -0,0 +1,602 @@ +--- +layout: page +title: Tables +--- + +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 ``. + +## 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](http://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