Latest web development tutorials

Fondation a commencé

Qu'est-ce que la Fondation?

  • Fondation est un cadre frontal gratuit pour un développement rapide.
  • Fondation contient HTML et CSS modèles de conception, offre une variété de composants d'interface utilisateur sur le Web, tels que les formulaires, les boutons, les onglets, et ainsi de suite. JavaScript fournit également une variété de plug-ins.
  • Fondation premier mobile, vous pouvez créer des pages Web réactives.
  • Fondation pour les débutants et les professionnels.
  • Fondation a été utilisé dans Facebook, eBay, Samsung, Amazon, Disney et ainsi de suite.

noteQuelle 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.).

Télécharger Fondation Où?

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.w3big.com/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

Ali nuage basé CDN service de site statique.

noteFondation 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.

Création de pages à l'aide de la Fondation

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:

<! DOCTYPE html>
<Html lang = "zh-cn ">
<Head>
<Meta charset = "utf-8 ">
</ Head>
</ Html>

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:

<Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1">
  • largeur: contrôler la taille de la fenêtre, une valeur peut être spécifié, si 600, ou la valeur spéciale, comme dispositif de largeur de la largeur de l'appareil (en pixels CSS redimensionnée à 100% du temps).
  • initiale échelle: l'échelle initiale, qui est, lorsque la première échelle de temps de chargement de page.

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:

<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

page de la Fondation de base

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.w3big.com/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.w3big.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 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>

Essayez »