📝 Foundation教程
26篇技术文档📅 最后修改于: 2020-10-25 02:35:19 🧑 作者: Mango
Foundation是用于设计漂亮的响应式网站的高级前端框架之一。它适用于所有类型的设备，并为您提供HTML，CSS和JavaScript插件。本教程分为几个部分，每个部分都包含相关主题以及简单而有用的示例。听众本教程是为具有HTML和CSS基本知识并渴望开发网站的任何人准备的。完成本教程后，您会发现自己在使用Zurb Foundation Bootstrap开发Web项目方面具有中等水平的专业知...
📅 最后修改于: 2020-10-25 02:35:38 🧑 作者: Mango
什么是Foundation？Foundation是用于设计漂亮的响应式网站的高级前端框架之一。它适用于所有类型的设备，并为您提供HTML，CSS和JavaScript插件。Foundation最初是作为内部样式指南，由ZURB于2008年建立。ZURB是位于加利福尼亚坎贝尔的产品设计公司。它于2011年10月发布了Foundation 2.0作为开源。Foundation的最新版本是6.1.1，于...
📅 最后修改于: 2020-10-25 02:36:04 🧑 作者: Mango
在本章中，我们将讨论如何在网站上安装和使用Foundation。下载Foundation当您打开链接foundation.zurb.com时，您将看到如下所示的屏幕-单击Download Foundation 6按钮，您将被重定向到另一个页面。在这里您可以看到四个按钮-下载所有内容-如果希望框架中包含所有内容，例如香草CSS和JS，则可以下载此版本的Foundation。Download Esse...
📅 最后修改于: 2020-10-25 02:36:28 🧑 作者: Mango
您可以使用一些可用的模板开始您的项目开发，这些模板可以通过Yeti Launch或Foundation CLI安装。您可以使用Gulp构建系统使用这些模板来开始新项目，以处理Sass，JavaScript，复制文件等。Foundation模板Foundation模板类似于SASS模板，它包含平面目录结构，仅编译SASS文件，最好在仅使用SASS的情况下使用此简单模板。您可以通过以下方式使用Yeti...
📅 最后修改于: 2020-10-25 02:36:53 🧑 作者: Mango
描述它包含Foundation元素，可与Web应用程序顺利地协同工作。下表列出了一些Foundation组件-Sr.No.Component & Description1AccordionAccordions contain vertical tabs which are used on websites to expand and collapse large amount of data.2A...
📅 最后修改于: 2020-10-25 02:37:22 🧑 作者: Mango
在本章中，我们将研究全局样式。 Foundation框架的全局CSS包括有用的重置，以确保样式在各个浏览器中保持一致。字体大小默认情况下，浏览器样式表的字体大小设置为100％。默认字体大小设置为16像素。根据字体大小，将计算网格大小。若要具有不同的基本字体大小和不受影响的网格断点，请将$ rem-base设置为$ global-font-size值，该值必须以像素为单位。色彩诸如链接和按钮之类的交...
📅 最后修改于: 2020-10-25 02:37:46 🧑 作者: Mango
SASS帮助使代码在Foundation中更加灵活和可自定义。兼容性要为Foundation安装基于SASS的版本，应在Windows上安装Ruby。可以使用Ruby SASS和libsass来编译Foundation。我们建议使用node-sass 3.4.2+版本来编译SASS。需要自动前缀自动前缀处理SASS文件。gulp-autoprefixer用于构建过程。以下自动前缀设置用于获取适当的...
📅 最后修改于: 2020-10-25 02:38:17 🧑 作者: Mango
在本章中，我们将研究JavaScript。在Foundation中设置JavaScript很容易；您只需要jQuery。JavaScript安装您可以使用ZIP下载，程序包管理器或CDN来获取Foundation JavaScript文件。在您的代码中，您可以作为<script>标记提供指向jQuery和Foundation的链接，将其放在结束<body>之前，并检查是否在jQuery之后加载了F...
📅 最后修改于: 2020-10-25 02:38:56 🧑 作者: Mango
Foundation包含用于添加常用功能的JavaScript实用程序。这是非常有用和易于使用的。可以在文件夹Your_folder_name / node_modules / foundation-sites / js中找到此JavaScript实用程序库框Foundation.Box库包含两种方法。js / foundation.util.box.js是脚本文件名，可以在编写代码时将其包含在内...
📅 最后修改于: 2020-10-25 02:39:36 🧑 作者: Mango
媒体查询是CSS3模块，其中包括诸如宽度，高度，颜色之类的媒体功能，并根据指定的屏幕分辨率显示内容。Foundation使用以下媒体查询来创建细分范围-小-用于任何屏幕。中-用于640像素或更宽的屏幕。大-用于1024像素或更宽的屏幕。您可以使用断点类来更改屏幕尺寸。例如，您可以将.small-6类用于小尺寸屏幕，并将.medium-4类用于中型屏幕，如以下代码片段所示-更改断点如果您的应用程序使...
📅 最后修改于: 2020-10-25 02:40:02 🧑 作者: Mango
描述Foundation网格系统最多可在页面中扩展12列。网格系统用于通过一系列容纳您的内容的行和列来创建页面布局。网格选项下表简要介绍了Foundation网格系统如何在多个设备中工作。Small devices Phones(<640px)Medium devices Tablets(>=640px)Large devices Laptops & Desktops(>=1200px)Grid ...
📅 最后修改于: 2020-10-25 02:40:18 🧑 作者: Mango
网格取决于flex显示属性。它包含Flexbox可用的许多功能，例如自动堆叠，源顺序，垂直对齐和水平对齐。浏览器支持Chrome，Firefox，Internet Explorer 10 +，Safari 6 +，Android 4+和iOS 7+支持flex网格。下表描述了Flex Grid的功能及其描述。Sr.No.Features & Description1ImportingIt incl...
📅 最后修改于: 2020-10-25 02:40:32 🧑 作者: Mango
在本章中，我们将研究Forms。 Foundation为Forms提供了功能强大，简单易用的通用布局系统，该系统结合了表单样式和网格支持。下表列出了Foundation中使用的表单元素。Sr.No.Form element & Description1Form BasicsCreation of forms is easy and very flexible, which are built wi...
📅 最后修改于: 2020-10-25 02:40:52 🧑 作者: Mango
描述Foundation使用可见性类根据设备方向(纵向和横向)或屏幕尺寸(小，中，大或超大屏幕)显示或隐藏元素。它允许用户基于浏览环境使用元素。下表列出了Foundation的可见性类，这些类根据其浏览环境控制元素-Sr.No.Visibility Class & Description1Show by Screen SizeIt shows the elements based on the d...
📅 最后修改于: 2020-10-25 02:41:33 🧑 作者: Mango
描述Foundation中的版式定义了标题，段落，列表和其他内联元素，这些元素为元素创建了引人入胜且简单的默认样式。下表列出了Foundation中使用的不同类型的排版-Sr.No.Typography & Description1ParagraphsParagraph is a group of sentences defined with different font size, highli...