From 0ff7fb0d050c4721dc0dfde8f267668ee586adc8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Feb 2013 16:43:50 -0800 Subject: [PATCH] pygmentize the rest of the css page --- docs/css.html | 914 +++++++++++++++++++++++++------------------------- 1 file changed, 461 insertions(+), 453 deletions(-) diff --git a/docs/css.html b/docs/css.html index fd6e158e4d..b05cfbc1b4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -556,20 +556,19 @@ title: CSS
For example, <section> should be wrapped as inline.
-
-For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-
+{% highlight html linenos %} +For example, <section> should be wrapped as inline. +{% endhighlight %}

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
-
-<pre>
-  &lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-
+{% highlight html linenos %} +
<p>Sample text here...</p>
+{% endhighlight %} +

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

@@ -583,7 +582,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

Default styles

-

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

+

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. 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.

@@ -616,11 +615,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped
-
-<table class="table">
-  …
-</table>
-
+{% highlight html linenos %} + + ... +
+{% endhighlight %}

Optional classes

@@ -660,11 +659,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<table class="table table-striped">
-  …
-</table>
-
+{% highlight html linenos %} + + ... +
+{% endhighlight %}

.table-bordered

Add borders and rounded corners to the table.

@@ -704,11 +703,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<table class="table table-bordered">
-  …
-</table>
-
+{% highlight html linenos %} + + ... +
+{% endhighlight %}

.table-hover

Enable a hover state on table rows within a <tbody>.

@@ -743,11 +742,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<table class="table table-hover">
-  …
-</table>
-
+{% highlight html linenos %} + + ... +
+{% endhighlight %} +

.table-condensed

Makes tables more compact by cutting cell padding in half.

@@ -782,11 +782,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<table class="table table-condensed">
-  …
-</table>
-
+{% highlight html linenos %} + + ... +
+{% endhighlight %} +

Optional row classes

@@ -858,25 +859,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped 03/04/2012 Pending - - 4 - TB - Monthly - 04/04/2012 - Call in to confirm - -
+{% highlight html linenos %}
 ...
-  <tr class="success">
-    <td>1</td>
-    <td>TB - Monthly</td>
-    <td>01/04/2012</td>
-    <td>Approved</td>
-  </tr>
+
+  1
+  TB - Monthly
+  01/04/2012
+  Approved
+
 ...
-
+{% endhighlight %} +

Supported table markup

@@ -951,23 +947,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<table>
-  <caption>...</caption>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-
+{% highlight html linenos %} + + + + + + + + + + + + + + + + +
...
.........
.........
+{% endhighlight %} @@ -996,22 +994,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+
+ Legend + + +

Example block-level help text here.

+
+ +
+ +
+
+{% endhighlight %}

Optional layouts

@@ -1029,18 +1027,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+ + +
+ +
+ +
+{% endhighlight %}

Horizontal form

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:

@@ -1074,32 +1072,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+
+
+ +
+
+
+{% endhighlight %}

Supported form controls

@@ -1111,18 +1109,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
-
-<input type="text" placeholder="Text input">
-
+{% highlight html linenos %} + +{% endhighlight %}

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

-
-<textarea rows="3"></textarea>
-
+{% highlight html linenos %} + +{% endhighlight %}

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

@@ -1148,27 +1146,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<div class="checkbox">
-  <label>
-    <input type="checkbox" value="">
+{% highlight html linenos %}
+

+  
+

 
-<div class="radio">
-  <label>
-    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+

+
+ + +{% endhighlight %}

Inline checkboxes

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

@@ -1183,17 +1175,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped 3 -
-<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>
-
+{% highlight html linenos %} + + + +{% endhighlight %}

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.

@@ -1214,23 +1206,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<select>
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
+{% highlight html linenos %}
+
 
-<select multiple="multiple">
-  <option>1</option>
-  <option>2</option>
-  <option>3</option>
-  <option>4</option>
-  <option>5</option>
-</select>
-
+ +{% endhighlight %} @@ -1242,9 +1234,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
-
-<input id="focusedInput" type="text" value="This is focused...">
-
+{% highlight html linenos %} + +{% endhighlight %}

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

@@ -1252,18 +1244,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped
-
-<input class="span3" type="email" required>
-
+{% highlight html linenos %} + +{% endhighlight %}

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

-
-<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-
+{% highlight html linenos %} + +{% endhighlight %}

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

@@ -1285,22 +1277,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+
+
+ +
+
+ +
+
+ +
+ +
+
+{% endhighlight %}

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

@@ -1330,26 +1326,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+{% endhighlight %} @@ -1376,23 +1372,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped .00 -
-<div class="input-group span9">
-  <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
-</div>
+{% highlight html linenos %}
+

+  @
+  
+

 
-<div class="input-group span6">
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
+

+  
+  .00
+

 
-<div class="input-group span3">
-  <span class="input-group-addon">$</span>
-  <input type="text">
-  <span class="input-group-addon">.00</span>
-</div>
-
+
+ $ + + .00 +
+{% endhighlight %}

Optional sizes

Add the relative form sizing classes to the `.input-group-addon`.

@@ -1412,20 +1408,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
-
+{% highlight html linenos %} +
+ @ + +
+ +
+ @ + +
+ +
+ @ + +
+{% endhighlight %}

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1444,21 +1442,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<div class="input-group span7">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-  <input type="text">
-</div>
+{% highlight html linenos %}
+

+  
+    
+  
+  
+

 
-<div class="input-group span7">
-  <input type="text">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Go!</button>
-  </span>
-</div>
-
+
+ + + + +
+{% endhighlight %}

Button dropdowns

@@ -1491,33 +1489,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
-<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>
+{% highlight html linenos %}
+

