Foundation reminder box
May 04, 2021 Foundation5
Table of contents
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 >
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 >
< 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 >
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". |
|---|