<pclass="lead">The core typography, form, and table styles of Bootstrap</p>
<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
</header>
</header>
...
@@ -630,7 +630,49 @@
...
@@ -630,7 +630,49 @@
<table class="striped-table">
<table class="striped-table">
...
...
</table></pre>
</table></pre>
<h3>3. Condensed table</h3>
<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>
<p><spanclass="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
<tableclass="bordered-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<tdcolspan="2">Some One</td>
<td>English</td>
</tr>
<tr>
<td>2</td>
<td>Joe</td>
<td>Sixpack</td>
<td>English</td>
</tr>
</tr>
<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>
<preclass="prettyprint linenums">
<table class="striped-table">
...
</table></pre>
<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>
<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>
<tableclass="condensed-table">
<tableclass="condensed-table">
<thead>
<thead>
...
@@ -666,7 +708,7 @@
...
@@ -666,7 +708,7 @@
<table class="condensed-table">
<table class="condensed-table">
...
...
</table></pre>
</table></pre>
<h3>4. Striped table w/ TableSorter.js</h3>
<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 <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <ahref="http://jquery.com">jQuery</a> and the <ahref="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<pclass="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
<pclass="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
<pclass="download-info">
<pclass="download-info">
<ahref="#"class="btn primary btn-large">Download on GitHub</a>
<ahref="https://github.com/twitter/bootstrap/"class="btn primary btn-large">Download on GitHub</a>
<pclass="lead">Bring Bootstrap's components to life with custom plugins for <ahref="http://jquery.com/"target="_blank">jQuery</a> and <ahref="http://ender.no.de"target="_blank">Ender</a></p>
<pclass="lead">Bring Bootstrap's components to life with flexible, custom javascript plugins for many of our custom components that work with <ahref="http://jquery.com/"target="_blank">jQuery</a> and <ahref="http://ender.no.de"target="_blank">Ender</a>.</p>
</header>
</header>
...
@@ -757,7 +757,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) {
...
@@ -757,7 +757,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) {
<pclass="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
<pclass="lead">Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>