twitter-bootstrap Bootstrap - 警报错误不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22485570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - alert-error doesn't work
提问by duper51
I'm writing a web-script to handle VPS Creation and Destruction. On the admin page, I use Twitter Bootstrap to show an alert for success and failure messages. Here lies the problem, the .alert-successdiv works, but the .alert-errordoesn't. I have most of my code (minus the PHP script), posted on a Pastebinhere.
我正在编写一个网络脚本来处理 VPS 创建和销毁。在管理页面上，我使用 Twitter Bootstrap 显示成功和失败消息的警报。问题就在这里，.alert-successdiv 可以工作，但.alert-error不能。我有我的大部分代码（减去 PHP 脚本），在这里发布在Pastebin 上。
I have some screenshots on how it looks for me on Internet Explorer 11 here.
我有它的外观给我的Internet Explorer 11的截图在这里。
Please note that the alert-success area works. I use a Custom Bootstrap to change the font, but that's it. I created it using the getbootstrap.com website, so I doubt it's that.
请注意，警报成功区域有效。我使用自定义引导程序来更改字体，仅此而已。我使用 getbootstrap.com 网站创建了它，所以我怀疑是这样。
回答by Abhishek Deb
they have changed alert-error to alert-danger. And please access jquery before bootstrap as Felix has said.. this ran fine on my pc:
他们已将警报错误更改为警报危险。并且请在引导之前访问 jquery，正如 Felix 所说.. 这在我的电脑上运行良好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Assets/css/bootstrap.min.css" rel="stylesheet">
<link href="Assets/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
HR {
page-break-before: always;
padding-bottom: 10px;
}
</style>
<!-- Bootstrap theme -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">VZControlPanel</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Admin</a></li>
<li><a href="login.php">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Admin Summary</h1>
<p>NODE STATUS: 1 nodes online.</p>
</div>
<?php
$success=0;
if($success===1) {
echo '<div class="alert alert-success">';
echo '<strong>SUCCESS:</strong> Action completed successfully!';
echo '<a class="close" data-dismiss="alert">×</a>';
echo '</div>';
} else if($success===0) {
echo '<div class="alert alert-danger">';
echo "<strong>FAILED:</strong> Action didn't complete successfully!";
echo '<a class="close" data-dismiss="alert">×</a>';
echo '</div>';
}
?>
<hr>
<h2>Create VM</h2>
<form action="admin.php" method="get">
<input name="action" value="create" type="hidden">
VMID: <input name="id" type="text"><br>
IP: <input name="ip" type="text"><br>
OS Template: <input name="os" type="text"><br>
NodeID: <input name="nid" type="text"><br>
Assign To: <input name="user" type="text"><br>
<input name="submit" value="Create VM" type="submit">
</form>
<hr>
<h2>Destroy VM</h2>
<form action="admin.php" method="get">
<input name="action" value="destroy" type="hidden">
VMID: <input name="id" type="text"><br>
NodeID: <input name="nid" type="number" maxlength="3"><br>
<input name="submit" type="submit" value="Destroy VM">
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
回答by phpcoderx
Looks like you are using Bootstrap 3. They've changed the class name from alert-error to alert-danger.
看起来您正在使用 Bootstrap 3。他们已将类名从 alert-error 更改为 alert-danger。
So,what you probably want is class alert-dangerand notalert-error( its with version 2.x).
所以，你可能想要的是类alert-danger而不是alert-error（它的版本是 2.x）。
回答by Felix
Based on your pastebinyou need to reverse the order of your included scripts, you need to include jQuery first then Bootstrap since Bootstrap require jQuery to works, so you can change:
根据pastebin您需要颠倒包含脚本的顺序，您需要先包含 jQuery，然后是 Bootstrap，因为 Bootstrap 需要 jQuery 才能工作，因此您可以更改：
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
to:
到：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
