Foundation5 教程 第2页

2023-01-01阅读(386)

我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。 注意:&nb...

2023-01-01阅读(319)

Joyride 是一个功能向导的 JavaScript 效果，创建实例如下： 实例解析 以上实例中，我们创建了两个元素，每个元素都有独立的 ID。 两个元素设置了 joyride 开始和结束的位置。 我们在 <ol>&...

2023-01-01阅读(384)

模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性...

2023-01-01阅读(391)

我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Found...

2023-01-01阅读(428)

滑块可以通过使用 <div class="range-slider" data-slider> 创建。在 <div> 内, 添加两个 <span>&nbs...

2023-01-01阅读(363)

切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> ， <label> 元素的 for 属性需要与 <input...

2023-01-01阅读(517)

使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。 更多网格系统知识，可以点击 网格系统 教程。 相等大小列 以下演示了相等大小列的实例: 内联标签 如果你希望你的标签内容显示在左边（不是...

2023-01-01阅读(364)

Foundation 表单控制会自动设置为全局样式: 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外...

2023-01-01阅读(397)

如何创建麦哲伦导航 麦哲伦导航就是一个导航索引，创建方式如下: 实例解析 在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。 然后在 ...

2023-01-01阅读(328)

创建滑动导航实例如下：