rearrange some of the docs on buttons to show examples of all possible renderings along with code snippets and note about usage; also fix the portrait tablet media query

5 files changed, 49 insertions, 37 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index c7a6d854c..c474e5f0c 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 4b032cdb5..4d464ea88 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -84,7 +84,7 @@
     position: static;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .container {
     width: auto;
     padding: 0 20px;
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3833da611..188b97036 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1668,11 +1668,13 @@ table .span12 {
 .btn {
   display: inline-block;
   padding: 4px 10px 4px;
+  margin-bottom: 0;
   font-size: 13px;
   line-height: 18px;
   color: #333333;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
   background-color: #fafafa;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
diff --git a/docs/base-css.html b/docs/base-css.html
index b345a8434..a7dcbff19 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1289,18 +1289,11 @@ For example, <code>section</code> should be wrapped as inline.
     <div class="span4">
       <h3>Buttons for actions</h3>
       <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
+      <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
+      <h3>Cross browser compatibility</h3>
+      <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
     </div>
     <div class="span4">
-      <h3>For anchors and forms</h3>
-      <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
-    </div>
-    <div class="span4">
-      <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="span4">
       <h3>Multiple sizes</h3>
       <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.</p>
       <p>
@@ -1311,8 +1304,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <a href="#" class="btn btn-small btn-primary">Primary action</a>
         <a href="#" class="btn btn-small">Action</a>
       </p>
-    </div>
-    <div class="span4">
+      <br>
       <h3>Disabled state</h3>
       <p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
       <p>
@@ -1325,14 +1317,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
       </p>
     </div>
     <div class="span4">
-      <h3>Cross browser compatibility</h3>
-      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
-      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+      <h3>One class, multiple tags</h3>
+      <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
+<form>
+<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">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+  Button
+&lt;/button&gt;
+&lt;input class="btn" type="button" 
+         value="Input"&gt;
+&lt;input class="btn" type="submit" 
+         value="Submit"&gt;
+</pre>
+      <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
     </div>
   </div>
-
-  <br>
-
 </section>
 
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c23444a07..1b8307b92 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1213,18 +1213,11 @@
     <div class="span4">
       <h3>{{_i}}Buttons for actions{{/i}}</h3>
       <p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
+      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <h3>{{_i}}Cross browser compatibility{{/i}}</h3>
+      <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
     </div>
     <div class="span4">
-      <h3>{{_i}}For anchors and forms{{/i}}</h3>
-      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.{{/i}}</p>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="span4">
       <h3>{{_i}}Multiple sizes{{/i}}</h3>
       <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.{{/i}}</p>
       <p>
@@ -1235,8 +1228,7 @@
         <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
         <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
       </p>
-    </div>
-    <div class="span4">
+      <br>
       <h3>{{_i}}Disabled state{{/i}}</h3>
       <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>
@@ -1249,14 +1241,27 @@
       </p>
     </div>
     <div class="span4">
-      <h3>Cross browser compatibility</h3>
-      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
-      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+      <h3>{{_i}}One class, multiple tags{{/i}}</h3>
+      <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
+<form>
+<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}}">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+  {{_i}}Button{{/i}}
+&lt;/button&gt;
+&lt;input class="btn" type="button" 
+         value="{{_i}}Input{{/i}}"&gt;
+&lt;input class="btn" type="submit" 
+         value="{{_i}}Submit{{/i}}"&gt;
+</pre>
+      <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
     </div>
   </div>
-
-  <br>
-
 </section>