Documented .page-alert

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

docs/assets/css/docs.css

@@ -603,6 +603,14 @@ form.well {
   background-color: #fff;
 }
 
+/* Alerts
+-------------------------- */
+#page-alert-container {
+  position: relative;
+  border-top: 1px solid #DDDDDD;
+  padding-top: 5px;
+}
+
 /* Responsive table
 ------------------------- */
 .responsive-utilities th small {
@@ -667,7 +675,6 @@ form.well {
   border: 1px solid #d6e9c6;
 }
 
-
 /* Responsive Docs
 -------------------------------------------------- */
 @media (max-width: 480px) {
@@ -872,6 +879,11 @@ form.well {
     margin: 5px;
   }
 
+  /* Page alert is show as normal alert */
+  #page-alert-container {
+    border-top-width: 0px;
+    padding: 0;
+  }
 }
 
 

docs/templates/pages/components.mustache

@@ -1717,6 +1717,33 @@
     </div>
   </div>
 
+  <h2>{{_i}}Page alerts{{/i}} <small>{{_i}}Show an alert on top of your page.{{/i}}</small></h2>
+  <div class="row">
+    <div class="span4">
+        <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>
+<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>
+    </div>
+    <div class="span8">
+      <div id="page-alert-container">
+        <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>
+        <h5>Ultricies vehicula</h5>
+        <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>
+    </div>
+  </div>
 </section>
 
 

docs/templates/pages/index.mustache

@@ -63,6 +63,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";