HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
What is responsive web design? Responsive Web Design (Responsive Web design) philosophy is: the design and development of the page should be an appropriate response and adjust based on user behavior and device environment (platform, screen size, screen orientation, etc.). |
You can be two ways to get the Foundation:
1. Download the latest version from the official website: https://get.foundation/ .
2, use this tutorial official website provides CDN (recommended):
<!-- css 文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/foundation/6.7.5/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/foundation/6.7.5/js/foundation.min.js"></script> <!-- modernizr 文件 -->
Ali cloud-based CDN static site service.
Foundation uses CDN advantages: Foundation uses CDN improve the corporate site (in particular, contains a lot of pictures and static pages site) access speed, and greatly improve the stability of the above nature of the site Why modernizr? Some Foundation component uses cutting-edge HTML5 and CSS3 features compared before, but not all browsers support. Modernizr is used to detect a user's browser HTML5 and CSS3 features of JavaScript libraries - allows components to run properly on all browsers. |
1. Add the HTML5 doctype
Foundation elements using HTML and CSS attributes, so you need to add HTML5 doctype document type declaration.
Meanwhile, we can set the language and character encoding attributes lang document:
2. Foundation 5 mobile first
Foundation 5 for mobile devices responsive design. The priority is to move the core framework.
To ensure the pages free to zoom in <head>
add the following elements in the <meta>
tag:
3. Initialize Components
Some components are based on the jQuery Foundation open, such as: modal boxes, pull-down menus. You can use the following script to initialize components:
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="https://cdn.bootcdn.net/ajax/libs/foundation/6.7.5/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/foundation/6.7.5/js/foundation.min.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/en</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/en</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/en</p> </div> </div> </body> </html>