From ca63ea2f26facca1510390f85eed77d55f8f2b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 13:15:28 -0700 Subject: overhaul tables docs for more streamlined content --- docs/templates/pages/base-css.mustache | 299 ++++++++++++--------------------- 1 file changed, 105 insertions(+), 194 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ee95ac755..5910d66ba 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -366,150 +366,8 @@

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

- - -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Tag{{/i}}{{_i}}Description{{/i}}
- <table> - - {{_i}}Wrapping element for displaying data in a tabular format{{/i}} -
- <thead> - - {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} -
- <tbody> - - {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} -
- <tr> - - {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} -
- <td> - - {{_i}}Default table cell{{/i}} -
- <th> - - {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
- {{_i}}Must be used within a <thead>{{/i}} -
- <caption> - - {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} -
-
-<table>
-  <thead>
-    <tr>
-      <th>…</th>
-      <th>…</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>…</td>
-      <td>…</td>
-    </tr>
-  </tbody>
-</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}}Default styles{{/i}}

+

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

@@ -548,9 +406,15 @@ </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}}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}}

@@ -589,9 +453,8 @@ </table> - -

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

-

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

+

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

+

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

@@ -634,8 +497,8 @@ </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}}.table-condensed{{/i}}

+

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

@@ -674,48 +537,96 @@ -

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">
-  ...
+  

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

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

+  
+    +      +      +    
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  




{{_i}}Tag{{/i}}{{_i}}Description{{/i}}

+          <table>
+        
+          {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
+        

+          <thead>
+        
+          {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}}
+        

+          <tbody>
+        
+          {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}}
+        

+          <tr>
+        
+          {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}}
+        

+          <td>
+        
+          {{_i}}Default table cell{{/i}}
+        

+          <th>
+        
+          {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}

+          {{_i}}Must be used within a <thead>{{/i}}
+        

+          <caption>
+        
+          {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
+        

+
+<table>
+  <thead>
+    <tr>
+      <th>…</th>
+      <th>…</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>…</td>
+      <td>…</td>
+    </tr>
+  </tbody>
 </table>
 

 
-- 
cgit v1.2.3