系统、网站、API站点，简单高效开发

Foundation 教程

Foundation5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation 麦哲伦（Magellan）导航 Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器(Equalizer)

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

Foundation 图标参考手册 Foundation CSS 参考手册 Foundation CSS 可见性

Foundation5 教程

Foundation5 教程

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

在线实例

菜鸟教程包含了上百个 Foundation 实例。

你可以直接使用我们的在线编辑器，并点击"提交运行"按钮查看结果：

Foundation 实例

<div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">我是按钮!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>菜鸟教程</h3> <p>学的不仅是技术，更是梦想！！！</p> </div> <div class="medium-4 columns"> <h3>菜鸟教程</h3> <p>学的不仅是技术，更是梦想！！！</p> </div> <div class="medium-4 columns"> <h3>菜鸟教程</h3> <p>学的不仅是技术，更是梦想！！！</p> </div> </div>

点击"尝试一下"按钮查看在线实例。

Foundation 特性

以下效果为在 iframe 标签中的演示，可以点击"尝试一下"查看在线实例：

按钮


表格:


图片弹窗:


警告:



网格:


进度条:


面板:


下拉菜单:


手风琴效果:


顶部导航:


模态框:


开关:


滑块:


备案号：闽ICP备20003806号     厦门市湖里区陈朝能网络技术工作室