Learning Path
浏览 Foundation 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
41
Foundation 滑动导航(Off-Canvas) 侧边栏导航 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出): 创建滑动导航 创建滑动导航实例如下： 实例 <!-- 最外层div：页面布局 --><div class='off-canvas-wrap' data-offcanvas>&..
Foundation 分页 如果你的网页有很多内容，就需要使用分页功能。 要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类: 实例 <ul class='pagination'> <li><a href='#'>1&..
Foundation 面板 Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建: 实例 <div class='panel'> <h3>标题</h3> <p>文本内容..</p>&..
Foundation 价格表 价格表可用于展示企业产品: 实例 <ul class='pricing-table'> <li class='title'>Basic</li> <li class='price'>$1..
Foundation 进度条 Foundation 进度条可以作为程序处理的程度来显示： 我们可以在 <div> 元素中使用 .progress 类来创建进度条， .meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示： 实例 <div class='progress&..
Foundation CSS 参考手册 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。 默认的字体为 'Helvetica Neue'， line-height 默认为 1.5。 这些设置是适用于 <body> 元素..
Foundation 图标参考手册 Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。 图标创建语法格式如下： 语法中 name 部分为图标指定的名称。 要使用图标，你可以将图片的样式文件放置在页面头部 <head> 部分: 以上是菜鸟教程使用的图标样式类，大家可以共用。 点我在新页面中查看图标。..
Foundation CSS 可见性 根据屏幕尺寸显示元素 以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-for-medium-up 在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em) .show-..
Foundation 侧边栏 侧边栏导航 Foundation 使用 <ul class='side-nav'> 创建侧边栏: 实例 <ul class='side-nav'> <li><a href='#'>Link 1<..
Foundation 滑块 Foundation 滑块允许用户通过拖动来选取区间值: 滑块可以通过使用 <div class='range-slider' data-slider> 创建。在 <div> 内, 添加两个 <span> 元素: <span class='range-slider-handl..
Foundation 开关 开关是在鼠标点击(手指敲击)下在 'On' 和 'Off' 状态下切换： 切换开关使用 <div class='switch'> 创建。 <div> 内添加带有唯一 id 的 <input type='checkbox'> ， &..
Foundation 表格 Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框： 实例 <table> <thead> <tr> &..
Foundation 选项卡 选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。 选项卡使用 <ul class='tabs' data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。 提示: 当前选中项可以使用 .active 类。 实例 <ul class='tabs..
Foundation 提示框 提示框在鼠标移动到元素上后显示： 我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。 注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS: 实例 <span data-tooltip title='Hooray!'>Hover ove..
Foundation 顶部导航栏 顶部导航栏放在页面头部： 实例 <nav class='top-bar' data-topbar> <ul class='title-area'> <li class='name'&..
Foundation5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 在线实例 菜鸟教程包含了上百个 Foundation 实例。 你可以直接使用我们的在线编辑器，并点击“提交运行”按钮查看结果： Foundation ..
Foundation 文本 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 'Helvetica Neue'， line-height 默认为 1.5。 以上默认的设置均是针对 <body> 元素。 Found..