Latest web development tutorials

Fundacja rozpoczęła

Czym jest Fundacja?

  • Fundacja jest darmowy framework front-end dla szybkiego rozwoju.
  • Fundacja zawiera HTML i CSS szablonów projektowych, oferuje szeroką gamę składników interfejsu użytkownika w sieci, takich jak formularze, przyciski, JOT, i tak dalej. JavaScript zapewnia również szereg wtyczek.
  • Fundacja mobile pierwsze, można utworzyć reagujących stron internetowych.
  • Fundacja dla początkujących jak i profesjonalistów.
  • Fundacja została wykorzystana w Facebook, eBay, Amazon, Samsung, Disney i tak dalej.

uwagaCo reaguje projektowanie stron internetowych?
Responsive Web Design (Responsive Web design) filozofia jest: projektowanie i rozwój strony powinna być właściwa reakcja i dostosować na podstawie zachowań użytkowników i środowiska urządzenia (platformy, rozmiar ekranu, orientacji ekranu, etc.).

Pobierz Foundation Gdzie?

Możesz być dwa sposoby uzyskania Fundacji:

1. Pobierz najnowszą wersję z oficjalnej strony: http://foundation.zurb.com/~~HEAD=dobj .

2, należy ten poradnik Oficjalna strona zapewnia CDN (zalecane): 

<!-- 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 chmurze CDN statycznej portalu.

uwagaFundacja wykorzystuje zalety CDN:
Fundacja używa CDN poprawić Strona firmowa (w szczególności, zawiera wiele zdjęć i stron statycznych witryn) szybkość dostępu, a także znacznie poprawić stabilność powyższego charakteru serwisu

Dlaczego modernizr?
Część składowa Fundacja używa najnowocześniejszych HTML5 i CSS3 możliwości niż wcześniej, ale nie wszystkie przeglądarki obsługują. Modernizr służy do wykrywania przeglądarki użytkownika HTML5 i CSS3 funkcje bibliotek JavaScript - umożliwia składniki działał poprawnie we wszystkich przeglądarkach.

Tworzenie stron przy użyciu Foundation

1. Dodaj doctype HTML5

Elementy fundamentów za pomocą atrybutów HTML i CSS, więc trzeba dodać HTML5 deklaracji DOCTYPE typ dokumentu.

Tymczasem możemy ustawić język i kodowanie znaków atrybutów dokumentu lang:

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

2. Fundacja 5 pierwsza mobilna

Fundacja 5 dla urządzeń mobilnych reaguje projektowych. Priorytetem jest, aby przenieść ramy bazowej.

Aby zapewnić darmowe strony, aby powiększyć <head> dodaj następujące elementy w <meta> tag:

<Meta name = "rzutni" content = "width = device-width, initial-scale = 1">
  • Szerokość: kontrolować wielkość rzutni, wartość ta może zostać określona, ​​jeśli 600, lub specjalnej wartości, takich jak urządzenia szerokości szerokości urządzenia (w pikselach CSS skalowane do 100% czasu).
  • Początkowy skalę: waga początkowa, czyli gdy pierwsza skala czasu ładowania strony.

3. Składniki Inicjowanie

Niektóre elementy są oparte na jQuery Foundation Open, takich jak: modalnych okien, menu rozwijanego. Można użyć następującego skryptu, aby zainicjować elementów:

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

Strona Podstawowe założenia

Jak stworzyć prostą stronę fundacji: 

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

Spróbuj »