标签: zurb-foundation

我使用Zurb Foundation 3网格创建了一个站点.每个页面都有一个大的h1.

CSS

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

HTML

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

当我将浏览器的大小调整为移动大小时,大字体不会调整并导致浏览器包含水平滚动以容纳大文本.

我注意到在Zurb Foundation 3 Typography 示例页面上,标题在压缩和扩展时适应浏览器.

我错过了一些非常明显的东西吗 我该如何实现这一目标？

我通过bash创建了一个新的Foundation 5项目foundation new my-project.当我在Chrome中打开index.html文件时,Uncaught TypeError: a.indexOf is not a function控制台中会显示错误,原因在于jquery.min.js:4.

我按照基础网站上的步骤创建了项目,但我似乎无法摆脱这个错误.基础和jQuery看起来像是在index.html文件中包含并正确链接,链接的app.js文件包括在内$(document).foundation();

有谁知道导致此错误的原因是什么？什么解决方案可能是什么？

我在尝试使用bower(安装基础5)或在命令行上获得与工作相关的任何凉亭时遇到了巨大的问题.

我安装了

• 红宝石1.9.3
• git(从命令提示符选项运行)
• 的NodeJS

我成功跑了

npm install -g bower grunt-cli
gem install foundation

这些都运行良好.我查看了npm/node_modules目录,我可以bower在那里看到文件夹.

我每次键入bower要么进入cmd,ruby cmd或者git bash我得到

命令无法识别

我在环境变量中设置了git路径.

什么令人讨厌的是凉亭网站上的指令.它指出:

npm install -g bower
bower install

这不行!

TL; DR:Sticky实际上能够对我通过JavaScript提供的更改做出反应吗？如果是这样,怎么样？

(该项目使用的是Foundation 6.2和WordPress 4.4,主题使用Node.js/npm和gulp 4.0安装.我的问题详细地用粗体标记.)

我想nav使用Foundation的Sticky Plugin 使条形粘,但只有当我点击一个按钮时.这意味着当DOM全部完成时,nav条形图不应该"单独"粘贴,而是保持在文档中的顶部位置.此外,它应该在向下滚动时消失,但在向上滚动时会粘住.

该nav酒吧是正确包裹在所有需要的divS,所以nav酒吧是能够坚持."额外"部分出现问题.我的想法是首先使用PHP实例化Sticky:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

之后,data-btm-anchor使用在点击时触发的JavaScript 更改为当前滚动位置.这不像我想的那样好用.到目前为止我尝试过的:

1. 当使用getElementByID然后setAttribute,data-btm-anchorPHP文件确实根据Firebug改变,但这不会影响nav条形; 它保持原样.我是否需要"重新实施"Sticky,如果是,如何？
2. 该文件提到:

使用JavaScript设置选项涉及将对象传递给构造函数,如下所示:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

Run Code Online (Sandbox Code Playgroud)

这是否意味着我可以将新参数传递给现有的插件实例？每当我传递一个新Foundation.Sticky对象时,只有一个不同的 …

我正在阅读的大多数使用媒体查询的教程都在演示如何使用min-width,但我很少看到人们使用max-width.

这是某种设计趋势或模式,为什么人们会使用min-width它max-width？

例如,我正在设计一个从移动设备开始,一直到桌面的网站.我正在使用Foundation 4,但使用媒体查询删除页面上的各种元素并重新定位源顺序.

我面临的一件事是任何宽度为360px或更小的设备的自定义导航.我希望它们具有垂直导航,而不是内联水平.所以我的想法是max-width用来定位这些设备.

如果我先min-width设计手机,我应该使用吗？即所有默认样式都是针对移动设备,因此使用min-width逐步增强布局？

我在Zurb的Foundation框架中使用Highcharts进行课堂项目.我在章节标签中有三个图表.一个在12列div中,另外两个在6列div中的同一行.

当页面加载时,特色图表不占用12列的可用宽度,两个较小的图表溢出它们的6列.但是,当窗口调整大小或我尝试使用Inspect元素进行调查时,图表会立即捕捉到正确的尺寸.在Chrome,FF和IE中会出现此问题.

我意识到我可以设置一个特定的宽度,但我真的想利用基金会并让他们保持敏感.

我已经调整了CSS和Highcharts初始化,但我很难过.还有其他人遇到过这个问题吗？任何人都能看到我错过的东西吗？

这是我的HTML的摘录:

<div class="row">
<div class="twelve columns">
    <!--begin tabs below--> 
    <div class="section-container tabs" data-section="tabs">
      <section>
        <p class="title" data-section-title><a href="#">Heart Disease</a></p>
        <div class="content" data-section-content id="heart">

            <div class="row feature-chart">
                <div class="large-12 columns">
                    <div id="heartTimeline-container">
                    <div id="heartTimeline"></div>
                    </div>
                </div> <!--close 12 columns-->
            </div> <!--close row-->
            <div class="row small-charts">
                <div class="large-6 columns">
                    <div id="heartDemo"></div>
                </div>
                <!--close 6-->
                <div class="large-6 columns">
                    <div id="heartStages"></div>
                </div>
                <!--close 6-->
            </div>
            <!--end row-->
        </div>
      </section>
   </div>
   </div>
   <!--end twelve columns-->

这是Highcharts js:

$(function () {
    Highcharts.setOptions({ …

我是前端开发和基金会的新手.

我试图<div class="main-header">成为一个响应缩小的全屏图像.

谁能告诉我我做错了什么？它正在缩放,但没有显示完整的图像.我也想让<div class="large-6 large-offset-6 columns">它坐在移动设备上面 - 这可能吗？

HTML:

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}

我有一个网站已经利用了URL中的哈希值,我不想让它改变.当我使用Zurb Foundation并使用href="#"菜单项时,单击它会删除以前的哈希值.

我该如何覆盖此行为？

更新:我认为最好留在元素中,因为当我更改它时,它会更改绑定到该HTML元素的样式.我总是喜欢在使用设计框架时保持默认约定而不是使用覆盖css属性的质量.

谢谢.

在zurb foundation的网站http://foundation.zurb.com/docs/reveal.php上,他们列出了一些选项,包括

open:在模态打开之前"触发"的回调函数.

打开:在打开模态后触发'的回调函数.

close:在模态准备关闭之前"触发"的回调函数.

closed:关闭模态后触发''的回调函数.

但我不知道如何将它们与我的模态一起使用.我试过了

$('#myModal').closed(function() {});

$('#myModal').trigger('reveal:closed')( {});

$('#myModal').reveal.closed(function() {});

$('#myModal').reveal().closed(function() {});

我用谷歌搜索,但没有发现.谁可以解释它或给我一个例子或提供相关链接？

谢谢!有用!

我还有另一个与揭密()相关的密切相关的问题

<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>);

我试图添加一个像data-closeOnBackgroundClick="false"似乎无法工作的属性.什么应该是正确的语法？它也适用于回调函数吗？

我正在使用基础3来构建一个响应式网站,但我想让页脚和导航背景宽度占据整个宽度？我把我的行命名为

class="row navigation"
class="row footer"

我试图寻找如何解决这个问题,但我没有选择.我假设它是foundation.css文件中的一个小修复程序,但由于我是新手,它现在有点过于庞大.

任何poiinters非常感谢.