所有警告框的基本样式（风格、字体大小、内边距、边框等…） ，蓝狮注册登陆因为我们通常会定义一个通用alert样式，类似于这样的

.alert{
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 12px;
}
然后定义不同警告框单独风格：

.alert-info{
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}

.alert-success{
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}

.alert-warning{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}

.alert-danger{
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
然后这样使用：

信息！请注意这个信息。

成功！很好地完成了提交。

警告！请不要提交。

错误！请进行一些更改。

最后的效果：


使用继承@extend进行改进
基本样式我们没有变，主要是各个警告框单独的样式