参考 http://www.bootcss.com/javascript.html#alerts
不过这里没有动态alert的例子
于是再参考http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet"> <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="../js/bootstrap.js" type="text/javascript"></script> </head> <body> <div style="height:200px;"></div> <!-- alert-error 是红色警告 --> <div class="alert alert-block alert-error fade in" style="height:0px"> <button type="button" class="close" data-dismiss="alert">×</button> <h4 class="alert-heading">Error!</h4> <p>Error!Error!Error!Error!Error!Error!Error!Error! </p> <p> <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#" data-dismiss="alert" >Or do this</a> </p> </div> <div style="padding:50px;margin:50px;"></div> <input type = "button" id = "clickme" value="Click me!"/> <div id = "alert_placeholder"></div> <script type="text/javascript"> $(function(){ //$(".alert").animate({height:"121px"},1500); $(".alert").alert(); }); </script> <script> bootstrap_alert = function() {} bootstrap_alert.warning = function(message) { $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') } $('#clickme').on('click', function() { bootstrap_alert.warning('Your text goes here'); }); </script> </body> </html>