bootstrap4|資訊提示框
阿新 • • 發佈：2019-01-13
1、提示框可以使用 .alert 類, 後面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 類來實現。
<div class="alert alert-success"> <strong>成功！</strong>指定操作成功提示資訊。 </div> <div class="alert alert-info"> <strong>資訊！</strong>請注意這個資訊。 </div> <div class="alert alert-warning"> <strong>警告！</strong>設定警告資訊。 </div> <div class="alert alert-danger"> <strong>錯誤！</strong>失敗的操作。 </div> <div class="alert alert-primary"> <strong>首選！</strong>這是一個重要的操作資訊。 </div> <div class="alert alert-secondary"> <strong>次要的！</strong>顯示一些不重要的資訊。 </div> <div class="alert alert-light"> <strong>淺灰色！</strong>淺灰色提示框。 </div> <div class="alert alert-dark"> <strong>深灰色！</strong>深灰色提示框。 </div>
2、提示框中在連結的標籤上新增 alert-link 類來設定匹配提示框顏色的連結，連結的文字顏色與提示框的文字顏色一樣，文字粗細font-weight:700;
<div class="alert alert-danger">
<strong>成功！</strong>你應該認真理解<a href="#" class="alert-link">這條資訊</a>
</div>3、可以在提示框中的 div 中新增 .alert-dismissable 類，然後在關閉按鈕的連結上新增 class="close" 和 data-dismiss="alert"
<h3>關閉提示框</h3>
<div class="alert alert-dismissable alert-success">
<strong>成功!</strong>指定操作成功的資訊。
<button class="close" data-dismiss="alert">×</button>
</div>4、.fade 和 .show 類用於設定提示框在關閉時的淡出和淡入效果。fade的css樣式transition: opacity .15s linear;
<div class="alert alert-success alert-dismissable fade show">
<!-- fade的css樣式transition: opacity .15s linear;-->
<strong>成功！</strong>指定操作成功的資訊（fade）
<button class="close" data-dismiss="alert">×</button>
</div>原始碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap4資訊提示框</title>
<!--width=device-width 表示寬度是裝置螢幕的寬度,initial-scale=1 表示初始的縮放比例,shrink-to-fit=no
自動適應手機螢幕的寬度-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<!--自定義alert類的div寬度-->
<style type="text/css">
body{width:1200px;}
.alert{width: 400px;margin-left: 200px;}
</style>
</head>
<body>
<!--提示框可以使用 .alert 類, 後面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 類來實現-->
<!--position: relative;-->
<div class="alert alert-success">
<strong>成功！</strong>指定操作成功提示資訊。
</div>
<div class="alert alert-info">
<strong>資訊！</strong>請注意這個資訊。
</div>
<div class="alert alert-warning">
<strong>警告！</strong>設定警告資訊。
</div>
<div class="alert alert-danger">
<strong>錯誤！</strong>失敗的操作。
</div>
<div class="alert alert-primary">
<strong>首選！</strong>這是一個重要的操作資訊。
</div>
<div class="alert alert-secondary">
<strong>次要的！</strong>顯示一些不重要的資訊。
</div>
<div class="alert alert-light">
<strong>淺灰色！</strong>淺灰色提示框。
</div>
<div class="alert alert-dark">
<strong>深灰色！</strong>深灰色提示框。
</div>
<!--提示框中在連結的標籤上新增 alert-link 類來設定匹配提示框顏色的連結-->
<!--font-weight: 700;-->
<div class="alert alert-danger">
<strong>成功！</strong>你應該認真理解<a href="#" class="alert-link">這條資訊</a>
</div>
<!--可以在提示框中的 div 中新增 .alert-dismissable 類，然後在關閉按鈕的連結上新增 class="close" 和 data-dismiss="alert" 類來設定提示框的關閉操作。-->
<h3>關閉提示框</h3>
<div class="alert alert-dismissable alert-success">
<strong>成功!</strong>指定操作成功的資訊。
<button class="close" data-dismiss="alert">×</button>
</div>
<!--.fade 和 .show 類用於設定提示框在關閉時的淡出和淡入效果-->
<div class="alert alert-success alert-dismissable fade show">
<!-- fade的css樣式transition: opacity .15s linear;-->
<strong>成功！</strong>指定操作成功的資訊（fade）
<button class="close" data-dismiss="alert">×</button>
</div>
</body>
</html>
瀏覽器結果：
所需bootstrap-4.1.3-dist的壓縮包下載：
連結: https://pan.baidu.com/s/1lGFoaifVjGER-BBfnbiWAA 提取碼: 6w6w