7-3 警示框
本节编程练习不计算学习进度，请电脑登录imooc.com操作

警示框

在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：

在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。

源码版本：

☑ LESS版本：对应的源码文件alerts.less

☑ Sass版本：对应的源码文件_alerts.scss

☑ 编译后的版本：bootstrap.css文件第4427行～第4499行

下面几个小节会对这几种警示框详细讲解，大家不要心急噢！

任务

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>警示框</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h2>默认警示框</h2>
  10. <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
  11. <div class="alert alert-info" role="alert">请输入正确的密码</div>
  12. <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
  13. <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div> 
  14. <h2>可关闭的警示框</h2>
  15. <div class="alert alert-success alert-dismissable" role="alert">
  16.     <button class="close" type="button" data-dismiss="alert">&times;</button>
  17.     恭喜您操作成功！
  18. </div>
  19. <div class="alert alert-info alert-dismissable" role="alert">
  20. 	<button class="close" type="button" data-dismiss="alert">&times;</button>
  21. 	请输入正确的密码
  22. </div>
  23. <div class="alert alert-warning alert-dismissable" role="alert">
  24. 	<button class="close" type="button" data-dismiss="alert">&times;</button>
  25. 	您已操作失败两次，还有最后一次机会
  26. </div>
  27. <div class="alert alert-danger alert-dismissable" role="alert">
  28. 	<button class="close" type="button" data-dismiss="alert">&times;</button>
  29. 	对不起，您输入的密码有误
  30. </div>
  31. <h2>警示框的链接</h2>
  32. <div class="alert alert-success" role="alert">
  33.     <strong>Well done!</strong> 
  34.     You successfully read 
  35. 	<a href="#" class="alert-link">this important alert message</a>
  36. 	.
  37. </div>
  38. <div class="alert alert-info" role="alert">
  39. 	<strong>Heads up!</strong>
  40. 	 This 
  41. 	 <a href="#" class="alert-link">alert needs your attention</a>
  42. 	 , but it's not super important.
  43. </div>
  44. <div class="alert alert-warning" role="alert">
  45. 	<strong>Warning!</strong>
  46. 	 Better check yourself, you're 
  47. 	 <a href="#" class="alert-link">not looking too good</a>
  48. 	 .
  49. </div>
  50. <div class="alert alert-danger" role="alert">
  51. 	<strong>Oh snap!</strong>
  52. 	<a href="#" class="alert-link">Change a few things up</a>
  53. 	 and try submitting again.
  54. </div>
  55. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  56. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  57. </body>
  58. </html>
  1. body{padding:20px 200px;}
下一节