<!-- Blockquotes -->
- <h2>Blockquotes</h2>
+ <h2>{{_i}}Blockquotes{{/i}}</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
</table>
<!-- Labels -->
- <h2>Inline labels <small>for special attention</small></h2>
+ <h2>{{_i}}Inline labels <small>for special attention</small>{{/i}}</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th style="width: 190px;">Labels</th>
- <th>Markup</th>
+ <th style="width: 190px;">{{_i}}Labels{{/i}}</th>
+ <th>{{_i}}Markup{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
- <span class="label">Default</span>
+ <span class="label">{{_i}}Default{{/i}}</span>
</td>
<td>
- <code><span class="label">Default</span></code>
+ <code><span class="label">{{_i}}Default{{/i}}</span></code>
</td>
</tr>
<tr>
<td>
- <span class="label success">New</span>
+ <span class="label success">{{_i}}New{{/i}}</span>
</td>
<td>
- <code><span class="label success">New</span></code>
+ <code><span class="label success">{{/_i}}New{{/i}}</span></code>
</td>
</tr>
<tr>
<td>
- <span class="label warning">Warning</span>
+ <span class="label warning">{{_i}}Warning{{/i}}</span>
</td>
<td>
- <code><span class="label warning">Warning</span></code>
+ <code><span class="label warning">{{_i}}Warning{{/i}}</span></code>
</td>
</tr>
<tr>
<td>
- <span class="label important">Important</span>
+ <span class="label important">{{_i}}Important{{/i}}</span>
</td>
<td>
- <code><span class="label important">Important</span></code>
+ <code><span class="label important">{{_i}}Important{{/i}}</span></code>
</td>
</tr>
<tr>
<td>
- <span class="label notice">Notice</span>
+ <span class="label notice">{{_i}}Notice{{/i}}</span>
</td>
<td>
- <code><span class="label notice">Notice</span></code>
+ <code><span class="label notice">{{_i}}Notice{{/i}}</span></code>
</td>
</tr>
</tbody>
================================================== -->
<section id="tables">
<div class="page-header">
- <h1>Tables <small>For, you guessed it, tabular data</small></h1>
+ <h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
</div>
- <h2>Table markup</h2>
+ <h2>{{_i}}Table markup{{/i}}</h2>
<div class="row">
<div class="span8">
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th>Tag</th>
- <th>Description</th>
+ <th>{{_i}}Tag{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<code><table></code>
</td>
<td>
- Wrapping element for displaying data in a tabular format
+ {{_i}}Wrapping element for displaying data in a tabular format{{/i}}
</td>
</tr>
<tr>
<code><thead></code>
</td>
<td>
- Container element for table header rows (<code><tr></code>) to label table columns
+ {{_i}}Container element for table header rows (<code><tr></code>) to label table columns{{/i}}
</td>
</tr>
<tr>
<code><tbody></code>
</td>
<td>
- Container element for table rows (<code><tr></code>) in the body of the table
+ {{_i}}Container element for table rows (<code><tr></code>) in the body of the table{{/i}}
</td>
</tr>
<tr>
<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
+ {{_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>
<code><td></code>
</td>
<td>
- Default table cell
+ {{_i}}Default table cell{{/i}}
</td>
</tr>
<tr>
<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>
+ {{_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>
<code><caption></code>
</td>
<td>
- Description or summary of what the table holds, especially useful for screen readers
+ {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
</td>
</tr>
</tbody>
<table>
<thead>
<tr>
- <th>...</th>
- <th>...</th>
+ <th>…</th>
+ <th>…</th>
</tr>
</thead>
<tbody>
<tr>
- <td>...</td>
- <td>...</td>
+ <td>…</td>
+ <td>…</td>
</tr>
</tbody>
</table>
</div>
</div>
- <h2>Table options</h2>
+ <h2>{{_i}}Table options{{/i}}</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
- <th>Name</th>
- <th>Class</th>
- <th>Description</th>
+ <th>{{_i}}Name{{/i}}</th>
+ <th>{{_i}}Class{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>Default</td>
- <td class="muted">None</td>
- <td>No styles, just columns and rows</td>
+ <td>{{_i}}Default{{/i}}</td>
+ <td class="muted">{{_i}}None{{/i}}</td>
+ <td>{{_i}}No styles, just columns and rows{{/i}}</td>
</tr>
<tr>
- <td>Basic</td>
+ <td>{{_i}}Basic{{/i}}</td>
<td>
<code>.table</code>
</td>
- <td>Only horizontal lines between rows</td>
+ <td>{{_i}}Only horizontal lines between rows{{/i}}</td>
</tr>
<tr>
- <td>Bordered</td>
+ <td>{{_i}}Bordered{{/i}}</td>
<td>
<code>.table-bordered</code>
</td>
- <td>Rounds corners and adds outter border</td>
+ <td>{{_i}}Rounds corners and adds outter border{{/i}}</td>
</tr>
<tr>
- <td>Zebra-stripe</td>
+ <td>{{_i}}Zebra-stripe{{/i}}</td>
<td>
<code>.table-striped</code>
</td>
- <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
+ <td>{{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}</td>
</tr>
<tr>
- <td>Condensed</td>
+ <td>{{_i}}Condensed{{/i}}</td>
<td>
<code>.table-condensed</code>
</td>
- <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
+ <td>{{_i}}Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements{{/i}}</td>
</tr>
</tbody>
</table>
- <h2>Example tables</h2>
+ <h2>{{_i}}Example tables{{/i}}</h2>
- <h3>1. Default table styles</h3>
+ <h3>1. {{_i}}Default table styles{{/i}}</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>
+ <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">
<table class="table">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<thead>
<tr>
<th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
</div>
- <h3>2. Striped table</h3>
+ <h3>2. {{_i}}Striped table{{/i}}</h3>
<div class="row">
<div class="span4">
- <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</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>
+ <p>{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.{{/i}}</p>
+ <p class="muted">{{_i}}<strong>Note:</strong> Sprited 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;">
<table class="table table-striped">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<thead>
<tr>
<th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
</div>
- <h3>3. Bordered table</h3>
+ <h3>3. {{_i}}Bordered table{{/i}}</h3>
<div class="row">
<div class="span4">
- <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
+ <p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<pre class="prettyprint linenums">
<table class="table table-bordered">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<thead>
<tr>
<th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
</div>
- <h3>4. Condensed table</h3>
+ <h3>4. {{_i}}Condensed table{{/i}}</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 10px to 5px).</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>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
<table class="table table-condensed">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<thead>
<tr>
<th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Language</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
- <h3>5. Striped table w/ TableSorter.js</h3>
+ <h3>5. {{_i}}Striped table w/ TableSorter.js{{/i}}</h3>
<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>
+ <p>{{_i}}Include the <a href="http://jquery.com">jQuery</a> <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin and automatically get clear styles for sorted columns.{{/i}}</p>
<pre class="prettyprint linenums">
<script src="jquery.tablesorter.js"></script>
<script >
});
</script>
<table class="table table-striped">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<thead>
<tr>
<th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
+ <th class="yellow">{{_i}}First Name{{/i}}</th>
+ <th class="blue">{{_i}}Last Name{{/i}}</th>
+ <th class="green">{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
</tr>
</tbody>
</table>
- <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p>
+ <p>{{_i}}Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.{{/i}}</p>
<table class="table table-striped table-bordered table-condensed tablesorter-example">
<thead>
<tr>
<th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
+ <th class="yellow">{{_i}}First Name{{/i}}</th>
+ <th class="blue">{{_i}}Last Name{{/i}}</th>
+ <th class="green">{{_i}}Language{{/i}}</th>
</tr>
</thead>
<tbody>
projects / thirdparty / bootstrap.git / commitdiff
