<div class="bs-docs-example">
For example, <code><section></code> should be wrapped as inline.
</div>
-<pre class="prettyprint linenums">
-For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-</pre>
+{% highlight html linenos %}
+For example, <code><section></code> should be wrapped as inline.
+{% endhighlight %}
<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>
<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;
-</pre>
-</pre>
+{% highlight html linenos %}
+<pre><p>Sample text here...</p></pre>
+{% endhighlight %}
+
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
</div>
<h2>Default styles</h2>
- <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p>
+ <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example">
<table class="table">
<thead>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums">
-<table class="table">
- …
-</table>
-</pre>
+{% highlight html linenos %}
+<table class="table">
+ ...
+</table>
+{% endhighlight %}
<h2>Optional classes</h2>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-<table class="table table-striped">
- …
-</table>
-</pre>
+{% highlight html linenos %}
+<table class="table table-striped">
+ ...
+</table>
+{% endhighlight %}
<h3><code>.table-bordered</code></h3>
<p>Add borders and rounded corners to the table.</p>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums">
-<table class="table table-bordered">
- …
-</table>
-</pre>
+{% highlight html linenos %}
+<table class="table table-bordered">
+ ...
+</table>
+{% endhighlight %}
<h3><code>.table-hover</code></h3>
<p>Enable a hover state on table rows within a <code><tbody></code>.</p>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-<table class="table table-hover">
- …
-</table>
-</pre>
+{% highlight html linenos %}
+<table class="table table-hover">
+ ...
+</table>
+{% endhighlight %}
+
<h3><code>.table-condensed</code></h3>
<p>Makes tables more compact by cutting cell padding in half.</p>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-<table class="table table-condensed">
- …
-</table>
-</pre>
+{% highlight html linenos %}
+<table class="table table-condensed">
+ ...
+</table>
+{% endhighlight %}
+
<h2>Optional row classes</h2>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
- <tr class="info">
- <td>4</td>
- <td>TB - Monthly</td>
- <td>04/04/2012</td>
- <td>Call in to confirm</td>
- </tr>
</tbody>
</table>
</div><!-- /example -->
-<pre class="prettyprint linenums">
+{% highlight html linenos %}
...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
+<tr class="sucess">
+ <td>1</td>
+ <td>TB - Monthly</td>
+ <td>01/04/2012</td>
+ <td>Approved</td>
+</tr>
...
-</pre>
+{% endhighlight %}
+
<h2>Supported table markup</h2>
</tr>
</tbody>
</table>
-<pre class="prettyprint linenums">
-<table>
- <caption>...</caption>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
-</table>
-</pre>
+{% highlight html linenos %}
+<table>
+ <caption>...</caption>
+ <thead>
+ <tr>
+ <th>...</th>
+ <th>...</th>
+ <th>...</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>...</td>
+ <td>...</td>
+ <td>...</td>
+ </tr>
+ </tbody>
+</table>
+{% endhighlight %}
</section>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form><!-- /example -->
-<pre class="prettyprint linenums">
-<form>
- <fieldset>
- <legend>Legend</legend>
- <label>Label name</label>
- <input type="text" placeholder="Type something…">
- <span class="help-block">Example block-level help text here.</span>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Check me out
- </label>
- </div>
- <button type="submit" class="btn">Submit</button>
- </fieldset>
-</form>
-</pre>
+{% highlight html linenos %}
+<form>
+ <fieldset>
+ <legend>Legend</legend>
+ <label>Label name</label>
+ <input type="text" placeholder="Type something…">
+ <p class="help-block">Example block-level help text here.</p>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Check me out
+ </label>
+ </div>
+ <button type="submit" class="btn">Submit</button>
+ </fieldset>
+</form>
+{% endhighlight %}
<h2 id="forms-layouts">Optional layouts</h2>
</div>
<button type="submit" class="btn">Sign in</button>
</form><!-- /example -->
-<pre class="prettyprint linenums">
-<form class="form-inline">
- <input type="text" class="span3" placeholder="Email">
- <input type="password" class="span3" placeholder="Password">
- <div class="checkbox">
- <label>
- <input type="checkbox"> Remember me
- </label>
- </div>
- <button type="submit" class="btn">Sign in</button>
-</form>
-</pre>
+{% highlight html linenos %}
+<form class="form-inline">
+ <input type="text" class="span3" placeholder="Email">
+ <input type="password" class="span3" placeholder="Password">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ <button type="submit" class="btn">Sign in</button>
+</form>
+{% endhighlight %}
<h3>Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
</div>
</div>
</form>
-<pre class="prettyprint linenums">
-<form class="form-horizontal">
- <div class="control-group">
- <label class="control-label" for="inputEmail">Email</label>
- <div class="controls">
- <input type="text" id="inputEmail" placeholder="Email">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="inputPassword">Password</label>
- <div class="controls">
- <input type="password" id="inputPassword" placeholder="Password">
- </div>
- </div>
- <div class="control-group">
- <div class="controls">
- <div class="checkbox">
- <label>
- <input type="checkbox"> Remember me
- </label>
- </div>
- <button type="submit" class="btn">Sign in</button>
- </div>
- </div>
-</form>
-</pre>
+{% highlight html linenos %}
+<form class="form-horizontal">
+ <div class="control-group">
+ <label class="control-label" for="inputEmail">Email</label>
+ <div class="controls">
+ <input type="text" id="inputEmail" placeholder="Email">
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label" for="inputPassword">Password</label>
+ <div class="controls">
+ <input type="password" id="inputPassword" placeholder="Password">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Remember me
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <button type="submit" class="btn">Sign in</button>
+ </div>
+ </div>
+</form>
+{% endhighlight %}
<h2 id="forms-controls">Supported form controls</h2>
<form class="bs-docs-example form-inline">
<input type="text" placeholder="Text input">
</form>
-<pre class="prettyprint linenums">
-<input type="text" placeholder="Text input">
-</pre>
+{% highlight html linenos %}
+<input type="text" placeholder="Text input">
+{% endhighlight %}
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline">
<textarea rows="3"></textarea>
</form>
-<pre class="prettyprint linenums">
-<textarea rows="3"></textarea>
-</pre>
+{% highlight html linenos %}
+<textarea rows="3"></textarea>
+{% endhighlight %}
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
</label>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="checkbox">
- <label>
- <input type="checkbox" value="">
+{% highlight html linenos %}
+<div class="checkbox">
+ <label>
+ <input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
- </label>
-</div>
+ </label>
+</div>
-<div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+<div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
- </label>
-</div>
-<div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- Option two can be something else and selecting it will deselect option one
- </label>
-</div>
-</pre>
+ </label>
+</div>
+{% endhighlight %}
<h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
-<pre class="prettyprint linenums">
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-</pre>
+{% highlight html linenos %}
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox-inline">
+ <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+{% endhighlight %}
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<option>5</option>
</select>
</form>
-<pre class="prettyprint linenums">
-<select>
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
-</select>
-
-<select multiple="multiple">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
-</select>
-</pre>
+{% highlight html linenos %}
+<select>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+<select multiple="multiple">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+{% endhighlight %}
<form class="bs-docs-example form-inline">
<input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
-<pre class="prettyprint linenums">
-<input id="focusedInput" type="text" value="This is focused...">
-</pre>
+{% highlight html linenos %}
+<input id="focusedInput" type="text" value="This is focused...">
+{% endhighlight %}
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<form class="bs-docs-example form-inline">
<input class="span3" type="email" placeholder="test@example.com" required>
</form>
-<pre class="prettyprint linenums">
-<input class="span3" type="email" required>
-</pre>
+{% highlight html linenos %}
+<input class="span3" type="email" placeholder="test@example.com" required>
+{% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
-<pre class="prettyprint linenums">
-<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-</pre>
+{% highlight html linenos %}
+<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+{% endhighlight %}
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
-<pre class="prettyprint linenums">
-<form class="form-inline">
- <fieldset disabled>
- <input type="text" class="span4" placeholder="Disabled input">
- <select class="span4">
- <option>Disabled select</option>
- </select>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Can't check this
- </label>
- </div>
- <button type="submit" class="btn btn-primary">Submit</button>
- </fieldset>
-</form>
-</pre>
+{% highlight html linenos %}
+<form class="form-inline">
+ <fieldset disabled>
+ <div>
+ <input type="text" class="span4" placeholder="Disabled input">
+ </div>
+ <div>
+ <select class="span4">
+ <option>Disabled select</option>
+ </select>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> Can't check this
+ </label>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+</form>
+{% endhighlight %}
<h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
</div>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="control-group has-warning">
- <label class="control-label" for="inputWarning">Input with warning</label>
- <div class="controls">
- <input type="text" class="input-with-feedback" id="inputWarning">
- </div>
-</div>
-<div class="control-group has-error">
- <label class="control-label" for="inputError">Input with error</label>
- <div class="controls">
- <input type="text" class="input-with-feedback" id="inputError">
- </div>
-</div>
-<div class="control-group has-success">
- <label class="control-label" for="inputSuccess">Input with success</label>
- <div class="controls">
- <input type="text" class="input-with-feedback id="inputSuccess"">
- </div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="control-group has-warning">
+ <label class="control-label" for="inputWarning">Input with warning</label>
+ <div class="controls">
+ <input type="text" class="input-with-feedback" id="inputWarning">
+ </div>
+</div>
+<div class="control-group has-error">
+ <label class="control-label" for="inputError">Input with error</label>
+ <div class="controls">
+ <input type="text" class="input-with-feedback" id="inputError">
+ </div>
+</div>
+<div class="control-group has-success">
+ <label class="control-label" for="inputSuccess">Input with success</label>
+ <div class="controls">
+ <input type="text" class="input-with-feedback" id="inputSuccess">
+ </div>
+</div>
+{% endhighlight %}
<span class="input-group-addon">.00</span>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="input-group span9">
- <span class="input-group-addon">@</span>
- <input type="text" placeholder="Username">
-</div>
-
-<div class="input-group span6">
- <input type="text">
- <span class="input-group-addon">.00</span>
-</div>
-
-<div class="input-group span3">
- <span class="input-group-addon">$</span>
- <input type="text">
- <span class="input-group-addon">.00</span>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="input-group span9">
+ <span class="input-group-addon">@</span>
+ <input type="text" placeholder="Username">
+</div>
+
+<div class="input-group span6">
+ <input type="text">
+ <span class="input-group-addon">.00</span>
+</div>
+
+<div class="input-group span3">
+ <span class="input-group-addon">$</span>
+ <input type="text">
+ <span class="input-group-addon">.00</span>
+</div>
+{% endhighlight %}
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<input type="text" class="input-small" placeholder="Username">
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="input-group span9">
- <span class="input-group-addon input-large">@</span>
- <input type="text" class="input-large" placeholder="Username">
-</div>
-<div class="input-group span9">
- <span class="input-group-addon">@</span>
- <input type="text" placeholder="Username">
-</div>
-<div class="input-group span9">
- <span class="input-group-addon input-small">@</span>
- <input type="text" class="input-small" placeholder="Username">
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="input-group span9">
+ <span class="input-group-addon input-large">@</span>
+ <input type="text" class="input-large" placeholder="Username">
+</div>
+
+<div class="input-group span9">
+ <span class="input-group-addon">@</span>
+ <input type="text" placeholder="Username">
+</div>
+
+<div class="input-group span9">
+ <span class="input-group-addon input-small">@</span>
+ <input type="text" class="input-small" placeholder="Username">
+</div>
+{% endhighlight %}
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
</span>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="input-group span7">
- <span class="input-group-btn">
- <button class="btn" type="button">Go!</button>
- </span>
- <input type="text">
-</div>
-
-<div class="input-group span7">
- <input type="text">
- <span class="input-group-btn">
- <button class="btn" type="button">Go!</button>
- </span>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="input-group span7">
+ <span class="input-group-btn">
+ <button class="btn" type="button">Go!</button>
+ </span>
+ <input type="text">
+</div>
+
+<div class="input-group span7">
+ <input type="text">
+ <span class="input-group-btn">
+ <button class="btn" type="button">Go!</button>
+ </span>
+</div>
+{% endhighlight %}
<h4>Button dropdowns</h4>
<p></p>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
-<pre class="prettyprint linenums">
-<div class="input-group span7">
- <div class="input-group-btn btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- Action
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- ...
- </ul>
- </div>
- <input type="text">
-</div>
-
-<div class="input-group span7">
- <input type="text">
- <div class="input-group-btn btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- Action
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- ...
- </ul>
- </div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="input-group span7">
+ <div class="input-group-btn btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <input type="text">
+</div><!-- /input-group -->
+
+<div class="input-group span7">
+ <input type="text">
+ <div class="input-group-btn btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+</div><!-- /input-group -->
+{% endhighlight %}
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<li><a href="#">Separated link</a></li>
</ul>
</div>
- <input type="text" class="span3">
+ <input type="text">
</div>
<br>
</div>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="input-prepend">
- <div class="btn-group">...</div>
- <input type="text" class="span3">
-</div>
-<div class="input-append">
- <input type="text" class="span3">
- <div class="btn-group">...</div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="input-group span7">
+ <div class="input-group-btn btn-group">
+ <!-- Button and dropdown menu -->
+ </div>
+ <input type="text">
+</div>
+
+<div class="input-group span7">
+ <input type="text">
+ <div class="input-group-btn btn-group">
+ <!-- Button and dropdown menu -->
+ </div>
+</div>
+{% endhighlight %}
<h3 id="forms-extending-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<input class="input-small" type="text" placeholder=".input-small">
</div>
</form>
-<pre class="prettyprint linenums">
-<input class="input-large" type="text" placeholder=".input-large">
-<input type="text" placeholder="Default input">
-<input class="input-small" type="text" placeholder=".input-small">
-</pre>
+{% highlight html linenos %}
+<input class="input-large" type="text" placeholder=".input-large">
+<input type="text" placeholder="Default input">
+<input class="input-small" type="text" placeholder=".input-small">
+{% endhighlight %}
<h4>Column sizing</h4>
<p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
</select>
</div>
</form>
-<pre class="prettyprint linenums">
-<input class="span1" type="text" placeholder=".span1">
-<input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
-<select class="span1">
+{% highlight html linenos %}
+<input class="span1" type="text" placeholder=".span1">
+<input class="span2" type="text" placeholder=".span2">
+<input class="span3" type="text" placeholder=".span3">
+<select class="span1">
...
-</select>
-<select class="span2">
+</select>
+<select class="span2">
...
-</select>
-<select class="span3">
+</select>
+<select class="span3">
...
-</select>
-</pre>
+</select>
+{% endhighlight %}
+
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row">
</div>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span4">
- <input type="text" placeholder=".span4">
- </div>
- <div class="span4">
- <input type="text" placeholder=".span4">
- </div>
- <div class="span4">
- <input type="text" placeholder=".span4">
- </div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="row">
+ <div class="span4">
+ <input type="text" placeholder=".span4">
+ </div>
+ <div class="span4">
+ <input type="text" placeholder=".span4">
+ </div>
+ <div class="span4">
+ <input type="text" placeholder=".span4">
+ </div>
+</div>
+{% endhighlight %}
<h3>Uneditable inputs</h3>
<p>Present data in a form that's not editable without using actual form markup.</p>
<form class="bs-docs-example">
<span class="input-xlarge uneditable-input">Some value here</span>
</form>
-<pre class="prettyprint linenums">
-<span class="input-xlarge uneditable-input">Some value here</span>
-</pre>
+{% highlight html linenos %}
+<span class="uneditable-input">Some value here</span>
+{% endhighlight %}
<h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<button type="button" class="btn">Cancel</button>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="form-actions">
- <button type="submit" class="btn btn-primary">Save changes</button>
- <button type="button" class="btn">Cancel</button>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="form-actions">
+ <button type="submit" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn">Cancel</button>
+</div>
+{% endhighlight %}
<h3>Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<form class="bs-docs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
-<pre class="prettyprint linenums">
-<input type="text"><span class="help-inline">Inline help text</span>
-</pre>
+{% highlight html linenos %}
+<input type="text">
+<span class="help-inline">Inline help text</span>
+{% endhighlight %}
<h4>Block help</h4>
<form class="bs-docs-example form-inline">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
-<pre class="prettyprint linenums">
-<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
-</pre>
+{% highlight html linenos %}
+<input type="text">
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+{% endhighlight %}
</section>
<button type="button" class="btn btn-mini">Mini button</button>
</p>
</div>
-<pre class="prettyprint linenums">
-<p>
- <button class="btn btn-large btn-primary" type="button">Large button</button>
- <button class="btn btn-large" type="button">Large button</button>
-</p>
-<p>
- <button class="btn btn-primary" type="button">Default button</button>
- <button class="btn" type="button">Default button</button>
-</p>
-<p>
- <button class="btn btn-small btn-primary" type="button">Small button</button>
- <button class="btn btn-small" type="button">Small button</button>
-</p>
-<p>
- <button class="btn btn-mini btn-primary" type="button">Mini button</button>
- <button class="btn btn-mini" type="button">Mini button</button>
-</p>
-</pre>
+{% highlight html linenos %}
+<p>
+ <button type="button" class="btn btn-large btn-primary">Large button</button>
+ <button type="button" class="btn btn-large">Large button</button>
+</p>
+<p>
+ <button type="button" class="btn btn-primary">Default button</button>
+ <button type="button" class="btn">Default button</button>
+</p>
+<p>
+ <button type="button" class="btn btn-small btn-primary">Small button</button>
+ <button type="button" class="btn btn-small">Small button</button>
+</p>
+<p>
+ <button type="button" class="btn btn-mini btn-primary">Mini button</button>
+ <button type="button" class="btn btn-mini">Mini button</button>
+</p>
+{% endhighlight %}
+
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-large btn-block">Block level button</button>
</div>
</div>
-<pre class="prettyprint linenums">
-<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
-<button class="btn btn-large btn-block" type="button">Block level button</button>
-</pre>
+{% highlight html linenos %}
+<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
+<button type="button" class="btn btn-large btn-block">Block level button</button>
+{% endhighlight %}
<h2>Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p>
+ <h3>Button element</h3>
+ <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
+ <p class="bs-docs-example">
+ <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+ <button type="button" class="btn btn-large" disabled="disabled">Button</button>
+ </p>
+{% highlight html linenos %}
+<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button type="button" class="btn btn-large" disabled="disabled">Button</button>
+{% endhighlight %}
+
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
<p class="bs-docs-example">
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
</p>
-<pre class="prettyprint linenums">
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
-</pre>
+{% highlight html linenos %}
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+{% endhighlight %}
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p>
- <h3>Button element</h3>
- <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
- <p class="bs-docs-example">
- <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
- <button type="button" class="btn btn-large" disabled>Button</button>
- </p>
-<pre class="prettyprint linenums">
-<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled>Button</button>
-</pre>
-
<h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
</form>
-<pre class="prettyprint linenums">
-<a class="btn" href="">Link</a>
-<button class="btn" type="submit">Button</button>
-<input class="btn" type="button" value="Input">
-<input class="btn" type="submit" value="Submit">
-</pre>
- <p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.</p>
+{% highlight html linenos %}
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">Button</button>
+<input class="btn" type="button" value="Input">
+<input class="btn" type="submit" value="Submit">
+{% endhighlight %}
+ <p>As a best practice, <strong>we highly recommend matching using the <code><button<</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
</section>
<img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail">
</div>
-<pre class="prettyprint linenums">
-<img src="..." class="img-rounded">
-<img src="..." class="img-circle">
-<img src="..." class="img-thumbnail">
-</pre>
+{% highlight html linenos %}
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-thumbnail">
+{% endhighlight %}
</section>
<h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
-<pre class="prettyprint linenums">
-<i class="glyphicon-search"></i>
-</pre>
+{% highlight html linenos %}
+<span class="glyphicon-search"></span>
+{% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn" href="#"><i class="glyphicon-align-left"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-center"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-right"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a>
+ <a class="btn" href="#"><span class="glyphicon-align-left"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-center"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-right"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-justify"></span></a>
</div>
</div>
</div><!-- /bs-docs-example -->
-<pre class="prettyprint linenums">
-<div class="btn-toolbar">
- <div class="btn-group">
-
- <a class="btn" href="#"><i class="glyphicon-align-left"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-center"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-right"></i></a>
- <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a>
- </div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn" href="#"><span class="glyphicon-align-left"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-center"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-right"></span></a>
+ <a class="btn" href="#"><span class="glyphicon-align-justify"></span></a>
+ </div>
+</div>
+{% endhighlight %}
<h5>Dropdown in a button group</h5>
<div class="bs-docs-example">
<div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
+ <a class="btn btn-primary" href="#"><i class="glyphicon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
<li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
- <li><a href="#"><i class="i"></i> Make admin</a></li>
+ <li><a href="#"><i class="glyphicon-"></i> Make admin</a></li>
</ul>
</div>
</div><!-- /bs-docs-example -->
-<pre class="prettyprint linenums">
-<div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
- <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
- <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="i"></i> Make admin</a></li>
- </ul>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="btn-group">
+ <a class="btn btn-primary" href="#"><span class="glyphicon-user"></span> User</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <li><a href="#"><span class="glyphicon-pencil"></span> Edit</a></li>
+ <li><a href="#"><span class="glyphicon-trash"></span> Delete</a></li>
+ <li><a href="#"><span class="glyphicon-ban-circle"></span> Ban</a></li>
+ <li class="divider"></li>
+ <li><a href="#"><span class="glyphicon-"></span> Make admin</a></li>
+ </ul>
+</div>
+{% endhighlight %}
<h5>Large button</h5>
<div class="bs-docs-example">
- <a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a>
+ <a class="btn btn-large" href="#"><span class="glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example -->
-<pre class="prettyprint linenums">
-<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a>
-</pre>
+{% highlight html linenos %}
+<a class="btn btn-large" href="#"><span class="glyphicon-star"></span> Star</a>
+{% endhighlight %}
<h5>Small button</h5>
<div class="bs-docs-example">
- <a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
+ <a class="btn btn-small" href="#"><span class="glyphicon-star"></span></a>
</div><!-- /bs-docs-example -->
-<pre class="prettyprint linenums">
-<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
-</pre>
+{% highlight html linenos %}
+<a class="btn btn-small" href="#"><span class="glyphicon-star"></span></a>
+{% endhighlight %}
<h4>Navigation</h4>
<div class="bs-docs-example">
<ul class="nav nav-list">
- <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
- <li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
- <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
- <li><a href="#"><i class="i"></i> Misc</a></li>
+ <li class="active"><a href="#"><span class="glyphicon-home"></span> Home</a></li>
+ <li><a href="#"><span class="glyphicon-book"></span> Library</a></li>
+ <li><a href="#"><span class="glyphicon-pencil"></span> Applications</a></li>
+ <li><a href="#"><span class="glyphicon-"></span> Misc</a></li>
</ul>
</div><!-- /bs-docs-example -->
-<pre class="prettyprint linenums">
-<ul class="nav nav-list">
- <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
- <li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
- <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
- <li><a href="#"><i class="i"></i> Misc</a></li>
-</ul>
-</pre>
+{% highlight html linenos %}
+<ul class="nav nav-list">
+ <li class="active"><a href="#"><span class="glyphicon-home"></span> Home</a></li>
+ <li><a href="#"><span class="glyphicon-book"></span> Library</a></li>
+ <li><a href="#"><span class="glyphicon-pencil"></span> Applications</a></li>
+ <li><a href="#"><span class="glyphicon-"></span> Misc</a></li>
+</ul>
+{% endhighlight %}
<h4>Form fields</h4>
<form class="bs-docs-example form-horizontal">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-group">
- <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
+ <span class="input-group-addon"><span class="glyphicon-envelope"></span></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
</form>
-<pre class="prettyprint linenums">
-<div class="control-group">
- <label class="control-label" for="inputIcon">Email address</label>
- <div class="controls">
- <div class="input-group">
- <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
- <input class="span2" id="inputIcon" type="text">
- </div>
- </div>
-</div>
-</pre>
+{% highlight html linenos %}
+<div class="control-group">
+ <label class="control-label" for="inputIcon">Email address</label>
+ <div class="controls">
+ <div class="input-group">
+ <span class="input-group-addon"><span class="glyphicon-envelope"></span></span>
+ <input class="span2" id="inputIcon" type="text">
+ </div>
+ </div>
+</div>
+{% endhighlight %}
</section>
projects / thirdparty / bootstrap.git / commitdiff
