Bootstra 警告框

用于根據使用者操作的上下文為使用者提供靈活的提示消息，.alert樣式為此提供了基礎的操作樣式。

一、預設警告框

關閉按鈕要確定設定button元素的屬性值data-dismiss=“alert”，因為警告框的關閉功能是通過JavaScript檢測該屬性實作的，示例代碼：

<div class="alert">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
           

效果：

二、可關閉警告框

在.alert樣式上，在應用一個.alert-dismissable樣式（用于增加容器右面的内邊距，以便放置關閉符号），執行個體代碼：

<div class="alert alert-warning alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
           

效果：

三、多樣式警告框

利用 .alert-warning  .alert-danger  .alert-success  .alert-info  樣式，示例代碼：

<div class="alert alert-warning alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
	 <div class="alert alert-danger alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
	 <div class="alert alert-info alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
	 <div class="alert alert-success alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <strong>Warning!</strong>Best check you self , you are looking too good
	 </div>
           

效果：

四、警告框中的連結

如果放置了連結，通常希望連結高亮顯示，給a元素應用.alert-link樣式即可，示例代碼：

<div class="alert alert-warning alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" class="alert-link">Warning!Best check you self , you are looking too good</a>
	 </div>
	 <div class="alert alert-warning alert-dismissable">
		 <button type="button" class="close" data-dismiss="alert">×</button>
		 <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Warning!Best check you self , you are looking too good</a>
	 </div>
           

效果：第二個中的連結沒有使用class=“alert-link”

六、可以将警告框的關閉按鈕定義在警框的外面，但是，此時關閉按鈕本身就沒法關閉了，示例代碼：

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="btn btn-default" data-dismiss="alert" data-target="#myalert">close it</a>
	<div id="myalert" class="alert alert-warning fade in">
		<h4>this is a titile</h4>
		<p>this is the content of the alert ! </p>
	</div>
           

警告框元件事件類型：