当我第一次在Bootstrap中看到这些alert 时，我以为它们会像模态窗口一样，下降或淡入，然后在关闭时淡出.但它们似乎总是可见的.我想我可以让他们坐在我的应用程序上面的一层，并管理显示他们，但我想知道功能是否内置？
thanks!
Edit, what I have so far:
<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
<a class="close" href="#">×</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
我强烈反对前面提到的大多数答案.
Short answer:
Omit the "in" class and add it using jQuery to fade it in.
See this jsfiddle for an example that fades in alert after 3 seconds http://jsfiddle.net/QAz2U/3/
Long answer:
Although it is true bootstrap doesn't natively support fading in alerts, most answers here use the jQuery fade function, which uses JavaScript to animate (fade) the element. The big advantage of this is cross browser compatibility. The downside is performance (see also: jQuery to call CSS3 fade animation?).
Bootstrap使用CSS3转换，这有更好的性能.这对移动设备很重要:
Bootstraps CSS to fade the alert:
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
为什么我认为这场演出如此重要？使用旧浏览器和硬件的人可能会在使用jQuery时遇到不稳定的过渡.褪色().使用现代浏览器的旧硬件也是如此.使用CSS3转换，使用现代浏览器的人即使使用较旧的硬件也会获得平滑的动画，而使用不支持CSS转换的较旧浏览器的人会立即看到元素弹出，我认为这比起伏的动画更好.
我来到这里是为了寻找与上面相同的答案:在 bootstrap alert 中淡入淡出.在深入研究Bootstrap的代码和CSS之后，答案相当简单.不要将"in"类添加到您的alert 中.当您想要淡入alert 时，可以使用jQuery添加此功能.
HTML (notice there is NO in class!)
<div id="myAlert" class="alert success fade" data-alert="alert">
<!-- rest of alert code goes here -->
</div>
Javascript:
function showAlert(){
$("#myAlert").addClass("in")
}
Calling the function above function adds the "in" class and fades in the alert using CSS3 transitions :-)
另请参阅此jsfiddle获取使用超时的示例(感谢John Lehmann！):http://jsfiddle.net/QAz2U/3/