知識(shí)點(diǎn)
通過創(chuàng)建一個(gè) <div>此虑，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success星虹、.alert-info、.alert-warning勃痴、.alert-danger）之一馒胆，來添加一個(gè)基本的警告框徙菠。
Tips：警告框沒有默認(rèn)類讯沈，只有基類和修飾類。默認(rèn)的灰色警告框并沒有多少意義婿奔。
alert
<div class="alert alert-success">alert-success</div>
<div class="alert alert-info">alert-info</div>
<div class="alert alert-warning">alert-warning</div>
<div class="alert alert-danger">alert-danger</div>
可關(guān)閉的警告框
為警告框添加一個(gè)可選的 .alert-dismissible 類和一個(gè)關(guān)閉按鈕缺狠。
必須添加 data-dismiss="alert" 屬性
<div class="alert alert-danger alert-dismissible">
<button class="close" aria-label="close" data-dismiss="alert">×</button><!--必須添加data-dismiss，js關(guān)閉功能才能起作用-->
可關(guān)閉的警告框
</div>
警告框上的鏈接
用 .alert-link 工具類萍摊，可以為鏈接設(shè)置與當(dāng)前警告框相符的顏色挤茄。
實(shí)踐
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>組件-警告框</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<div class="alert alert-success">alert-success</div>
<div class="alert alert-info">alert-info</div>
<div class="alert alert-warning">alert-warning</div>
<div class="alert alert-danger">alert-danger</div>
<!--可關(guān)閉的警告框-->
<div class="alert alert-danger alert-dismissible">
<button class="close" aria-label="close" data-dismiss="alert">×</button><!--必須添加data-dismiss，js關(guān)閉功能才能起作用-->
可關(guān)閉的警告框
</div>
<!--帶鏈接的警告框-->
<div class="alert alert-danger">
警告框 <a href="#" class="alert-link">警告框上的鏈接</a> 顏色匹配
</div>
</div>
</body>
</html>
