Foundation Chinese Manual /Foundation 5 教程

Foundation 5 教程

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。


在线实例

php中文网包含了上百个 Foundation 实例。

你可以直接使用我们的在线编辑器,并点击"提交运行"按钮查看结果:

实例

   Foundation Example       

Foundation 页面

重置窗口大小,查看效果!

Column 1

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..

Column 2

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..

Column 3

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..


运行实例 »

点击 "运行实例" 按钮查看在线实例

点击"尝试一下"按钮查看在线实例。


Foundation 特性

以下效果为在 iframe 标签中的演示,可以点击"尝试一下"查看在线实例:

按钮

实例

   Foundation Example       

运行实例 »

点击 "运行实例" 按钮查看在线实例

表格:

实例

   Foundation Example       
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

运行实例 »

点击 "运行实例" 按钮查看在线实例

图片弹窗:

实例

   Foundation 实例       

运行实例 »

点击 "运行实例" 按钮查看在线实例

警告:

实例

   Foundation Example       
绿色警告框 ×
红色警告框 ×

运行实例 »

点击 "运行实例" 按钮查看在线实例

网格:

实例

   Foundation 实例       
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

运行实例 »

点击 "运行实例" 按钮查看在线实例

进度条:

实例

   Foundation 实例       
75%
50%

运行实例 »

点击 "运行实例" 按钮查看在线实例

面板:

实例

   Foundation 实例       

Gray Panel

Panel Text

Blue Panel

Panel Text


运行实例 »

点击 "运行实例" 按钮查看在线实例

下拉菜单:

实例

   Foundation 实例       
Dropdown Button

运行实例 »

点击 "运行实例" 按钮查看在线实例

手风琴效果:

实例

   Foundation 实例       

运行实例 »

点击 "运行实例" 按钮查看在线实例

顶部导航:

实例

   Foundation 实例       

运行实例 »

点击 "运行实例" 按钮查看在线实例

模态框:

实例

   Foundation 实例       

模态框标题。

模态框文本。

模态框文本。

×

运行实例 »

点击 "运行实例" 按钮查看在线实例

开关:

实例

   Foundation 实例       

运行实例 »

点击 "运行实例" 按钮查看在线实例

滑块:

实例

   Foundation 实例       
50

运行实例 »

点击 "运行实例" 按钮查看在线实例