草庐IT

Foundation 提醒框

runoob 2023-04-06 原文

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"。

有关Foundation 提醒框的更多相关文章

  1. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性? - 2

    大家好,我正在开发一个新的Rails应用程序,我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css,还有它的视觉效果;p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的,如果您对app/assets/stylesheets/

  2. ruby - 有没有办法使用 Ruby 应用程序访问和检索 iCloud 提醒? - 2

    我的目标是构建一个任务仪表板应用程序,它将从不同系统(例如Basecamp、AppleReminders等)中提取任务并以特定方式向用户显示它们。到目前为止,我最大的问题是否有任何方法可以通过网络应用程序访问AppleReminders。我知道可以通过iOS应用程序或OSX应用程序。我想我必须直接连接到AppleiCloud服务器,但没有找到任何有意义的答案或提示如何做到这一点。 最佳答案 检查这个gemhttps://github.com/adammck/ruby-icloud.它应该是Ruby中的iCloudapi,但它现在只支

  3. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误,但我不知道如何解决:找不到有效的gem'foundation'(>=0),原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗? 最佳答案 如

  4. javascript - 在 Javascript 中检测 Foundation Small/Large 使用情况 - 2

    有没有办法检测Foundationgrid是否存在?使用Javascript处于“小”或“大”模式? 最佳答案 是的,您可以创建这样的函数:varisLarge,isMedium,isSmall;isSmall=function(){returnmatchMedia(Foundation.media_queries['small']).matches&&!matchMedia(Foundation.media_queries.medium).matches;};isMedium=function(){returnmatchMedia

  5. javascript - 如何处理 $(document).foundation() 调用和 WebPack? - 2

    根据基金会的documentation:AfteryouhaveincludedtheFoundationJavaScript,justaddasimplecalltoinitializeallpluginsonyourpage.WerecommendthatyouinitializeFoundationattheendofthepage.$(document).foundation();我的应用使用WebPack,因此模块加载是异步。这意味着正文底部的经典脚本会在ui-view被模板填充之前运行。(使用Angular)。如果我将脚本放在底部,DOM会在被Foundation的脚本解析

  6. javascript - 项目中的 Foundation 6.4 JavaScript 无法正常工作,但外部 JS 可以 - 2

    我对Foundation6.4中的javascript失去了理智。我不知道这个Webpack是怎么回事。似乎有些库/插件可以工作,有些则不能。我的最新一期是plyr(https://plyr.io/)。我不明白为什么TweenMax可以100%正常工作而plyr.js却不行。我究竟做错了什么?这是我得到的错误..app.js:23026UncaughtReferenceError:plyr未定义这就是我的app.js的样子..import$from'jquery';importwhatInputfrom'what-input';window.$=$;window.jQuery=$;re

  7. 使用 Team Foundation Server Build 进行 JavaScript 单元测试 - 2

    我们使用的是TeamFoundationServer2010,我们使用Jasmine在本地机器上运行了一些JavaScript单元测试。.我们正在使用基于工作流程的构建。有没有人在构建期间成功运行Jasmine测试?如果Jasmine测试失败,您可以中断构建吗? 最佳答案 我看到的方法是使用CodePlex上可用的ChutzpahTestRunner:http://chutzpah.codeplex.com/这允许您从命令行运行Jasmine/QUnit测试,然后可以使用InvokeProcess事件轻松地将其与TFSBuild集成

  8. javascript - 如何在 Chrome 中以编程方式切换 Zurb Foundation 开关控件? - 2

    我想使用javascript动态切换ZurbFoundationSwitch控件的状态。这是默认的ZurbFondation开关:OffOn演示here.它们基于thisproject,我相信。当我尝试使用jquery更改开关的状态时:$('#d1').attr('checked','checked');$('#d').removeAttr('checked');//SwitchON$('#d').attr('checked','checked');$('#d1').removeAttr('checked');//SwitchOFF它在Firefox中有效,但在Chrome中无效。在C

  9. javascript - 在 [object FormData] 中提醒特定元素(用于测试) - 2

    我试图查看[objectFormData]中包含哪些内容,特别是在名称应为Name的特定元素中。我想提醒它,检查内容是否正确,但这样做返回undefined:alert(fd['Name']);我很确定我正在正确加载表单数据,所以我想知道问题是否出在我以错误的方式访问数据...仅PS警报fd返回[objectFormData] 最佳答案 IvanZh告诉我这种方法对他不起作用,这促使我对HTML5FormData对象进行一些研究。事实证明,我对此完全错了(请参阅下面的旧错误答案)。FormData的所有数据都驻留在native代码中

  10. javascript - Zurb Foundation 的样式自动完成 - 2

    使用Foundation功能而不是jQueryCSS进行自动完成的最佳做法是什么?这是我的代码:http://jsfiddle.net/qhoc/88kfb/FieldsetInputLabel我只是不想在页面上包含另一个.css文件:所以我想我有两个问题:有没有办法使用Foundation或其他东西的dropdown?似乎dropdown仅适用于topbar并且它的css在该特定用例之外搞砸了。在Foundation中创建下拉菜单的“标准”方法是什么?请帮忙举个例子。因为我认为它要么是一堆rows,要么是dropdown的调整 最佳答案

随机推荐