标签: zurb-foundation

我正在试验基础.链接:http://foundation.zurb.com/docs/index.php

我有一个非常简单的Div:

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div>

当我将高度设置为190像素时,无论浏览器大小如何,它都会显示190,但是当我将高度设置为100%时,它仅显示50像素的图像.我在我当前的网站中使用了大量的东西,这将是一个背景图片,但我也希望这些高度响应.我该如何做到这一点？

如何在弹出窗口和调用弹出窗口的页面之间传输数据？我想在zurb基金会的popup"reveal"中为用户注册做一个ajax表单.你觉得可能吗？

我正在使用两个流行的工具Zurb基础和一个站点的Supersized jquery插件.我以前曾经用过它们一次.但是,当我一起使用时,Zurb Foundation CSS会压缩图像宽高比,这会扭曲Supersized jquery插件中的图像.当浏览器窗口缩小时,它会执行此操作.

在我以前的网站上没问题.它不会在我当前的网站上.

所以当窗户或设备狭窄时,图像会被挤压.

如果我删除了Zurb CSS,那么Supersized会保持纵横比不变,所以我知道原因与Zurb Foundation的图像重新调整大小有关.那么我如何过度使用Zurb CSS来获取Supersized中的背景图像.

网站演示可以在这里看到:http://mwildmandesign.com/IBG/index.html

这是一个网站调整大小,保持宽高比完整我需要它在我的网站上查看:http://risd.edu

我有兴趣通过GitHub为Zurb Foundation项目做贡献.但是,我无法弄清楚如何构建项目.我已成功从https://github.com/zurb/foundation.git克隆了存储库.

当我从命令行运行时grunt,收到一条错误消息:

grunt-cli: The grunt command line interface. (v0.1.11)

Fatal error: Unable to find local grunt.

我然后运行npm install grunt,并npm install grunt-cli通过命令行.执行此操作后,我收到一条错误消息:

Loading "Gruntfile.js" tasks...ERROR
>> Error: Cannot find module 'highlight.js'
Warning: Task "default" not found. Use --force to continue.

但是,当我打开Gruntfile.js时,我可以看到确实存在"默认"任务.我究竟做错了什么？我真的想弄清楚如何在我的本地环境中建立Zurb Foundation,以便我可以开始贡献.

谢谢

我正在使用 Zurb Foundation 来处理我的样式，我知道有一个数据交换类可以根据屏幕尺寸更改图像，但不确定是否可以使用它来更改 div 的背景图像？

background-image:image-url('img_home_first_bar.jpg'); 

在使用Foundation 4网格时,我一直在尝试对齐嵌套行,几乎无济于事.

仅供参考,我使用EpiServer CMS,所以我必须使用mixins注入某些样式.

问题是,当我div.row在8列注入的内部嵌入时div#content,该行及其列不会与其外部的元素齐平.

我试图添加这个mixin:div.unmanagedContent {@include grid-row(nest);}在这个例子中有效,但是当没有嵌入.row内部时,负边距会拉出div div#content.

我的SCSS看起来像这样.请注意,我刚刚在CodePen上附加了一个外部CSS,因此您将看到输出的样式:

// 12 total columns

.contentLayoutBox {
@include grid-row;
}
#content {
@include grid-column(8);
}
#sidebarRight {
@include grid-column(4);
}

这是CodePen和Foundation 4 Grid Docs的一个例子.

任何帮助都会很棒.谢谢.

我正在看一个应用程序的重大更新,该应用程序目前只是原始PHP/HTML/CSS的混搭.

我想使用CakePHP MVC作为后端,使用Zurb Foundation作为前端.虽然我似乎无法找到连接两者的方法.

我知道洛伦佐的回购,但不确定是否有另一种方式.似乎这个回购并没有被全部使用.它在几年内没有更新.当然有人一起使用CakePHP和基金会？

我遇到了 Foundation 均衡器的问题，我尝试在使用 ajax 更改内容后使用均衡器动态重新调整 div 高度。我搜索了 Foundation 文档、堆栈溢出，但没有找到这个问题的答案。

我注意到当我调整浏览器大小时它会重新调整，所以有可能，我只想找出如何触发它。（我显然不想告诉访问者每次点击链接时都调整浏览器的大小）

编辑：这似乎有效，但这是最好的解决方案吗？

$("#media").click(function(){
        $.ajax({
        url: "mediaproduction.html"
        })
        .done(function( html ) {
            $( "#main-content" ).html( html );

            $(document).foundation();
        });
    });

我正在使用Zurb Foundation进行页面布局.我的页面上的一行需要一些文本,然后一行填充其余的宽度,如下所示:

| Text of Indeterminate Length -------------------------------------- |

我有所需的布局<table>和<hr>标签:

<div class="row">
  <div class="large-12 columns">
    <table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
      <tr>
        <td style="white-space:nowrap;padding:0;">
          <h3>Text of Indeterminate Length</h3>
        </td>
        <td style="width:100%;"><hr/></td>
      </tr>
    </table>
  </div>  
</div>

我意识到在现代网页设计中通常不赞成使用<table>布局和<hr>绘制线条.我花了一段时间试图使用<div>,<span>和,<p>并且无法想出任何简单和直接的东西,不需要看似过度使用Javascript的东西.最重要的是,大多数推荐的解决方案都建议使用像border_bottom我这样的中间不太好的东西<hr>.

所以我的问题是:没有<table>或有没有直接的方法做到这一点<hr>？也许是某种自定义<span>风格？

我正在开始我的第一个非常大的 Vue 项目。我有一些我想要包含的传统 Foundation 样式。在我非 CLI 创建的项目中，我会使用 GULP 来编译我的 SASS 文件。

但现在我想将 _settings.scss 文件包含到我的应用程序中，然后按照我的意愿自定义设置。但是我该怎么做呢？

我通过 NPM 安装了所有 SASS 库，但我不知道在哪里执行以下操作：

我在哪里放置自定义 _settings.scss 文件，以便我可以控制设置如果我尝试将文件包含在 main.js 中，整个事情就会崩溃。

我是 vue-cli 的新手，但已经使用 Vue 和 Foundation 一段时间了。在新的敬畏中有点迷失。

有什么建议？

这是我第一次使用Foundation for Emails标记电子邮件。

<row class="content-section">
  <columns small="12">
    <spacer size="16"></spacer>
      <h3 class="title text-bold">Dear JJ,</h3>
      <p class="content-text">it is your one time password</p>
    <spacer size="16"></spacer>
    <form data-abide class="form-primary">
        <input class="input-primary input-large input-centered" type="text" value="36002117" readonly></input>
        <button href="#" class="btn-primary button-center radius text-center" type="submit">Login</button>
        <spacer size="16"></spacer>
        <small>This one time password is valid for 5 minutes from time it is generated.</small>
      </form>
    <spacer size="16"></spacer>
  </columns>
</row>

我正在使用此服务https://putsmail.com测试电子邮件 当我直接发送此电子邮件并从移动设备测试它时，响应式工作，以及当我在浏览器响应式工作中测试它时。但是当我转发此消息时，响应不起作用。用Gmail测试过。我在其他电子邮件中测试了这种行为，没有这样的问题。有机会纠正这种行为吗？谢谢你。

我有Javascript代码JQuery用于创建包含自由文本,单选按钮(单选)和复选框(多选)问题的测验.测验是使用Web界面制作的,Zurb - Foundation用于样式,并在JSON中进行序列化.在创建单选按钮和特定问题的复选框答案时,当用户检查任一组件时(例如,将其标记为有效答案),它应该验证这一点,并且变为"true"(由JSON中的数字"1").

它目前正在处理文本类型问题,因为它基本上是硬编码的.但它并没有为其他两个做伎俩.

这是主要的代码片段(如果需要更多,我将编辑问题):整个测验

storeQuiz: function( event ) {
      var self = event.data;
      var store = [];

      $(self.element).find( '.question-content' ).each( function(){
        var question = $( this );
        var entry = { options: [] };

        if ( question.parent().attr( 'class' ).match( /template/ ) ) {
          return true;
        }

        entry['content'] = question.find( '.input' ).val();
        entry['type'] = question.parent().attr( 'class' ).match( /quiz-(\w+)/ )[1];

        question.find( '.option' ).each( function() {
          var option = $( this );
          var data = {};

          if ( …

我已经创建了一个警报应用程序,如http://foundation.zurb.com/docs/components/alert_boxes.html中所述,警报框即将启动但无法关闭警报框.

任何人都可以告诉我一些解决方案

工作演示

<script>
$(document).foundation();
</script>
<br>
<br>
<div data-alert class="alert-box">
   MY CONTENT 
   <a href="#" class="close">&times;</a>
</div>