From 10d68406fe5aa8e20183d02116f1a6e87b85a788 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 23:59:50 -0700 Subject: [PATCH] examples-wrap tables --- docs/base-css.html | 354 ++++++++++++------------ docs/templates/pages/base-css.mustache | 360 +++++++++++++------------ 2 files changed, 369 insertions(+), 345 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 3c5c8743b1..a1d8418bb1 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline.

Table options

- + @@ -594,203 +594,215 @@ For example, <code>section</code> should be wrapped as inline.

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.

+
+
Name Class
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ 
 <table class="table">
   …
-</table>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- +</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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+</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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+</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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+</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>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Full name
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+</table> + + @@ -859,7 +871,7 @@ For example, <code>section</code> should be wrapped as inline.

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

-
+

Example block-level help text here.

@@ -882,7 +894,7 @@ For example, <code>section</code> should be wrapped as inline.

Search form

Add .form-search to the form and .search-query to the input.

- +
@@ -895,7 +907,7 @@ For example, <code>section</code> should be wrapped as inline.

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

-
+ -
+ {{! /example }} 
 <form class="well">
   <label>{{_i}}Label name{{/i}}</label>
@@ -812,10 +824,10 @@
 
   
{{_i}}Search form{{/i}}

   
{{_i}}Add .form-search to the form and .search-query to the input.{{/i}}

-  

+  
     
     
-  

+  {{! /example }}
 
 <form class="well form-search">
   <input type="text" class="input-medium search-query">
@@ -825,14 +837,14 @@
 
   
{{_i}}Inline form{{/i}}

   
{{_i}}Add .form-inline to finesse the vertical alignment and spacing of form controls.{{/i}}

-  

+  
     
     
     
     
-  

+  {{! /example }}
 
 <form class="well form-inline">
   <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">