From f587e81b7d72e47b16bf808c721c3dfe45ae1062 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:18:15 -0800 Subject: rewrite alert messages to use less code, combine the look of default and block messages, simplify docs --- docs/components.html | 131 +++++++++++++++++++++++---------------------------- 1 file changed, 60 insertions(+), 71 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fa3dc5a20..9fc987508 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1058,101 +1058,90 @@ ================================================== -->
-

Alerts & Errors Styles for success, warning, and error messages or alerts

+

Alerts Styles for success, warning, and error messages

- + +

Lightweight defaults

-
-

Basic alerts

-

.alert-message

-

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

-

Get the javascript »

+
+

Rewritten base class

+

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

+

Single alert message

+

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .block-alert.

+
+

Goes great with javascript

+

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

+

Get the plugin »

-
-
- × -

Holy guacamole! Best check yo self, you’re not looking too good.

-
-
- × -

Oh snap! Change this and that and try again.

-
-
+
+

Example alerts

+

Wrap your message and an optional close icon in a div with simple class.

+
× -

Well done! You successfully read this alert message.

+ Warning! Best check yo self, you’re not looking too good.
-
+
+<div class="alert">
+  <a class="close">×</a>
+  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
+</div>
+
+

Easily extend the standard alert message with two optional classes: .block-alert for more padding and text controls and .alert-heading for a matching heading.

+
× -

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

+

Warning!

+

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

- -

Example code

-<div class="alert-message warning">
+<div class="alert block-alert">
   <a class="close">×</a>
-  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+  <h4 class="alert-heading">Warning!</h4>
+  Best check yo self, you’re not...
 </div>
-
- -
+
- +

Contextual alternatives Add optional classes to change an alert's connotation

-
-

Block messages

-

<div class="alert-message block-message">

-

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

-

Get the javascript »

-
-
-
- × -

Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-
- Take this action Or do this -
-
-
+
+

Error or danger

+
× -

Oh snap! You got an error! Change this and that and try again.

-
    -
  • Duis mollis est non commodo luctus
    • -
  • Nisi erat porttitor ligula
    • -
  • Eget lacinia odio sem nec elit
    • -
-
- Take this action Or do this -
+ Oh snap! Change a few things up and try submitting again.
-
+
+<div class="alert error-alert">
+  ...
+</div>
+
+
+
+

Success

+
× -

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

-
- Take this action Or do this -
+ Well done! You successfully read this important alert message.
-
+
+<div class="alert success-alert">
+  ...
+</div>
+
+
+
+

Information

+
× -

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

-
- Take this action Or do this -
+ Heads up! This alert needs your attention, but it’s not super important.
- -

Example code

-<div class="alert-message block-message warning">
-  <a class="close">×</a>
-  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-  <div class="alert-actions">
-    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-  </div>
+<div class="alert info-alert">
+  ...
 </div>
-
+
+
-- cgit v1.2.3