Foundation 输入框尺寸 使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。 更多网格系统知识，可以点击 网格系统 教程。 实例 <form> <div class="row"> <div class="large-10 medium-7 columns"> ...
分类：
其他好文 时间：
2020-06-09 14:55:13
阅读次数：
58
Foundation 滑块允许用户通过拖动来选取区间值: 滑块可以通过使用 <div class="range-slider" data-slider> 创建。在 <div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块（蓝 ...
分类：
其他好文 时间：
2020-06-09 14:47:29
阅读次数：
71
侧边栏导航 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出): 创建滑动导航 创建滑动导航实例如下： 实例 <!-- 最外层div：页面布局 --><div class="off-canvas-wrap" data-offcanvas> <!-- 内部 ...
分类：
其他好文 时间：
2020-06-09 14:45:51
阅读次数：
66
Foundation 表单控制会自动设置为全局样式: 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。 实例 <form> Input: <input type="text" placeholder="Name"> ...
分类：
其他好文 时间：
2020-06-09 14:41:16
阅读次数：
64
Foundation 麦哲伦（Magellan）导航 如何创建麦哲伦导航 麦哲伦导航就是一个导航索引，创建方式如下: 实例 <div data-magellan-expedition="fixed"> <dl class="sub-nav"> <dd data-magellan-arrival="p ...
分类：
其他好文 时间：
2020-06-09 14:38:27
阅读次数：
64
开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换： 切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> ， <label> 元素的 for 属性需要与 <input type="c ...
分类：
其他好文 时间：
2020-06-09 14:24:25
阅读次数：
52
在你想隐藏部分内容的显示时，可以使用折叠列表。 实例 <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#demo">Simple Collapsible</a> <div id="dem ...
分类：
其他好文 时间：
2020-06-09 12:51:17
阅读次数：
59
在 HTML 中，无序列表 (<ul>) 实例如下: <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li></ul> 结果: List item List item List item Lis ...
分类：
其他好文 时间：
2020-06-09 12:47:45
阅读次数：
48
如果你的网页有很多内容，就需要使用分页功能。 要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类: 实例 <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li> ...
分类：
其他好文 时间：
2020-06-09 12:45:59
阅读次数：
55
选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。 选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。 提示: 当前选中项可以使用 .active 类。 实例 <ul class="tabs" da ...
分类：
其他好文 时间：
2020-06-09 12:31:30
阅读次数：
71
