基础 - 安装

基础安装 - 从简单和简单的步骤学习基础，从基本到高级概念，包括概述，安装，入门项目，厨房水槽，全局样式，Sass，JavaScript，JavaScript实用程序，媒体查询，网格，Flex网格，表格，可见性类，基本排版，排版助手，按钮，按钮组，关闭按钮，滑块，开关，导航，菜单，下拉菜单和向下钻取菜单，手风琴菜单，响应式导航，麦哲伦，分页，面包屑，容器，手风琴，标注，下拉式 - 窗格，媒体对象，画布，显示模式，表格，标签，Flex视频，标签，轨道，进度条，工具提示，插件，遵守，均衡器，交换，Toggler，粘滞，Sass功能和Mixins，运动UI。

在本章中，我们将讨论如何在网站上安装和使用Foundation.

下载基金会

当您打开链接时 foundation.zurb.com ，您将看到如下所示的屏幕和减号;

基础安装

点击下载基础6 按钮，您将被重定向到另一个页面.

在这里您可以看到四个按钮 :

基础安装

下载所有内容 : ;如果您希望在框架中拥有所有内容，即vanilla CSS和JS，您可以下载此版本的Foundation.
下载Essentials : 去;它将下载包含网格，按钮，排版等的简单版本.
自定义下载 : 这将下载Foundation的自定义库，它包含元素并定义列的大小，字体大小，颜色等.
通过SCSS安装 : 这会将您重定向到文档页面以安装网站基础.

您可以点击下载所有内容按钮来获取框架中的所有内容，即CSS和JS.由于文件包含框架中的所有内容，因此每次您不需要为单个功能包含单独的文件.在编写本教程时，已下载最新版本(Foundation 6).

文件结构

下载Foundation后，提取ZIP文件，您将看到以下文件/目录结构 :

基础安装

正如您所看到的，有编译的CSS和JS(基础.*)，以及编译和缩小的CSS和JS(foundation.min.*).

我们在本教程中使用的是CDN版本的库.

HTML模板

使用Foundation的基本HTML模板如下所示 :

         Foundation Template                                          Hello, world!

以下部分详细介绍了上述代码.

HTML5 doctype

Foundation由某些HTML元素和需要使用HTML5 doctype的CSS属性组成.因此，HTML5 doctype的以下代码应该包含在使用Foundation的所有项目的开头.

   ....

移动优先

有助于响应移动设备.您需要将视口元标记包含在< head>中元素，以确保在移动设备上正确渲染和触摸缩放.

width 属性控制设备的宽度.将其设置为设备宽度将确保它在各种设备(手机，台式机，平板电脑......)中正确呈现.
initial -scale = 1.0 确保加载后，您的网页将以1:1的比例呈现，并且不会开箱即用.

组件的初始化

基础中需要jQuery脚本，用于模态和下拉等组件.

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

保存上面给出的html代码 firstexample.html 文件.
在浏览器中打开此HTML文件，输出显示如下.