Documented .page-alert

Added page alert to jasny/bootstrap.less and jasny/responsive.less

docs/assets/css/docs.css

@@ -702,6 +702,14 @@ form.bs-docs-example {
   margin: 20px;
 }
 
+/* Alerts
+-------------------------- */
+#page-alert-container {
+  position: relative;
+  border-top: 1px solid #DDDDDD;
+  padding-top: 5px;
+}
+
 
 
 /* Responsive docs
@@ -1038,6 +1046,12 @@ form.bs-docs-example {
     word-wrap: break-word;
     word-break: break-all;
   }
+  
+  /* Page alert is show as normal alert */
+  #page-alert-container {
+    border-top-width: 0px;
+    padding: 0;
+  }
 
   /* Modal example */
   .modal-example .modal {

docs/templates/pages/components.mustache

@@ -2011,6 +2011,26 @@
 </div>
 </pre>
 
+          <h3>{{_i}}Page alerts{{/i}}</h3>
+          <p>{{_i}}Know those nice little alerts after you save your profile? With <code>.page-alert</code> the alert will be shown on top op your page.{{/i}}</p>
+          <div id="page-alert-container" class="bs-docs-example">
+            <div class="page-alert">
+              <div class="alert alert-success">
+                <a class="close">×</a>
+                <strong>{{_i}}Success!{{/i}}</strong> {{_i}}Your profile information has been saved.{{/i}}
+              </div>
+            </div>
+            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;body&gt;
+  &lt;div class="navbar"&gt; ... &lt;/div&gt;
+  &lt;div class="page-alert"&gt;
+    &lt;div class="alert"&gt;
+      ...
+    &lt;/div&gt;
+  &lt;/div&gt;
+</pre>
         </section>
 
 

docs/templates/pages/index.mustache

@@ -53,6 +53,10 @@
         <p>{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}</p>
         <p>{{_i}}Because these icons are a font, they can be styled just like text.{{/i}}</p>
       </div>
+      <div class="span3">
+        <h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
+        <p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
+      </div>
     </div>
     <div class="row">
       <div class="span3">

less/jasny/bootstrap.less

@@ -20,6 +20,7 @@
 // Components: Buttons & Alerts
 @import "action-links.less";
 @import "iconic.less";
+@import "page-alert.less";
 
 // Components: Nav
 @import "navs-tabbable.less";

less/jasny/responsive.less

@@ -14,3 +14,6 @@
 
 // Base CSS
 @import "forms.responsive.less";
+
+// Components: Buttons & Alerts
+@import "page-alert.responsive.less";