Latest web development tutorials

Stiftung gestartet

Was ist die Stiftung?

  • Foundation ist ein Framework frei Front-End für die schnelle Entwicklung.
  • Foundation enthält HTML und CSS-Design-Vorlagen, bietet eine Vielzahl von UI-Komponenten auf dem Web, wie Formulare, Buttons, Tabs, und so weiter. JavaScript bietet auch eine Vielzahl von Plug-Ins.
  • Stiftung Mobil erste können Sie ansprechende Web-Seiten zu erstellen.
  • Stiftung für Anfänger und Profis.
  • Stiftung wurde bei Facebook, eBay, Samsung, Amazon, Disney und so weiter verwendet.

NoteWas ist Responsive Webdesign?
Responsive Web Design (Responsive Web Design) Philosophie ist: das Design und die Entwicklung der Seite sollte eine angemessene Antwort sein und auf das Benutzerverhalten und Geräteumgebung (Plattform, Bildschirmgröße, Bildschirmausrichtung, etc.) einzustellen.

Herunterladen Stiftung Wo?

Sie können auf zwei Arten sein, die Stiftung zu erhalten:

1. Laden Sie die neueste Version von der offiziellen Website: http://foundation.zurb.com/ .

2 Verwenden Sie dieses Tutorial offizielle Website bietet CDN (empfohlen): 

<!-- 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 Cloud-basierte CDN statischen Ort-Service.

NoteFoundation verwendet CDN Vorteile:
Foundation verwendet CDN die Unternehmens-Website zu verbessern (insbesondere viele Bilder enthält und statische Seiten Website) Zugriffsgeschwindigkeit und stark die Stabilität der über die Natur der Website verbessern

Warum Modernizr?
Einige Foundation-Komponente verwendet modernste HTML5 und CSS3-Funktionen im Vergleich vor, aber nicht von allen Browsern unterstützt. Modernizr verwendet den Browser eines Benutzers HTML5 und CSS3-Funktionen von JavaScript-Bibliotheken zu erkennen - ermöglicht Komponenten auf allen Browsern korrekt ausgeführt wird.

Erstellen von Seiten-Stiftung mit

1. Fügen Sie die HTML5 Doctype

Gründungselemente HTML und CSS-Attribute verwenden, so dass Sie HTML5 Doctype Dokumenttypdeklaration hinzufügen müssen.

Inzwischen können wir die Sprache und Zeichenkodierung Attribute lang Dokument festgelegt:

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

2. 5 Foundation Mobil erste

Foundation 5 für mobile Geräte Responsive Design. Die Priorität ist es, den Kern Rahmen zu bewegen.

Um sicherzustellen , dass die Seiten frei zu vergrößern <head> fügen Sie die folgenden Elemente in der <meta> tag:

<Meta name = "Ansichtsfenster" content = "width = device-width, initial-scale = 1">
  • Breite: die Größe des Bildfensters zu steuern, kann ein Wert, wenn 600 oder besonderen Wert, wie Gerätebreite der Gerätebreite (in Pixel CSS zu 100% der Zeit skaliert) angegeben werden.
  • initial-Skala: die anfängliche Skala, die, wenn sie die erste Ladezeit der Seite Skala ist.

3. Initialisieren Komponenten

Einige Komponenten basieren auf der jQuery-Stiftung offen, wie zum Beispiel: modal-Boxen, Pull-Down-Menüs. Sie können das folgende Skript verwenden Komponenten zu initialisieren:

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

Grund Foundation Seite

Wie eine grundlegende Fundament der Seite: 

<!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>

Versuchen »