Foundation 提醒框

Foundation 可以很简单的创建一个提醒框：

提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .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
>

尝试一下 »

圆角提醒框

.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
>

尝试一下 »

当前文章：创新互联Foundation教程：Foundation提醒框
网站地址：http://www.csdahua.cn/qtweb/news19/318469.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网