Sidenotes instead of alerts

* I propose: make the docs rely more heavily on the new design language,
replace alerts (not the .alert examples) by sidenotes.
* Remove alert-heading class, which no longer exists in CSS.

diff --git a/docs/docs.html b/docs/docs.html
index d668999e608845b025a66a8017184d1ca40d3c56..6d6888e040fe77b60482e48e002f5c686bff738e 100644 (file)
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2561,10 +2561,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div>
 {% endhighlight %}
 
-    <p class="alert alert-info">
-      <strong>Heads up!</strong>
-      Using icons without any additional content means the icons are not represented to screen reader users.
-    </p>
+    <div class="bs-docs-sidenote">
+      <p><strong>Accessibility</strong></p>
+      <p>Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.</p>
+    </div>
 
     <h5>Dropdown in a button group</h5>
     <div class="bs-docs-example">
@@ -3602,8 +3602,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 </div><!-- /.navbar -->
 {% endhighlight %}
 
-    <div class="alert alert-info">
-      <strong>Heads up!</strong> The responsive navbar requires the <a href="#collapse">collapse plugin</a>.
+    <div class="bs-docs-sidenote">
+      <p><strong>Plugin dependency</strong></p>
+      <p>The responsive navbar requires the <a href="#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
     </div>
 
 
@@ -5288,9 +5289,9 @@ $('.dropdown-toggle').dropdown()
 $('.navbar').scrollspy()
 {% endhighlight %}
 
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+          <div class="bs-docs-sidenote">
+            <p><strong>Resolvable ID targets required</strong></p>
+            <p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
           </div>
 
           <h3>Methods</h3>
@@ -5577,9 +5578,9 @@ $('#example').tooltip(options)
              </tr>
             </tbody>
           </table>
-          <div class="alert alert-info">
-            <strong>Heads up!</strong>
-            Options for individual tooltips can alternatively be specified through the use of data attributes.
+          <div class="bs-docs-sidenote">
+            <p><strong>Data attributes for individual tooltips</strong></p>
+            <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
           </div>
 
           <h3>Markup</h3>
@@ -5757,9 +5758,9 @@ $('#example').tooltip(options)
            </tr>
           </tbody>
         </table>
-        <div class="alert alert-info">
-          <strong>Heads up!</strong>
-          Options for individual popovers can alternatively be specified through the use of data attributes.
+        <div class="bs-docs-sidenote">
+          <p><strong>Data attributes for individual popovers</strong>
+          <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
         </div>
 
         <h3>Markup</h3>
@@ -5808,7 +5809,7 @@ $('#example').tooltip(options)
         <div class="bs-docs-example">
           <div class="alert alert-block alert-error fade in">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
-            <h4 class="alert-heading">Oh snap! You got an error!</h4>
+            <h4>Oh snap! You got an error!</h4>
             <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <p>
               <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
@@ -5977,9 +5978,9 @@ $('.nav-tabs').button()
 
             <h4>$().button('toggle')</h4>
             <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
+            <div class="bs-docs-sidenote">
+              <p><strong>Auto toggling</strong></p>
+              <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
             </div>
 {% highlight html linenos %}
 <button type="button" class="btn" data-toggle="button">...</button>
@@ -5992,9 +5993,9 @@ $('.nav-tabs').button()
 <button type="button" class="btn" data-loading-text="loading stuff...">...</button>
 {% endhighlight %}
 
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              <a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.
+            <div class="bs-docs-sidenote">
+              <p><strong>Cross-browser compatibility</strong></p>
+              <p><a href="https://github.com/twitter/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
             </div>
 
             <h4>$().button('reset')</h4>
@@ -6393,6 +6394,7 @@ $('.carousel').carousel({
             <h4>.carousel('pause')</h4>
             <p>Stops the carousel from cycling through items.</p>
 
+
             <h4>.carousel(number)</h4>
             <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
 
@@ -6544,9 +6546,9 @@ $('.typeahead').typeahead()
 <div data-spy="affix" data-offset-top="200">...</div>
 {% endhighlight %}
 
-            <div class="alert alert-info">
-              <strong>Heads up!</strong>
-              You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
+            <div class="bs-docs-sidenote">
+              <p><strong>Heads up!</strong></p>
+              <p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.</p>
             </div>
 
             <h3>Via JavaScript</h3>