Bootstrap 警告和錯誤

簡介

Bootstrap 允許您為網站或 app 的成功執行、警告和錯誤信息定義樣式。在本教程中,您將學習如何做到這點。

創建一個簡單的警告信息

使用 CSS class "alert",位於 bootstrap.css 中的行號 2123 到 2175(版本 2.0.1),您可以創建一個簡單警告信息。您可以為它添加一個可選的關閉圖標。

當您點擊警告框中的關閉圖標時,警告框關閉。要想實現這個交互效果,您必須添加兩個 JavaScript 文件 jquery.js 和 alert.js。您可以把它們添加到 body 元素關閉標簽前麵。

Bootstrap 創建一個簡單的警告信息的實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>基本的警告信息實例</title>
    <meta name="description" content="Creating basic alerts with Twitter Bootstrap. Examples of alerts and errors with Twitter Bootstrap">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div class="alert">
                <a class="close" data-dismiss="alert">×</a>
                <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div>
        </div>
    </div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>

請注意,行號 18 到 21 之間的代碼是必需的。這些僅是為了實例演示。

輸出

basic-alert

在線查看

在不同的瀏覽器窗口查看上麵實例。

擴展簡單的警告信息

通過另外兩個 CSS classes "alert-block " 和 "alert-heading",您可以擴展前麵演示的簡單的警告信息。它讓您更好地控製要顯示的文本,而且您可以在警告文本前添加文本標題。

當您點擊警告框中的關閉圖標時,警告框關閉。要想實現這個交互效果,您必須添加兩個 JavaScript 文件 jquery.js 和 alert.js。您可以把它們添加到 body 元素關閉標簽前麵。

Bootstrap 擴展簡單的警告信息的實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>擴展簡單的警告信息的實例</title>
    <meta name="description" content="Extending simple alert with twitter bootstrap.">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div class="alert alert-block">
                <a class="close" data-dismiss="alert">×</a>
                <h4 class="alert-heading">Warning!</h4>
                What are you doing?! this will delete all files!!
            </div>
        </div>
    </div>
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</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 錯誤、成功和信息的警告實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 錯誤、成功和信息的警告實例</title>
    <meta name="description" content="Example alerts on error success and information with Twitter bootstrap.">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="alert alert-error">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Info!</strong>Watch this, but you may forget.
</div>
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
</body>
</html>

輸出

alert-error-success-info

在線查看

在不同的瀏覽器窗口查看上麵實例。

點擊這裏,下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。