English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In questo tutorial, imparerai come creare template di base Bootstrap utilizzando la versione compilata di Bootstrap 3.
Ecco, imparerai quanto sia facile creare pagine web con Bootstrap. Prima di iniziare, assicurati di avere un editor di codice e alcune conoscenze di HTML e CSS.
Se stai appena iniziando a sviluppare Web,Inizia a imparare le basi di HTML da qui»
Bene, entriamo direttamente nel vivo.
Ci sono due versioni disponibili per il download,Bootstrap compilatoeBootstrap sorgenteFile. PuoiScaricate Bootstrap da qui.
Compilate e ridurre le versioni compilata e compressa dei file CSS e JavaScript, nonché i file delle icone in formato di font, per sviluppare Web più rapidamente e più facilmente, mentre il codice sorgente contiene tutti i file CSS e JavaScript in versione originale e copie locali dei documenti.
Per comprendere meglio, ci concentreremo sui file compilati di Bootstrap. Questo può risparmiarvi tempo, perché non dovrete preoccuparvi di ogni funzione singola, inclusi i singoli file. Quando deciderete di spostare il sito in un ambiente di produzione, grazie alla dimensione ridotta delle richieste HTTP e dei download, poiché può compilare e compressare i file, può anche migliorare le prestazioni del sito e risparmiare prezioso bandwidth.
Dopo aver scaricato e decompresso Bootstrap, espandete la cartella compressa per visualizzare la struttura. Troverete la seguente struttura di file e contenuti.
bootstrap/ |—— css/ |—— |—— bootstrap.css |—— |—— bootstrap.min.css |—— |—— bootstrap-theme.css |—— |—— bootstrap-theme.min.css |—— js/ |—— |—— bootstrap.js |—— |—— bootstrap.min.js |—— fonts/ |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Come puoi vedere, la versione compilata di Bootstrap fornisce file CSS e JS compilati (bootstrap.*), nonché file CSS e JS compressi e compilati (bootstrap.min.*).
Nella cartella font file glyphicons-halflings-regular.* ci sono quattro file di font () . Questi file di font contengono oltre 250 icone della raccolta Glyphicon Halflings.
Suggerimento:Questa è la versione più basilare di Bootstrap, che può essere utilizzata rapidamente in qualsiasi progetto web. Nota che i plugin JavaScript di Bootstrap richiedono l'inclusione di jQuery. Puoi trovarli quihttps://jquery.com/download/Scarica l'ultima versione di jQuery Form.
Fino ad ora, hai imparato la struttura e l'uso dei file Bootstrap. Ora è il momento di utilizzare Bootstrap veramente. In questa sezione, creeremo un modello Bootstrap di base che include tutto ciò che è menzionato nella struttura del file.
Completiamo gradualmente i seguenti passaggi. Alla fine di questo tutorial, creerai un file HTML che visualizzerà il messaggio “Hello world” nel browser web.
Apri l'editor di codice preferito e crea un nuovo file HTML. Partendo da una finestra vuota, inserisci il seguente codice e salvalo come “basic.html” sul tuo desktop.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>File HTML di Base</title> </head> <body> <h1>Hello, world!</h1> </body> </html>Testa a vedere <‹/›
Suggerimento:Includi sempre il tag <meta> viewport all'interno della sezione <head> del documento per abilitare lo zoom touch e garantire che venga visualizzato correttamente sui dispositivi mobili. Include anche il tag <meta> X-UA-Compatible con il modalità edge, che informa Internet Explorer di visualizzare le pagine web nel modo più avanzato disponibile.
Per impostare questo file HTML come modello Bootstrap, è sufficiente aggiungere i file CSS e JS di Bootstrap. Dovresti aggiungere il file JavaScript nella parte inferiore della pagina - prima di chiudereTag (cioè) prima di migliorare le prestazioni del sito web.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- Tema Bootstrap opzionale --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>Testa a vedere <‹/›
Siamo pronti!Dopo aver aggiunto i file CSS e JS di Bootstrap e la libreria jQuery necessaria, possiamo iniziare a sviluppare qualsiasi sito o applicazione utilizzando il framework Bootstrap.
Ora, salvare il file come "bootstrap-template.html".
Attenzione:.html estensione è molto importante - alcuni editor di testo (ad esempio, Blocco note) salvano automaticamente l'estensione come .txt.
Aprire il file nel browser. Navigare al file, quindi fare doppio clic su di esso. Verrà aperto nel browser web predefinito (se non ce n'è uno, aprire il browser e trascinare il file al suo interno).
Se non si desidera scaricare e ospitare manualmente il framework o jQuery, è possibile includere i file CSS e JavaScript di Bootstrap e la libreria JavaScript di jQuery nei documenti utilizzando i link CDN (Content Delivery Network) gratuiti.
I CDN offrono un vantaggio di prestazioni riducendo il tempo di caricamento, poiché memorizzano i file di Bootstrap su server sparsi in tutto il mondo e forniscono i file richiesti dal server più vicino all'utente.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema Bootstrap opzionale --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>Testa a vedere <‹/›
Per implementare l'integrità delle risorse sottostanti (SRI) in Bootstrap
È stata aggiunta l'integrità e la proprietà 'crossorigin' nel CDN. È una funzione di sicurezza che riduce il rischio di attacchi da parte di CDN danneggiate, garantendo che i file che il tuo sito web riceve (da CDN o da qualsiasi altra posizione) siano consegnati senza operazioni impreviste. Il suo funzionamento consente di fornire un'elenco di hash crittografati che devono corrispondere ai file recuperati.
Le proprietà 'integrity' e 'crossorigin' sono state aggiunte all'esecuzione del CDNIntegrità delle risorse sottostanti(SRI). È una funzione di sicurezza che ti permette di assicurarti che i file ricevuti tramite il sito (da CDN o da qualsiasi altro luogo) siano stati ricevuti senza trattamenti inaspettati, riducendo così il rischio di attacchi al CDN. Funziona permettendo di fornire una hash crittografata che deve corrispondere al file letto.
Suggerimento:Se i visitatori del tuo sito hanno già scaricato i file di Bootstrap da un altro sito durante l'accesso, verranno caricati dal cache del browser invece di essere scaricati di nuovo, riducendo così il tempo di caricamento.