2016年6月11日 星期六

BS3 Alerts

BS3 alerts

簡介

當網頁應用在進行時，常會需要提醒使用者一些額外旳資訊、網頁應用的狀態或是作業錯誤的訊息。BS3 中的 CSS 容器類別 .alert 提供了一個簡便的方式，以產生元件來提供資訊給使用者或提醒使用者。訊息可以利用 CSS 修飾䫶別 .alert-dismissable 或 .alert-dismissible 設定為可隱藏；此時在訊息的右上角會出現一個 "X" 的按鈕，點按該按鈕可以隱藏該訊息。dismissible 和 dismissable 是同一個字，只是英、美拼法不同，BS3 把兩種拼法都定義，算是很貼心了。在預設的情況下，.alert 會佔據螢幕畫面的空間，因此在隱藏訊息時，螢幕上的元件會重新排列，造成畫面有跳動的感覺； 如果希望 .alert 以浮現的方式出現及隱藏，必須針對元件設定 z-index 的屬性值，讓它出顯示在其它元件的上方。如此一來，在隱藏訊息時就不會造成畫面的重新排列了。

BS3 將訊息分為四大類，各以 CSS 修飾類別設定不同底色以便區分。

  1. .alert-info
  2. .alert-success
  3. .alert-warning
  4. .alert-danger

以下為 BS3 v3.3.6 之 bootstrap.css 對 .alert 基礎類別的定義，及相關的修飾類別的定義。 .alert 基礎類別並沒有設定 width 及 height 屬性值，因此其大小決定於父容器的尺寸設定。

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}
.alert .alert-link {
    font-weight: bold;
}
.alert > p,
.alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
    padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
    color: #843534;
}

以下則是在 bootstrap.css 樣式表中 .close 相關的類別定義，這些定義設定了隱藏訊息按鈕的外觀及所在位置。

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

範例

範例中展示了四種類別的 .alert，各以預設的類別底色顯示。其中.alert-info, .alert-success, .alert-warning 的外觀比較簡單，直接顯示訊訊息，很類似狀態列 (status bar)，也不能隱藏。 .alert-danger 的設計較為複雜，有標題、內容，及網站鏈接，右上角還有個按鈕以隱藏訊息，顯示時會以浮現的方式出現在畫面的正中央。

圖 1. alert 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
.centered {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}
</style>

.centered{} 的定義會將元件置於流覽器螢幕的正中央，z-index 的屬性值定為 999，會讓它顯示在其它元件的上方。。

HTML

<body>
    

        
    

    
    
    
</body>

第 3 行的 .fade 及 .in 兩個類別，會製造顯示和隱藏訊息時的動畫效果。
注意第 4 行的 data-dismiss="alert"，少了這個設定，隱藏的功能就無法執行了。在 bootstrap.js 中有一段程式碼，靠搜尋這個設定決定要隱藏的元件。
第 11 行雖然設定了 alert-dismissible 類別，但因為沒有設定所需要用來的隱藏的按鈕，因此還是不能隱藏該訊息。

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)