adding wells and close icon to the docs under misc in components, with a new subnav...

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index cf4b1962f18481c5068283c84c716a0c244dd643..5a6bd971fb3a6d5e988169439facbea35b137b11 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -154,7 +154,6 @@ hr.soften {
 .subnav {
   width: 100%;
   height: 36px;
-  overflow: hidden;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -172,37 +171,39 @@ hr.soften {
 .subnav .nav {
   margin-bottom: 0;
 }
-.subnav .nav a {
+.subnav .nav > li > a {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
   font-size: 13px;
-  color: #777;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
   border-left: 1px solid #f5f5f5;
   border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
-.subnav .nav a:hover,
-.subnav .nav .active a {
-  background-color: transparent;
-  color: #333;
-}
-.subnav .nav .active a {
+.subnav .nav > .active > a,
+.subnav .nav > .active > a:hover {
+  padding-left: 13px;
+  color: #777;
   background-color: #e9e9e9;
   border-right-color: #ddd;
   border-left: 0;
-  padding-left: 13px;
   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
      -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
           box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 }
-.subnav .nav li:first-child a {
+.subnav .nav > .active > a .caret,
+.subnav .nav > .active > a:hover .caret {
+  border-top-color: #777;
+}
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
   border-left: 0;
   padding-left: 12px;
 }
-.subnav .nav li:last-child a {
+.subnav .nav > li:last-child > a {
   border-right: 0;
 }
 

diff --git a/docs/base-css.html b/docs/base-css.html
index 7552fb9b9166b9fba24730fb9d5a288b5277ec11..167cb5e6947cdfdc795bc2f0f9c68be08132c87d 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -388,59 +388,6 @@
     </tbody>
   </table>
 
-  <!-- Labels -->
-  <h2>Inline labels <small>for special attention</small></h2>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 190px;">Labels</th>
-        <th>Markup</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <span class="label">Default</span>
-        </td>
-        <td>
-          <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label success">New</span>
-        </td>
-        <td>
-          <code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label warning">Warning</span>
-        </td>
-        <td>
-          <code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label important">Important</span>
-        </td>
-        <td>
-          <code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label info">Info</span>
-        </td>
-        <td>
-          <code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
 </section>
 
 

diff --git a/docs/components.html b/docs/components.html
index 6ebf6a4f069c9f8f4e7d076d4f3bcd36740c972d..a525582203b157eecd563013b9b531fac1a2d2b1 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -70,15 +70,27 @@
   <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
   <div class="subnav">
     <ul class="nav pills">
-      <li><a href="#buttonGroups">Button groups</a></li>
-      <li><a href="#buttonDropdowns">Button dropdowns</a></li>
-      <li><a href="#navs">Nav, tabs, pills</a></li>
-      <li><a href="#navbar">Navbar</a></li>
-      <li><a href="#breadcrumbs">Breadcrumbs</a></li>
-      <li><a href="#pagination">Pagination</a></li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li><a href="#buttonGroups">Button groups</a></li>
+          <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+        </ul>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li><a href="#navs">Nav, tabs, pills</a></li>
+          <li><a href="#navbar">Navbar</a></li>
+          <li><a href="#breadcrumbs">Breadcrumbs</a></li>
+          <li><a href="#pagination">Pagination</a></li>
+        </ul>
+      </li>
+      <li><a href="#labels">Labels</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
       <li><a href="#progress">Progress bars</a></li>
+      <li><a href="#misc">Miscellaneous</a></li>
     </ul>
   </div>
 </header>
@@ -927,6 +939,66 @@
 
 
 
+<!-- Labels
+================================================== -->
+<section id="labels">
+  <div class="page-header">
+    <h1>Inline labels <small>Label and annotate text</small></h1>
+  </div>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th style="width: 190px;">Labels</th>
+        <th>Markup</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <span class="label">Default</span>
+        </td>
+        <td>
+          <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label success">New</span>
+        </td>
+        <td>
+          <code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label warning">Warning</span>
+        </td>
+        <td>
+          <code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label important">Important</span>
+        </td>
+        <td>
+          <code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label info">Info</span>
+        </td>
+        <td>
+          <code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
@@ -1168,32 +1240,32 @@
 
 <!-- Progress bars
 ================================================== -->
-      <section id="progress">
-        <div class="page-header">
-          <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
-        </div>
+<section id="progress">
+  <div class="page-header">
+    <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
+  </div>
 
-        <h2>Examples and markup</h2>
-        <div class="row">
-          <div class="span4">
-            <h3>Basic</h3>
-            <p>Default progress bar with a vertical gradient.</p>
-            <div class="progress">
-              <div class="bar" style="width: 60%;"></div>
-            </div>
+  <h2>Examples and markup</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>Basic</h3>
+      <p>Default progress bar with a vertical gradient.</p>
+      <div class="progress">
+        <div class="bar" style="width: 60%;"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
   &lt;div class="bar"
        style="width: 60%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-          <div class="span4">
-            <h3>Striped</h3>
-            <p>Uses a gradient to create a striped effect.</p>
-            <div class="progress info striped">
-              <div class="bar" style="width: 20%;"></div>
-            </div>
+    </div>
+    <div class="span4">
+      <h3>Striped</h3>
+      <p>Uses a gradient to create a striped effect.</p>
+      <div class="progress info striped">
+        <div class="bar" style="width: 20%;"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress info
      striped"&gt;
@@ -1201,13 +1273,13 @@
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-          <div class="span4">
-            <h3>Animated</h3>
-            <p>Takes the striped example and animates it.</p>
-            <div class="progress danger active striped">
-              <div class="bar" style="width: 45%"></div>
-            </div>
+    </div>
+    <div class="span4">
+      <h3>Animated</h3>
+      <p>Takes the striped example and animates it.</p>
+      <div class="progress danger active striped">
+        <div class="bar" style="width: 45%"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress danger
      striped active"&gt;
@@ -1215,34 +1287,75 @@
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-        </div>
+    </div>
+  </div>
+
+  <h2>Options and browser support</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>Additional colors</h3>
+      <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
+      <ul>
+        <li><code>.info</code></li>
+        <li><code>.success</code></li>
+        <li><code>.danger</code></li>
+      </ul>
+      <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
+    </div>
+    <div class="span4">
+      <h3>Behavior</h3>
+      <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
+      <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
+    </div>
+    <div class="span4">
+      <h3>Browser support</h3>
+      <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
+      <p>Opera does not support animations at this time.</p>
+    </div>
+  </div>
+
+</section>
+
+
+
+
+
+<!-- Miscellaneous
+================================================== -->
+<section id="misc">
+  <div class="page-header">
+    <h1>Miscellaneous <small>Wells, badges, and close icon</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>Wells</h2>
+      <p>Use the well as a simple effect on an element to give it an inset effect.</p>
+      <div class="well">
+        Look, I'm in a well!
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="well"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+    </div><!--/span-->
+    <div class="span4" style="display: none;">
+      <h2>Badges</h2>
+      <p>Use a badge on an element for an unread count or as a simple indicator.</p>
+<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>Close icon</h2>
+      <p>Use the generic close icon for dismissing content like modals and alerts.</p>
+      <p><a class="close" style="float: none;">&times;</a></p>
+<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
+    </div><!--/span-->
+  </div><!--/row-->
+</section>
+
+
 
-        <h2>Options and browser support</h2>
-        <div class="row">
-          <div class="span4">
-            <h3>Additional colors</h3>
-            <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p>
-            <ul>
-              <li><code>.info</code></li>
-              <li><code>.success</code></li>
-              <li><code>.danger</code></li>
-            </ul>
-            <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
-          </div>
-          <div class="span4">
-            <h3>Behavior</h3>
-            <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
-            <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p>
-          </div>
-          <div class="span4">
-            <h3>Browser support</h3>
-            <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
-            <p>Opera does not support animations at this time.</p>
-          </div>
-        </div>
 
-      </section>
 
 
      <!-- Footer

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 23a6a37a26cba5a1e721028d274ed2e794ebc52b..ad27d2be886a6b395634ca9b2d51faeb9c62583d 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -323,59 +323,6 @@
     </tbody>
   </table>
 
-  <!-- Labels -->
-  <h2>{{_i}}Inline labels <small>for special attention</small>{{/i}}</h2>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 190px;">{{_i}}Labels{{/i}}</th>
-        <th>{{_i}}Markup{{/i}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <span class="label">{{_i}}Default{{/i}}</span>
-        </td>
-        <td>
-          <code>&lt;span class="label"&gt;{{_i}}Default{{/i}}&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label success">{{_i}}New{{/i}}</span>
-        </td>
-        <td>
-          <code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label warning">{{_i}}Warning{{/i}}</span>
-        </td>
-        <td>
-          <code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label important">{{_i}}Important{{/i}}</span>
-        </td>
-        <td>
-          <code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="label info">{{_i}}Info{{/i}}</span>
-        </td>
-        <td>
-          <code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
 </section>
 
 

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 48de1f8bf2af54b7d9e0df876519c7683fe6ac01..98e7c3f3f71bbcbc181232f485ece7dce9c3579d 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -5,15 +5,27 @@
   <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
   <div class="subnav">
     <ul class="nav pills">
-      <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
-      <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
-      <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
-      <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
-      <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
-      <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li><a href="#buttonGroups">Button groups</a></li>
+          <li><a href="#buttonDropdowns">Button dropdowns</a></li>
+        </ul>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Navigation{{/i}} <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
+          <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
+          <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
+          <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
+        </ul>
+      </li>
+      <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
+      <li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
     </ul>
   </div>
 </header>
@@ -862,6 +874,66 @@
 
 
 
+<!-- Labels
+================================================== -->
+<section id="labels">
+  <div class="page-header">
+    <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
+  </div>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th style="width: 190px;">{{_i}}Labels{{/i}}</th>
+        <th>{{_i}}Markup{{/i}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <span class="label">{{_i}}Default{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label"&gt;{{_i}}Default{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label success">{{_i}}New{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label warning">{{_i}}Warning{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label important">{{_i}}Important{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span class="label info">{{_i}}Info{{/i}}</span>
+        </td>
+        <td>
+          <code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
@@ -1103,32 +1175,32 @@
 
 <!-- Progress bars
 ================================================== -->
-      <section id="progress">
-        <div class="page-header">
-          <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
-        </div>
+<section id="progress">
+  <div class="page-header">
+    <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
+  </div>
 
-        <h2>{{_i}}Examples and markup{{/i}}</h2>
-        <div class="row">
-          <div class="span4">
-            <h3>{{_i}}Basic{{/i}}</h3>
-            <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
-            <div class="progress">
-              <div class="bar" style="width: 60%;"></div>
-            </div>
+  <h2>{{_i}}Examples and markup{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Basic{{/i}}</h3>
+      <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p>
+      <div class="progress">
+        <div class="bar" style="width: 60%;"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress"&gt;
   &lt;div class="bar"
        style="width: 60%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-          <div class="span4">
-            <h3>{{_i}}Striped{{/i}}</h3>
-            <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
-            <div class="progress info striped">
-              <div class="bar" style="width: 20%;"></div>
-            </div>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Striped{{/i}}</h3>
+      <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
+      <div class="progress info striped">
+        <div class="bar" style="width: 20%;"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress info
      striped"&gt;
@@ -1136,13 +1208,13 @@
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-          <div class="span4">
-            <h3>{{_i}}Animated{{/i}}</h3>
-            <p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
-            <div class="progress danger active striped">
-              <div class="bar" style="width: 45%"></div>
-            </div>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Animated{{/i}}</h3>
+      <p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
+      <div class="progress danger active striped">
+        <div class="bar" style="width: 45%"></div>
+      </div>
 <pre class="prettyprint linenums">
 &lt;div class="progress danger
      striped active"&gt;
@@ -1150,31 +1222,72 @@
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-          </div>
-        </div>
+    </div>
+  </div>
+
+  <h2>{{_i}}Options and browser support{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Additional colors{{/i}}</h3>
+      <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
+      <ul>
+        <li><code>.info</code></li>
+        <li><code>.success</code></li>
+        <li><code>.danger</code></li>
+      </ul>
+      <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Behavior{{/i}}</h3>
+      <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
+      <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Browser support{{/i}}</h3>
+      <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
+      <p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
+    </div>
+  </div>
+
+</section>
+
+
+
+
+
+<!-- Miscellaneous
+================================================== -->
+<section id="misc">
+  <div class="page-header">
+    <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Wells, badges, and close icon{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h2>{{_i}}Wells{{/i}}</h2>
+      <p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
+      <div class="well">
+        {{_i}}Look, I'm in a well!{{/i}}
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="well"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+    </div><!--/span-->
+    <div class="span4" style="display: none;">
+      <h2>{{_i}}Badges{{/i}}</h2>
+      <p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
+<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
+    </div><!--/span-->
+    <div class="span4">
+      <h2>{{_i}}Close icon{{/i}}</h2>
+      <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
+      <p><a class="close" style="float: none;">&times;</a></p>
+<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
+    </div><!--/span-->
+  </div><!--/row-->
+</section>
+
+
 
-        <h2>{{_i}}Options and browser support{{/i}}</h2>
-        <div class="row">
-          <div class="span4">
-            <h3>{{_i}}Additional colors{{/i}}</h3>
-            <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
-            <ul>
-              <li><code>.info</code></li>
-              <li><code>.success</code></li>
-              <li><code>.danger</code></li>
-            </ul>
-            <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
-          </div>
-          <div class="span4">
-            <h3>{{_i}}Behavior{{/i}}</h3>
-            <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
-            <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
-          </div>
-          <div class="span4">
-            <h3>{{_i}}Browser support{{/i}}</h3>
-            <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
-            <p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
-          </div>
-        </div>
 
-      </section>