2016-11-13 155 views
1

我有以下使用引导的html。它大部分工作 - 但关闭按钮不显示警报。我在这里失去的代码是什么?请注意,我是Bootstrap的新手 - 因此,它可能很简单。关闭按钮不显示Bootstrap警报

小提琴http://jsfiddle.net/LijoCheeran/vxbt960c/

代码

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    </head> 

<body> 

    <h1>Hello, world!</h1> 

<div class="alert alert-success"> 
    <strong>Success!</strong> Bootstrap applied to alert. 
</div> 


<div style = "padding: 10px 10px 10px;"> 
    <form class = "bs-example bs-example-form" role = "form"> 
     <div class = "input-group"> 
     <span class = "input-group-addon">$</span> 
     <input type = "text" class = "form-control" placeholder = "Amount"> 
     <span class = "input-group-addon">.00</span> 
     </div> 
    </form> 
</div> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

</body> 

</html> 
+0

https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm看来你必须添加它,手动。 – sinisake

回答

3

你缺少你这行代码。

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 

如:

<div class="alert alert-success"> 
    <!-- you missed this line of code --> 
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
     <strong>Success!</strong> Bootstrap applied to alert. 
    </div> 

好运

1

你希望自己提供的关闭按钮。作为the examples,使用类似:

<div class="alert alert-warning alert-dismissible" role="alert"> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good. 
</div>