Foundation5 教程-OGeek|极客世界-中国程序员成长平台

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› Foundation5›Foundation5 教程

Foundation5 教程

RSS

Foundation 网格 - 大型设备

Foundation 网格 - 大型设备上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)：div class= ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：411 | 回复：0
Foundation 块状网格

Foundation 块状网格块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。可以使用 ul 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量： ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：398 | 回复：0
Foundation 网格实例

Foundation 网格实例以下我们收集了一些网格常用的实例。三个均等列该实例演示了如何创建三个均等列(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：实例div class=row div c_来自Found ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：430 | 回复：0
Foundation 图标参考手册

Foundation 图标参考手册Foundation 图标Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。图标创建语法格式如下：i class=fi-name/i语法中 name 部分为图标指定的名_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：420 | 回复：0
Foundation CSS 参考手册

Foundation CSS 参考手册Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：417 | 回复：0
Foundation CSS 可见性

Foundation CSS 可见性根据屏幕尺寸显示元素以下类会根据设备(屏幕尺寸)来显示元素。类描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-for-medium- ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:04 | 阅读：421 | 回复：0
Foundation 提示框

Foundation 提示框提示框在鼠标移动到元素上后显示：我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。注意: 滑块需要使用 JavaScript。所以你需要初始化oundatio ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：410 | 回复：0
Foundation 模态框

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

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：421 | 回复：0
Foundation Joyride

Foundation JoyrideJoyride 是一个功能向导的 JavaScript 效果，创建实例如下：实例!-- Elements that control the tour stops --h3 id=firstFirst stop_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：417 | 回复：0
Foundation 均衡器

Foundation 均衡器(Equalizer)我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。注意: 滑块需要使用 JavaS ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：437 | 回复：0
Foundation 网格系统

Foundation 网格系统Foundation 网格系统为 12 列。如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。Foundation 的网格系统是响应式的。列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列， ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：417 | 回复：0
Foundation 网格 - 水平堆叠

Foundation 网格 - 水平堆叠以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。实例div class=rowdiv class=medium-6co_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：401 | 回复：0
Foundation 网格 - 小型设备

Foundation 网格 - 小型设备假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。提示: 小型设备的定义是屏幕小于 40.0625em。小型设备上我们使用 .small-* 类。div class=small-3 columns&_来 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：438 | 回复：0
Foundation 网格 - 中型设备

Foundation 网格 - 中型设备上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%：div class=small-3 columns..../divdiv class=s_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:03 | 阅读：415 | 回复：0
Foundation 侧边栏

Foundation 侧边栏侧边栏导航Foundation 使用 ul class=side-nav 创建侧边栏:实例ul class=side-nav lia href=_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：423 | 回复：0
Foundation 滑动导航(Off-Canvas)

Foundation 滑动导航(Off-Canvas)侧边栏导航Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):创建滑动导航创建滑动导航实例如下：实例!-- 最外层div：页面布局 --div class=off ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：469 | 回复：0
Foundation Magellan

Foundation 麦哲伦（Magellan）导航如何创建麦哲伦导航麦哲伦导航就是一个导航索引，创建方式如下:实例 div data-magellan-expedition=fixed dl class=sub-nav&qu_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：443 | 回复：0
Foundation 表单

Foundation 表单Foundation 表单控制会自动设置为全局样式:所有 textarea, select 及 input 元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠标移动效果。实例formInput:_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：409 | 回复：0
Foundation 输入框尺寸

Foundation 输入框尺寸使用网格的列来设置输入框的大小，如 .large-6, .medium-6, 等。更多网格系统知识，可以点击网格系统教程。实例 form div class=row&n_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：405 | 回复：0
Foundation 开关

Foundation 开关开关是在鼠标点击(手指敲击)下在 On 和 Off 状态下切换：切换开关使用 div class=switch 创建。div 内添加带有唯一 id 的 inpu_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：425 | 回复：0
Foundation 滑块

Foundation 滑块Foundation 滑块允许用户通过拖动来选取区间值:滑块可以通过使用 div class=range-slider data-slider 创建。在div 内, 添加两个 span 元素: _来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:02 | 阅读：423 | 回复：0
Foundation 面板

Foundation 面板Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:实例div class=panel h3标题/h3 p文本内容._来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：470 | 回复：0
Foundation 图片

Foundation 图片Foundation 提供了响应式的图片，可以创建缩略图喝图片弹窗：尝试一下 »缩略图在 img 元素外添加 a 元素将图片作为一个锚链接。在 a 标签中添加 .th 类将图片设置为缩略图。鼠标移动到上面会显示一 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：414 | 回复：0
Foundation 下拉菜单

Foundation 下拉菜单Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值：实例!-- Trigger the Dropdown --a href=# data-dropdown=id01 class=&_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：452 | 回复：0
Foundation 折叠列表

Foundation 折叠列表在你想隐藏部分内容的显示时，可以使用折叠列表。实例ul class=accordion data-accordion li class=accordion-navigation&_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：466 | 回复：0
Foundation 列表

Foundation 列表在 HTML 中，无序列表 (ul) 实例如下:ul liList item/li liList item/li liList_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：439 | 回复：0
Foundation 选项卡

Foundation 选项卡选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。选项卡使用 ul class=tabs data-tab 来创建, 各个选项使用 li 元素并加上 .tab-title 类来创建。提示: 当前选中项可以使用_来自Founda ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：447 | 回复：0
Foundation 分页

Foundation 分页如果你的网页有很多内容，就需要使用分页功能。要创建一个基础的分页功能需要在 ul 元素上加上 .pagination 类:实例ul class=pagination lia href_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：430 | 回复：0
Foundation 价格表

Foundation 价格表价格表可用于展示企业产品:实例ul class=pricing-table li class=titleBasic/li li class=&q_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：453 | 回复：0
Foundation 顶部导航栏

Foundation 顶部导航栏顶部导航栏放在页面头部：实例nav class=top-bar data-topbar ul class=title-area li_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:01 | 阅读：397 | 回复：0
Foundation 表格

Foundation 表格Foundation 的 table 元素样式为灰色斑马条纹且包含四个边框：实例table thead tr&nb_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：435 | 回复：0
Foundation 按钮

Foundation 按钮按钮样式Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary, .success, .info, .warning 或 .alert:实例button type=bu_来自Foundation ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：460 | 回复：0
Foundation 按钮组

Foundation 按钮组按钮组Foundation 可以在同一行内创建一系列的按钮。可以使用 ul 元素并添加 .button-group 类来创建按钮组：实例ul class=button-group li&l_来自Foundation5 教程 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：426 | 回复：0
Foundation 图标

Foundation 图标Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。图标可用于文本，按钮，工具条，导航栏，表单等。以下是 Foundation 图标的实例：刷新按钮: 检测图标: 主页图标: 图标语法创 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：437 | 回复：0
Foundation 标签

Foundation 标签.label 类用于提供一些附加信息:实例h2Example span class=labelNew/span/h2h3Example span class=&q_来自Foundation5 教程……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：413 | 回复：0
Foundation 提醒框

Foundation 提醒框Foundation 可以很简单的创建一个提醒框：提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:实例div data-alert class=&qu_来自Foundation ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：425 | 回复：0
Foundation 进度条

Foundation 进度条Foundation 进度条可以作为程序处理的程度来显示：我们可以在 div 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(span)。我们可以在 span 元素中设置进度百分比，如下所示：实例_来自 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 20:00 | 阅读：433 | 回复：0
Foundation 教程

Foundation 5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。_来自Foundation5 ...……

作者：菜鸟教程小白 | 时间：2022-1-31 19:59 | 阅读：1634 | 回复：0
Foundation 起步

Foundation 起步什么是 Foundation？ Foundation 是一个免费的前端框架，用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 Java ...……

作者：菜鸟教程小白 | 时间：2022-1-31 19:59 | 阅读：560 | 回复：0
Foundation 文本

Foundation 文本Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 Helvetica Neu ...……

作者：菜鸟教程小白 | 时间：2022-1-31 19:59 | 阅读：485 | 回复：0

客服电话

电子邮件

Foundation5 教程

关于我们

产品与服务

解决方案

139-2527-9053