Learning Path

Foundation tutorials

Browse tutorials and chapters for Foundation.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TUTORIALFrontendFetched/Foundation

Foundation 滑动导航(Off-Canvas)

Foundation 滑动导航(Off-Canvas) 侧边栏导航 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出): 创建滑动导航创建滑动导航实例如下：实例 <div class='off-canvas-wrap' data-offcanvas>&..

TUTORIALFrontendFetched/Foundation

Foundation 分页

Foundation 分页如果你的网页有很多内容，就需要使用分页功能。要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类: 实例 <ul class='pagination'>  <li><a href='#'>1&..

TUTORIALFrontendFetched/Foundation

Foundation 面板

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

TUTORIALFrontendFetched/Foundation

Foundation 价格表

Foundation 价格表价格表可用于展示企业产品: 实例 <ul class='pricing-table'>  <li class='title'>Basic</li>  <li class='price'>$1..

TUTORIALFrontendFetched/Foundation

Foundation 进度条

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

TUTORIALFrontendFetched/Foundation

Foundation CSS 参考手册

Foundation CSS 参考手册 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 'Helvetica Neue'， line-height 默认为 1.5。这些设置是适用于 <body> 元素..

TUTORIALFrontendFetched/Foundation

Foundation 图标参考手册

Foundation 图标参考手册 Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。图标创建语法格式如下：语法中 name 部分为图标指定的名称。要使用图标，你可以将图片的样式文件放置在页面头部 <head> 部分: 以上是菜鸟教程使用的图标样式类，大家可以共用。点我在新页面中查看图标。..

TUTORIALFrontendFetched/Foundation

Foundation CSS 可见性

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

TUTORIALFrontendFetched/Foundation

Foundation 侧边栏

Foundation 侧边栏侧边栏导航 Foundation 使用 <ul class='side-nav'> 创建侧边栏: 实例 <ul class='side-nav'>  <li><a href='#'>Link 1<..

TUTORIALFrontendFetched/Foundation

Foundation 滑块

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

TUTORIALFrontendFetched/Foundation

Foundation 开关

Foundation 开关开关是在鼠标点击(手指敲击)下在 'On' 和 'Off' 状态下切换：切换开关使用 <div class='switch'> 创建。 <div> 内添加带有唯一 id 的 <input type='checkbox'> ， &..

TUTORIALFrontendFetched/Foundation

Foundation 表格

Foundation 表格 Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框：实例 <table>  <thead>    <tr>    &..

TUTORIALFrontendFetched/Foundation

Foundation 选项卡

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

TUTORIALFrontendFetched/Foundation

Foundation 提示框

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

TUTORIALFrontendFetched/Foundation

Foundation 顶部导航栏

Foundation 顶部导航栏顶部导航栏放在页面头部：实例 <nav class='top-bar' data-topbar>  <ul class='title-area'>    <li class='name'&..

TUTORIALFrontendFetched/Foundation

Foundation5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。在线实例菜鸟教程包含了上百个 Foundation 实例。你可以直接使用我们的在线编辑器，并点击“提交运行”按钮查看结果： Foundation ..

TUTORIALFrontendFetched/Foundation

Foundation 文本

Foundation 文本 Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 'Helvetica Neue'， line-height 默认为 1.5。以上默认的设置均是针对 <body> 元素。 Found..