Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

1 files changed, 71 insertions, 35 deletions

diff --git a/components.html b/components.html
index 13a8da2b3..289034060 100644
--- a/components.html
+++ b/components.html
@@ -50,7 +50,7 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="dropdowns-headers">Dropdown headers</h3>
-    <p>Add a header to break up label sections of actions in any dropdown menu.</p>
+    <p>Add a header to label sections of actions in any dropdown menu.</p>
     <div class="bs-example">
       <div class="dropdown clearfix">
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
@@ -155,12 +155,11 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="btn-groups-nested">Nested button groups</h3>
-    <p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
+    <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
     <div class="bs-example">
       <div class="btn-group">
         <button type="button" class="btn btn-default">1</button>
         <button type="button" class="btn btn-default">2</button>
-        <button type="button" class="btn btn-default">3</button>
 
         <div class="btn-group">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -170,11 +169,27 @@ base_url: "../"
           <ul class="dropdown-menu">
             <li><a href="#">Dropdown link</a></li>
             <li><a href="#">Dropdown link</a></li>
-            <li><a href="#">Dropdown link</a></li>
-           </ul>
+          </ul>
         </div>
       </div>
     </div>
+{% highlight html %}
+<div class="btn-group">
+  <button type="button" class="btn btn-default">1</button>
+  <button type="button" class="btn btn-default">2</button>
+
+  <div class="btn-group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+      Dropdown
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li><a href="#">Dropdown link</a></li>
+      <li><a href="#">Dropdown link</a></li>
+    </ul>
+  </div>
+</div>
+{% endhighlight %}
 
     <h3 id="btn-groups-vertical">Vertical button groups</h3>
     <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
@@ -231,7 +246,7 @@ base_url: "../"
     </div>
 
     <h3 id="btn-dropdowns-single">Single button dropdowns</h3>
-    <p>Turn a button into dropdown toggle with some basic markup changes.</p>
+    <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
     <div class="bs-example">
       <div class="btn-toolbar" style="margin-bottom: 10px;">
         <div class="btn-group">
@@ -385,7 +400,7 @@ base_url: "../"
     <div class="bs-example">
       <div class="btn-toolbar" style="margin: 0;">
         <div class="btn-group">
-          <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
             Large button <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
@@ -397,7 +412,7 @@ base_url: "../"
           </ul>
         </div><!-- /btn-group -->
         <div class="btn-group">
-          <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+          <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
             Small button <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
@@ -408,12 +423,24 @@ base_url: "../"
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+            Extra small button <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><!-- /btn-toolbar -->
     </div><!-- /example -->
 {% highlight html %}
 <!-- Large button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
     Large button <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -423,13 +450,22 @@ base_url: "../"
 
 <!-- Small button group -->
 <div class="btn-group">
-  <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
+  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
     Small button <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
     ...
   </ul>
 </div>
+
+<!-- Extra small button group -->
+<div class="btn-group">
+  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
+    Extra small button <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    ...
+  </ul>
 </div>
 {% endhighlight %}
 
@@ -535,8 +571,8 @@ base_url: "../"
     <p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
     <form class="bs-example bs-example-form">
       <div class="input-group">
-        <span class="input-group-addon input-large">@</span>
-        <input type="text" class="form-control input-large" placeholder="Username">
+        <span class="input-group-addon input-lg">@</span>
+        <input type="text" class="form-control input-lg" placeholder="Username">
       </div>
       <br>
       <div class="input-group">
@@ -545,14 +581,14 @@ base_url: "../"
       </div>
       <br>
       <div class="input-group">
-        <span class="input-group-addon input-small">@</span>
-        <input type="text" class="form-control input-small" placeholder="Username">
+        <span class="input-group-addon input-sm">@</span>
+        <input type="text" class="form-control input-sm" placeholder="Username">
       </div>
     </form>
 {% highlight html %}
 <div class="input-group">
-  <span class="input-group-addon input-large">@</span>
-  <input type="text" class="form-control input-large" placeholder="Username">
+  <span class="input-group-addon input-lg">@</span>
+  <input type="text" class="form-control input-lg" placeholder="Username">
 </div>
 
 <div class="input-group">
@@ -561,8 +597,8 @@ base_url: "../"
 </div>
 
 <div class="input-group">
-  <span class="input-group-addon input-small">@</span>
-  <input type="text" class="form-control input-small" placeholder="Username">
+  <span class="input-group-addon input-sm">@</span>
+  <input type="text" class="form-control input-sm" placeholder="Username">
 </div>
 {% endhighlight %}
 
