Foundation 起步

什么是 Foundation? Foundation 是一个免费的前端框架,用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。 Foundation 移动优先,可创建响应式网页。 Foundation 适用于初学者和专业人士。 Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。 什么是响应式网页设计? 响应式Web...

Foundation 文本

Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 "Helvetica Neue", line-height 默认为1.5。 以上默认的设置均是针对 <body> 元素。 Foundation 文字排列设计 本章节我们将讨论 Foundation 的文字排列设计。 以下实例的真实样式请通过点击"尝试一下"按钮查看。...

Foundation 表格

Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框: 实例 <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Ma...

Foundation 按钮

按钮样式 Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为:.secondary, .success, .info, .warning 或 .alert: 实例 <button type="button" class="button">Default</button> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button success">Success</button> ...

Foundation 按钮组

按钮组 Foundation 可以在同一行内创建一系列的按钮。 可以使用 <ul> 元素并添加 .button-group 类来创建按钮组: 实例 <ul class="button-group"> <li><button type="button" class="button">Apple</button></li> <li><button type="button" class="button">Samsung</button></li> <li><button type="button" class="button">S...

Foundation 图标

Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。 图标可用于文本,按钮,工具条,导航栏,表单等。 以下是 Foundation 图标的实例: 刷新按钮:    检测图标:    主页图标:    图标语法 创建图标语法格式如下: <i class="fi-name"></i> name 部分替换为图标的名字。 要使用图标我们需要在 <head> 部分添加图标的样式文件: <link rel="stylesheet" href="http://st...

Foundation 标签

.label 类用于提供一些附加信息: 实例 <h2>Example <span class="label">New</span></h2> <h3>Example <span class="label">New</span></h3> <h4>Example <span class="label">New</span></h4> 尝试一下 » 以下类可以设置标签的颜色: .secondary, .success,.info, .warning 或 .alert: 实例 <span class="label">Default...

Foundation 提醒框

Foundation 可以很简单的创建一个提醒框: 提醒框可以使用 .alert-box 类创建, 可以添加可选的类:.secondary, .success, .info, .warning 或 .alert: 实例 <div data-alert class="alert-box"> This is a default alert box. </div> <div data-alert class="alert-box secondary"> This is a secondary alert box. </div> <div data-alert class="alert-box success"> &l...

Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示: 我们可以在 <div> 元素中使用 .progress 类来创建进度条, .meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比,如下所示: 实例 <div class="progress"> <span class="meter" style="width:70%"></span> </div> 尝试一下 » 进度条颜色 默认情况下,进度条颜色为蓝色。不同颜色的类为:...

Foundation 面板

Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建: 实例 <div class="panel"> <h3>标题</h3> <p>文本内容..</p> </div> 尝试一下 » 面板颜色 使用 .callout 类将面板颜色修改为浅蓝: 实例 <div class="panel callout"> <h3>标题</h3> <p>文本内容..</p> </div> 尝试一下 » 圆角面板 使用 .r...