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

提示框用于给客户提示输出消息，一般用于信息反馈。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转载请注明！