rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-28 00:54:30 +01:00
Code Issues Actions Packages Releases Activity

update table section to single column

Browse Source
This commit is contained in:
Mark Otto 2012-06-04 21:13:35 -07:00
parent 094e12f68d
commit 060100cf3a
2 changed files with 478 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/base-css.html
View File

@ -431,8 +431,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
<h2>Table markup</h2>
<div class="row">
<div class="span8">
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
@ -504,8 +503,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
<div class="span4">
<pre class="prettyprint linenums">
&lt;table&gt;
&lt;thead&gt;
@ -522,8 +519,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/tbody&gt;
&lt;/table&gt;
</pre>
</div>
</div>
<h2>Table options</h2>
<table class="table table-bordered table-striped">
@ -575,15 +571,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example tables</h2>
<h3>1. Default table styles</h3>
<div class="row">
<div class="span4">
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
<pre class="prettyprint linenums">
&lt;table class="table"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table">
<thead>
<tr>
@ -614,21 +607,16 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
</div>
<h3>2. Striped table</h3>
<div class="row">
<div class="span4">
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
<p class="muted"><strong>Note:</strong> Striped 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;">
&lt;table class="table table-striped"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-striped">
<thead>
<tr>
@ -659,20 +647,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
</div>
<h3>3. Bordered table</h3>
<div class="row">
<div class="span4">
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-bordered">
<thead>
<tr>
@ -707,20 +690,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
</div>
<h3>4. Condensed table</h3>
<div class="row">
<div class="span4">
<p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-condensed">
<thead>
<tr>
@ -750,21 +726,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
</div>
<h3>5. Combine them all!</h3>
<div class="row">
<div class="span4">
<p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
@ -800,8 +769,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr>
</tbody>
</table>
</div>
</div>
</section>

43
docs/templates/pages/base-css.mustache vendored
View File

@ -362,8 +362,7 @@
</div>
<h2>{{_i}}Table markup{{/i}}</h2>
<div class="row">
<div class="span8">
<table class="table table-bordered table-striped">
<colgroup>
<col class="span1">
@ -435,8 +434,6 @@
</tr>
</tbody>
</table>
</div>
<div class="span4">
<pre class="prettyprint linenums">
&lt;table&gt;
&lt;thead&gt;
@ -453,8 +450,7 @@
&lt;/tbody&gt;
&lt;/table&gt;
</pre>
</div>
</div>
<h2>{{_i}}Table options{{/i}}</h2>
<table class="table table-bordered table-striped">
@ -506,15 +502,12 @@
<h2>{{_i}}Example tables{{/i}}</h2>
<h3>1. {{_i}}Default table styles{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;table class="table"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table">
<thead>
<tr>
@ -545,21 +538,16 @@
</tr>
</tbody>
</table>
</div>
</div>
<h3>2. {{_i}}Striped table{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p>
<p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-striped">
<thead>
<tr>
@ -590,20 +578,15 @@
</tr>
</tbody>
</table>
</div>
</div>
<h3>3. {{_i}}Bordered table{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-bordered">
<thead>
<tr>
@ -638,20 +621,13 @@
</tr>
</tbody>
</table>
</div>
</div>
<h3>4. {{_i}}Condensed table{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt;
…
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-condensed">
<thead>
<tr>
@ -681,21 +657,14 @@
</tr>
</tbody>
</table>
</div>
</div>
<h3>5. {{_i}}Combine them all!{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt;
...
&lt;/table&gt;</pre>
</div>
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
@ -731,8 +700,6 @@
</tr>
</tbody>
</table>
</div>
</div>
</section>