前端框架Foundation格子系统自学总结

最新推荐文章于 2024-06-19 09:42:37 发布

LYW_lyw

最新推荐文章于 2024-06-19 09:42:37 发布

阅读量575

点赞数

网址:https://foundation.zurb.com

http://www.runoob.com/foundation/foundation-buttons.html

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

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

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

什么是 Foundation？

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

<!-- css 文件 -->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">

<!-- jQuery 库 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>

<!-- modernizr.js 文件 -->
<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

使用 Foundation 创建页面

1. 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。

同时我们可以设置文档的语言属性 lang 及字符编码：

 
  < 
  !DOCTYPE  
  html 
  > 
  
 
  < 
  html  
  lang= 
  "zh-cn" 
  > 
  
   
  < 
  head 
  > 
  
     
  < 
  meta  
  charset= 
  "utf-8" 
  >  
  
   
  < 
  /head 
  > 
  
 
  < 
  /html 
  > 
 

2. Foundation 5 移动优先

Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。

为了确保页面可自由缩放可以在 <head> 元素中添加以下 <meta> 标签:

 
  < 
  meta  
  name= 
  "viewport"  
  content= 
  "width=device-width, initial-scale=1" 
  > 
 

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
3. 初始化组件
一些 Foundation 组件是基于 jQuery 开发的，如：模态框、下拉菜单等。你可以使用以下脚本来初始化组件：

< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >