Foundation 提醒框

🌙
手机阅读
本文目录结构

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>

提醒框的宽度为容器的 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">&times;</a>
</div>

<script>
// Initialize Foundation JS For Functionality
$(document).ready(function() {
    $(document).foundation();
})
</script>

&times; (×) 是一个 HTML 字符实体表示一个关闭按钮的图标,而不是字母 “x”。

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

axihe