<h2>Inline</h2>
<p>Wrap inline snippets of code with <code><code></code>.</p>
+<div class="bs-docs-example">
+ For example, <code><section></code> should be wrapped as inline.
+</div>
<pre class="prettyprint linenums">
-For example, <code>section</code> should be wrapped as inline.
+For example, <code><section></code> should be wrapped as inline.
</pre>
<h2>Basic block</h2>
<p>Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
-<pre>
-<p>Sample text here...</p>
-</pre>
+<div class="bs-docs-example">
+ <pre><p>Sample text here...</p></pre>
+</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<pre>
-&lt;p&gt;Sample text here...&lt;/p&gt;
+ &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
</pre>
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
</table>
<pre class="prettyprint linenums">
<table>
- <caption>…</caption>
+ <caption>...</caption>
<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>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="bs-docs-example">
<select>
- <option>something</option>
+ <option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</form>
<pre class="prettyprint linenums">
<select>
- <option>something</option>
+ <option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
- <input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
+ <input type="text" class="span2 search-query">
</div>
</form>
</pre>
<h1>Images</h1>
</div>
- <p>Add the <code>.img-rounded</code>, <code>.img-circle</code> or <code>.img-polaroid</code> class to a <code><img></code> element to easily style images in any project.</p>
- <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.</p>
+ <p>Add classes to an <code><img></code> element to easily style images in any project.</p>
<div class="bs-docs-example bs-docs-example-images">
<img src="http://placehold.it/140x140" class="img-rounded">
<img src="http://placehold.it/140x140" class="img-circle">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">
</pre>
+ <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
</section>
<h4>Buttons</h4>
- <h6>Button group in a button toolbar</h6>
+ <h5>Button group in a button toolbar</h5>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
</div>
</pre>
- <h6>Dropdown in a button group</h6>
+ <h5>Dropdown in a button group</h5>
<div class="bs-docs-example">
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
</div>
</pre>
- <h6>Button</h6>
+ <h5>Small button</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code><code></code>.</p>
+<div class="bs-docs-example">
+ For example, <code><section></code> should be wrapped as inline.
+</div>
<pre class="prettyprint linenums">
-{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
+{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}}
</pre>
<h2>Basic block</h2>
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
-<pre>
-<p>{{_i}}Sample text here...{{/i}}</p>
-</pre>
+<div class="bs-docs-example">
+ <pre><p>{{_i}}Sample text here...{{/i}}</p></pre>
+</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
<pre>
-&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+ &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
</pre>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
</table>
<pre class="prettyprint linenums">
<table>
- <caption>…</caption>
+ <caption>...</caption>
<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>{{_i}}Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.{{/i}}</p>
<form class="bs-docs-example">
<select>
- <option>something</option>
+ <option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</form>
<pre class="prettyprint linenums">
<select>
- <option>something</option>
+ <option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</div>
<div class="input-prepend">
- <input type="text" class="span2 search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+ <input type="text" class="span2 search-query">
</div>
</form>
</pre>
<h1>{{_i}}Images{{/i}}</h1>
</div>
- <p>{{_i}}Add the <code>.img-rounded</code>, <code>.img-circle</code> or <code>.img-polaroid</code> class to a <code><img></code> element to easily style images in any project.{{/i}}</p>
- <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.{{/i}}</p>
+ <p>{{_i}}Add classes to an <code><img></code> element to easily style images in any project.{{/i}}</p>
<div class="bs-docs-example bs-docs-example-images">
<img src="http://placehold.it/140x140" class="img-rounded">
<img src="http://placehold.it/140x140" class="img-circle">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">
</pre>
+ <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.{{/i}}</p>
</section>
<h4>{{_i}}Buttons{{/i}}</h4>
- <h6>{{_i}}Button group in a button toolbar{{/i}}</h6>
+ <h5>{{_i}}Button group in a button toolbar{{/i}}</h5>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
</div>
</pre>
- <h6>{{_i}}Dropdown in a button group{{/i}}</h6>
+ <h5>{{_i}}Dropdown in a button group{{/i}}</h5>
<div class="bs-docs-example">
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
</div>
</pre>
- <h6>{{_i}}Button{{/i}}</h6>
+ <h5>{{_i}}Small button{{/i}}</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>{{! /bs-docs-example }}