Learning Path
浏览 Foundation 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
41
Foundation5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 在线实例 菜鸟教程包含了上百个 Foundation 实例。 你可以直接使用我们的在线编辑器，并点击“提交运行”按钮查看结果： Foundation ..
Foundation 提醒框 Foundation 可以很简单的创建一个提醒框： 提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert: 实例 <div data-alert class='alert-box'> This is a def..
Foundation 按钮组按钮组 Foundation 可以在同一行内创建一系列的按钮。 可以使用 <ul> 元素并添加 .button-group 类来创建按钮组： 实例 <ul class='button-group'> <li><button type='button&#..
Foundation 按钮 按钮样式 Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary, .success, .info, .warning 或 .alert: 实例 <button type='button' class='button'>Default&l..
Foundation 折叠列表 在你想隐藏部分内容的显示时，可以使用折叠列表。 实例 <ul class='accordion' data-accordion> <li class='accordion-navigation'> <a..
Foundation 下拉菜单 Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值： 实例 <!-- Trigger the Dropdown --><a href='#' data-dropdown='id01' class='button dropdown'>Dropdown Button&a..
Foundation 均衡器(Equalizer) 我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。 注意: 均衡器需要使用 JavaScript，所以你需要初始化 Foundation JS: 实例 <div class='row' data-equal..
Foundation 表单 Foundation 表单控制会自动设置为全局样式: 所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。 实例 <form> Input: <in..
Foundation 起步 什么是 Foundation？ Foundation 是一个免费的前端框架，用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。 Foundation 移动优先，可创建响应式网页。 Foundation 适用于初学者和专业人士。 Foundatio..
Foundation 块状网格 块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。 可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量： 实例 <ul class='small-block-grid-3'> ..
Foundation 网格实例 以下我们收集了一些网格常用的实例。 三个均等列 该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠： 实例 <div class='row'> <div class='medium-4 columns' style=..
Foundation 网格 - 大型设备 上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)： .... .... 在大型设备上我们推荐的比例为 33%/66%。 提示: 大型设备的屏幕尺寸定义大于 64.0625em。 大型设备上使用 .larg..
Foundation 网格 - 中型设备 上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%： .... .... 在中型设备上我们推荐的比例为 50%/50%。 提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。 中型设备上使用 .medium-* 类。 现在我们在中型设备上添加两列： .... .... 以上实例设置了两个列，比例为 25..
Foundation 网格 - 小型设备 假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类。 .... .... 以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码): .small in them an..
Foundation 网格 - 水平堆叠 以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。 实例 <div class='row'> <div class='medium-6 columns' style='background-colo..
Foundation 网格系统 Foundation 网格系统为 12 列。 如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。 Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。 网格列 Foundation 网格系统有三个列： .small (手机端) .medium (平板设备) .large (电..
Foundation 图标 Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。 图标可用于文本，按钮，工具条，导航栏，表单等。 以下是 Foundation 图标的实例： 刷新按钮: 检测图标: 主页图标: 图标语法 创建图标语法格式如下: name 部分替换为图标的名字。 要使用图标我们需要在 <head> 部分添加图标的样式文件： ..
Foundation 图片 Foundation 提供了响应式的图片，可以创建缩略图和图片弹窗： 尝试一下 » 缩略图 在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。 在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框: 实例 <a href='paris.j..
Foundation 输入框尺寸 使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。 更多网格系统知识，可以点击 网格系统 教程。 实例 <form> <div class='row'> <div class=..
Foundation Joyride Joyride 是一个功能向导的 JavaScript 效果，创建实例如下： 实例 <!-- Elements that control the tour stops --><h3 id='first'>First stop!</h3><h3 id='se..
Foundation 标签 .label 类用于提供一些附加信息: 实例 <h2>Example <span class='label'>New</span></h2><h3>Example <span class='label'&a..
Foundation 列表 在 HTML 中，无序列表 (<ul>) 实例如下: <ul> <li>List item</li> <li>List item</li> <li>..
Foundation 麦哲伦（Magellan）导航 如何创建麦哲伦导航 麦哲伦导航就是一个导航索引，创建方式如下: 实例 <div data-magellan-expedition='fixed'> <dl class='sub-nav'> &..
Foundation 模态框 模态框是一个显示在页面头部的弹窗。 我们可以在容器元素上(如 <div id='myModal')使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id='id' 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 'myModa..