最近几年来,地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持,如城市管理、区划、环境整治等等,地理信息成为信息时代重要的组成部分之一; “数字地球”概念的提出,更进一步推动了作为其技术支撑的GIS的发展。 与此同时,一些学者致力于相关的理论研究,如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面,并且这两个方面构成了相互促进的发展过程。
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(推荐):
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:
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 Element to add the following 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:
8.2.4. Basic Foundation page ¶
How to create a basic foundation page: 重置窗口大小,查看效果! 学的不仅是技术,更是梦想!!! 学的不仅是技术,更是梦想!!! 学的不仅是技术,更是梦想!!!Foundation instance ¶
Foundation 页面
菜鸟教程
菜鸟教程
菜鸟教程