?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
Foundation 可以很簡單的創(chuàng)建一個(gè)提醒框:
提醒框可以使用 .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>實(shí)例預(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>實(shí)例預(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>實(shí)例預(yù)覽 ?
× (×) 是一個(gè) HTML 字符實(shí)體表示一個(gè)關(guān)閉按鈕的圖標(biāo),而不是字母 ?"x"。 |
關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)