diff --git a/docs/base-css.html b/docs/base-css.html index 3ea3bdce36..363f91a020 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -417,10 +417,10 @@ For example, <code>section</code> should be wrapped as inline. 
 <pre>
-  &lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;Sample text here...&lt;/p&gt;
 </pre>
-

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

+

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

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

@@ -802,6 +802,7 @@ For example, <code>section</code> should be wrapped as inline. 
 <table>
+  <caption>…</caption>
   <thead>
     <tr>
       <th>…</th>
@@ -834,14 +835,15 @@ For example, <code>section</code> should be wrapped as inline.
             Legend
             
             
-            
Example block-level help text here.

+            Example block-level help text here.
             
             
           
 
-<form class="well">
+<form>
+  <legend>Legend</legend>
   <label>Label name</label>
   <input type="text" placeholder="Type something…">
   <span class="help-block">Example block-level help text here.</span>
@@ -853,7 +855,7 @@ For example, <code>section</code> should be wrapped as inline.
 

 
 
-          

+          

 
 
           
Optional layouts

@@ -904,15 +906,15 @@ For example, <code>section</code> should be wrapped as inline.
           

             Legend
             

-              
+              
               

-                
+                
               

             

             

-              
+              
               

-                
+                
               

             

             

@@ -927,15 +929,15 @@ For example, <code>section</code> should be wrapped as inline.
 
 <form class="form-horizontal">
   <div class="control-group">
-    <label class="control-label" for="">Email</label>
+    <label class="control-label" for="inputEmail">Email</label>
     <div class="controls">
-      <input type="text" placeholder="Email">
+      <input type="text" id="inputEmail" placeholder="Email">
     </div>
   </div>
   <div class="control-group">
-    <label class="control-label" for="">Password</label>
+    <label class="control-label" for="inputPassword">Password</label>
     <div class="controls">
-      <input type="password" placeholder="Password">
+      <input type="password" id="inputPassword" placeholder="Password">
     </div>
   </div>
   <div class="control-group">
@@ -950,7 +952,7 @@ For example, <code>section</code> should be wrapped as inline.
 

 
 
-          

+          

 
 
           
Supported form controls

@@ -972,7 +974,7 @@ For example, <code>section</code> should be wrapped as inline.
             
           
 
-<textarea id="textarea" rows="3"></textarea>
+<textarea rows="3"></textarea>
 

 
           
Checkboxes and radios

@@ -1045,7 +1047,7 @@ For example, <code>section</code> should be wrapped as inline.
               
             
             

-            
               
               
               
@@ -1062,7 +1064,7 @@ For example, <code>section</code> should be wrapped as inline.
   <option>5</option>
 </select>
 
-<select>
+<select multiple="multiple">
   <option>1</option>
   <option>2</option>
   <option>3</option>
@@ -1072,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.
-
+

Extending form controls

@@ -1082,7 +1084,7 @@ For example, <code>section</code> should be wrapped as inline.

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Default options

-

Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

+

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

@ @@ -1155,8 +1157,14 @@ For example, <code>section</code> should be wrapped as inline. 
 <form class="form-search">
-  <input type="text" class="span2 search-query">
-  <button type="submit" class="btn">Search</button>
+  <div class="input-append">
+    <input type="text" class="span2 search-query">
+    <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>
+  </div>
 </form>
@@ -1175,12 +1183,12 @@ For example, <code>section</code> should be wrapped as inline. 
-<input class="input-mini" type="text">
-<input class="input-small" type="text">
-<input class="input-medium" type="text">
-<input class="input-large" type="text">
-<input class="input-xlarge" type="text">
-<input class="input-xxlarge" type="text">
+<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. @@ -1217,9 +1225,18 @@ For example, <code>section</code> should be wrapped as inline. 

-<input class="span1" type="text">
-<input class="span2" type="text">
-<input class="span3" type="text">
+<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="span3">
+  ...
+</select>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

@@ -1245,10 +1262,14 @@ For example, <code>section</code> should be wrapped as inline. 
+<div class="controls">
+  <input class="span5" type="text" placeholder=".span5">
+</div>
 <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
   <input class="span1" type="text" placeholder=".span1">
 </div>
+...

Uneditable inputs

@@ -1282,7 +1303,7 @@ For example, <code>section</code> should be wrapped as inline. Inline help text 
-<span class="help-inline">Inline help text</span>
+<input type="text"><span class="help-inline">Inline help text</span>

Block help

@@ -1291,11 +1312,11 @@ For example, <code>section</code> should be wrapped as inline. A longer block of help text that breaks onto a new line and may extend beyond one line. 
-<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+<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 control states

@@ -1306,9 +1327,9 @@ For example, <code>section</code> should be wrapped as inline.
- 
-  <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
-
+
+<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+

Disabled inputs

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

@@ -1439,39 +1460,54 @@ For example, <code>section</code> should be wrapped as inline.

Button sizes

-

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

+

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

- - + +

- - + +

- - + +

- - + + 

-<button class="btn btn-large" type="button">Large button</button>
-<button class="btn btn-small" type="button">Small button</button>
-<button class="btn" type="button">Default button</button>
-<button class="btn btn-mini" type="button">Mini button</button>
+<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>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

- +
- 
<button class="btn btn-large btn-block" type="button">Block level button</button>
+
+<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>
+

Disabled state

@@ -1514,15 +1550,11 @@ For example, <code>section</code> should be wrapped as inline. 
 <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">
+<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 you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

+

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.

@@ -1535,16 +1567,17 @@ For example, <code>section</code> should be wrapped as inline.

Images

-

Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.

+

Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.

+

Heads up! .img-rounded and .img-circle don't work in IE7-8.

-  <img src="..." class="img-rounded">
-  <img src="..." class="img-circle">
-  <img src="..." class="img-polaroid">
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
@@ -1737,30 +1770,66 @@ For example, <code>section</code> should be wrapped as inline.

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

+ +
Button group in a button toolbar
-
+
-

-
- User - - -
-

-
+
+<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
+ +
Dropdown in a button group
+
+
+ User + + +
+
+
+<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-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="icon-pencil"></i> Edit</a></li>
+    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> Make admin</a></li>
+  </ul>
+</div>
+
+ +
Button
+
+ +
+
+<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+
+

Navigation

@@ -1773,6 +1842,14 @@ For example, <code>section</code> should be wrapped as inline.
+
+<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
+  <li><a href="#"><i class="icon-book"></i> Library</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+  <li><a href="#"><i class="i"></i> Misc</a></li>
+</ul>
+

Form fields

@@ -1785,6 +1862,15 @@ For example, <code>section</code> should be wrapped as inline.
+
+<div class="control-group">
+  <label class="control-label" for="inputIcon">Email address</label>
+  <div class="controls">
+    <div class="input-prepend">
+    <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+  </div>
+</div>
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4cc21e9755..f2fb96b4bb 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -354,10 +354,10 @@ 
 <pre>
-  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
 </pre>
-

