section: component id: alert description: 使用消息框引起用户注意 icon: icon-warning-sign filter: xiaoxikuang xxk --- # 消息框 消息框能够轻松展示一些需要引起用户注意的内容。 ## 不同感情色彩的消息框 这里提供了5中色彩的消息框用于不同场合。

你好

有一些内容你可能需要知道。

Hello

World.

太好了!

一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题，请立即处理吧。

```html
...
...
...
...
...
...
``` ## 使用图标 在消息框中使用醒目的合适的图标能更容易让用户接收。需要使`.alert`配合`.with-icon`参数一起使用。

你好

有一些内容你可能需要知道。

太好了!

一切已准备就绪。

Hello

World.

Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题，请立即处理吧。

```html
...
``` ## 使用反色主题

你好

有一些内容你可能需要知道。

Hello

World.

太好了!

一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题，请立即处理吧。

```html
...
...
...
...
...
...
``` ## 块级消息 块级消息框将没有外边距和边框圆角，适合用在页面顶部或者浮现在页面之上
太好了! 一切已准备就绪。
```html
...
``` ## 消息框中的链接 当消息框中包含链接时，推荐使用工具栏`.alert-link`来使得链接的样式与消息框类型保持一致。
你好! 有一些内容你可能需要知道。

Hello

World.

太好了! 一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。
不好了! 确实遇到了问题，请立即处理吧。
```html
注意消息框中的链接。
``` ## 可以关闭的消息框 可以用一个可选的`.alert-dismissable`和关闭按钮。
注意! 看起来遇到一些问题。

您可以点击右上角的 来关闭这条消息。

```html

您可以点击右上角的 来关闭这条消息。

```