Foundation 价格表
价格表可用于展示企业产品:
实例
<ul class="pricing-table"> <li class="title">Basic</li>
<li class="price">$19.99</li> <... 阅读全文
Foundation 网格实例
以下我们收集了一些网格常用的实例。
三个均等列
该实例演示了如何创建三个均等列
(33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠：
实例
<div cla... 阅读全文
Foundation 面板
Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:
实例
<div class="panel"> <h3>标题</h3>
<p>文本内容..&... 阅读全文
Foundation 网格 - 水平堆叠
以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。
实例
<div
class="row"> <div class="medium-6
... 阅读全文
Foundation CSS 可见性
根据屏幕尺寸显示元素
以下类会根据设备(屏幕尺寸)来显示元素。
类
描述
.show-for-small-only
只在小型设备上显示元素 (屏幕宽度小于 40.0625em )
.show-for-medium-up
在中... 阅读全文
Foundation 表单
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>,
<select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。
实例
<f... 阅读全文
Foundation 图片
Foundation 提供了响应式的图片，可以创建缩略图和图片弹窗：
尝试一下 »
缩略图
在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。
在 <a> 标签中添加 .th 类... 阅读全文
Foundation 提醒框
Foundation 可以很简单的创建一个提醒框：
提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning
或
.alert:
实例
<div data-alert c... 阅读全文
