提示框用于给客户提示输出消息，通常用于信息反馈。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“。

上述代码中定义了两个提示框，其中第一个提示框中添加了“关闭”按钮，当我们单击“关闭”按钮时提示框会消失。其中“&times”；是显示一个“（”型符号，页面运行效果如图所示。

我们可以在提示框中加入一个链接用于提示跳转到另外一个页面，并在Bootstrap框架中对提示框里的链接样式做一个高亮显示处理，为不同类型的提示框内的链接进行加粗处理，并且使颜色相应加深，代码如下：

代码中定义了两个提示框，分别添加了“帮助”链接，运行效果如图8-14所示，链接文本内容高亮显示。

本文由甲爪cpa广告联盟整理编辑！http://www.jiazhua.com转载请注明！