# 01.警告提示框
[toc]{type: "ol", level: [3]}
### 设置样式
- alert-success
> 设置背景或字体颜色
```html
<!--使背景色为浅绿色-->
<div class="alert alert-success">
前往地址:
<!--使字体颜色与背景色协调一致-->
<a href="https://www.baidu.com/" class="alert-success">百度一下,你就知道</a>
</div>
```
![警告提示框-设置样式](01.警告提示框-设置样式.png)
### JQ实现
```html
<div class="alert alert-danger" id="d1">
你确定要关闭吗?
<button class="close" id="d2">×</button>
</div>
```
```js
// 当点击d2时,关闭d1
$('#d2').click(function (){
$('#d1').alert('close')
})
```
![警告提示框-JQ实现](01.警告提示框-JQ实现.png)
### 组件实现
- fade
> 淡入淡出效果
- data-dismiss
> 使其指向的元素消失
```html
<div class="alert alert-warning show fade">
你确定要关闭吗?
<button class="close" data-dismiss="alert">×</button>
</div>
```
![警告提示框-组件实现](01.警告提示框-组件实现.png)