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