三、栅格系统
3.1 栅格系统的核心理念
Foundation的栅格系统是其布局功能的核心，基于12列设计，采用移动优先的策略。这意味着：
小屏幕优先：默认样式适用于小屏幕设备，通过媒体查询逐步增强到大屏幕
百分比宽度：所有列宽使用百分比定义，确保在不同屏幕尺寸下的相对一致性
灵活嵌套：栅格系统支持无限嵌套，可以在列内部再次划分网格
3.2 基础栅格语法
Foundation 6.x使用grid-x和cell来构建栅格，取代了旧版的row和columns：
<!-- 基础栅格容器 -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-6 medium-4 large-3">
响应式列：手机半屏，平板1/3，桌面1/4
</div>
<div class="cell small-6 medium-4 large-3">
响应式列
</div>
<div class="cell small-12 medium-4 large-6">
响应式列：手机全屏，平板1/3，桌面半屏
</div>
</div>
</div>
3.3 响应式断点
Foundation定义了6个响应式断点，从最小到最大依次为：
响应式列宽示例：
<div class="grid-x grid-padding-x">
<!-- 手机全屏 → 平板半屏 → 桌面1/3 → 大屏1/4 -->
<div class="cell small-12 medium-6 large-4 xlarge-3">
响应式内容
</div>
</div>
3.4 列偏移
Foundation提供了offset-*类来创建列偏移，实现内容的灵活定位：
<div class="grid-x grid-padding-x">
<!-- 在中等屏幕上偏移3列 -->
<div class="cell medium-6 medium-offset-3">
水平居中（占6列，偏移3列）
</div>
</div>
3.5 列排序
通过order-*类可以改变列的显示顺序，这对于移动端优先的响应式设计非常有用：
<div class="grid-x">
<!-- 在大屏幕上：侧边栏在左，内容在右 -->
<!-- 在手机上：侧边栏在内容下方 -->
<div class="cell large-8 large-order-2">
主要内容区域（在大屏幕上排第2）
</div>
<div class="cell large-4 large-order-1">
侧边栏（在大屏幕上排第1）
</div>
</div>
3.6 嵌套栅格
栅格系统支持无限嵌套，可以在列中再次放置grid-x：
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-6">
<!-- 外层列 -->
<div class="grid-x grid-padding-x">
<div class="cell small-6">嵌套列1</div>
<div class="cell small-6">嵌套列2</div>
</div>
</div>
<div class="cell small-12 medium-6">
外层列2
</div>
</div>
3.7 Flex网格特性
Foundation 6完全采用Flexbox构建栅格系统，相比传统浮动布局具有以下优势：
http://vbzcj.cn/category/qixiangzhishi.html
等高列：同一行的所有列自动保持相同高度
垂直对齐：通过align-top、align-middle、align-bottom轻松控制垂直对齐
水平对齐：通过align-left、align-center、align-right、align-justify、align-spaced灵活控制水平分布
反向排列：通过grid-x的dir="rtl"属性可以反向排列子元素
<!-- 垂直居中对齐 -->
<div class="grid-x align-middle" style="height: 300px;">
<div class="cell small-6">内容会自动垂直居中</div>
<div class="cell small-6">即使高度不同也会对齐</div>
</div>
<!-- 两端对齐 -->
<div class="grid-x align-justify">
<div class="cell shrink">靠左</div>
<div class="cell shrink">靠右</div>
</div>
四、核心UI组件
4.1 按钮组件 Button
Foundation提供了功能丰富、高度可定制的按钮组件：
<!-- 按钮颜色变体 -->
<button type="button" class="button">默认按钮</button>
<button type="button" class="button primary">主要按钮</button>
<button type="button" class="button secondary">次要按钮</button>
<button type="button" class="button success">成功按钮</button>
<button type="button" class="button alert">警告按钮</button>
<button type="button" class="button warning">危险按钮</button>
<!-- 按钮尺寸 -->
<button type="button" class="button tiny">超小按钮</button>
<button type="button" class="button small">小按钮</button>
<button type="button" class="button large">大按钮</button>
<button type="button" class="button expanded">扩展按钮（全宽）</button>
<!-- 空心按钮 -->
<button type="button" class="button hollow primary">空心按钮</button>
<!-- 禁用按钮 -->
<button type="button" class="button" disabled>禁用按钮</button>
<!-- 按钮组 -->
<div class="button-group">
<a class="button">按钮1</a>
<a class="button">按钮2</a>
<a class="button">按钮3</a>
</div>
Button组件的设计特点：Foundation的按钮样式非常轻量，默认只提供必要的样式（内边距、圆角、基础颜色），更多样式需要开发者通过Sass变量自定义。
4.2 导航组件
Foundation提供了多种导航组件，适应不同的应用场景。
顶部栏 Top Bar
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">网站名称</li>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="搜索"></li>
<li><button type="button" class="button">搜索</button></li>
</ul>
</div>
</div>
响应式导航
Foundation 6内置了响应式导航组件，在小屏幕上自动折叠为汉堡菜单：
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">菜单</div>
</div>
<div class="top-bar" id="main-menu">
<!-- 导航内容 -->
</div>
侧边栏导航 Off-Canvas
Off-Canvas是Foundation的标志性组件之一，非常适合移动端导航：
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<button class="close-button" aria-label="关闭菜单" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<button type="button" class="button" data-toggle="offCanvas">打开菜单</button>
<!-- 页面主要内容 -->
</div>
Off-Canvas组件支持多种位置（position-left、position-right、position-top、position-bottom）和多种显示效果（reveal-for-medium在大屏幕上固定显示）。
4.3 卡片组件 Card
卡片是Foundation中用于内容展示的灵活容器：
<div class="card" style="width: 300px;">
<img src="image.jpg" alt="卡片图片">
<div class="card-section">
<h4>卡片标题</h4>
<p>这是卡片的内容描述。卡片是展示内容的理想容器。</p>
</div>
<div class="card-divider"></div>
<div class="card-section">
<a href="#" class="button">了解更多</a>
</div>
</div>
4.4 表单组件
Foundation提供了语义化、易用的表单样式：
<form>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<label>姓名
<input type="text" placeholder="请输入姓名">
</label>
</div>
<div class="cell medium-6">
<label>邮箱
<input type="email" placeholder="请输入邮箱">
</label>
</div>
</div>
<label>选择框
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
</label>
<fieldset>
<legend>请选择您的兴趣</legend>
<input type="checkbox" id="checkbox1"><label for="checkbox1">编程</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">设计</label>
</fieldset>
<button type="submit" class="button primary">提交</button>
</form>
表单组件的特点：Foundation的表单样式非常简洁，几乎不添加额外的修饰，鼓励开发者根据品牌需求进行自定义。
来源：
http://vbzcj.cn/
