Foundation starts
May 04, 2021 Foundation5
Table of contents
Foundation starts
What is Foundation?
- Foundation is a free front-end framework for rapid development.
- Foundation includes design templates for HTML and CSS, offering a variety of UI components on the web, such as forms, buttons, tabs, and more. A variety of JavaScript plug-ins are also available.
- Foundation Moves First to create responsive web pages.
- Foundation is suitable for beginners and professionals.
- Foundation has been used on Facebook, eBay, Samsung, Amazon, Disney, etc.
|
What is responsive web design?
Responsive Web Design's philosophy is that page design and development should respond and adapt to user behavior and device environment (system platform, screen size, screen orientation, etc.). |
|---|
Where do I download Foundation?
You can get the Foundation in two ways:
1, download the latest version from the official website: http://foundation.zurb.com/.
2, the use of W3Cschool online tutorial website provided by the CDN (recommended):
<!-- css 文件 --> <link rel="stylesheet" href="http://statics.w3cschool.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://statics.w3cschool.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
This static CDN is based on Alibaba Cloud Services.
|
Foundation's benefits of using CDNs:
Foundation uses CDNs to improve access to enterprise sites, especially companies with large numbers of pictures and static pages, and to greatly improve the stability of sites of this nature Why use modernizr? The components of the Some Foundation use the pre-pre-cutting HTML5 and CSS3 features, but are not supported by all browsers. Modernizr is a JavaScript library for detecting the features of the user's browser HTML5 and CSS3 - enabling components to function properly enough between all browsers. |
|---|
Create a page using foundation
1. Add HTML5 doctype
Foundation uses HTML elements and CSS properties, so you need to add HTML5 doctype document type declarations.
At the same time, we can set the language properties of the document lang and character encoding:
< html lang= "zh-cn" >
< head >
< meta charset= "utf-8" >
< /head >
< /html >
2. Foundation 5 Mobile First
Foundation 5 is a responsive design for mobile devices. At the heart of the framework is mobile first.
To ensure that the page is
<head>
you can add the following
<meta>
to the element:
- width: Controls the size of the viewport, which can specify a value 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, when the page is loaded for the first time.
3. Initialize the component
Some Foundation components are jQuery-based, such as modal boxes, drop-down menus, and so on. You can initialize components using the following script:
$(document).ready(function() {
$(document).foundation();
})
< /script >
Basic Foundation page
How to create a basic foundation page:
<!DOCTYPE html> <html> <head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- css 文件 --> <link rel="stylesheet" href="http://statics.w3cschool.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://statics.w3cschool.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> </div> </body> </html>