{{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

+

{{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

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

@@ -739,6 +739,7 @@ 
 <table>
+  <caption>…</caption>
   <thead>
     <tr>
       <th>…</th>
@@ -771,14 +772,15 @@
             Legend
             
             
-            
{{_i}}Example block-level help text here.{{/i}}

+            {{_i}}Example block-level help text here.{{/i}}
             
             
           {{! /example }}
 
-<form class="well">
+<form>
+  <legend>{{_i}}Legend{{/i}}</legend>
   <label>{{_i}}Label name{{/i}}</label>
   <input type="text" placeholder="{{_i}}Type something…{{/i}}">
   <span class="help-block">Example block-level help text here.</span>
@@ -790,7 +792,7 @@
 

 
 
-          

+          

 
 
           
{{_i}}Optional layouts{{/i}}

@@ -841,15 +843,15 @@
           

             Legend
             

-              
+              
               

-                
+                
               

             

             

-              
+              
               

-                
+                
               

             

             

@@ -864,15 +866,15 @@
 
 <form class="form-horizontal">
   <div class="control-group">
-    <label class="control-label" for="">{{_i}}Email{{/i}}</label>
+    <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label>
     <div class="controls">
-      <input type="text" placeholder="{{_i}}Email{{/i}}">
+      <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}">
     </div>
   </div>
   <div class="control-group">
-    <label class="control-label" for="">{{_i}}Password{{/i}}</label>
+    <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label>
     <div class="controls">
-      <input type="password" placeholder="{{_i}}Password{{/i}}">
+      <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}">
     </div>
   </div>
   <div class="control-group">
@@ -887,7 +889,7 @@
 

 
 
-          

+          

 
 
           
{{_i}}Supported form controls{{/i}}

@@ -909,7 +911,7 @@
             
           
 
-<textarea id="textarea" rows="3"></textarea>
+<textarea rows="3"></textarea>
 

 
           
{{_i}}Checkboxes and radios{{/i}}

@@ -982,7 +984,7 @@
               
             
             

-            
               
               
               
@@ -999,7 +1001,7 @@
   <option>5</option>
 </select>
 
-<select>
+<select multiple="multiple">
   <option>1</option>
   <option>2</option>
   <option>3</option>
@@ -1009,7 +1011,7 @@
-
+

{{_i}}Extending form controls{{/i}}

@@ -1019,7 +1021,7 @@

{{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

{{_i}}Default options{{/i}}

-

{{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

+

{{_i}}Wrap an .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

@ @@ -1092,8 +1094,14 @@ {{! /example }} 
 <form class="form-search">
-  <input type="text" class="span2 search-query">
-  <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+  <div class="input-append">
+    <input type="text" class="span2 search-query">
+    <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>
+  </div>
 </form>
@@ -1112,12 +1120,12 @@ 
-<input class="input-mini" type="text">
-<input class="input-small" type="text">
-<input class="input-medium" type="text">
-<input class="input-large" type="text">
-<input class="input-xlarge" type="text">
-<input class="input-xxlarge" type="text">
+<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

{{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. @@ -1154,9 +1162,18 @@ 

-<input class="span1" type="text">
-<input class="span2" type="text">
-<input class="span3" type="text">
+<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="span3">
+  ...
+</select>

{{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

@@ -1182,10 +1199,14 @@ 
+<div class="controls">
+  <input class="span5" type="text" placeholder=".span5">
+</div>
 <div class="controls controls-row">
   <input class="span4" type="text" placeholder=".span4">
   <input class="span1" type="text" placeholder=".span1">
 </div>
+...

{{_i}}Uneditable inputs{{/i}}

@@ -1219,7 +1240,7 @@ Inline help text 
-<span class="help-inline">Inline help text</span>
+<input type="text"><span class="help-inline">Inline help text</span>

{{_i}}Block help{{/i}}

@@ -1228,11 +1249,11 @@ A longer block of help text that breaks onto a new line and may extend beyond one line. 
-<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+<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>
-
+

{{_i}}Form control states{{/i}}

@@ -1243,9 +1264,9 @@
- 
-  <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
-
+
+<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+

{{_i}}Disabled inputs{{/i}}

{{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

@@ -1376,39 +1397,54 @@

{{_i}}Button sizes{{/i}}

-

{{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

+

{{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.{{/i}}

- - + +

- - + +

- - + +

- - + + 

-<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
-<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
-<button class="btn" type="button">{{_i}}Default button{{/i}}</button>
-<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+<p>
+  <button class="btn btn-large btn-primary" type="button">{{_i}}Large button{{/i}}</button>
+  <button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-primary" type="button">{{_i}}Default button{{/i}}</button>
+  <button class="btn" type="button">{{_i}}Default button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-small btn-primary" type="button">{{_i}}Small button{{/i}}</button>
+  <button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
+</p>
+<p>
+  <button class="btn btn-mini btn-primary" type="button">{{_i}}Mini button{{/i}}</button>
+  <button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
+</p>

{{_i}}Create block level buttons—those that span the full width of a parent— by adding .btn-block.{{/i}}

- +
- 
<button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button>
+
+<button class="btn btn-large btn-block btn-primary" type="button">{{_i}}Block level button{{/i}}</button>
+<button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button>
+

{{_i}}Disabled state{{/i}}

@@ -1451,15 +1487,11 @@ 
 <a class="btn" href="">{{_i}}Link{{/i}}</a>
-<button class="btn" type="submit">
-  {{_i}}Button{{/i}}
-</button>
-<input class="btn" type="button"
-         value="{{_i}}Input{{/i}}">
-<input class="btn" type="submit"
-         value="{{_i}}Submit{{/i}}">
+<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
+<input class="btn" type="button" value="{{_i}}Input{{/i}}">
+<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
-

{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

+

{{_i}}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.{{/i}}

@@ -1472,16 +1504,17 @@

{{_i}}Images{{/i}}

-

{{_i}}Simple classes to easily style images in any project. Heads up: .img-rounded and .img-circle don't work in IE7-8.{{/i}}

+

{{_i}}Add the .img-rounded, .img-circle or .img-polaroid class to a <img> element to easily style images in any project.{{/i}}

+

{{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle don't work in IE7-8.{{/i}}

-  <img src="..." class="img-rounded">
-  <img src="..." class="img-circle">
-  <img src="..." class="img-polaroid">
+<img src="..." class="img-rounded">
+<img src="..." class="img-circle">
+<img src="..." class="img-polaroid">
@@ -1674,30 +1707,66 @@

{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

{{_i}}Buttons{{/i}}

+ +
{{_i}}Button group in a button toolbar{{/i}}
-
+
-

-
- {{_i}}User{{/i}} - - -
-

-
{{! /bs-docs-example }} +
+<div class="btn-toolbar">
+  <div class="btn-group">
+
+    <a class="btn" href="#"><i class="icon-align-left"></i></a>
+    <a class="btn" href="#"><i class="icon-align-center"></i></a>
+    <a class="btn" href="#"><i class="icon-align-right"></i></a>
+    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  </div>
+</div>
+
+ +
{{_i}}Dropdown in a button group{{/i}}
+
+
+ {{_i}}User{{/i}} + + +
+
{{! /bs-docs-example }} +
+<div class="btn-group">
+  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</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="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
+    <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
+    <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
+  </ul>
+</div>
+
+ +
{{_i}}Button{{/i}}
+
+ +
{{! /bs-docs-example }} +
+<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
+
+

{{_i}}Navigation{{/i}}

@@ -1710,6 +1779,14 @@
{{! /well }}
{{! /bs-docs-example }} +
+<ul class="nav nav-list">
+  <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
+  <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
+  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+  <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
+</ul>
+

{{_i}}Form fields{{/i}}

@@ -1722,6 +1799,15 @@
+
+<div class="control-group">
+  <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
+  <div class="controls">
+    <div class="input-prepend">
+    <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text">
+  </div>
+</div>
+