<td>
<pre><div>
<h1>Heading</h1>
- <p>Something right here...</p>
+ <p>Something right here…</p>
</div></pre>
<p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
</td>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
- <p>Something right here...</p>
+ <p>Something right here…</p>
</div></pre>
<pre class="prettyprint linenums"><div>
<h1>Heading</h1>
- <p>Something right here...</p>
+ <p>Something right here…</p>
</div></pre>
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td>
<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>
<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">
<table class="table">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<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="table table-striped">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<pre class="prettyprint linenums">
<table class="table table-bordered">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<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 10px to 5px).</p>
+ <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;">
<table class="table table-condensed">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<h3>5. Striped table w/ TableSorter.js</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>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.</p>
<pre class="prettyprint linenums">
<script src="jquery.tablesorter.js"></script>
<script >
});
</script>
<table class="table table-striped">
- ...
+ …
</table></pre>
</div>
<div class="span8">
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
<form class="well">
<label>Label name</label>
- <input type="text" class="span3" placeholder="Type something...">
+ <input type="text" class="span3" placeholder="Type something…">
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<fieldset class="control-group">
<label class="control-label" for="focusedInput">Focused input</label>
<div class="controls">
- <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused...">
+ <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused…">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<div class="controls">
- <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+ <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</div>
</fieldset>
<fieldset class="control-group">
<pre class="prettyprint linenums">
<fieldset
class="control-group error">
- ...
+ …
</fieldset>
</pre>
</div>
<a href="#" class="btn large disabled">Action</a>
</p>
<p>
- <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button>
+ <button class="btn large primary disabled" disabled="disabled">Primary action</button>
+ <button class="btn large" disabled>Action</button>
</p>
</div>
</div>