bootstrap 警告

浪花一朵朵發表於2015-05-20
boot

本章將講解警告(Alerts)以及Bootstrap所提供的用於警告的class.警告(Alerts)向使用者提供了一種定義訊息樣式的方式。它們為典型的使用者操作提供了上下文資訊反饋。

您可以為警告框新增一個可選的關閉按鈕。為了建立一個內聯的可取消的警告框。請使用警告(Alerts)Jquery外掛。

你可以通過建立一個div並向其新增一個.alert class 和四個上下文class (即.alert-success,alert-info,alert-warning,alert-danger)之一，來新增一個基本的警告框。下面的例項演示了這點：

 

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">成功！很好地完成了提交。</div>
<div class="alert alert-warning">成功！很好地完成了提交。</div>
<div class="alert alert-danger">成功！很好地完成了提交。</div>

 

可取消的警告(Dismissal Alerts)

建立一個可取消的警告步驟臺下：

通過建立一個div並向其中新增一個.alert class 和四個上下文class(即alert-success,alert-info,alert-warning,alert-danger)之一,來新增一個基本的警告框。

同時几上面的div class新增可選的alert-dismissable

新增一個關閉按鈕。

下面的例項說明了這一點:

<div>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            成功!很好的完成了提交.
        </div>
         <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             資訊！請注意這個資訊.
         </div>
         <div class="alert alert-warning">
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             警告！請不要提交.
         </div>
         <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
             錯誤！請進行一些更改.</div>
    </div>

警告中的連結

在警告(Alerts)中建立連結的步驟如下：

通過建立一個div，並向其中新增一個alert class和四個上下文 即alert-success,alert-info,alert-warning,alert-danger 之一，來新增一個基本的警告框。

使用.alert-link實體類來快速提供帶匹配顏色的連結。

<div>
        <div class="alert alert-success alert-dismissable">
            <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>
        <a class="alert alert-danger"><a href="#" class="alert-link">錯誤！請進行一些更改.</a>
    </div>

 

相關文章