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>
嘗試一下 ?
|
提醒框的寬度為容器的 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>
嘗試一下 ?
關閉提醒框
要關閉提醒框,可以在連接或按鈕元素上添加 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>
嘗試一下 ?
|
× (×) 是一個 HTML 字符實體表示一個關閉按鈕的圖標,而不是字母 "x"。 |
更多建議: