使用 Twitter Bootstrap 解除警报不起作用？答案

【问题标题】：Alert dismissing using Twitter Bootstrap is not working?使用 Twitter Bootstrap 解除警报不起作用？
【发布时间】：2014-05-06 19:27:36
【问题描述】：

我正在使用谷歌浏览器。
使用Twitter Bootstrap，我想添加一个简单的警报，不幸的是alert 在按下x 时不会关闭！

这是我基于 alert 文档的代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>    
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>      
  </body>
</html>

我也试过了：

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>    
    <div class="alert">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>      
    </body>
  </html>

缺少什么让它消失？

【问题讨论】：

并不奇怪，因为你完全忘记了 bootstrap.js :)
它有效 :) .... 谢谢 :) .... 你可以把它作为答案，这样我就可以增加你的分数 :)
没关系，只是一个典型的错误 - 总是发生 :)

标签： twitter-bootstrap alert dismiss

【解决方案1】：

感谢davidkonrad 的评论。
解决方案很简单，添加：

    <script src="js/bootstrap.min.js"></script>

【讨论】：

另一个原因可能是：未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery。然后应该添加%script{ :src => '//code.jquery.com/jquery.js' }

【解决方案2】：

我写了一个small, customisable, jquery plugin，它会以最少的麻烦注入一个格式正确的 Bootstrap 3 警报（根据需要有或没有关闭按钮），并允许您在关闭框后轻松重新生成它。

有关用法、测试和示例，请参阅 https://github.com/davesag/jquery-bs3Alert。

【讨论】：