diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 414 |
1 files changed, 244 insertions, 170 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 47858fe10..c1cb3fd2d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -556,211 +556,285 @@ </tbody> </table> + <h2>Example tables</h2> + <h3>1. Default table styles</h3> - <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> - <table> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Tables are automatically styled with only the a few borders to ensure readability and maintain structure. No classes are required.</p> <pre class="prettyprint linenums"> <table> ... </table></pre> + </div> + <div class="span8"> + <table> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>2. Striped table</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> - <table class="striped-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> - <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> -<pre class="prettyprint linenums"> + <div class="row"> + <div class="span4"> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> + <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> +<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <table class="striped-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="striped-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>3. Bordered table</h3> - <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> - <table class="bordered-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td colspan="2">Some One</td> - <td>HTML</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td rowspan="2">Javascript</td> - </tr> - </tr> - <td>3</td> - <td>Joe</td> - <td>Sixpack</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>CSS</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <pre class="prettyprint linenums"> <table class="bordered-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="bordered-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td colspan="2">Mark Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td rowspan="2">Javascript</td> + </tr> + </tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + </tr> + <tr> + <td>3</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>4. Condensed table</h3> - <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> - <table class="condensed-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> + <div class="row"> + <div class="span4"> + <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> +<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <table class="condensed-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="condensed-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> + - <br> <h3>5. Striped table w/ TableSorter.js</h3> - <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> - <table class="striped-table" id="sortTableExample"> - <thead> - <tr> - <th>#</th> - <th class="yellow">First Name</th> - <th class="blue">Last Name</th> - <th class="green">Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Your</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Include the <a href="http://jquery.com">jQuery</a> <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin and automaically get clear styles for sorted columns.</p> <pre class="prettyprint linenums"> -<script src="js/jquery/jquery.tablesorter.min.js"></script> +<script src="jquery.tablesorter.js"></script> <script > $(function() { - $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); + $("table#sortTableExample") + .tablesorter({ + sortList: [[1,0]] + }); }); </script> <table class="striped-table"> ... </table></pre> - + </div> + <div class="span8"> + <table class="striped-table tablesorter-example"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + <tr> + <td>4</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p> + <table class="striped-table bordered-table condensed-table tablesorter-example"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + <tr> + <td>4</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> </section> @@ -1560,7 +1634,7 @@ <script src="../js/bootstrap-dropdown.js"></script> <script> $(function () { - $("#sortTableExample").tablesorter({ sortList: [[1,0]] }); + $(".tablesorter-example").tablesorter({ sortList: [[1,0]] }); $('.dropdown-toggle').dropdown(); }) </script> |