Premiers pas avec Foundation
Qu'est-ce que Foundation ?
- Foundation est un framework front-end gratuit pour le développement rapide.
- Foundation inclut des modèles de conception HTML et CSS, offrant une variété de composants d'interface utilisateur pour le Web, tels que des formulaires, des boutons, des onglets, et plus encore. Il fournit également une variété de plugins JavaScript.
- Foundation est mobile-first et permet de créer des pages web responsives.
- Foundation convient aux débutants comme aux professionnels.
- Foundation a été utilisé chez Facebook, eBay, Samsung, Amazon, Disney, etc.
 |
Qu'est-ce que la conception web responsive ? Le concept du Responsive Web design est le suivant : La conception et le développement d'une page doivent réagir et s'adapter en fonction du comportement de l'utilisateur et de l'environnement de l'appareil (plateforme système, taille d'écran, orientation de l'écran, etc.). |
|---|
Où télécharger Foundation ?
Vous pouvez obtenir Foundation des deux manières suivantes :
1. Téléchargez la dernière version depuis le site officiel :http://foundation.zurb.com/。
2. Utilisez le CDN fourni par Staticfile (recommandé) :
<!-- css 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.net/foundation/5.5.3/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/jquery.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/foundation.min.js"></script> <!-- modernizr.js 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/modernizr.js"></script>
Le CDN statique de ce site est basé sur les services Alibaba Cloud.
|
Avantages de l'utilisation d'un CDN pour Foundation : L'utilisation d'un CDN par Foundation améliore la vitesse d'accès des sites d'entreprise (en particulier les sites contenant un grand nombre d'images et de pages statiques), et améliore grandement la stabilité des sites présentant les caractéristiques ci-dessus. Pourquoi utiliser modernizr ? Certains composants de Foundation utilisent des fonctionnalités HTML5 et CSS3 relativement récentes, mais tous les navigateurs ne les prennent pas en charge. Modernizr est une bibliothèque JavaScript utilisée pour détecter les fonctionnalités HTML5 et CSS3 dans le navigateur de l'utilisateur, ce qui permet aux composants de fonctionner correctement sur tous les navigateurs. |
|---|
Création de pages avec Foundation
1. Ajouter le doctype HTML5
Foundation utilise des éléments HTML et des propriétés CSS, vous devez donc ajouter la déclaration de doctype HTML5.
En même temps, nous pouvons définir l'attribut lang du document et l'encodage des caractères :
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
2. Foundation 5 mobile-first
Foundation 5 est conçu pour le design responsive sur les appareils mobiles. Le cœur du framework est mobile-first.
Pour que la page puisse être mise à l'échelle librement, vous pouvez<head>Ajouter ce qui suit à l'élément<meta>Libellés :
- width : contrôle la taille de la fenêtre d'affichage, qui peut être définie à une valeur spécifique, comme 600, ou une valeur spéciale, comme device-width, qui est la largeur de l'appareil (en pixels CSS lorsqu'il est mis à l'échelle à 100 %).
- initial-scale : le ratio de mise à l'échelle initial, c'est-à-dire le ratio de mise à l'échelle lors du premier chargement de la page.
3. Initialiser les composants
Certains composants Foundation sont développés sur la base de jQuery, tels que : fenêtres modales, menus déroulants, etc. Vous pouvez utiliser le script suivant pour initialiser les composants :
$(document).ready(function() {
$(document).foundation();
})
</script>
Page Foundation de base
Comment créer une page Foundation de base :
Exemples Foundation
Essayez-le vous-même »