@@ -1446,10 +1482,10 @@ body { padding-bottom: 70px; }
 
 
     <h3>Sizes</h3>
-    <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code> or <code>.pagination-small</code>  for additional sizes.</p>
+    <p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
     <div class="bs-example">
       <div>
-        <ul class="pagination pagination-large">
+        <ul class="pagination pagination-lg">
           <li><a href="#">&laquo;</a></li>
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
@@ -1471,7 +1507,7 @@ body { padding-bottom: 70px; }
         </ul>
       </div>
       <div>
-        <ul class="pagination pagination-small">
+        <ul class="pagination pagination-sm">
           <li><a href="#">&laquo;</a></li>
           <li><a href="#">1</a></li>
           <li><a href="#">2</a></li>
@@ -1483,9 +1519,9 @@ body { padding-bottom: 70px; }
       </div>
     </div>
 {% highlight html %}
-<ul class="pagination pagination-large">...</ul>
+<ul class="pagination pagination-lg">...</ul>
 <ul class="pagination pagination">...</ul>
-<ul class="pagination pagination-small">...</ul>
+<ul class="pagination pagination-sm">...</ul>
 {% endhighlight %}
 
 
@@ -1659,14 +1695,14 @@ body { padding-bottom: 70px; }
       <div class="jumbotron">
         <h1>Hello, world!</h1>
         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-        <p><a class="btn btn-primary btn-large">Learn more</a></p>
+        <p><a class="btn btn-primary btn-lg">Learn more</a></p>
       </div>
     </div>
 {% highlight html %}
 <div class="jumbotron">
   <h1>Hello, world!</h1>
   <p>...</p>
-  <p><a class="btn btn-primary btn-large">Learn more</a></p>
+  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
 </div>
 {% endhighlight %}
 
@@ -1694,7 +1730,7 @@ body { padding-bottom: 70px; }
     </div>
     <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
 
-    <h3>Default thumbnails</h3>
+    <h3 id="thumbnails-default">Default thumbnails</h3>
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-example">
       <div class="row">
@@ -1731,7 +1767,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
-    <h3>Custom content thumbnails</h3>
+    <h3 id="thumbnails-custom-content">Custom content thumbnails</h3>
     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
     <div class="bs-example">
       <div class="row">
@@ -1999,7 +2035,7 @@ body { padding-bottom: 70px; }
     </div>
     <p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>
 
-    <h3>Default example</h3>
+    <h3 id="media-default">Default media</h3>
     <p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
     <div class="bs-example">
       <div class="media">
@@ -2042,7 +2078,7 @@ body { padding-bottom: 70px; }
 </div>
 {% endhighlight %}
 
-    <h3>Media list</h3>
+    <h3 id="media-list">Media list</h3>
     <p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
     <div class="bs-example">
       <ul class="media-list">
@@ -2350,7 +2386,7 @@ body { padding-bottom: 70px; }
         <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 
         <!-- List group -->
-        <ul class="list-group list-group-flush">
+        <ul class="list-group">
           <li class="list-group-item">Cras justo odio</li>
           <li class="list-group-item">Dapibus ac facilisis in</li>
           <li class="list-group-item">Morbi leo risus</li>
@@ -2366,7 +2402,7 @@ body { padding-bottom: 70px; }
   <p>...</p>
 
   <!-- List group -->
-  <ul class="list-group list-group-flush">
+  <ul class="list-group">
     <li class="list-group-item">Cras justo odio</li>
     <li class="list-group-item">Dapibus ac facilisis in</li>
     <li class="list-group-item">Morbi leo risus</li>
@@ -2402,20 +2438,20 @@ body { padding-bottom: 70px; }
     <h3>Optional classes</h3>
     <p>Control padding and rounded corners with two optional modifier classes.</p>
     <div class="bs-example">
-      <div class="well well-large">
+      <div class="well well-lg">
         Look, I'm in a well!
       </div>
     </div>
 {% highlight html %}
-<div class="well well-large">...</div>
+<div class="well well-lg">...</div>
 {% endhighlight %}
 
     <div class="bs-example">
-      <div class="well well-small">
+      <div class="well well-sm">
         Look, I'm in a well!
       </div>
     </div>
 {% highlight html %}
-<div class="well well-small">...</div>
+<div class="well well-sm">...</div>
 {% endhighlight %}
   </div>