Il miglior tutorial Fondazione ha iniziato Nel 2024, in questo tutorial puoi imparare Qual è la Fondazione?,Scarica Fondazione Dove?,Creazione di pagine utilizzando Fondazione,Pagina Foundation Basic,
Qual è 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.). |
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.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
Ali cloud-based CDN servizio di sito statico.
Fondazione 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. |
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:
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:
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:
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.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.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 ipsumit</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 ipsumit</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 ipsumit</p> </div> </div> </body> </html>