+  

+    
+    
+  

+  
+

 
-<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>
-
+
+ +
+ + +
+
+{% endhighlight %}

Segmented dropdown groups

@@ -1535,7 +1535,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
  • Separated link
    • - +
    @@ -1557,16 +1557,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped
    -
    -<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>
-
    +{% highlight html linenos %} +
    +
    + +
    + +
    + +
    + +
    + +
    +
    +{% endhighlight %}

    Control sizing

    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

    @@ -1580,11 +1585,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<input class="input-large" type="text" placeholder=".input-large">
-<input type="text" placeholder="Default input">
-<input class="input-small" type="text" placeholder=".input-small">
-
    +{% highlight html linenos %} + + + +{% endhighlight %}

    Column sizing

    Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.

    @@ -1616,20 +1621,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped -
    -<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 %}
+
+
+
+
+
+
+{% endhighlight %}
+
           
    If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.
    
           
    
             
    
@@ -1644,28 +1650,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
    
             
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+  
    
+    
+  
    
+  
    
+    
+  
    
+  
    
+    
+  
    
+
    
+{% endhighlight %}
 
           
    Uneditable inputs
    
           
    Present data in a form that's not editable without using actual form markup.
    
           
    
             Some value here
           
    
-
    -<span class="input-xlarge uneditable-input">Some value here</span>
-
    
+{% highlight html linenos %}
+Some value here
+{% endhighlight %}
 
           
    Form actions
    
           
    End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
    
@@ -1675,12 +1681,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
           
-
    -<div class="form-actions">
-  <button type="submit" class="btn btn-primary">Save changes</button>
-  <button type="button" class="btn">Cancel</button>
-</div>
-
    
+{% highlight html linenos %}
+
    
+  
+  
+
    
+{% endhighlight %}
 
           
    Help text
    
           
    Inline and block level support for help text that appears around form controls.
    
@@ -1688,18 +1694,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped
           
    
              Inline help text
           
    
-
    -<input type="text"><span class="help-inline">Inline help text</span>
-
    
+{% highlight html linenos %}
+
+Inline help text
+{% endhighlight %}
 
           
    Block help
    
           
    
             
             A longer block of help text that breaks onto a new line and may extend beyond one line.
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
+A longer block of help text that breaks onto a new line and may extend beyond one line.
+{% endhighlight %}
 
         
 
@@ -1785,24 +1793,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
    
           
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+
    
+  
+  
+
    
+{% endhighlight %}
+
           
    Create block level buttons—those that span the full width of a parent— by adding .btn-block.
    
           
    
             
    
@@ -1810,40 +1819,40 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
             
    
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
+
+{% endhighlight %}
 
 
           
    Disabled state
    
           
    Make buttons look unclickable by fading them back 50%.
    
 
+          
    Button element
    
+          
    Add the disabled attribute to <button> buttons.
    
+          
    
+            
+            
+          
    
+{% highlight html linenos %}
+
+
+{% endhighlight %}
+
           
    Anchor element
    
           
    Add the .disabled class to <a> buttons.
    
           
    
             Primary link
             Link
           
    
-
    -<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>
-
    
+{% highlight html linenos %}
+Primary link
+Link
+{% endhighlight %}
           
    
             We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
           
    
 
-          
    Button element
    
-          
    Add the disabled attribute to <button> buttons.
    
-          
    
-            
-            
-          
    
-
    -<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>
-
    
-
 
           
    One class, multiple tags
    
           
    Use the .btn class on an <a>, <button>, or <input> element.
    
@@ -1853,13 +1862,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped
             
             
           
-
    -<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">
-
    
-          
    As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
    
+{% highlight html linenos %}
+Link
+
+
+
+{% endhighlight %}
+          
    As a best practice, we highly recommend matching using the <button< element whenever possible to ensure matching cross-browser rendering.
    
 
         
 
@@ -1878,11 +1887,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped
             
             
           
-
    -<img src="..." class="img-rounded">
-<img src="..." class="img-circle">
-<img src="..." class="img-thumbnail">
-
    
+{% highlight html linenos %}
+
+
+
+{% endhighlight %}
 
         
 
@@ -2073,9 +2082,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped
 
           
    How to use
    
           
    Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
    
-
    -<i class="glyphicon-search"></i>
-
    
+{% highlight html linenos %}
+
+{% endhighlight %}
           
    Want to change the icon color? Just change the color of the parent element.
    
           
    When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
    
 
@@ -2089,87 +2098,86 @@ For example, <code>&lt;section&gt;</code> should be wrapped
           
    
             
    
               
    
-                
-                
-                
-                
+                
+                
+                
+                
               
    
             
    
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+  
    
+    
+    
+    
+    
+  
    
+
    
+{% endhighlight %}
 
           
    Dropdown in a button group
    
           
    
             
    
-               User
+               User
               
               
             
    
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+   User
+  
+  
+
    
+{% endhighlight %}
 
           
    Large button
    
           
    
-             Star
+             Star
           
    
-
    -<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a>
-
    
+{% highlight html linenos %}
+ Star
+{% endhighlight %}
 
           
    Small button
    
           
    
-            
+            
           
    
-
    -<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a>
-
    
+{% highlight html linenos %}
+
+{% endhighlight %}
 
 
           
    Navigation
    
           
    
             
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
+{% endhighlight %}
 
           
    Form fields
    
           
    
@@ -2177,23 +2185,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped
               
               
    
                 
    
-                  
+                  
                   
                 
    
               
    
             
           
    
-
    -<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>
-
    
+{% highlight html linenos %}
+
    
+  
+  
    
+    
    
+      
+      
+    
    
+  
    
+
    
+{% endhighlight %}