标签: zurb-foundation
AngularJS:初始化ZURB Foundation JS
我正在使用AngularJS和Foundation.
要初始化Foundation JS,您必须进行以下调用:
$(document).foundation();
在AngularJS应用程序中进行此调用的最佳方法是什么？代码示例将不胜感激.
另外,如果我要编写一个围绕Foundation JS组件的指令,我怎么能确保Foundation被初始化？
推荐指数
解决办法
查看次数
zurb基金会网格中心的内容
我试图将图像水平居中到zurb列,但似乎不可能.我尝试了一切,到处搜索,但我无法让它工作.
这是我的代码:
<div class="row">
<div class="twelve columns"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>
目前风景图像在12列网格上没有问题,但是当出现肖像图像时,它位于网格的左侧.如果我给它一个25%的填充它去中心,但我使用PHP从文件夹中提取所有图像并动态生成代码,所以我不能在所有图像上有25%的填充(景观缩小).
谢谢
推荐指数
解决办法
查看次数
如何设置Zurb Foundation图标？
我已经下载了Zurb Foundation图标字体文件http://zurb.com/playground/foundation-icon-fonts-3
我解压缩它们并将/ foundation-icons文件夹放入我的/ css文件夹中.它是否正确？我试图按照文档"如何使用它们"部分,我无法弄清楚如何开始使用类.
我在我的.html中这样做来调用这些类.
<a class=".fi-social-facebook">Facebook</a>
所以我假设我必须没有正确配置/设置我的文件字体.
更新:这是我的目录看起来...我正在引用它
,这就是我如何调用该类.
<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>
推荐指数
解决办法
查看次数
基础5幕外全高设备
我正在使用Foundation的离场导航,尝试进行占据设备全高度的导航.
默认情况下,菜单选项的高度由显示的内容的高度决定.这意味着如果您的内容小于菜单项的高度,您的菜单项将不可见.
我希望菜单和内容部分的高度都固定在设备的高度.如果需要,只在内容部分滚动.
将内容区域的高度和最小高度设置为100%似乎没有任何影响 - 仅使用固定高度(例如500px)将改变高度 - 但是这不可扩展.
这是如何实现的？
如果我给'.inner-wrap'一个固定的高度,整个事情就会调整.我怎样才能确保.inner-wrap占据设备的整个高度？
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Label</label></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</aside>
<section class="main-section">
<div class="section-inner">
<p>blah blah</p>
<p>test</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
推荐指数
解决办法
查看次数
更改Wordpress默认图库输出
我希望使用Wordpress库快捷方式,但我想将输出绑定到Foundation Orbit插件(制作滑块).这是我想要输出的HTML:
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit>
<li>
<img src="img1.png" alt="bla bla bla" />
</li>
<li>
<img src="img2.png" alt="bla bla bla" />
</li>
<li>
<img src="img3.png" alt="bla bla bla" />
</li>
<li>
<img src="img4.png" alt="bla bla bla" />
</li>
</ul>
</div>
是否可以放入functions.php(或类似)某些东西来实现这一目标？
推荐指数
解决办法
查看次数
阻止Visual Studio中的Web Essentials返回Foundation列验证错误
使用Visual Studio 2013和Web Essentials 2013进行更新2.
我从VS错误列表中的基础验证中得到了很多错误,这很烦人.
使用"列"时,还必须指定类"small-#","medium-#"或"large-#".
使用"column"时,还必须在父元素上指定类"row".
由于我没有使用Foundation网格系统,我想知道是否有办法阻止Web Essentials返回这些Foundation验证错误？
推荐指数
解决办法
查看次数
多次启动轨道滑块的问题
我试图按照这个例子多次启动轨道滑块.但我无法让它发挥作用.
这是我的all.js文件
$(document).ready(function() {
//add input field for external media
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); …推荐指数
解决办法
查看次数
如何在Zurb Foundation中垂直居中？
我正在构建一个登录表单,我希望屏幕中间的用户名和密码字段为square.我也在使用Zurb Foundation软件包来构建这个表单.我在垂直居中的过程中遇到了很多麻烦.
这是我的代码:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>
Registration
</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" …推荐指数
解决办法
查看次数
对于非移动优先项目,请使用Zurb Foundation 4/Twitter Bootstrap 3
有没有人使用过Foundation 4或Bootstrap 3 beta？如您所知,两者都经过重新编写,首先使其成为移动设备.
我对移动第一种方法感到非常兴奋,但在现实生活中,有时情况不会让我们做我们认为正确的方式.
所以我只是想问,有没有人使用F4或BS3进行非移动优先(甚至是非响应)项目？我没有真正深入研究代码,文档也很缺乏.
我的意思是,在F4/BS3中是否存在一些隐藏的警告,如果我将其中一个用于非移动的第一/响应项目,那么它不会像两个框架都是移动的第一个框架一样顺利工作吗？或者,您是否建议将Foundation 3.5或Bootstrap 2.3用于非移动优先项目？
谢谢,希望我足够清楚.
推荐指数
解决办法
查看次数
"gem install foundation"中的证书验证失败
安装nodejs,ruby和git plus bower后尝试安装Foundation.
我一直收到以下错误,我不知道如何解决它:
无法找到有效的宝石"基础"(> = 0),原因如下:无法从https://rubygems.org/下载数据- SSL_connect返回= 1 errno = 0状态= SSLv3读取服务器证书B:证书验证失败(https://api.rubygems.org/latest_specs.4.8.gz)
有任何想法吗？
推荐指数
解决办法
查看次数
标签 统计
zurb-foundation ×10
css ×3
centering ×2
javascript ×2
angularjs ×1
c# ×1
css3 ×1
formatting ×1
gem ×1
html ×1
icons ×1
installation ×1
jquery ×1
ruby ×1
slider ×1
wordpress ×1