Bootstrap warning
May 04, 2021 Bootstrap
Table of contents
Bootstrap Warning (Alerts).
This chapter explains alerts and the classes that Bootstrap provides for warnings. A lerts provide users with a way to define message styles. They provide contextual feedback for typical user actions.
You can add an optional close button to the warning box. To create an inline cancelable warning box, use the Alerts jQuery plug-in.
You can add a basic warning box by creating a .lt;div> and adding a .alert class and one of the four context classes (i.e., .alert-success, .alert-info, .alert-warning, .alert-danger). The following example demonstrates this:
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 警告（Alerts）</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body>
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
</body></html>The result is as follows:
Warnings that can be cancelled (Thed Alerts)
The steps to create an cancelable warning are as follows:
-
Add a basic warning box by creating a .lt;div>and adding a .alert class and one of the four context classes (i.e., .alert-success, .alert-info, .alert-warning, .alert-danger).
-
Add an optional .alert-dismissable to the above at the same time.
-
Add a close button.
The following example demonstrates this:
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 可取消的警告（Dismissal Alerts）</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
× </button>
成功！很好地完成了提交。</div><div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
× </button>
信息！请注意这个信息。</div><div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
× </button>
警告！请不要提交。</div><div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
× </button>
错误！请进行一些更改。</div></body></html>Be sure to use the element with the data-dismiss-"alert" data property.
The result is as follows:
The link in The Alerts
Here's how to create a link in Alerts:
-
Add a basic warning box by creating a .lt;div>and adding a .alert class and one of the four context classes (i.e., .alert-success, .alert-info, .alert-warning, .alert-danger).
-
Use the .alert-link entity class to quickly provide links with matching colors.
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 警告（Alerts）中的链接</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><div class="alert alert-success">
<a href="#" class="alert-link">成功！很好地完成了提交。</a></div><div class="alert alert-info">
<a href="#" class="alert-link">信息！请注意这个信息。</a></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></body></html>The result is as follows:
Tip: You can add a Bootstrap warning button by practicing in the Bootstrap programming practice on this site!