可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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-success div works, but the .alert-error doesn't. I have most of my code (minus the PHP script), posted on a Pastebin here.
I have some screenshots on how it looks for me on Internet Explorer 11 here.
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.
回答1:
they have changed alert-error to alert-danger. And please access jquery before bootstrap as Felix has said.. this ran fine on my pc:
<!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>
回答2:
Looks like you are using Bootstrap 3. They've changed the class name from alert-error to alert-danger.
So,what you probably want is class alert-danger and not alert-error ( its with version 2.x ).
回答3:
Based on your pastebin you 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:
<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>
