diff --git a/docs/base-css.html b/docs/base-css.html index 084654b2..71f8da87 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -435,10 +435,182 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

+

Default styles

+

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table">
+  …
+</table>
+
-

Table markup

+
+ +

Optional classes

+

Add any of the follow classes to the .table base class.

+ +

.table-striped

+

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table table-striped">
+  …
+</table>
+
+ +

.table-bordered

+

Add borders and rounded corners to the table.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-bordered">
+  …
+</table>
+
+ +

.table-condensed

+

Makes tables more compact by cutting cell padding in half.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

Supported table markup

+

List of supported table HTML elements and how they should be used.

@@ -527,267 +699,6 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

Table options

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
DefaultNoneNo styles, just columns and rows
Basic - .table - Only horizontal lines between rows
Bordered - .table-bordered - Rounds corners and adds outer border
Zebra-stripe - .table-striped - Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed - .table-condensed - Cuts vertical padding in half, from 8px to 4px, within all td and th elements
- - -

Example tables

- -

1. Default table styles

-

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table">
-  …
-</table>
-
- -

2. Striped table

-

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

-

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table table-striped">
-  …
-</table>
-
- - -

3. Bordered table

-

Add borders around the entire table and rounded corners for aesthetic purposes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-bordered">
-  …
-</table>
-
- -

4. Condensed table

-

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-condensed">
-  …
-</table>
-
- - -

5. Combine them all!

-

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Full name
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
-
- diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ee95ac75..5910d66b 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -366,10 +366,182 @@

{{_i}}Tables For, you guessed it, tabular data{{/i}}

+

{{_i}}Default styles{{/i}}

+

{{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
{{! /example }} +
+<table class="table">
+  …
+</table>
+
-

{{_i}}Table markup{{/i}}

+
+ +

{{_i}}Optional classes{{/i}}

+

{{_i}}Add any of the follow classes to the .table base class.{{/i}}

+ +

{{_i}}.table-striped{{/i}}

+

{{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
{{! /example }} +
+<table class="table table-striped">
+  …
+</table>
+
+ +

{{_i}}.table-bordered{{/i}}

+

{{_i}}Add borders and rounded corners to the table.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
{{! /example }} +
+<table class="table table-bordered">
+  …
+</table>
+
+ +

{{_i}}.table-condensed{{/i}}

+

{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
{{! /example }} +
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

{{_i}}Supported table markup{{/i}}

+

{{_i}}List of supported table HTML elements and how they should be used.{{/i}}

@@ -458,267 +630,6 @@ </table> - -

{{_i}}Table options{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
{{_i}}Default{{/i}}{{_i}}None{{/i}}{{_i}}No styles, just columns and rows{{/i}}
{{_i}}Basic{{/i}} - .table - {{_i}}Only horizontal lines between rows{{/i}}
{{_i}}Bordered{{/i}} - .table-bordered - {{_i}}Rounds corners and adds outer border{{/i}}
{{_i}}Zebra-stripe{{/i}} - .table-striped - {{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}
{{_i}}Condensed{{/i}} - .table-condensed - {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}}
- - -

{{_i}}Example tables{{/i}}

- -

1. {{_i}}Default table styles{{/i}}

-

{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
{{! /example }} -
-<table class="table">
-  …
-</table>
-
- -

2. {{_i}}Striped table{{/i}}

-

{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}

-

{{_i}}Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
{{! /example }} -
-<table class="table table-striped">
-  …
-</table>
-
- - -

3. {{_i}}Bordered table{{/i}}

-

{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-bordered">
-  …
-</table>
-
- -

4. {{_i}}Condensed table{{/i}}

-

{{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-condensed">
-  …
-</table>
-
- - -

5. {{_i}}Combine them all!{{/i}}

-

{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Full name{{/i}}
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
-
-