Fondation Pour Commencer
Qu'est-ce que la Fondation ?
Foundation est un framework front-end gratuit pour un développement rapide.
Foundation comprend des modèles de conception HTML et CSS, fournissant une variété de composants d'interface utilisateur sur le Web, tels que des formulaires, des boutons, des onglets, etc. Une variété de plug-ins JavaScript sont également fournis.
Foundation est avant tout mobile pour créer des pages Web réactives.
Foundation convient aussi bien aux débutants qu'aux professionnels.
Foundation a été utilisé par Facebook, eBay, Samsung, Amazon, Disney, etc.
 | Qu'est-ce que la conception Web réactive ?
Le concept du Responsive Web design est : La conception et le développement de la page doivent répondre et s'ajuster en conséquence en fonction du comportement de l'utilisateur et de l'environnement de l'appareil (plate-forme système, taille de l'écran, orientation de l'écran, etc.). |
|---|
<!-- fichier css -->
<link rel="stylesheet " href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<!-- bibliothèque jQuery --> ;
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<! -- Fichier JavaScript -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<!-- fichier modernizr -->
| Foundation 使用 CDN 的优势: Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性 为什么使用 modernizr? Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 - 让组件能在所有浏览器上正常运行。 |
|---|
 | Avantages de Foundation de l'utilisation du CDN :<🎜>Foundation utilise le CDN pour améliorer les sites d'entreprise (en particulier (contenant un grand nombre d'images et de pages statiques), et améliore grandement la stabilité des propriétés ci-dessus<🎜><🎜>Pourquoi utiliser modernizr ?<🎜>Certains Les composants de Foundation utilisent des fonctionnalités HTML5 et CSS3 de pointe, mais tous les navigateurs ne les prennent pas en charge. Modernizr est une bibliothèque JavaScript permettant de détecter les fonctionnalités HTML5 et CSS3 du navigateur d'un utilisateur, permettant ainsi aux composants de fonctionner correctement sur tous les navigateurs. |
|---|
Créez une page à l'aide de Foundation
1. Ajouter un doctype HTML5
Foundation utilise des éléments HTML et des attributs CSS, vous devez donc ajouter le doctype HTML5. déclaration du type de document.
En même temps, nous pouvons définir la langue de l'attribut de langue et l'encodage des caractères du document :
<!DOCTYPE html>
<html lang="zh -cn">
<head>
🎜>2. Foundation 5 mobile-first
Foundation 5 est un design réactif pour les appareils mobiles. À la base, le cadre est axé sur le mobile.
<html lang="zh -cn">
<head>
🎜>2. Foundation 5 mobile-first
Foundation 5 est un design réactif pour les appareils mobiles. À la base, le cadre est axé sur le mobile.
suivante dans l'élément :
<meta name="viewport" content ="width=device- width, initial-scale=1">
<head><meta>
initial-scale : taux de mise à l'échelle initial, c'est-à-dire le taux de mise à l'échelle lorsque la page est chargée pour la première fois.
- 3. Composants d'initialisation
- Certains composants de Foundation sont ouverts sur la base de jQuery, tels que les boîtes modales, les menus déroulants, etc. Vous pouvez utiliser le script suivant pour initialiser le composant :
<
script>$(document) .ready (fonction() {
$(document).foundation();})</script
>
Page de base de baseComment créer une page de base de base
>
Page de base de baseComment créer une page de base de base
