AI教程网 - 未来以来，拥抱AI；新手入门，从AI教程网开始......

 分类：Foundation教程

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架，构建基于任何设备上的 Web 应用。

Foundation教程

Foundation CSS 可见性

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation CSS 参考手册

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

AI君 6个月前 (03-20) 21℃ 0喜欢

Foundation教程

Foundation 网格实例

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 块状网格

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 网格 – 大型设备

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 网格 – 小型设备

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 网格 – 水平堆叠

Foundation 网格 – 水平堆叠
Foundation 网格 – 水平堆叠 以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。 实例 <div class="row">  <div cl...

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 网格系统

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 均衡器

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 模态框

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 提示框

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 滑块

Foundation 滑块
Foundation 滑块 Foundation 滑块允许用户通过拖动来选取区间值: 滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个...

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 开关

Foundation 开关
Foundation 开关 开关是在鼠标点击(手指敲击)下在 “On” 和 “Off” 状态下切换： 切换开关使用 <div class="switch"> 创建。<div&...

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 输入框尺寸

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

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 表单

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

AI君 6个月前 (03-20) 21℃ 0喜欢

Foundation教程

Foundation Magellan

Foundation Magellan
Foundation 麦哲伦（Magellan）导航 如何创建麦哲伦导航 麦哲伦导航就是一个导航索引，创建方式如下: 实例 <div data-magellan-expedition="fixed">  <dl c...

AI君 6个月前 (03-20) 20℃ 0喜欢

Foundation教程

Foundation 滑动导航(Off-Canvas)

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

AI君 6个月前 (03-20) 20℃ 0喜欢