警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width = device-width,initial-scale = 1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <script src = "js/jquery-1.11.2.min.js"></script> <script src = "js/bootstrap.min.js"></script> <title>CSSDemo</title> </head> <body> <div class="container"> <div class="col-lg-3"> <div class="alert alert-success">成功信息。</div> <div class="alert alert-info">提示信息。</div> <div class="alert alert-warning">警告信息。</div> <div class="alert alert-danger">错误信息。</div> </div> </div> </body> </html>
创建一个可取消的警告(Dismissal Alert)步骤如下:
<body> <div class="container"> <div class="col-lg-3"> <div class="alert alert-success alert-dismissable">成功信息。 <button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button> </div> <div class="alert alert-info">提示信息。 <button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning">警告信息。</div> <div class="alert alert-danger">错误信息。</div> </div> </div> </body>
<body> <div class="container"> <div class="col-lg-3"> <div class="alert alert-success alert-dismissable"> <a href="#" class="alert-link">成功信息。</a> <button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button> </div> <div class="alert alert-info"> <a href="#" class="alert-link">提示信息。</a> <button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">警告信息。</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">错误信息。</a> </div> </div> </div> </body>
.alert .alert-link的font-weight:700,因此可以看出字体有加粗