-

Bootstrap 警告和错误

简介

Bootstrap 允许您为网站或 app 的成功执行、警告和错误信息定义样式。在本教程中,您将学习如何做到这点。

创建一个简单的警告信息

使用 CSS class "alert",位于 bootstrap.css 中的行号 2123 到 2175(版本 2.0.1),您可以创建一个简单警告信息。您可以为它添加一个可选的关闭图标。

当您点击警告框中的关闭图标时,警告框关闭。要想实现这个交互效果,您必须添加两个 JavaScript 文件 jquery.js 和 alert.js。您可以把它们添加到 body 元素关闭标签前面。

Bootstrap 创建一个简单的警告信息的实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Basic alerts with twitter bootstrap</title>
  6. <meta name="description" content="Creating basic alerts with Twitter Bootstrap. Examples of alerts and errors with Twitter Bootstrap">
  7. <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
  8. <style type="text/css">
  9. body {
  10. padding: 50px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <div class="row">
  17. <div class="span4">
  18. <div class="alert">
  19. <a class="close" data-dismiss="alert">×</a>
  20. <strong>Warning!</strong> Best check yo self, you're not looking too good.
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
  26. <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
  27. </body>
  28. </html>

请注意,行号 18 到 21 之间的代码是必需的。这些仅是为了实例演示。

输出

basic-alert

在线查看

在不同的浏览器窗口查看上面实例。

扩展简单的警告信息

通过另外两个 CSS classes "alert-block " 和 "alert-heading",您可以扩展前面演示的简单的警告信息。它让您更好地控制要显示的文本,而且您可以在警告文本前添加文本标题。

当您点击警告框中的关闭图标时,警告框关闭。要想实现这个交互效果,您必须添加两个 JavaScript 文件 jquery.js 和 alert.js。您可以把它们添加到 body 元素关闭标签前面。

Bootstrap 扩展简单的警告信息的实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Extending simple alert with twitter bootstrap</title>
  6. <meta name="description" content="Extending simple alert with twitter bootstrap.">
  7. <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
  8. <style type="text/css">
  9. body {
  10. padding: 50px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <div class="row">
  17. <div class="span4">
  18. <div class="alert alert-block">
  19. <a class="close" data-dismiss="alert">×</a>
  20. <h4 class="alert-heading">Warning!</h4>
  21. What are you doing?! this will delete all files!!
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
  27. <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
  28. </body>
  29. </html>

输出

extended-alert

在线查看

在不同的浏览器窗口查看上面实例。

在错误(error)、成功(success)、信息(information)发生时创建警告

Bootstrap 允许您在错误或危险、成功和信息发生时创建何时的警告。对于错误(error),您需要 CSS class "alert-error"。对于成功(success),您需要 "alert-success" class。对于信息(information),您需要 class "alert-info"。当然,就像前面的实例中说明的一样,您需要 JS 文件 jquery.js 和 alert.js。

Bootstrap 错误、成功和信息的警告实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Example alerts on error success and information with Twitter bootstrap</title>
  6. <meta name="description" content="Example alerts on error success and information with Twitter bootstrap.">
  7. <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
  8. <style type="text/css">
  9. body {
  10. padding: 50px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="alert alert-error">
  16. <a class="close" data-dismiss="alert">×</a>
  17. <strong>Error!</strong>This is a fatal error.
  18. </div>
  19. <div class="alert alert-success">
  20. <a class="close" data-dismiss="alert">×</a>
  21. <strong>Success!</strong>You have successfully done it.
  22. </div>
  23. <div class="alert alert-info">
  24. <a class="close" data-dismiss="alert">×</a>
  25. <strong>Info!</strong>Watch this, but you may forget.
  26. </div>
  27. <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
  28. <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
  29. </body>
  30. </html>

输出

alert-error-success-info

在线查看

在不同的浏览器窗口查看上面实例。

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。