Foundation - 快速指南
Foundation - Overview
什么是基金会？
Foundation是设计漂亮的响应式网站的高级前端框架之一。 它适用于所有类型的设备，并为您提供HTML，CSS和JavaScript插件。
基金会始于2008年由ZURB建立的内部风格指南.ZURB是加利福尼亚州坎贝尔的一家产品设计公司。 它于2011年10月发布了Foundation 2.0作为开源。最新版本的Foundation是6.1.1，于2015年12月发布。
为何使用基金会？
它使用Sass编译器提供更快的开发，Sass编译器的工作速度比默认编译器快得多。
它通过定价表，开关，兜风，范围滑块，灯箱等丰富了您的网站。
它配备了像Grunt和Libsass这样的开发包，可以加快编码和控制速度。
Foundation for Sites为您提供HTML，CSS和JS以快速构建网站。
电子邮件框架为您提供响应式HTML电子邮件，可以在任何设备上阅读。
Foundation for Apps允许您构建完全响应的Web应用程序。
特点 (Features)
它具有强大的网格系统和一些有用的UI组件和很酷的JavaScript插件。
它提供响应式设计，可为所有类型的设备提供服务。
它针对移动设备进行了优化，真正支持移动优先方法。
它提供HTML模板，可自定义和扩展。
优势 (Advantages)
一旦您对HTML和CSS有了基本的了解，这很容易学习。
您可以自由使用Foundation，因为它是一个开源的。
它为您提供了一系列模板，可以帮助您立即开始开发网站。
Foundation支持SASS和Compass等预处理器，可以加快开发速度。
缺点 (Disadvantages)
由于Twitter Bootstrap的流行，Twitter Bootstrap的社区支持比Foundation更好。
初学者可能需要一些时间来学习并利用预处理器支持。
缺乏更广泛的支持，如QA网站和解决问题的论坛。
与其他人相比，基金会的主题较少。
Foundation - Installation
在本章中，我们将讨论如何在网站上安装和使用Foundation。
下载基金会
当您打开链接foundation.zurb.com ，您将看到如下所示的屏幕 -
单击Download Foundation 6按钮，您将被重定向到另一个页面。
在这里你可以看到四个按钮 -
Download Everything - 如果您希望在框架中拥有所有内容，即vanilla CSS和JS，您可以下载此版本的Foundation。
Download Essentials - 它将下载包含网格，按钮，排版等的简单版本。
Custom Download - 这将下载Foundation的自定义库，它包含元素并定义列的大小，字体大小，颜色等。
Install via SCSS - 这将重定向到文档页面以安装Foundation for sites。
您可以单击Download Everything按钮以获取框架中的所有内容，即CSS和JS。 由于文件包含框架中的所有内容，因此每次您不需要为单个功能包含单独的文件。 在编写本教程时，下载了最新版本（Foundation 6）。
文件结构
下载Foundation后，解压缩ZIP文件，您将看到以下文件/目录结构 -
正如您所看到的，有编译的CSS和JS（基础。*），以及编译和缩小的CSS和JS（foundation.min。*）。
我们在本教程中使用了库的CDN版本。
HTML模板
使用Foundation的基本HTML模板如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Foundation Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
以下部分详细描述了上述代码。
HTML5 doctype
Foundation包含某些HTML元素和需要使用HTML5 doctype的CSS属性。 因此，HTML5 doctype的以下代码应该包含在使用Foundation的所有项目的开头。
<!DOCTYPE html>
<html>
....
</html>
移动优先
它有助于响应移动设备。 您需要将viewport meta tag包含在“head”元素中，以确保在移动设备上正确呈现和触摸缩放。
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
width属性控制设备的宽度。 将其设置为设备宽度将确保它正确地在各种设备（移动设备，台式机，平板电脑......）上呈现。
initial-scale = 1.0确保在加载时，您的网页将以1:1的比例呈现，并且不会开箱即可进行缩放。
组件初始化
在Foundation中需要jQuery脚本来获取模态和下拉列表等组件。
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码firstexample.html文件。
在浏览器中打开此HTML文件，输出显示如下。
Foundation - Starter Projects
您可以从项目开发开始，使用一些可通过Yeti Launch或Foundation CLI安装的可用模板。 您可以使用Gulp构建系统通过使用这些模板来开始新项目，以处理Sass，JavaScript，复制文件等。
基本模板
基本模板类似于SASS模板，它包含平面目录结构并且只编译SASS文件，在仅使用SASS时使用这个简单模板是很好的。 您可以使用Yeti Launch或使用Foundation CLI使用以下命令来使用基本模板 -
$ foundation new --framework sites --template basic
要设置它，首先运行npm install ， bower install并使用npm start命令运行它。 您也可以从Github下载模板文件。
ZURB模板
它是CSS/SCSS，JavaScript，Handlebars模板，标记结构，图像压缩的组合，并使用SASS处理。 您可以使用Yeti Launch或使用以下命令使用Foundation CLI来使用ZURB模板 -
$ foundation new --framework sites --template zurb
要运行此模板，请按照基本模板中指定的相同步骤操作。 您也可以从Github下载模板文件。
资产复制
您可以使用Gulp复制src/assets文件夹中的内容，其中assets将是您的项目文件夹。 重要的是，SASS文件，JavaScript文件和图像不会受到此资产复制过程的影响，因为他们将拥有自己的复制内容的过程。
页面编译
您可以在三个文件夹下创建HTML页面，即位于src/目录中的pages ， layouts和partials 。 您可以使用Panini平面文件编译器，通过使用模板，页面，HTML部分为页面创建布局。 可以使用Handlebars模板语言完成此过程。
SASS编译
您可以使用Libsass将SASS编译为CSS，主SASS文件将存储在src/assets/scss/app.scss ，并且新创建的SASS部分将存储在此文件夹下。 CSS的输出将类似于普通的CSS，它是嵌套样式。 您可以使用clean-css压缩CSS，并使用UnCSS从样式表中删除未使用的CSS。
JavaScript编译
JavaScript文件将与Foundation一起存储在src/assets/js文件夹下，并且所有依赖项都绑定到app.js文件中。 这些文件将按照以下顺序绑定在一起 -
- 基金会的依赖性。
- 文件将存储在src/assets/js文件夹下。
- 这些文件捆绑在一个名为app.js文件中。
图像压缩
默认情况下，所有图像都将存储在dist文件夹下的assets/img文件夹下。 您可以使用支持JPEG，PNG，SVG和GIF文件gulp-imagemin在构建生产时压缩图像。
BrowserSync (BrowserSync)
您可以创建一个BrowserSync服务器，该服务器是http://localhost:8000提供的同步浏览器测试，并且能够使用此URL查看已编译的模板。 当您的服务器运行时，页面会在您保存文件时自动刷新，您可以在工作时实时看到对页面所做的更改。
Foundation - Kitchen Sink
描述 (Description)
它包括可以顺利使用Web应用程序的Foundation元素。 下表列出了一些Foundation组件 -
| Sr.No. | 组件和说明 |
|---|---|
| 1 | Accordion Accordions包含垂直选项卡，用于在网站上展开和折叠大量数据。 |
| 2 | 手风琴菜单 它显示带有手风琴效果的可折叠菜单。 |
| 3 | Badge 徽章类似于标签，用于突出显示重要注释和消息等信息。 |
| 4 | Breadcrumbs 它指定导航层次结构中站点的当前位置。 |
| 5 | Buttons Foundation支持具有不同样式的标准按钮。 |
| 6 | Callout Callout是一个元素，可用于将内容放入其中。 |
| 7 | 关闭按钮 它用于关闭警报框。 |
| 8 | 向下钻取菜单 “向下钻取”菜单将嵌套列表更改为垂直向下钻取菜单。 |
| 9 | Dropdown Menu 下拉菜单用于以列表格式显示链接。 |
| 10 | Dropdown Pane 单击按钮时，下拉窗格显示内容。 |
| 11 | Flex视频 它用于在网页中创建视频对象。 |
| 12 | Float Classes 它用于向HTML元素添加实用程序类。 |
| 13 | Forms 它用于创建表单布局以收集用户输入。 |
| 14 | Label 标签是内联样式，用于定义输入元素的标签。 |
| 15 | 媒体对象 它用于添加媒体对象，如图像，视频，博客评论等。可以在内容块的左侧或右侧放置。 |
| 16 | Menu 它提供对网站中不同模式的访问。 |
| 17 | Pagination 它是一种将内容划分为一系列相关页面的导航。 |
| 18 | Slider 它通过拖动句柄指定值的范围。 |
| 19 | Switch 它用于在打开和关闭状态之间切换。 |
| 20 | Table 它以行和列格式表示数据。 |
| 21 | Tabs 它是一个基于导航的选项卡，可以在不离开页面的情况下将内容显示在不同的窗格中。 |
| 22 | Thumbnail 它以缩略图形状设置图像的样式。 |
| 23 | 标题栏 它用于显示用户使用的当前屏幕和其他菜单项。 |
| 24 | Tooltip 它是一个小弹出框，用于描述将鼠标悬停在链接上时的信息。 |
| 25 | Top Bar 它用于在网站中创建导航标题。 |
| 26 | Orbit 它是一个简单而强大的滑块，可以使用orbit类滑动元素。 |
Foundation - Global Styles
在本章中，我们将研究Global Styles 。 Foundation框架的全局CSS包括有用的重置，可确保样式在浏览器中保持一致。
字体大小调整
默认情况下，浏览器样式表的字体大小设置为100％。 默认字体大小设置为16像素。 根据字体大小，计算网格大小。 要使用不同的基本字体大小和未受影响的网格断点，请将$rem-base设置$rem-base $global-font-size值，该值必须以像素为单位。
Colors
links和buttons等交互式元素使用来自SASS变量$primary-color默认蓝色阴影。 组件还可以具有以下颜色: secondary, alert, success and warning 。 有关更多信息，请here
SASS参考 (SASS Reference)
变量 (Variables)
下表列出了SASS变量，这些变量用于自定义项目_settings.scss中组件的默认样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $global-width 它代表网站的全局宽度。 用于确定网格的行宽。 | Number | rem-calc(1200) |
| 2 | $global-font-size 它表示应用于《html》和《body》的字体大小。 默认设置为100％，用户的浏览器设置值将被继承。 | Number | 100% |
| 3 | $global-lineheight 它代表所有类型的默认行高。 $global-lineheight是24px而$global-font-size设置为16px。 | Number | 1.5 |
| 4 | $primary-color 它为交互式组件（如链接和按钮）提供颜色。 | Color | #2199e8 |
| 5 | $secondary-color 它与组件一起使用，它支持.secondary类。 | Color | #777 |
| 6 | $success-color 它表示与.success类一起使用时的正状态或操作。 | Color | #3adb76 |
| 7 | $warning-color 当与.warning类一起使用时，它表示警告状态或操作。 | Color | #ffae00 |
| 8 | $alert-color 与.alert类一起使用时，它表示负面状态或操作。 | Color | #ec5840 |
| 9 | $light-gray 它用于浅灰色UI项目。 | Color | #e6e6e6 |
| 10 | $medium-gray 它用于中灰色UI项目。 | Color | #cacaca |
| 11 | $dark-gray 它用于深灰色UI项目。 | Color | #8a8a8a |
| 12 | $black 它用于黑色UI项目。 | Color | #0a0a0a |
| 13 | $white 它用于白色UI项目。 | Color | #fefefe |
| 14 | $body-background 它代表身体的背景颜色。 | Color | $white |
| 15 | $body-font-color 它代表身体的文字颜色。 | Color | $black |
| 16 | $body-font-family 它代表正文的字体列表。 | List | 'Helvetica Neue'，Helvetica，Roboto，Arial，sans-serif |
| 17 | $body-antialiased 通过使用CSS属性-webkit-font-smoothing和-moz-osx-font-smoothing将此属性设置为true来启用抗锯齿类型。 | Boolean | true |
| 18 | $global-margin 它代表组件的全球保证金价值。 | Number | 1rem |
| 19 | $global-padding 它表示组件的全局填充值。 | Number | 1rem |
| 20 | $global-margin 它表示组件之间使用的全局边际值。 | Number | 1rem |
| 21 | $global-weight-normal 它表示普通类型的全局字体粗细。 | Keyword or Number | normal |
| 22 | $global-weight-bold 它表示粗体类型的全局字体粗细。 | Keyword or Number | bold |
| 23 | $global-radius 它表示具有边界半径的所有元素的全局值。 | Number | 0 |
| 24 | $global-text-direction 它将CSS的文本方向设置为ltr或rtl | ltr |
Foundation - Sass
SASS有助于使代码在Foundation中更加灵活和可定制。
兼容性(Compatibility)
要为基础安装基于SASS的版本，应在Windows上安装Ruby。 可以使用Ruby SASS和libsass编译Foundation。 我们建议使用node-sass 3.4.2+版本来编译SASS。
Autoprefixer必需
Autoprefixer处理SASS文件。 gulp-autoprefixer用于构建进程。 以下autoprefixer设置用于获得适当的浏览器支持。
autoprefixer ({
browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});
加载框架
我们可以使用NPM安装框架文件。 使用命令行界面（CLI），我们可以编译Sass文件。 以下是加载框架的命令 -
npm install foundation-sites --save
运行上面的命令行代码后，您将获得以下行 -
手动编译
框架文件可以作为导入路径添加，具体取决于您的构建过程，但路径将与packages_folder/foundation-sites/scss 。 @import语句包含在foundation-sites.scss文件的顶部。 “ Adjusting CSS Output部分介绍了给定代码中的下一行。
@import 'foundation';
@include foundation-everything;
使用编译的CSS
您可以包含预编译的CSS文件。 有两种类型的CSS文件，即缩小和未缩小。 缩小版用于生产，未分化版用于直接编辑框架CSS。
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">
调整CSS输出
对于各种组件，Foundation输出包含许多类。 它用于控制框架的CSS输出。 添加以下单行代码以一次包含所有组件。
@include foundation-everything;
以下是在scss文件中编写上述代码时导入的组件列表。 可以评论不必要的组件。 您可以在Your_folder_name/node_modules/foundation-sites/scss/foundation.scss文件中查看以下给定的代码行。
@import 'foundation';
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....
设置文件
设置文件包含在整个基础项目中，即_settings.scss 。 如果您使用Yeti Launch或CLI创建Foundation for Sites项目，则可以在src/assets/scss /下找到设置文件。
我们使用npm安装了Foundation，因此您可以找到your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss下包含的设置文件。 您可以将其移动到您自己的Sass文件中以使用。
如果您无法使用变量进行自定义，则可以编写自己的CSS。 以下是一组变量，用于更改按钮的默认样式。
$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-opacity-disabled: 0.25;
Foundation - JavaScript
在本章中，我们将研究JavaScript 。 在Foundation中设置JavaScript很容易; 你唯一需要的就是jQuery。
JavaScript安装
您可以使用ZIP下载，包管理器或CDN来获取Foundation JavaScript文件。 在您的代码中，您可以提供指向jQuery和Foundation的链接作为 有关更多信息， 请单击此处
文件结构
当您通过命令行安装Foundation时，Foundation插件将作为单独的文件下载，例如foundation.tabs.js ， foundation.dropdownMenu.js ， foundation.slider.js等。 所有这些文件都合并到foundation.js ，它一次提供所有插件。 如果你想使用一些插件，首先应该加载foundation.core.js 。
例如 -
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>
某些插件可能需要特定的实用程序库，它们随Foundation安装一起提供。 您可以在下一章JavaScript Utilities中详细了解特定的插件要求。
加载单个文件会产生网络开销，特别是对于移动用户。 为了加快页面加载速度，建议使用grunt或gulp 。
初始化 (Initializing)
foundation()函数用于一次初始化所有Foundation插件。
例如 -
(document).foundation();
使用插件
使用数据属性，插件连接到HTML元素，因为它们与插件的名称相匹配。 虽然大多数插件可以嵌套在其他插件中，但单个HTML元素一次只能有一个插件。 例如，工具提示链接是通过添加data-tooltip创建的。 有关更多信息， 请单击此处
配置插件
可以使用其配置设置自定义插件。 例如，您可以设置accordion幻灯片的速度上下。 可以使用插件的DEFAULTS属性全局更改插件设置。 有关更多信息， 请单击此处
页面加载后添加插件
将新HTML添加到DOM时，默认情况下不会初始化这些元素上的任何插件。 您可以通过重新调用.foundation()函数来检查新插件。
例如 -
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});
程序化使用
在JavaScript中，插件可以通过编程方式创建，每个插件都是全局Foundation对象的类，其构造函数包含两个参数，如元素和对象。
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});
大多数插件都提供了公共API，允许您通过JavaScript操作它。 您可以查看插件的文档来研究可用的函数和方法，可以轻松调用。
例如 -
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
您可以选择任何jQuery选择器，如果选择器包含多个插件，那么它们都将具有相同的选择方法。
参数可以像传递参数一样传递给JavaScript。
以underscore(_)为前缀的方法被视为内部API的一部分，这意味着，在没有警告的情况下，它们可以破坏，更改甚至消失。
事件 (Events)
每当特定函数完成时，DOM就会触发一个事件。 例如，每当更改选项卡时，都可以监听它并创建对它的返回响应。 每个插件都可以触发事件列表，这些事件将在插件的文档中记录。 在Foundation 6中，删除了回调插件，必须将其作为事件侦听器。
例如 -
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});
Foundation - JavaScript Utilities
Foundation包含用于添加常用功能的JavaScript实用程序。 它非常有用且易于使用。 可以在文件夹Your_folder_name/node_modules/foundation-sites/js找到此JavaScript实用程序库
Box
Foundation.Box库由几个方法组成。
js/foundation.util.box.js是脚本文件名，可以在编写代码时包含它。
可以将jQuery对象或纯JavaScript元素传递给两个方法。
var dims = Foundation.Box.GetDimensions(element);
返回的对象将element的维度指定为 -
{
height: 54,
width: 521,
offset: {
left: 198,
top: 1047
},
parentDims: {
height: ... //The same format is share for parentDims and windowDims as the element dimensions.
},
windowDims: {
height: ...
}
}
功能ImNotTouchingYou包括在内。
基于传递的元素，返回一个布尔值，该值与窗口边缘或可选或父元素冲突。
下面给出的行中指定的两个选项，即leftAndRightOnly，topAndBottomOnly用于仅识别一个轴上的碰撞。
var clear = Foundation.Box.ImNotTouchingYou (
element [, parent, leftAndRightOnly, topAndBottomOnly]);
Keyboard
Foundation.Keyboard有许多方法，有助于简化键盘事件交互。
js/foundation.util.keyboard.js是脚本文件名，可以在编写代码时包含它。
对象Foundation.Keyboard.keys包含键/值对，更频繁地在框架中使用这些键。
只要按下该键，就会调用Foundation.Keyboard.parseKey来获取字符串。 这有助于管理您自己的键盘输入。
以下代码用于查找给定$element所有可聚焦元素。 因此，您无需编写任何函数和选择器。
var focusable = Foundation.Keyboard.findFocusable($('#content'));
handleKey函数是该库的主要功能。
此方法用于处理键盘事件; 只要在实用程序中注册了任何插件，就可以调用它。
Foundation.Keyboard.register('pluginName', {
'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
next: function(){
//do stuff
}
});
当您想要使用自己的键绑定时，可以调用Foundation.Keyboard.register函数。
MediaQuery (MediaQuery)
MediaQuery库是所有响应式CSS技术的支柱。
js/foundation.util.mediaQuery.js是脚本文件名，可以在编写代码时包含它。
Foundation.MediaQuery.atLeast('large')用于检查屏幕是否至少与断点一样宽。
Foundation.MediaQuery.get('medium')获取断点的媒体查询。
Foundation.MediaQuery.queries是一个媒体查询数组，Foundation用于断点。
Foundation.MediaQuery.current是当前断点大小的字符串。
Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;
以下代码在窗口上广播媒体查询更改。
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});
动作和移动
Foundation.Motion javascript类似于Motion UI库，它包含在Foundation 6中。它用于创建自定义CSS过渡和动画。
js/foundation.util.motion.js是脚本文件名，可以在编写代码时包含它。
Foundation.Move用于使CSS3支持的动画简单而优雅。
requestAnimationFrame(); 方法告诉浏览器执行动画; 它要求在浏览器执行下一次重绘之前调用您的动画函数。
Foundation.Move(durationInMS, $element, function() {
//animation logic
});
动画完成后，会触发finished.zf.animate 。
定时器和图像已加载
Orbit同时使用功能计时器和加载的图像。 js/foundation.util.timerAndImageLoader.js是脚本文件名，可以在编写代码时包含它。
var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
当图像被完全加载时，图像加载方法在jQuery集合中运行回调函数。
Foundation.onImagesLoaded($images, callback);
Touch
这些方法用于添加伪拖动事件和滑动到元素。
js/foundation.util.touch.js是脚本文件名，可以在编写代码时包含它。
addTouch方法用于将元素绑定到移动设备的Slider插件中的触摸事件。
spotSwipe方法将元素绑定到移动设备的Orbit插件中的滑动事件。
$('selector').addTouch().on('mousemove', handleDrag);
$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);
触发器 (Triggers)
它会触发所选元素的指定事件。
js/foundation.util.triggers.js是脚本文件名，可以在编写代码时包含它。
触发器在许多Foundation插件中使用。
$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);
此库中使用以下两种方法，即调整大小和滚动。
resize()方法在发生resize事件时触发resize事件。
当发生滚动事件时， scroll()方法会触发scroll事件。
$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);
杂项(Miscellaneous)
Foundation在核心库中包含很少的功能，这些功能在很多地方都有使用。
js/foundation.core.js是脚本文件名，可以在编写代码时包含它。
Foundation.GetYoDigits([number, namespace])返回带有命名空间的随机base-36 uid。 它默认返回长度为6个字符的字符串长度。
Foundation.getFnName(fn)返回JavaScript函数名称。
在CSS转换完成时发生Foundation.transitionend 。
Foundation - Media Queries
媒体查询是CSS3模块，包括宽度，高度，颜色等媒体功能，并根据指定的屏幕分辨率显示内容。
Foundation使用以下媒体查询来创建细分范围 -
Small - 用于任何屏幕。
Medium - 用于640像素和更宽的屏幕。
Large - 用于1024像素和更宽的屏幕。
您可以使用breakpoint classes更改屏幕大小。 例如，您可以将.small-6类用于小尺寸屏幕，使用.medium-4类用于中型屏幕，如以下代码段所示 -
<div class = "row">
<div class = "small-6 medium-4 columns"></div>
<div class = "small-6 medium-8 columns"></div>
</div>
改变断点
如果您的应用程序使用SASS版本的Foundation，您可以更改断点。 您可以将断点名称放在设置文件中的$breakpoints变量下，如下所示 -
$breakpoints: (
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
您可以通过修改$breakpoint-classes变量来更改设置文件中的$breakpoint-classes 。 如果你想在CSS中使用.large类，那么将它添加到列表的末尾，如下所示 -
$breakpoints-classes: (small medium large);
假设您要在CSS中使用.xlarge类，然后将此类添加到列表的末尾，如下所示 -
$breakpoints-classes: (small medium large xlarge);
SASS
Breakpoint Mixin
您可以使用breakpoint() mixin和@include来编写媒体查询。
使用down或only关键字以及断点值来更改媒体查询的行为，如以下代码格式所示 -
.class_name {
// code for medium screens and smaller
@include breakpoint(medium down) { }
// code for medium screens only
@include breakpoint(medium only) { }
}
您可以使用三种媒体查询portrait ， landscape和retina来获取设备方向或像素密度，它们不是基于宽度的媒体查询。
断点功能
您可以使用内部函数来使用breakpoint() mixin的功能。
breakpoint()功能可以直接用于编写自己的媒体查询 -
@media screen and #{breakpoint(medium)} {
// code for medium screens and up styles
}
JavaScript
使用媒体查询
Foundation JavaScript提供MediaQuery.current函数来访问Foundation.MediaQuery对象上的当前断点名称，如下所示 -
Foundation.MediaQuery.current
MediaQuery.current函数将small ， medium ， large显示为当前断点名称。
您可以使用MediaQuery.get函数获取断点的媒体查询，如下所示 -
Foundation.MediaQuery.get('small')
Sass参考
变量 (Variables)
下表列出了SASS变量，可用于自定义组件的默认样式 -
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $breakpoints 它是一个断点名称，可用于使用breakpoint() mixin编写媒体查询。 | Map | 小:0px 中等:640px 大:1024px xlarge:1200px xxlarge:1440px |
| 2 | $breakpoint-classes 您可以通过修改$breakpoint-classes变量来更改CSS类输出。 | List | small medium large |
Mixins
Mixins创建了一组样式来为Foundation组件构建CSS类结构。
BREAKPOINT
它使用breakpoint() mixin创建媒体查询，并包含以下活动 -
如果传递了string，则mixin搜索$breakpoints映射中的字符串并创建媒体查询。
如果您使用像素值，则使用$rem-base将其转换为em值。
如果传递了rem值，则它将其单位更改为em。
如果您使用的是em值，那么它可以按原样使用。
下表指定断点使用的参数 -
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $value 它使用断点名称，px，rem或em值处理值。 | 关键字或数字 | None |
功能 (Functions)
BREAKPOINT
它使用breakpoint() mixin创建具有匹配输入值的媒体查询。
下表指定断点使用的可能输入值 -
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $val 它使用断点名称，px，rem或em值处理值。 | 关键字或数字 | small |
JavaScript参考
功能 (Functions)
有两种类型的功能 -
.atLeast - 它检查屏幕。 它必须至少作为一个断点。
.get - 用于获取断点的媒体查询。
下表指定了上述函数使用的参数 -
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | size 它分别检查并获取指定函数的断点名称。 | String |
Foundation - The Grid
描述 (Description)
基础网格系统通过页面最多可扩展到12列。 网格系统用于通过一系列容纳内容的行和列来创建页面布局。
网格选项
下表简要介绍了Foundation网格系统如何在多个设备中工作。
| 小型设备电话（<640px） | 中型设备平板电脑（> = 640px） | 大型设备笔记本电脑和台式机（> = 1200px） | |
|---|---|---|---|
| Grid behavior | Horizontal at all times | 倒塌开始，水平在断点之上 | 倒塌开始，水平在断点之上 |
| 类前缀 | .small-* | .medium-* | .large-* |
| Number of columns | 12 | 12 | 12 |
| Nestable | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
基础网格的基本结构
以下是基础网格的基本结构 -
<div class = "row">
<div class = "small-*"></div>
<div class = "medium-*"></div>
<div class = "large-*"></div>
</div>
<div class = "row">
...
</div>
首先，创建一个row类来创建水平的列组。
内容应放在列中，只有列可能是行的直接子项。
通过指定要跨越的十二个可用列的数量来创建网格列。 例如，对于四个相等的列，我们将使用.large-3
以下是Foundation网格系统中使用的三个类 -
| Sr.No. | 基本网格类和描述 |
|---|---|
| 1 | Large large-*类用于大型设备。 |
| 2 | Medium medium-*类用于中型设备。 |
| 3 | Small small-* class用于小型设备。 |
高级网格
以下是Foundation中使用的高级网格格式。
| Sr.No. | 高级网格和描述 |
|---|---|
| 1 | Combined Column/Row column和row类用于同一元素，以获取用作容器的全宽列。 |
| 2 | Nesting 我们可以将网格列嵌套在另一列中。 |
| 3 | Offsets 使用large-offset-*或small-offset-*类，可以将列向右移动。 |
| 4 | Incomplete Rows 当行不包含最多12列时，Foundation会自动向右浮动最后一个元素。 |
| 5 | Collapse/Uncollapse Rows 使用媒体查询大小，折叠和解除折叠类包含在row元素中以显示填充。 |
| 6 | Centered Columns 通过在列中包含以small-centered的类，可以将列设置在中心。 |
| 7 | Source Ordering 源排序类用于在断点之间移动列。 |
| 8 | 块网格 块网格用于分割内容。 |
建筑语义
使用SASS mixins集合，生成网格CSS，用于构建自己的语义网格。 有关更多信息， 请单击此处
SASS参考 (SASS Reference)
以下是Foundation中使用的网格的SASS参考。
| Sr.No. | 基本网格和描述 |
|---|---|
| 1 | Variables 使用sass变量，我们可以修改此组件的默认样式。 |
| 2 | Mixins 最终的CSS输出是使用mixin构建的。 |
Foundation - Flex Grid
网格取决于flex显示属性。 它由flexbox提供的许多功能组成，如自动堆叠，源排序，垂直对齐和水平对齐。
浏览器支持 (Browser Support)
Chrome，Firefox，Internet Explorer 10 +，Safari 6 +，Android 4+和iOS 7+均支持flex网格。
下表描述了Flex Grid的功能以及说明。
| Sr.No. | 功能和描述 |
|---|---|
| 1 | Importing 它包括flex网格的导出mixin以使用默认CSS。 |
| 2 | Basics Flex网格结构类似于浮动网格。 |
| 3 | Advanced Sizing 如果大小类未包含在列中，则它会自行扩展并填充列中的剩余空间。 |
| 4 | Responsive Adjustments 如果未给出弹性网格中列的显式大小，则它将自动调整列的大小 |
| 5 | Column Alignment 弹性网格列可以在父行中对齐水平轴或垂直轴。 |
| 6 | Source Ordering 源排序有助于在不同大小的屏幕中重新排列列。 |
| 7 | Sass参考 SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复并节省时间。 |
Foundation - Forms
在本章中，我们将研究Forms 。 Foundation为Forms提供了强大，简单和多功能的布局系统，它结合了表单样式和网格支持。
下表列出了Foundation中使用的表单元素。
| Sr.No. | 表单元素和描述 |
|---|---|
| 1 | Form Basics 表单的创建简单而且非常灵活，它们结合了标准化的表单元素和强大的网格系统。 |
| 2 | 帮助文字 它用于通知用户元素的用途，通常位于字段下方。 |
| 3 | Label Positioning 您可以在输入的left或right left标签。 |
| 4 | 内联标签和按钮 额外的文本或控件可以附加到输入字段的左/右。 |
| 5 | 自定义控件 日期选择器，开关或滑块等自定义控件需要一些注意才能访问它。 |
| 6 | SASS参考 您可以使用SASS参考更改组件的样式。 |
Foundation - Visibility Classes
描述 (Description)
Foundation使用可见性类来显示或隐藏基于设备方向（纵向和横向）或屏幕大小（小，中，大或xlarge屏幕）的元素。
它允许用户基于浏览环境使用元素。
下表列出了Foundation的可见性类，它根据浏览环境控制元素 -
| Sr.No. | 可见性等级和描述 |
|---|---|
| 1 | Show by Screen Size 它使用.show类显示基于设备的元素。 |
| 2 | Hide by Screen Size 它使用.hide类隐藏基于设备的元素。 |
Foundation支持一些类，您可以使用.invisible和.invisible类隐藏内容，并在页面上不显示任何内容。
方向检测
设备可以通过使用landscape和portrait功能来确定不同的方向。 移动电话等手持设备在旋转时指定不同的方向。 对于桌面，方向将始终为横向。
辅助功能(Accessibility)
下表列出了屏幕阅读器的可访问性技术，这些技术隐藏了内容，同时使屏幕阅读器可以读取内容 -
| Sr.No. | 辅助功能类和描述 |
|---|---|
| 1 | Show for Screen Readers 它使用show-for-sr类隐藏内容，同时阻止屏幕阅读器阅读。 |
| 2 | Hide for Screen Readers 它使用aria-hidden属性，使文本可见，但屏幕阅读器无法读取。 |
| 3 | 创建跳过链接 屏幕阅读器将创建一个跳过链接，以获取您网站内容的导航。 |
Sass参考
Foundation使用以下mixins来显示CSS输出，它允许为您的组件构建自己的类结构 -
| Sr.No. | Mixin和描述 | 参数 | 类型 |
|---|---|---|---|
| 1 | show-for 默认情况下，它会隐藏元素并将其显示在特定屏幕大小之上。 | $size | Keyword |
| 2 | show-for-only 默认情况下，它隐藏一个元素并在断点内显示它。 | $size | Keyword |
| 3 | hide-for 默认情况下，它显示一个元素并将其隐藏在特定屏幕大小之上。 | $size | Keyword |
| 4 | hide-for-only 默认情况下，它显示一个元素并将其隐藏在特定屏幕大小之上。 | $size | Keyword |
所有这些mixin的默认值将设置为none 。
Foundation - Base Typography
描述 (Description)
Foundation中的排版定义标题，段落，列表和其他内联元素，这些元素为元素创建有吸引力且简单的默认样式。
下表列出了基金会使用的不同类型的排版 -
| Sr.No. | 排版和描述 |
|---|---|
| 1 | Paragraphs 段落是一组用不同的字体大小，突出显示的单词，行高等定义的句子。 |
| 2 | Header 它定义了从h1到h6的HTML标题。 |
| 3 | Links 它会创建一个超链接，在您单击文本或图像时打开另一个文档。 |
| 4 | Dividers 它用于通过使用 标记在各部分之间中断。 |
| 5 | 有序和无序列表 Foundation支持有序列表，无序列表以列出事物。 |
| 6 | 定义列表 定义列表用于显示名称值对。 |
| 7 | Blockquotes 它表示文本块，其定义比正常大得多。 |
| 8 | Abbreviations and Code 缩写定义了单词或短语的缩写术语，代码表示一段代码。 |
| 9 | Keystrokes 它用于执行特定功能。 |
| 10 | Accessibility Foundation提供了一些访问页面内容的指南。 |
Sass参考
您可以使用表中列出的以下SASS变量来更改组件的样式。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $header-font-family 指定标题元素的字体系列。 | 字符串或列表 | $body-font-family |
| 2 | $header-font-weight 指定标题的字体粗细。 | String | $global-weight-normal |
| 3 | $header-font-style 提供标题的字体样式。 | String | normal |
| 4 | $font-family-monospace 用于使用等宽字体类型的元素的字体堆栈，例如代码示例。 | 字符串或列表 | Consolas，'Liberation Mono'，Courier，monospace |
| 5 | $header-sizes 定义标题的屏幕大小，每个键是一个断点，每个值都是标题大小的映射。 | Map | |
| 6 | $header-color 提供标题的颜色。 | Color | inherit |
| 7 | $header-lineheight 定义标题的行高。 | Number | 1.4 |
| 8 | $header-margin-bottom 提供标题的下边距。 | Number | 0.5rem |
| 9 | $header-text-rendering 定义文本呈现的方法。 | String | optimizeLegibility |
| 10 | $small-font-size 指定元素的字体大小。 | Number | 80% |
| 11 | $paragraph-margin-bottom 指定段落的下边距。 | Number | 1rem |
| 12 | $paragraph-text-rendering 文本呈现段落的方法。 | String | optimizeLegibility |
| 13 | $code-color 为代码示例提供文本颜色。 | Color | $black |
| 14 | $code-font-family 为代码示例提供字体系列。 | 字符串或列表 | $font-family-monospace |
| 15 | $code-border 指定代码周围的边框。 | List | 1px solid $ medium-grey |
| 16 | $code-padding 指定文本周围的填充。 | Number or List | rem-calc（2 5 1） |
| 17 | $anchor-color 链接的默认颜色。 | Color | $primary-color |
| 18 | $anchor-color-hover 指定悬停时链接的默认颜色。 | Color | scale-color（$ anchor-color，$ lightness:-14％） |
| 19 | $anchor-text-decoration 链接的默认文本修饰。 | String | none |
| 20 | $anchor-text-decoration-hover 悬停时链接的默认文本修饰。 | String | none |
| 21 | $hr-width 定义分隔符的最大宽度。 | Number | $global-width |
| 22 | $hr-border 指定分隔符的默认边框。 | List | 1px solid $ medium-grey |
| 23 | $hr-margin 分隔符的默认边距。 | Number or List | rem-calc（20）auto |
| 24 | $list-lineheight 它定义列表中项目的行高。 | Number | $paragraph-lineheight |
| 25 | $list-style-type 为无序列表提供项目符号类型。 | String | disc |
| 26 | $list-style-position 它定义了无序列表上的项目符号的定位。 | String | outside |
| 27 | $list-side-margin 定义左侧（或右侧）边距。 | Number | 1.25rem |
| 28 | $defnlist-term-weight 为 | String | $global-weight-bold |
| 29 | $defnlist-term-margin-bottom 提供 | Number | 0.3rem |
| 30 | $blockquote-color 它应用 元素的文本颜色。 | Color | $dark-gray |
| 31 | $blockquote-padding 在 元素内提供填充。 | Number or List | rem-calc（9 20 0 19） |
| 32 | $blockquote-border 它为 元素提供了边框。 | List | 1px solid $ medium-grey |
| 33 | $cite-font-size 定义元素的字体大小。 | Number | rem-calc(13) |
| 34 | $cite-color 为《cite》元素提供文本颜色。 | Color | $dark-gray |
| 35 | $keystroke-font 为元素定义字体系列。 | 字符串或列表 | $font-family-monospace |
| 36 | $keystroke-color 定义元素的文本颜色。 | Color | $black |
| 37 | $keystroke-background 为元素提供背景颜色。 | Color | $light-gray |
| 38 | $keystroke-padding 指定元素的填充。 | Number or List | rem-calc（2 4 0） |
| 39 | $keystroke-radius 显示元素的边框半径。 | Number or List | $global-radius |
| 40 | $abbr-underline 为元素提供底部边框样式。 | List | 1px点缀$ black |
Foundation - Typography Helpers
在本章中，我们将研究Typography Helpers 。 排版助手用于以语义相关的方式设置文本格式。 Foundation中的助手课程让您可以更快地搭建一些排版样式。
下表列出了在Foundation中使用的Typography Helpers 。
| Sr.No. | 排版助手和描述 |
|---|---|
| 1 | 文字对齐 它有助于更改元素的文本对齐方式， left ， right ， center和justify 。 |
| 2 | Subheader 可以使用.subheader类将.subheader标题添加到任何标题元素。 |
| 3 | Lead Paragraph 与普通文本相比，它是相当大的文本块，可以用于广告或其他描述性文本。 |
| 4 | 无项目列表 默认情况下， 《ul》是Foundation中的项目符号列表。 要删除项目符号，可以使用.no-bullet类。 |
| 5 | Statistics 无论何时处理仪表板，都需要突出显示一些重要的数字。 您可以使用.stat类来实现此.stat 。 |
Sass参考
变量 (Variables)
下表列出了项目设置文件中的SASS变量，这些变量使组件的默认样式得以自定义。
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $lead-font-size 默认情况下，引导段落的字体大小。 | Number | $ global-font-size * 1.25 |
| 2 | $lead-lineheight 默认情况下，铅段的行高。 | String | 1.6 |
| 3 | $subheader-lineheight Subheader的默认行高。 | Number | 1.4 |
| 4 | $subheader-color Subheader的默认字体颜色。 | Color | $dark-gray |
| 5 | $subheader-font-weight Subheader的默认字体粗细。 | String | $global-weight-normal |
| 6 | $subheader-margin-top Subheader的默认上边距。 | Number | 0.2rem |
| 7 | $subheader-margin-bottom Subheader的默认底部边距。 | Number | 0.5rem |
| 8 | $stat-font-size 静态编号的默认字体大小 | Number | 2.5rem |
Foundation - Basic Controls
在本章中，我们将研究basic controls 。 Foundation提供基本控件，如buttons ， sliders和switches 。
下表列出了Foundation中使用的基本控件。
| Sr.No. | 基本控制和说明 |
|---|---|
| 1 | Button Foundation支持许多按钮样式，可根据您的需要进行定制。 |
| 2 | 按钮组 它们是相应动作元素的容器。 当一组操作显示在栏中时，它可以正常工作。 |
| 3 | 关闭按钮 当您想要点击它时，可以使用关闭按钮。 |
| 4 | Slider 滑块对于在范围内设置某些值非常有用。 |
| 5 | Switch 它允许您通过单击关闭或打开开关。 |
Foundation - Navigation
描述 (Description)
Foundation为样式导航元素提供了一些不同的选项。 捆绑了许多简单的导航模式; 它可以集成在表单中，以提供强大的响应式导航解决方案。
下表描述了不同类型的导航以及描述。
| Sr.No. | 类型和描述 |
|---|---|
| 1 | Navigation Overview 导航包含指向其他部分的链接，并包含许多导航模式。 |
| 2 | Menu 菜单用于构建许多导航组件。 |
| 3 | Dropdown Menu 下拉菜单插件用于在主菜单下创建子菜单。 |
| 4 | 向下钻取菜单 向下钻取菜单插件用于以滑块格式在主菜单中创建子菜单。 |
| 5 | 手风琴菜单 它显示带有手风琴效果的可折叠菜单，并使用Accordion Menu插件为自动折叠提供支持。 |
| 6 | Top Bar 顶部栏有助于在不同尺寸的屏幕上轻松显示复杂的导航栏。 |
| 7 | 响应式导航 响应式菜单插件以不同大小的屏幕分配菜单。 |
| 8 | Magellan 麦哲伦创造了一个固定位置的导航; 它会根据滚动位置自动跟踪页面上的导航列表。 |
| 9 | Pagination 分页，无序列表由Bootstrap处理，就像许多其他界面元素一样。 |
| 10 | Breadcrumbs 面包屑指定导航层次结构中站点的当前位置。 |
Foundation - Containers
Foundation容器用于为站点始终创建浏览器的完整宽度并包装站点内容。
下表列出了基金会中使用的一些容器 -
| Sr.No. | 容器和描述 |
|---|---|
| 1 | Accordion Accordions包含垂直选项卡，用于在网站上展开和折叠大量数据。 |
| 2 | Callout 它将内容放在组件中。 |
| 3 | Dropdown-panes 单击按钮时显示内容。 |
| 4 | 媒体对象 它添加了媒体对象，如图像，视频，博客评论等，以及一些内容。 |
| 5 | Off-canvas 它从可见区域引导导航菜单并显示主要内容。 |
| 6 | Reveal-Modal Foundation允许使用reveal类创建模态对话框或弹出窗口。 |
| 7 | Tables Foundation提供了以表格格式显示数据的布局。 |
| 8 | Tabs 它是一个基于导航的选项卡，可以在不离开页面的情况下将内容显示在不同的窗格中。 |
Foundation - Media
在本章中，我们将研究基金会的media 。 该基金会包括多种媒体类型，如Flex Video ， Label ， orbit ， progress bar和tooltip 。 下表列出了所有媒体类型。
| Sr.No. | 媒体类型和描述 |
|---|---|
| 1 | Flex视频 它用于将视频嵌入到flex视频容器中，以在屏幕大小的情况下保持正确的宽高比。 |
| 2 | Label 它可以用于内联样式，可以放入正文以调用特定部分或附加元数据。 |
| 3 | Orbit 它是一个功能强大且响应灵敏的滑块，允许用户在触摸屏设备上滑动。 |
| 4 | Progress Bar 它用于显示您的进度，可以添加到您的布局中。 |
| 5 | Tooltips 它用于显示页面上的术语或操作的额外信息。 |
Foundation - Plugins
描述 (Description)
插件是一种软件，它提供了最初未由Foundation核心功能完成的其他功能。 可以上载Foundation插件以扩展站点的功能。 插件用于简化您的工作。
下表描述了不同类型的插件以及说明。
| Sr.No. | 类型和描述 |
|---|---|
| 1 | Abide Abide在HTML5表单验证库中使用本机API，使用所需的属性和模式。 |
| 2 | Equalizer 均衡器是一种在页面上创建具有相同高度的多个内容的方法。 |
| 3 | Interchange 它用于根据用户的设备加载响应内容。 |
| 4 | Toggler 切换用于从一个设置切换到另一个设置。 |
| 5 | Sticky Sticky插件用于在网站中创建恒定的内容或图像。 |
Foundation - Sass 函数
Foundation提供了一组SASS实用程序函数，可以与util ， color ， selector ， unit ， value等一起使用。
您可以使用以下代码行一次导入所有实用程序文件 -
@import 'util/util';
您还可以导入单个实用程序文件，如下所示 -
@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';
Sass参考
您可以使用以下SASS功能更改组件的样式。
前景(foreground)
它根据背景颜色为元素提供前景色。 它使用以下格式分配不同类型的参数 -
foreground($color, $yes, $no, $threshold)
以上参数在下表中指定 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它检查颜色的亮度。 | Color | None |
| 2 | $yes 如果颜色很浅，则返回$yes颜色。 | Color | $black |
| 3 | $no 如果颜色较暗，则返回$no color。 | Color | $white |
| 4 | $threshold 它代表了轻盈的门槛。 | Percentage | 60% |
smart-scale
它根据其亮度为元素提供合适的颜色。 它使用以下格式指定适当的颜色 -
smart-scale($color, $scale, $threshold)
以上给出的参数在下表中规定 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它用于缩放颜色。 | Color | None |
| 2 | $scale 它指定向上或向下扩展的百分比。 | Percentage | 5% |
| 3 | $threshold 它代表了轻盈的门槛。 | Percentage | 40% |
text-inputs
它在使用文本输入类型时创建选择器。 它使用以下格式指定输入类型 -
text-inputs($types)
它使用下表中指定的参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $types 它提供了许多用于生成选择器的文本输入类型。 | Color | - |
strip-unit
它从值中删除单位并仅返回数字。 它使用以下格式从值中删除单位 -
strip-unit($num)
它使用下表中指定的参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $num 它指定从值中删除单位时的数字。 | Color | None |
rem-calc
它会更改像素值以匹配rem值。 它使用以下格式将像素值转换为rem值 -
rem-calc($values, $base)
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $values 它将像素值转换为rem值，并使用空格分隔它们。 如果要转换逗号分隔列表，请将列表括在括号中。 | Number or List | None |
| 2 | $base 它在将像素转换为rem值时提供基值。 如果base的值为null，则函数使用$base-font-size变量作为基数。 | Number | null |
has-value
它指定值，如果它不是false。 false值包括null，none，0或空列表。 它使用以下格式指定值 -
has-value($val)
它使用下表中指定的参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $val 它检查指定的值。 | Mixed | None |
get-side
它指定值的一侧，并在填充，边距等上定义顶部/右侧/底部/左侧值。它使用以下格式指定值的边 -
has-value($val)
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $val 它指定值的一侧。 | List or Number | None |
| 2 | $side 它确定（顶部/右侧/底部/左侧）值应返回的哪一侧。 | Keyword | None |
get-border-value
它确定元素的边界值。 它使用以下格式指定边框值 -
get-border-value($val, $elem)
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $val 它找到边界的特定值。 | List | None |
| 2 | $elem 它用于提取边框组件。 | Keyword | None |
Foundation - Sass Mixins
Importing
它导入位于scss/util/_mixins.scss文件下的SASS mixins的内容。 您可以使用以下代码行导入SASS mixins -
@import 'util/mixins';
Sass参考
您可以使用SASS功能更改组件的样式。
Mixins
您可以使用以下mixins为您的组件构建CSS类结构。
CSS-TRIANGLE
它用于创建下拉箭头，下拉点等等。 它使用＆:: before i>或＆:: after i>选择器将三角形附加到现有元素。 它使用以下格式 -
@include css-triangle($triangle-size, $triangle-color, $triangle-direction);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $triangle-size 它定义了三角形的宽度。 | Number | None |
| 2 | $triangle-color 它定义了三角形的颜色。 | Color | None |
| 3 | $triangle-direction 它定义了三角形的方向，例如向上，向右，向下或向左。 | Keyword | None |
HAMBURGER
它用于创建具有宽度，高度，条数和颜色的菜单图标。 它使用以下格式 -
@include hamburger($color, $color-hover, $width, $height, $weight, $bars);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义图标的颜色。 | Color | None |
| 2 | $color-hover 它将鼠标悬停在图标上时定义颜色。 | Color | None |
| 3 | $width 它定义了图标的宽度。 | Number | None |
| 4 | $height 它定义了图标的高度。 | Number | None |
| 5 | $weight 它定义图标中各个条的权重。 | Number | None |
| 6 | $bars 它定义图标中的条数。 | Number | None |
BACKGROUND-TRIANGLE
它用于指定元素的背景图像。 它使用以下格式 -
@include background-triangle($color);
它使用表中指定的参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $color 它定义了三角形的颜色。 | Color | $black |
CLEARFIX
这个mixin会自动清除子元素，因此不需要额外的标记。 它使用以下格式 -
@include clearfix;
AUTO-WIDTH
它根据容器中存在的元素数量自动调整元素的大小。 它使用以下格式 -
@include auto-width($max, $elem);
它使用表中指定的以下参数 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $max 它标识容器中的最大项目数。 | Number | None |
| 2 | $elem 它为兄弟选择器使用标签。 | Keyword | li |
DISABLE-MOUSE-OUTLINE
它用于在识别鼠标输入操作时禁用元素周围的轮廓。 它使用以下格式 -
@include disable-mouse-outline;
ELEMENT-INVISIBLE
它用于隐藏元素，可用于键盘和其他设备。 它使用以下格式 -
@include element-invisible;
ELEMENT-INVISIBLE-OFF
它用于删除不可见元素并使用element-invisible() mixin反转CSS输出。 它使用以下格式 -
@include element-invisible-off;
VERTICAL-CENTER
它用于通过使用以下格式将元素垂直居中放置在非静态父元素内 -
@include vertical-center;
HORIZONTAL-CENTER
它用于通过使用以下格式将元素水平居中放置在非静态父元素内 -
@include horizontal-center;
ABSOLUTE-CENTER
它用于通过使用以下格式将元素绝对居中放置在非静态父元素中 -
@include absolute-center;
Foundation - Motion UI
Foundation提供了用于创建UI过渡和动画的Motion UI库，并由Foundation组件（如Toggler ， Reveal和Orbit 。
安装Motion UI
您可以使用npm或bower在项目中安装Motion UI库，如以下代码行所示 -
$ npm install motion-ui --save-dev
bower install motion-ui --save-dev
您可以使用config.rb在Compass为Motion UI库添加路径，如以下代码行所示 -
add_import_path 'node_modules/motion-ui/src'
您可以使用以下代码行在gulp-sass包含路径 -
gulp.src('./src/scss/app.scss')
.pipe(sass( {
includePaths: ['node_modules/motion-ui/src']
}));
使用以下代码在SASS文件中导入Motion UI库 -
@import 'motion-ui'
Built-in Transitions
Foundation通过使用由Motion UI库创建的过渡类来提供过渡效果。 让我们使用过渡效果创建一个简单example 。
自定义转换
您可以使用Motion UI库设置自定义过渡类。 例如，我们将为mui-hinge()转换设置自定义类，它会旋转元素 -
@include mui-hinge(
$state: in,
$from: right,
$turn-origin: from-back,
$duration: 0.5s,
$timing: easeInOut
);
动画 (Animation)
您可以使用Motion UI过渡效果来创建CSS动画。 单击此link可使用data-animation类检查动画在模态上的工作方式。
