# /// Alerts and Bars

# Alerts Styles for success, warning, and error messages

## /// Lightweight defaults

### 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 outer `<div>`.

### Single alert message

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

### Goes great with javascript

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

Get the plugin »

### Example alerts

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

× Warning! Best check yo self, you're not looking too good.

    <div class="alert">
      <a class="close" data-dismiss="alert">×</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: `.alert-block` for more padding and text controls and `.alert-heading` for a matching heading.

×

#### 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.

    <div class="alert alert-block">
      <a class="close" data-dismiss="alert">×</a>
      <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

### Error or danger

× Oh snap! Change a few things up and try submitting again.

    <div class="alert alert-error">
      ...
    </div>

### Success

× Well done! You successfully read this important alert message.

    <div class="alert alert-success">
      ...
    </div>

### Information

× Heads up! This alert needs your attention, but it's not super important.

    <div class="alert alert-info">
      ...
    </div>

# Progress bars For loading, redirecting, or action status

## /// Examples and markup

### Basic

Default progress bar with a vertical gradient.

    <div class="progress">
      <div class="bar"
           style="width: 60%;"></div>
    </div>

### Striped

Uses a gradient to create a striped effect (no IE).

    <div class="progress progress-striped">
      <div class="bar"
           style="width: 20%;"></div>
    </div>

### Animated

Takes the striped example and animates it (no IE).

    <div class="progress progress-striped
         active">
      <div class="bar"
           style="width: 40%;"></div>
    </div>

## /// Options and browser support

### Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

### Striped bars

Similar to the solid colors, we have varied striped progress bars.

### Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the `.active` class, your `.progress-striped` progress bars will animate the stripes left to right.

### Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Opera and IE do not support animations at this time.

# Miscellaneous Lightweight utility components

## /// Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

    <div class="well">
      ...
    </div>

## /// Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

    <a class="close">&times;</a>

##### /// Our Twitter Feed

Find out what's happening, right now, with the people and organizations you care about.

© Copyright © 2013.Company name All rights reserved.网页模板
Home / Features / Pages / Portfolio / Blog / Typography / Contact