8.2.1. What is Foundation? ¶
Foundation is a free front-end framework for rapid development.
Foundation contains design templates for HTML and CSS, providing a variety of UI components on Web, such as forms, buttons, Tabs, and so on. A variety of JavaScript plug-ins are also available.
Foundation Mobility first, can create responsive web pages.
Foundation is suitable for beginners and professionals.
Foundation has been used in Facebook, eBay, Samsung, Amazon, Disney and so on.
什么是响应式网页设计？
The idea of responsive Web design (Responsive Web design) is that the design and development of pages should be responsive and adjusted according to user behavior and device environment (system platform, screen size, screen orientation, etc.).
8.2.2. Where can I download Foundation? ¶
You can get Foundation in two ways:
1、从官网下载最新版本： http://foundation.zurb.com/ 。
2、使用菜鸟教程官网提供的CDN（推荐）：
<!-- 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>
The static CDN of this site is based on Ali Cloud service.
Foundation 使用 CDN 的优势 Foundation uses CDN to improve the access speed of enterprise sites, especially sites with a large number of pictures and static pages, and greatly improve the stability of sites of the above nature.
为什么使用 modernizr? Some Foundation’s components use the front-end HTML5 and CSS3 features, but not all browsers support them. Modernizr is a JavaScript library used to detect the HTML5 and CSS3 features of user browsers-allowing components to run properly on all browsers.
8.2.3. Create a page using Foundation ¶
1. 添加 HTML5 doctype
Foundation uses HTML elements and CSS attributes, so you need to add an HTML5 doctype document type declaration.
At the same time, we can set the language attribute lang and character encoding of the document:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
2. Foundation 5 移动优先
Foundation 5 is a responsive design for mobile devices. The core of the framework is mobility first.
To ensure that the page can be scaled freely, you can use the
<head>
Element to add the following
<meta>
Label:
<meta name="viewport" content="width=device-width, initial-scale=1">
Width: controls the size of the viewport, a value that can be specified, if 600, or a special value, such as device-width is the width of the device (in pixels of CSS when scaled to 100%).
Initial-scale: the initial scale, that is, the scale when the page is first load.
3. 初始化组件
Some Foundation components are developed based on jQuery, such as modal boxes, drop-down menus, etc. You can initialize the component using the following script:
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
8.2.4. Basic Foundation page ¶
How to create a basic foundation page:Foundation instance ¶
<divclass="row"><divclass="medium-12
columns"><divclass="panel"><h1>Foundation
页面</h1><p>重置窗口大小，查看效果！</p><buttontype="button"class="button
small">我是按钮!</button></div></div></div><divclass="row"><divclass="medium-4
columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div><divclass="medium-4
columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div><divclass="medium-4
columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div></div>