May 04, 2021 Foundation5
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.). |
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. |
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:
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:
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:
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>