Merge branch '3.0.0-wip' into bs3_homepage

Conflicts:
	customize.html
	dist/css/bootstrap.min.css

components.html

@@ -2167,22 +2167,14 @@ body { padding-bottom: 70px; }
     </div>
     <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="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
 
-    <h2 id="alerts-default">Default alert</h2>
-    <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
+    <h2 id="alerts-examples">Examples</h2>
+    <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
 
-    <div class="bs-example">
-      <div class="alert">
-        <strong>Warning!</strong> Best check yo self, you're not looking too good.
-      </div>
+    <div class="bs-callout bs-callout-info">
+      <h4>No default class</h4>
+      <p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
     </div>
-{% highlight html %}
-<div class="alert">
-  <strong>Warning!</strong> Best check yo self, you're not looking too good.
-</div>
-{% endhighlight %}
 
-    <h2 id="alerts-alternatives">Contextual alternatives</h2>
-    <p>Add optional classes to change an alert's connotation.</p>
     <div class="bs-example">
       <div class="alert alert-success">
         <strong>Well done!</strong> You successfully read this important alert message.
@@ -2190,6 +2182,9 @@ body { padding-bottom: 70px; }
       <div class="alert alert-info">
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
+      <div class="alert alert-warning">
+        <strong>Warning!</strong> Best check yo self, you're not looking too good.
+      </div>
       <div class="alert alert-danger">
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
@@ -2197,6 +2192,7 @@ body { padding-bottom: 70px; }
 {% highlight html %}
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
+<div class="alert alert-warning">...</div>
 <div class="alert alert-danger">...</div>
 {% endhighlight %}
 
@@ -2634,14 +2630,14 @@ body { padding-bottom: 70px; }
     <h3 id="panels-basic">Basic example</h3>
     <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
     <div class="bs-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-body">
           Basic panel example
         </div>
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-body">
     Basic panel example
   </div>
@@ -2651,13 +2647,13 @@ body { padding-bottom: 70px; }
     <h3 id="panels-heading">Panel with heading</h3>
     <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
     <div class="bs-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-heading">Panel heading without title</div>
         <div class="panel-body">
           Panel content
         </div>
       </div>
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-heading">
           <h3 class="panel-title">Panel title</h3>
         </div>
@@ -2667,14 +2663,14 @@ body { padding-bottom: 70px; }
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-heading">Panel heading without title</div>
   <div class="panel-body">
     Panel content
   </div>
 </div>
 
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">Panel title</h3>
   </div>
@@ -2687,7 +2683,7 @@ body { padding-bottom: 70px; }
     <h3 id="panels-footer">Panel with footer</h3>
     <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
     <div class="bs-example">
-      <div class="panel">
+      <div class="panel panel-default">
         <div class="panel-body">
           Panel content
         </div>
@@ -2695,7 +2691,7 @@ body { padding-bottom: 70px; }
       </div>
     </div>
 {% highlight html %}
-<div class="panel">
+<div class="panel panel-default">
   <div class="panel-body">
     Panel content
   </div>