Le meilleur didacticiel Fondation a commencé en 2024, dans ce didacticiel, vous pouvez apprendre Qu'est-ce que la Fondation?,Télécharger Fondation Où?,Création de pages à l'aide de la Fondation,page de la Fondation de base,
Quelle est la conception web réactif? Responsive Web Design (conception Web Responsive) philosophie est: la conception et le développement de la page doivent être une réponse appropriée et ajuster en fonction du comportement de l'utilisateur et l'environnement de l'appareil (la plate-forme, la taille de l'écran, l'orientation de l'écran, etc.). |
Vous pouvez être deux façons d'obtenir la Fondation:
1. Téléchargez la dernière version sur le site officiel: http://foundation.zurb.com/ .
2, utilisez ce site officiel tutoriel offre CDN (recommandé):
<!-- css 文件 --> <link rel="stylesheet" href="http://static.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
Ali nuage basé CDN service de site statique.
Fondation utilise avantages CDN: Fondation utilise CDN améliorer le site de l'entreprise (en particulier, contient beaucoup de photos et des pages statiques site) vitesse d'accès, et d'améliorer considérablement la stabilité de la nature au-dessus du site Pourquoi Modernizr? Certains composants de la Fondation utilise de pointe HTML5 et CSS3 fonctionnalités par rapport avant, mais pas tous les navigateurs prennent en charge. Modernizr est utilisé pour détecter le navigateur d'un utilisateur HTML5 et CSS3 fonctionnalités des bibliothèques JavaScript - permet aux composants de fonctionner correctement sur tous les navigateurs. |
1. Ajouter le doctype HTML5
éléments de fondation en utilisant les attributs HTML et CSS, si vous avez besoin d'ajouter HTML5 déclaration doctype de type de document.
Pendant ce temps, nous pouvons définir la langue et le codage de caractères attributs de documents lang:
2. Fondation 5 premier mobile
Fondation 5 pour les appareils mobiles de conception sensibles. La priorité est de déplacer le cadre de base.
Pour assurer que les pages libres pour zoomer <head>
ajouter les éléments suivants dans le <meta>
tag:
3. Composants Initialisation
Certains composants sont basés sur la jQuery Foundation ouverte, tels que: boîtes modales, des menus déroulants. Vous pouvez utiliser le script suivant pour initialiser les composants:
Comment créer une page de base de la fondation:
<!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://static.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.com/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 ipsumfr</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 ipsumfr</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 ipsumfr</p> </div> </div> </body> </html>