ブートストラップ警告のクローズボタンが表示されない

ブートストラップを使用する次のhtmlがあります。ほとんどの部分で機能しますが、閉じるボタンはアラートには表示されません。私がここで紛失しているコードは何ですか？私はブートストラップの新機能ですので、簡単なことかもしれません。ブートストラップ警告のクローズボタンが表示されない

フィドル：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>

出典

2016-11-13 Lijo

https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htmをあなたが手動で、それを追加する必要がありますようです。 – sinisake

あなたのコード内でこの行が欠落しています。

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

例えば：あなたは閉じるボタンを自分で提供することを期待している

出典

2016-11-13 23:26:28

<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>

グッドラック。 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>

出典

2016-11-13 23:29:19 Ouroborus

ブートストラップ警告のクローズボタンが表示されない

答えて

関連する問題