Bootstrap教程(15)--警告框、弹出框、工具提示框

客官°小女子只卖身不卖艺 2022-11-01 00:59 485阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 警告框
 *   *  2.1 普通警告框
     *  2.2 可关闭警告框
 *  3. 弹出框
 *   *  3.1 弹出框初始化
     *  3.2 弹出框显示
 *  4. 工具提示框
 *   *  4.1 工具提示框初始化
     *  4.2 工具提示框显示
 *  5. 小结

# 1. 概述 #

本篇介绍的几种显示提示信息的方式，这几种方式并不常用，大家了解即可。

# 2. 警告框 #

## 2.1 普通警告框 ##

警告框用来显示一些希望让用户注意到的内容，例如上传文件时的主要注意的警示信息，或者更加严重的上传失败的提示信息。

警告框有4中具体样式类，我们通过一个示例来演示下：

<div class="col-md-12">
                    <div class="alert alert-info">
                        alert-info警告框
                    </div>
                    <div class="alert alert-success">
                        alert-success警告框
                    </div>
                    <div class="alert alert-warning">
                        alert-warning警告框
                    </div>
                    <div class="alert alert-danger">
                        alert-danger警告框
                    </div>
                </div>

具体效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

## 2.2 可关闭警告框 ##

通过为警告框添加`alert-dismissible`，然后为其添加带有\`data-dismiss="alert"属性的关闭按钮，即可创建可关闭的警告框。

<div class="col-md-12">
                    <div class="alert alert-info alert-dismissible">
                        <button type="button" data-dismiss="alert">关闭</button>
                        可关闭警告框
                    </div>
                </div>

效果如下：  
![在这里插入图片描述][20210223163232128.png_pic_center]  
这种关闭按钮比较丑陋，可以通过添加`close`样式类，将按钮设置为符合气质的关闭按钮样式，同时将关闭文字改为关闭图标。

<div class="col-md-12">
                    <div class="alert alert-info alert-dismissible">
                        <button type="button" data-dismiss="alert" class="close"><span class="glyphicon glyphicon-remove"></span></button>
                        可关闭警告框
                    </div>
                </div>

效果如下：  
![在这里插入图片描述][20210223163638425.png_pic_center]

# 3. 弹出框 #

## 3.1 弹出框初始化 ##

弹出框属于Bootstrap提供的JS插件，需要在页面加载完成后手动对其进行初始化，否则无法正常使用。

## 3.2 弹出框显示 ##

显示框一般在点击按钮时显示，通过为按钮添加`data-toggle="popover"`属性，即可在点击按钮后显示弹出框。弹出框的标题和内容分别通过`title`和`data-content`属性设置，代码如下：

效果如下：  
![在这里插入图片描述][20210223164647571.png_pic_center]  
再次点击按钮，弹出框即可关闭。

# 4. 工具提示框 #

工具提示框与弹出框非常类似，只是说不用点击按钮，鼠标指向目标时，工具提示框即可显示。

## 4.1 工具提示框初始化 ##

工具提示框同样需要初始化

## 4.2 工具提示框显示 ##

工具提示框显示方式与弹出框也类似，直接看代码：

效果如下，注意工具提示框不需要点击按钮，鼠标移动到按钮上方即可显示。  
![在这里插入图片描述][20210223165511567.png_pic_center]

# 5. 小结 #

本篇提到的警告框、弹出框、工具提示框主要是提供一些提示/警告/说明信息，平时用的也不多，了解即可。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/68bb121545824536a3d76fc673519bd6.png
[20210223163232128.png_pic_center]: /images/20221024/4650c060c17044b7af13f0236f1e9fce.png
[20210223163638425.png_pic_center]: /images/20221024/dd7914eed1144669bd8e0b72b19098e0.png
[20210223164647571.png_pic_center]: /images/20221024/cbaaa62fa5a7491183233839d528b6a9.png
[20210223165511567.png_pic_center]: /images/20221024/0ce98952d392419d850b22defd5e7bc1.png