zurb是什么网站
Often, when you talk about front-end frameworks, Bootstrap, Foundation by ZURB, and uikit are usually the ones that are brought up.
A lot of people gravitate towards Bootstrap because of its ease of use, simple docs, great features, adoption in the industry, extensibility... I guess this list could go on and on. I've always seen Foundation as an alternative but never looked into what features they offered and if they could be a viable alternative to Bootstrap to be honest. There wasn't really a need to since Bootstrap did通常，在谈论前端框架时，通常会提到 Bootstrap ， ZURB的Foundation和uikit 。
许多人倾向于使用Bootstrap，因为它的易用性，简单的文档，强大的功能，在行业中的采用，可扩展性……我想这个清单可能还会持续下去。 我一直将Foundation视为替代方案，但从未研究过它们提供了哪些功能以及说实话它们是否可以替代Bootstrap。 由于Bootstrap可以完成我需要的 most of the things I needed from it. Recently, however, ZURB has been talking about Foundation for Apps. The way they are looking at modern applications really makes sense and fills a growing need that modern websites need to feel more interactive like their mobile counterparts. Foundation for Apps consists of three main parts: 大部分工作 ，因此实际上并不需要这样做。 但是，最近，ZURB一直在谈论Foundation for Apps。 他们看待现代应用程序的方式确实很有意义，并且满足了现代网站不断增长的需求，即现代网站需要像移动网站一样更具交互性。 Apps for Foundation由三个主要部分组成：
浏览网站 ( Navigating the Site )
- Develop or Develop -> Add-ons 开发或开发->附加组件
- Docs Getting Started link also goes here “文档入门”链接也位于此处
- Download lets you download and customize for the parts you want 下载使您可以下载和自定义所需的部分
安装 ( Installation )
浏览他们的文档，我们可以进入三种不同的软件包： CSS, CSS ， SASS, and SASS和 Building an App. For more advanced uses, Foundation comes with a CLI that you can download and install so that you get Foundation commands from the command line. We won't be messing with that stuff today, just the CSS. Downloading the Building App 。 为了更高级的使用，Foundation附带了一个CLI，您可以下载并安装它，以便从命令行获取Foundation命令。 今天，我们不会再搞这些东西了，只是CSS。 下载 Foundation CSS is all we have to do. We'll get a sample site in Foundation CSS是我们要做的全部工作。 我们将在index.html where we can test out CSS and JS features.
index.html中提供一个示例站点，在其中可以测试CSS和JS功能。
CSS设置 ( CSS Setup )
要启动Foundation网站，我们需要两个CSS文件：normalize.css and
normalize.css和
foundation.css. Those will be enough to get the classes we need and then we can add our own stylings in a custom stylesheet that we'll call
foundation.css 。 这些就足以获取我们需要的类，然后我们可以在自定义样式表中添加自己的样式，我们将其称为
app.css:
app.css ：
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css"> <!-- your custom styles -->.button,
.button ，
.tiny,
.tiny ，
.small,
.small ，
.large,
.large ，
.radius,
.radius ，
.round,
.round ，
.success, and
.success和
.alert. We could create buttons by writing:
.alert 。 我们可以通过编写以下内容来创建按钮：
<a href="#" class="button tiny primary">Tiny Primary</a>
<a href="#" class="button large success radius">Radius Success</a>
<a href="#" class="button large alert round">Rounded Alert</a>See the Pen Foundation 5 Button Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5按钮展柜克里斯Sevilleja（ @sevilayha上） CodePen 。
JS设置 ( JS Setup )
为了使JavaScript正常运行，我们需要三件事：jquery.js,
jquery.js ，
foundation.min.js, and we'll need to initialize Foundation like so:
foundation.min.js ，并且我们需要像这样初始化Foundation：
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>$(document).foundation(); line, we'll be able to define our JavaScript elements just by using
$(document).foundation(); 行，只需使用
HTML5 data-attributes. Here's an example of the dropdown split button and the tabs:
HTML5 data-attributes就能定义JavaScript元素。 这是下拉拆分按钮和标签的示例：
See the Pen Foundation 5 JavaScript Demo by Chris Sevilleja (@sevilayha) on CodePen.
请参阅CodePen上Chris Sevilleja （ @sevilayha ） 撰写的Pen Foundation 5 JavaScript演示 。
特征 ( Features )
一处看一下所有功能。 ZURB制作了 Kitchen Sink to show off all of Foundation 5's goodness. We won't dive too far into many of these just yet. The CSS is easy enough (just copy and paste the classes), and we'll be going more in depth into the grid, JavaScript components, and other fun features in separate articles. 厨房水槽，以炫耀Foundation 5的所有优点。 到目前为止，我们不会深入探讨其中的许多内容。 CSS非常简单（只需复制和粘贴类），我们将在单独的文章中更深入地介绍网格，JavaScript组件和其他有趣的功能。CSS功能 ( CSS Features )
Foundation的优点在于它努力做到完全响应。 本着这种精神，几乎所有内容都是 defined using ems or rems. Even the media queries and widths of the grid system use ems. This is a great practice since it ensures you are starting your sites with a responsive... umm foundation. The CSS classes that come with Foundation are easy enough to learn and understand. Just read through the docs and ZURB's great examples to see how to create buttons and whatnot. Here's a quick list of some CSS features. 使用ems或rems定义的 。 甚至媒体查询和网格系统的宽度都使用ems。 这是一个很好的做法，因为它可以确保您以响应Swift的umm基础来启动网站。 Foundation附带CSS类非常容易学习和理解。 只需阅读文档和ZURB的出色示例，即可了解如何创建按钮等。 这是一些CSS功能的快速列表。- Media Queries 媒体查询
- Visibility Classes: Hiding and Showing things based on device size (Foundation is mobile first). There's even classes to detect landscape/portrait and touch/nontouch devices. 可见性类别 ：根据设备大小隐藏和显示事物（Foundation首先是移动的）。 甚至还有检测横向/纵向和触摸/非触摸设备的类。
- Grid 格
- Utility Classes: Floats, Rounded and Border Radius on Buttons, Text Aligning 实用程序类 ：浮点数，按钮的圆角和边界半径，文本对齐
- Side Nav, Sub Nav, Breadcrumbs, Pagination 侧面导航 ， 子导航 ， 面包屑 ， 分页
- Thumbnails 缩图
- Flex Video: Let your browser automatically scale video objects! Flex Video ：让您的浏览器自动缩放视频对象！
- Forms 形式
- Buttons and Button Groups 按钮和按钮组
- Typography, Lists, Labels, Blockquotes, and more 字体 ， 列表 ， 标签 ，块引用等
- Progress Bars 进度条
- Tables 桌子
图标栏 ( Icon Bar )
See the Pen Foundation 5 Icon Bar Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5图标栏展示克里斯Sevilleja（ @sevilayha上） CodePen 。
开关 ( Switches )
See the Pen Foundation 5 Switches Showcase by Chris Sevilleja (@sevilayha) on CodePen.
见笔基金会5开关展柜克里斯Sevilleja（ @sevilayha上） CodePen 。
定价表 ( Pricing Tables )
我希望它的语法有点语义，但是仍然很酷。See the Pen Foundation 5 Pricing Table Showcase by Chris Sevilleja (@sevilayha) on CodePen.
That's a giant list. The docs can definitely show all that off best, so head on over and check out the great CSS features. Foundation is very polished in all of its CSS elements and I like the additions of pricing table, icon bar, switches, and some useful visibility and utility classes that could be used often.见笔基金会5的价格表展由克里斯Sevilleja（ @sevilayha上） CodePen 。
那是一个巨大的清单。 这些文档绝对可以充分展现所有优势，因此请继续阅读并查看出色CSS功能。 Foundation的所有CSS元素都非常精致，我喜欢添加定价表，图标栏，开关以及一些经常使用的有用的可见性和实用程序类。JS功能 ( JS Features )
Foundation附带JavaScript功能也很棒。 JS的主要功能之一是内置的非画布菜单。 我们已经详细介绍了如何 create off-canvas menus but it's good to have a solution built into the framework that you're using. 创建画布菜单，但是最好在您使用的框架中内置一个解决方案。关闭画布菜单 ( Off Canvas Menus )
See the Pen Foundation 5 Off-Canvas Showcase by Chris Sevilleja (@sevilayha) on CodePen.
Here's a quick list of the other JS features:请参阅CodePen上的Chris Sevilleja （ @sevilayha ） 撰写的Pen Foundation 5 Off-Canvas展示 。
以下是其他JS功能的快速列表：- Interchange Responsive Content: Switch out HTML content based on browser size 交换响应内容 ：根据浏览器大小切换HTML内容
- Off Canvas 离画布
- Top Bar, Sticky Nav 顶栏 ， 粘性导航
- Clearing Lightbox: Good looking implementation of a lightbox with gallery 清除灯箱 ：带有图库的灯箱的美观实现
- Range Sliders 范围滑块
- Abide Validation 遵守验证
- Split Buttons, Dropdown Buttons 拆分按钮 ， 下拉按钮
- Modals, Alerts, Tooltips 模态 ， 警报 ， 工具提示
- Joyride: Awesome feature to create guided tours around your site Joyride ：出色的功能，可在您的站点周围创建导览
- Dropdowns, Accordion, Tabs 下拉菜单 ， 手风琴 ， 标签
- Equalizer: Create equal height content! 均衡器 ：创建相等的高度内容！
范围滑块 ( Range Sliders )
See the Pen Foundation 5 Range Sliders Showcase by Chris Sevilleja (@sevilayha) on CodePen.
请参阅CodePen上Chris Sevilleja （ @sevilayha ） 撰写的Pen Foundation 5 Range Sliders展示 。
Should You Use Foundation 5?
Foundation is a solid framework that has been tested, has solid backing in ZURB, and continues to innovate (can't stress how much I like their Motion UI and new grid stuff). The syntax is easy to learn and get started with. There's no reason not to give it a try. Just spin up a CodePen and play around with the features. The addition of visibility classes and the work they've done with accessiblity are great additions as well. Take a look through their docs and see what you find. I think you walk away impressed. There's just so many features and components with ideas that make sense (Interchange is a big one).Want More Foundation?
Here are some more articles to get you going with Foundation:翻译自: https://scotch.io/tutorials/getting-started-with-foundation-5-by-zurb
zurb是什么网站
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
