zurb-foundation - Foundation 4可以有一个范围吗？

Question

Foundation 4 只能在页面的某些区域初始化吗？

例如，如果我有 2 个 div，我可以调用 Foundation("#div2") 并且所有 CSS 和 javascript 事件仅在 div#2 中应用吗？

谢谢一千！

Answer 1

一般不会影响你的。例如网格系统主要由 CSS 控制。对于表单，除非您将custom类应用于表单，否则表单元素的 js 将不会启动。为了说明这一点，以下两种表单中的一种具有custom类，而另一种则没有。请注意，Foundation 将为带有custom类的表单添加两个锚标记和一个无序列表：

<form id="form1">
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>
<form id="form2" class="custom">
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

这是看到它在行动中的小提琴。

更新：对于一般的“部分格式”，是的，您可以将基础应用于页面的某些部分。但请注意，即使网格位于您定位的部分之外，仍将应用网格系统。同样，这是因为它们主要由 CSS 控制。这是另一个插图：

<h1>The Grid System will still be applied to this</h1>    
<div class="row1">
    <div class="large-5 large-centered columns">
        <p class="panel">Centered Div</p>
    </div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
        <form id="form1" class="custom">
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </form>
        <div class="row">
            <div class="large-6 columns panel">
                <p>Test</p>
            </div>
        </div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

请参阅此更新的小提琴以显示此处给出的更新示例。