?
This document uses PHP Chinese website manual Release
Foundation 可以很簡單的創(chuàng)建一個提醒框:
提醒框可以使用 .alert-box
類創(chuàng)建, 可以添加可選的類: .secondary
, .success
, .info
, .warning
或
.alert
:
?<div?data-alert?class="alert-box"> ??This?is?a?default?alert?box. </div> <div?data-alert?class="alert-box?secondary"> ??This?is?a?secondary?alert?box. </div> <div?data-alert?class="alert-box?success"> ??<strong>Success!</strong>?This?alert?box?indicates?a?successful?or?positive?action. </div> <div?data-alert?class="alert-box?info"> ??<strong>Info!</strong>?This?alert?box?indicates?a?neutral?informative?change?or?action. </div> <div?data-alert?class="alert-box?warning"> ??<strong>Warning!</strong>?This?alert?box?indicates?a?warning?that?might?need?attention. </div> <div?data-alert?class="alert-box?alert"> ??<strong>Alert!</strong>?This?alert?box?indicates?a?dangerous?or?potentially?negative?action. </div>實例預(yù)覽 ?
提醒框的寬度為容器的 100%。 |
.radius
和 .round
類用于為提醒框添加圓角:
<div?data-alert?class="alert-box?success?radius"> ??<strong>Success!</strong>?Alert?box?with?a?radius.? </div> <div?data-alert?class="alert-box?info?round"> ??<strong>Info!</strong>?Alert?box?that?is?rounded. </div>實例預(yù)覽 ?
要關(guān)閉提醒框,可以在連接或按鈕元素上添加 class="close"
類,并初始化 Foundation JS:
<div?data-alert?class="alert-box"> ??This?is?a?default?alert?box?with?closing?functionality. ??<a?href="#"?class="close">×</a> </div> <script> //?Initialize?Foundation?JS?For?Functionality $(document).ready(function()?{ ????$(document).foundation(); }) </script>實例預(yù)覽 ?
× (×) 是一個 HTML 字符實體表示一個關(guān)閉按鈕的圖標,而不是字母 ?"x"。 |
關(guān)于我們 聯(lián)系我們 留言板
手冊網(wǎng)