Foundation reminder box
Foundation can simply create a reminder box:
Reminder boxes can
.alert-box
class, and optional classes can be added:
.secondary
.success
.info
.warning
.alert
:
Instance
<
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
>
尝试一下 »
关闭提醒框
To close the reminder box, you can add
class="close"
element and initialize 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
>
尝试一下 »
|
×
(×) is an HTML character entity that represents an icon that closes the button, not the letter "x".
|