Alerts
Success
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Info
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change oraction.
</div>
Warning
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
Danger
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
关闭
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
注意关闭操作需要引入 bootstrap.js 和 jquery.js:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Alerts</title>
</head>
动画
fade in
实现动画
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>