bootstrap专栏 06.组件 01.警告提示框

 

# 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">&times;</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">&times;</button>
</div>
```
![警告提示框-组件实现](01.警告提示框-组件实现.png)