Latest web development tutorials

Fondazione ha iniziato

Qual è la Fondazione?

  • Foundation è un framework front-end gratuito per un rapido sviluppo.
  • Fondazione contiene HTML e CSS modelli di design, offre una varietà di componenti dell'interfaccia utente sul Web, ad esempio moduli, pulsanti, schede, e così via. JavaScript fornisce anche una serie di plug-in.
  • Fondazione mobile in primo luogo, è possibile creare pagine web dinamiche.
  • Fondazione per principianti e professionisti.
  • Fondazione è stato utilizzato in Facebook, eBay, Samsung, Amazon, Disney e così via.

notaQual è responsive web design?
Responsive Web Design (Responsive Web Design) filosofia è: la progettazione e lo sviluppo della pagina dovrebbe essere una risposta adeguata e regolare in base al comportamento degli utenti e dell'ambiente dispositivo (piattaforma, dimensioni dello schermo, l'orientamento dello schermo, etc.).

Scarica Fondazione Dove?

Si può essere due modi per ottenere la Fondazione:

1. Scarica l'ultima versione dal sito ufficiale: http://foundation.zurb.com/ .

2, utilizzare questo tutorial sito ufficiale fornisce CDN (consigliato): 

<!-- 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-based CDN servizio di sito statico.

notaFondazione utilizza vantaggi CDN:
Fondazione utilizza CDN migliorare il sito aziendale (in particolare, contiene un sacco di immagini e pagine statiche del sito) velocità di accesso, e migliorare notevolmente la stabilità della natura al di sopra del sito

Perché Modernizr?
Alcuni componenti Fondazione utilizza all'avanguardia HTML5 e CSS3 caratteristiche rispetto prima, ma non tutti i browser supportano. Modernizr è utilizzato per rilevare browser di un utente HTML5 e CSS3 caratteristiche di librerie JavaScript - consente ai componenti di funzionare correttamente su tutti i browser.

Creazione di pagine utilizzando Fondazione

1. Aggiungere il DOCTYPE HTML5

elementi di fondazione utilizzando gli attributi HTML e CSS, quindi è necessario aggiungere HTML5 dichiarazione DOCTYPE tipo di documento.

Nel frattempo, siamo in grado di impostare la lingua e la codifica dei caratteri attributi del documento lang:

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

2. Foundation 5 mobile in primo luogo

Fondazione 5 per i dispositivi mobili di design reattivo. La priorità è quella di spostare il quadro di base.

Per garantire le pagine libere per ingrandire <head> aggiungere i seguenti elementi nella <meta> tag:

<Meta name = "viewport" content = "width = device-width, iniziale di scala = 1">
  • larghezza: controllare la dimensione della finestra, un valore può essere specificato, se 600, o il valore speciale, come dispositivo larghezza della larghezza del dispositivo (in pixel CSS scalata a 100% del tempo).
  • iniziale scala: la scala iniziale, che è, quando la prima scala temporale di caricamento della pagina.

3. Componenti Initialize

Alcuni componenti sono basati sul jQuery Fondazione aperta, come ad esempio: scatole modali, menu a discesa. È possibile utilizzare il seguente script per inizializzare i componenti:

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

Pagina Foundation Basic

Come creare una pagina di base fondazione: 

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

Prova »