Foundation 模态框

模式框是显示在页面顶部的弹出窗口。我们可以在容器元素上使用唯一 ID（例如＜div ID＝“mymodal”），并添加。

查看模态类和数据查看属性以添加模态框。我们可以使用 data review id=“id”属性 Ali 打开任何元素上的模式框。

ID 必须与容器 ID 一致（实例为“mymodal”）。如果想通过单击模式框外部的区域来关闭模式框。

可以添加将 review 模态类关闭到模态框的“关闭”按钮<a>选项卡。

<!-- Trigger the Modal --><button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>
<!-- The Modal Content --><div id="myModal" class="reveal-modal" data-reveal>  <h2>Heading in Modal.</h2>  <p>Some text in the modal.</p>  <p>Some text in the modal.</p>  <a class="close-reveal-modal">&times;</a></div>
<!-- Initialize Foundation JS --><script>$(document).ready(function() {    $(document).foundation();})</script>

模态框大小

可以在模态框容器上添加以下类以设置模态框的大小：

• 微小：30%宽度

• 小：40%宽度

• 中等：60%宽度

• 大：70%宽度

• XLarge:95%宽度

• 全尺寸：100%宽度和高度

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

可以在模式框中嵌入一个模式框，并在第一个模式框上添加一个新的触发器按钮。必须为嵌入式模态框设置唯一 ID：

<div id="myModal" class="reveal-modal" data-reveal>  <h2>First Modal</h2>  <p>Some text..</p>  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>  <a class="close-reveal-modal">&times;</a></div>

第二模态框代替第一模态框。如果要在不关闭第一个模态框的情况下打开第二个模态框。

可以将数据选项＝“multiple_opened:true”添加到第二个模式框属性：

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">

Foundation 开关

切换开关是使用＜div class＝“switch”＞＜向 div＞添加一个具有唯一 ID 的＜input type＝“checkbox”＞创建的，并且＜label＞元素的 for 属性需要与＜input type＝“heckbox”＜的 ID 匹配：

使用大的小的。设置开关大小的小类：

<div class="switch large">...</div><div class="switch">...</div><div class="switch small">...</div><div class="switch tiny">...</div>

Foundation 下的 Subsystems

优点：

1.它有一个强大的网格系统、一些有用的 UI 组件和优秀的 JavaScript 插件。2.它提供了一种响应性设计，可以服务于所有类型的设备。3.它针对移动设备进行了优化，并真正支持移动优先方法。4.它提供了可定制和可扩展的 HTML 模板。

缺点：

1、由于 twitter bootstrap 的流行，社区比基金会更支持 twitter Bootsstrap。2、初学者可能需要一些时间来学习和利用预处理器支持。3、缺乏广泛的支持，如质量检查网站和论坛来解决问题。

根据屏幕方向显示元素

以下类根据设备（屏幕大小）隐藏元素。我们可以设置元素在不同方向上是显示还是隐藏。笔记本和其他桌面设备通常是水平的，但移动电话和平板设备可以是水平的或垂直的。我们可以根据用户手机的方向设置元素隐藏和显示：

.show-for-landscape：在横向时显示元素（纵向隐藏）

show-for-portrait：在纵向时显示元素（横向隐藏）

<p class="show-for-landscape">文本只在横向显示。</p><p class="show-for-portrait">文本只在纵向显示。</p>

Foundation5 是一款针对移动设备的响应式设计。

该框架的核心是移动优先。为了确保页面可以自由缩放，可以将以下＜meta＞标记添加到＜head＞元素：

<meta name="viewport" content="width=device-width, initial-scale=1">

Foundation 坍塌清单

这个 Accordion 类和 data Accordion 属性用于创建可折叠元素 Accordion 导航类用于渲染可折叠元素。

实际内容在中。内容类（<div class=“Content”）。单击按钮以显示它。我们将＜a＞元素添加到列表项以控制（显示/隐藏）可折叠内容。然后，锚链接使用与可折叠内容内容相同的 ID（<a href=#demo”与<div ID=“demo”相关联）。注意：可折叠效果需要初始化 foundation JS。默认情况下，隐藏可折叠内容。我们可以补充。<div>上的活动类以使其默认显示：

<div id="demo" class="content active">

手风琴效果用于扩展和设置可折叠内容。通过使用多个不同的锚链接和 ID 创建手风琴效果：

<li class="accordion-navigation">    <a href="#demo2">手风琴实例 2</a>    <div id="demo2" class="content">      Demo 2 - Lorem ipsum dolor sit amet....    </div>  </li>  <li class="accordion-navigation">    <a href="#demo3">手风琴实例 3</a>    <div id="demo3" class="content">    </div>

默认情况下，其中一个手风琴列表项处于打开状态。如果要全部关闭，可以使用 data options=“multi_expand:true；”属性。