甲爪联盟讲解：网站中常见到的提示框设计

提示框用于给客户提示输出消息，通常用于信息反馈。Bootstrap中提供了一组灵活的提示框机制。在以往的网页制作过程中我们经常使用alert来提示输出消息，但是这样并不是太友好，而且界面也不是很漂亮，Bootstrap改善了这一点。
Bootstrap中的提示框分为四种。
class="alert-success"，成功提示框：告诉用户操作成功，呈现的背景、边框和文本都绿色。
class="alert-info"，信息提示框：呈现的背景、边框和文本都是浅蓝色。
class="alert-warning"，警告提示框，呈现的背景、边框、文本都是浅黄色。
class="alert-danger"，错误提示框：呈现的背景、边框和文本都是浅红色。
这与前面章节讲到的按钮（button）中的几种主题色基本类似，使用方式也差不多。以上四种样式的使用都不是基于class="alert"，代码如下：

上述代码定义了四种不同的提示框，这是Bootstrap中提示框的最基本的用法，页面运行效果如图所示。上面的代码提示框是包含在网格系统的列中的，提示框的宽度默认占据容器的100%。

上面的提示框没有任何功能作用，我们可以在提示框上添加一个按钮用于关闭提示框，这个在Bootstrap中也是支持的。弹出框的关闭是依赖js插件的，这个会在后续的章节中讲解。要想实现提示框的关闭功能，只需以下几个步骤即可，代码如下：
在提示框class="alert"中添加一个按钮。
在提示框class="alert"上添加"alert-dismissable"样式类。
在新增按钮上添加样式class="close"，用于显示关闭图标。
在新增按钮上新增属性data-dismiss="alert“。