Adjust info callout, add callouts to docs

* Adjust the background-color of bs-callout-info to match danger and
warning in tone
* Convert all the callouts
* Change some callouts to info/warning
* Add new callout

1 files changed, 30 insertions, 13 deletions

diff --git a/docs/components.html b/docs/components.html
index 55f27cbc3..634b8bde0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -185,8 +185,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 
     </ul>
 
-    <h3>Glyphicons attribution</h3>
-    <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
+    <div class="bs-callout-info">
+      <h4>Glyphicons attribution</h4>
+      <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
+    </div>
 
 
     <h2 id="icons-how-to">How to use</h2>
@@ -195,7 +197,10 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}
     <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
-    <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
+    <div class="bs-callout bs-callout-warning">
+      <h4>Readability</h4>
+      <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
+    </div>
 
 
     <h2 id="icons-examples">Icon examples</h2>
@@ -225,7 +230,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 </div>
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-warning">
       <h4>Accessibility</h4>
       <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
     </div>
@@ -566,7 +571,13 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 {% endhighlight %}
 
     <h3 id="btn-groups-justified">Justified button groups</h3>
-    <p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
+    <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
+    
+    <div class="bs-callout bs-callout-warning">
+      <h4>Element-specific usage</h4>
+      <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
+    </div>
+    
     <div class="bs-example">
       <div class="btn-group btn-group-justified">
         <a href="#" class="btn btn-default">Left</a>
@@ -592,7 +603,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
     </div>
     <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Plugin dependency</h4>
       <p>Button dropdowns require the <a href="#dropdown-plugin">dropdown plugin</a> to be included in your version of Bootstrap.</p>
     </div>
@@ -929,7 +940,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
     <h3 id="nav-disabled-links">Disabled state</h3>
     <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-warning">
       <h4>Link functionality not impacted</h4>
       <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
     </div>
@@ -1213,7 +1224,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
 </div>
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
 {% highlight css %}
@@ -1242,7 +1253,7 @@ body { padding-top: 70px; }
 </div>
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Body padding required</h4>
       <p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
 {% highlight css %}
@@ -1343,7 +1354,7 @@ body { padding-bottom: 70px; }
 </div><!-- /.navbar -->
 {% endhighlight %}
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Plugin dependency</h4>
       <p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
     </div>
@@ -1660,7 +1671,7 @@ body { padding-bottom: 70px; }
     <h4>Self collapsing</h4>
     <p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
     </div>
@@ -1854,7 +1865,13 @@ body { padding-bottom: 70px; }
     <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./docs/#js-alerts">alerts jQuery plugin</a>.</p>
 
     <h3 id="alerts-default">Default alert</h3>
-    <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
+    <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
+
+    <div class="bs-callout bs-callout-warning">
+      <h4>Ensure proper behavior across all devices</h4>
+      <p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
+    </div>
+
     <div class="bs-example">
       <div class="alert">
         <button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -1947,7 +1964,7 @@ body { padding-bottom: 70px; }
     </div>
     <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
 
-    <div class="bs-callout">
+    <div class="bs-callout bs-callout-danger">
       <h4>Cross-browser compatibility</h4>
       <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
     </div>