3.15 Bootstrap Alerts

---

Bootstrap warnings (Alerts)

This chapter will explain alerts (Alerts) and the class provided by Bootstrap for alerts. Alerts provide the user with a way to define the style of the message. They provide contextual information feedback for typical user actions.

You can add an optional close button to the alert box. To create an inline dismissable alert box, use the Alerts jQuery plugin.

You can add a basic alert box by creating a <div> and adding to it an .alert class and one of four context classes (ie .alert-success, .alert-info, .alert-warning, .alert-danger). The following example demonstrates this:

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

The result looks like this:

Dismissal Alerts

The steps to create a Dismissal Alert are as follows:

• Add a basic alert box by creating a <div> and adding to it an .alert class and one of four context classes (namely .alert-success, .alert-info, .alert-warning, .alert-danger).
• Also add optional .alert-dismissable to the above <div> class.
• Add a close button.

The following example demonstrates this:

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    错误！请进行一些更改。
</div>

Note: Make sure to use an element with data-dismiss="alert" data attribute.

The result looks like this:

Links in Alerts

The steps to create a link in Alerts are as follows:

• Add a basic alert box by creating a <div> and adding to it an .alert class and one of four context classes (namely .alert-success, .alert-info, .alert-warning, .alert-danger).
• Use the .alert-link entity class to quickly provide links with matching colors.

<div class="alert alert-success">
    <a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">信息！请注意这个信息。</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">警告！请不要提交。</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">错误！请进行一些更改。</a>
</div>

The result looks like this: