8 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2,!39192.1.0 wip
@@ -431,81 +431,78 @@ For example, <code>section</code> should be wrapped as inline.
</div>
<h2>Table markup</h2>
<divclass="row">
<divclass="span8">
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="span1">
<colclass="span7">
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
Wrapping element for displaying data in a tabular format
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
Container element for table header rows (<code><tr></code>) to label table columns
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
Container element for table rows (<code><tr></code>) in the body of the table
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
Default table cell
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
Special table cell for column (or row, depending on scope and placement) labels<br>
Must be used within a <code><thead></code>
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
Description or summary of what the table holds, especially useful for screen readers
</td>
</tr>
</tbody>
</table>
</div>
<divclass="span4">
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="span1">
<colclass="span7">
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
Wrapping element for displaying data in a tabular format
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
Container element for table header rows (<code><tr></code>) to label table columns
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
Container element for table rows (<code><tr></code>) in the body of the table
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
Default table cell
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
Special table cell for column (or row, depending on scope and placement) labels<br>
Must be used within a <code><thead></code>
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
Description or summary of what the table holds, especially useful for screen readers
</td>
</tr>
</tbody>
</table>
<preclass="prettyprint linenums">
<table>
<thead>
...
...
@@ -522,8 +519,7 @@ For example, <code>section</code> should be wrapped as inline.
</tbody>
</table>
</pre>
</div>
</div>
<h2>Table options</h2>
<tableclass="table table-bordered table-striped">
...
...
@@ -575,233 +571,204 @@ For example, <code>section</code> should be wrapped as inline.
<h2>Example tables</h2>
<h3>1. Default table styles</h3>
<divclass="row">
<divclass="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>
<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>
<preclass="prettyprint linenums">
<table class="table">
…
</table></pre>
</div>
<divclass="span8">
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>2. Striped table</h3>
<divclass="row">
<divclass="span4">
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p>
<pclass="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p>
<pclass="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
{{_i}}Wrapping element for displaying data in a tabular format{{/i}}
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
{{_i}}Container element for table header rows (<code><tr></code>) to label table columns{{/i}}
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
{{_i}}Container element for table rows (<code><tr></code>) in the body of the table{{/i}}
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
{{_i}}Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row{{/i}}
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
{{_i}}Default table cell{{/i}}
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br>
{{_i}}Must be used within a <code><thead></code>{{/i}}
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
{{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
</td>
</tr>
</tbody>
</table>
</div>
<divclass="span4">
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="span1">
<colclass="span7">
</colgroup>
<thead>
<tr>
<th>{{_i}}Tag{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
{{_i}}Wrapping element for displaying data in a tabular format{{/i}}
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
{{_i}}Container element for table header rows (<code><tr></code>) to label table columns{{/i}}
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
{{_i}}Container element for table rows (<code><tr></code>) in the body of the table{{/i}}
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
{{_i}}Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row{{/i}}
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
{{_i}}Default table cell{{/i}}
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br>
{{_i}}Must be used within a <code><thead></code>{{/i}}
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
{{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
</td>
</tr>
</tbody>
</table>
<preclass="prettyprint linenums">
<table>
<thead>
...
...
@@ -453,8 +450,7 @@
</tbody>
</table>
</pre>
</div>
</div>
<h2>{{_i}}Table options{{/i}}</h2>
<tableclass="table table-bordered table-striped">
...
...
@@ -506,233 +502,204 @@
<h2>{{_i}}Example tables{{/i}}</h2>
<h3>1. {{_i}}Default table styles{{/i}}</h3>
<divclass="row">
<divclass="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>
<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>
<preclass="prettyprint linenums">
<table class="table">
…
</table></pre>
</div>
<divclass="span8">
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<tableclass="table">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>2. {{_i}}Striped table{{/i}}</h3>
<divclass="row">
<divclass="span4">
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.{{/i}}</p>
<pclass="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.{{/i}}</p>
<pclass="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<preclass="prettyprint linenums">
<table class="table table-bordered">
…
</table></pre>
</div>
<divclass="span8">
<tableclass="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<tdrowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<tableclass="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<tdrowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<tdcolspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>4. {{_i}}Condensed table{{/i}}</h3>
<divclass="row">
<divclass="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>
<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>