警告框（alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
用法
您可以有以下两种方式启用警告框的可取消（dismissal）功能：
通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss=”alert”，就会自动为警告框添加关闭功能。
默认用法
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;}.alert h4 { margin-top: 0; color: inherit;}.alert .alert-link { font-weight: bold;}.alert > p,.alert > ul { margin-bottom: 0;}.alert > p + p { margin-top: 5px;}
登录后复制
警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您使用一种有意义的警告类。目前提供了成功、消息、警告和危险
1、成功警示框：告诉用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色
基类成功信息提示警告错误
登录后复制
可关闭
在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class=”close”类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：data-dismiss=”alert”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）
.alert-dismissable { padding-right: 35px;}.alert-dismissable .close { position: relative; top: -2px; right: -21px; color: inherit;}
登录后复制
链接
有时可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示
.alert .alert-link { font-weight: bold;}.alert-success .alert-link { color: #2b542c;}.alert-info .alert-link { color: #245269;}.alert-warning .alert-link { color: #66512c;}.alert-danger .alert-link { color: #843534;}
登录后复制
成功 详情查看信息提示 详情查看警告 详情查看错误 详情查看
登录后复制
以上就是Bootstrap警告框的详细介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3196078.html
