Lavorare con le pagine web richiede molto di più della semplice conoscenza dei linguaggi che dobbiamo usare, ci sono una serie di traguardi che dobbiamo soddisfare per sviluppare un prodotto con un risultato eccezionale. Una di queste pietre miliari è la progettazione e la disposizione degli elementi che verranno visualizzati sullo schermo.
Immaginiamo di dover progettare una pagina web, se partiamo da zero dobbiamo tenere conto di come dovrebbero essere il menu, le tabelle, i pulsanti, cose semplici come le icone che posizioneremo su alcuni pulsanti di azione, ecc.
Come possiamo vedere, è un lavoro duro, soprattutto se vogliamo che abbia un aspetto ottimale e un appeal, dobbiamo anche essere dettagliati per dare al sito un tocco personale, ora, e se non siamo designer? Questa è la grande domanda, ci sono sviluppatori che hanno un occhio cieco quando si tratta di buon gusto e design, e questi tipi di profili sono inibiti per fare apparizioni web di qualità. O se avessimo buon gusto ma poco tempo per progettare?
Per risolvere questi due grandi requisiti abbiamo Bootstrap che non è altro che un Struttura CSS che ci consente di ottenere l'aspetto base della nostra pagina in una volta senza dover soffrire con il design, ma a parte questo ci aiuta anche con effetti di base e un modo molto speciale di strutturare il contenuto che presenteremo.
Vantaggi del bootstrapLo sappiamo già Bootstrap è un Struttura CSS e questo ci aiuta a stabilire gli aspetti di base per il nostro sito Web, ma oltre a ciò presenta alcuni vantaggi in termini di utilizzo, vedremo di seguito alcune delle cose positive che ci porta Bootstrap:
1. RiutilizzareInsieme a Bootstrap Abbiamo molti componenti realizzati per impostazione predefinita, in modo da poterli utilizzare senza modifiche in varie parti del nostro sito Web, riducendo così il tempo e la quantità di codice che utilizziamo. Questo favorisce anche lo sviluppo modulare delle nostre applicazioni.
2. CoerenzaGrazie al fatto che abbiamo molti componenti realizzati in modo generico, il codice è coerente, cioè gestisce strutture molto simili, quindi durante la lettura o la manutenzione dell'applicazione, sapremo già come funziona molto più semplice.
3. Design flessibileIl design mobile è molto importante e Bootstrap lo tiene in considerazione fin dall'inizio, abbiamo la flessibilità che il nostro sito si adatta automaticamente a varie risoluzioni e layout dello schermo, risparmiandoci molto lavoro dal dover progettare da zero le visualizzazioni mobili.
4. ComunitàUn altro aspetto da tenere in considerazione è la documentazione, quando utilizziamo un framework di terze parti è molto importante avere a chi rivolgerci quando abbiamo dei dubbi e in questo senso Bootstrap Non ha paragoni, dal momento che possiamo ottenere quasi tutte le risposte ai nostri dubbi senza troppi sforzi.
Svantaggi di BootstrapSebbene quasi tutto sia buono, dobbiamo anche parlare degli svantaggi o degli aspetti non così buoni che affrontiamo quando lo usiamo Struttura CSSVediamo alcuni dei suoi punti deboli di seguito.
1. Poco originaleSe non ci prendiamo un po' di tempo per realizzare il nostro design, possiamo rimanere poco originali se usiamo Bootstrap senza di più, sebbene questo framework sia progettato per questo, a causa della grande adozione che ha avuto, dobbiamo lavorare un po' di più per non sembrare la copia della copia.
2. Curva di apprendimentoCome tutto, dobbiamo passare attraverso una curva di apprendimento se vogliamo ottenere il massimo, il problema è che se vogliamo passare dall'aspetto base a quello avanzato, lo shock è un po' forte.
3. Scarsa compatibilità tra le versioniQuando c'è un cambio di versione, la versione precedente perde molta validità e se vogliamo aggiornarla ci costerà, soprattutto se abbiamo apportato modifiche importanti in modo che il nostro sito abbia un aspetto diverso.
InstallazioneUna volta che sappiamo di cosa si tratta Bootstrap, e i vantaggi e gli svantaggi dell'utilizzo nei nostri progetti, dobbiamo arrivare alla parte pratica del tutorial, ora impareremo da dove possiamo ottenere questo framework e come possiamo includerlo nel nostro progetto.
Ottenere BootstrapLa prima cosa che dobbiamo fare è ottenere i file necessari da includere Bootstrap nel nostro progetto, ecco perché dobbiamo visitare il loro sito Web getbootstrap.com e scaricare i file necessari, o in alternativa utilizzare un CDN per evitare di ospitare i file sul nostro server e ridurre l'uso della nostra larghezza di banda.
Qualunque sia l'opzione, dobbiamo trovarci su una pagina simile alla seguente se facciamo clic sul pulsante di download iniziale quando visitiamo la pagina del framework:
INGRANDIRE
Per facilitare il lavoro, supponiamo di aver scaricato il progetto, arriva in un file compresso che dobbiamo estrarre in una posizione che possiamo usare e che dovrebbe essere qualcosa di simile al seguente:
Come si vede, all'interno del nostro progetto devono esserci tre cartelle, una per il CSS, un altro per le fonti che vengono utilizzate e infine uno per il JS necessario. Con questo abbiamo già a disposizione Bootstrap, che non è altro che copiare il progetto nella nostra cartella delle risorse.
Inizia con BootstrapPoiché abbiamo tutte le risorse in nostro possesso, dobbiamo includerlo nel nostro design, per questo possiamo creare un file HTML e fare le inclusioni necessarie, possiamo vederlo in modo più dettagliato nel seguente codice:
Installazione di BootstrapCome possiamo vedere, l'unica cosa che abbiamo fatto è stata includere tre file, in particolare due .css e un .js, questo è ciò di cui abbiamo bisogno per iniziare a utilizzare l'intera struttura, se ora apriamo il nostro file con un browser vedremo come il carattere delle lettere è diverso da quello che normalmente vedremmo con un'etichetta H1:
La griglia BootstrapPer ottenere l'organizzazione dei nostri progetti, Bootstrap usa una griglia o griglia, questo è composto da 12 colonne, quindi tutto ciò che vediamo sul nostro schermo deve essere organizzato in questo modo, con ciò si ottiene che la pagina può essere strutturata in modo tale da poter utilizzare gli strumenti che ci vengono offerti in modo molto trasparente.
Ovviamente è un processo di adattamento, ma l'importante è che possiamo creare colonne che ne raggruppano diverse, così come quando lavoriamo con le tabelle di HTML che possiamo creare colonne con più join con la proprietà span. Per creare un sito web che utilizzi questa struttura dobbiamo solo avere quanto segue:
Un div con la classe contenitore, all'interno di questo un div con la classe riga, e infine all'interno di uno o più div con la classe cavolo, vediamo nel codice seguente un esempio di una pagina con 3 colonne, per questo ogni colonna deve raggruppare 4 per aggiungere un totale di 12 che è quello che abbiamo spiegato è il valore predefinito di Bootstrap.
Colonne in BootstrapCiò si traduce in una pagina in cui i tre div interni sono in un'unica riga divisa in tre colonne uguali, come possiamo vedere nell'immagine seguente:Esempio di come utilizzare le colonne in bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita il mio in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Intero aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Sii ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Intero eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita il mio in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Intero aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Sii ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Intero eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita il mio in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Intero aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id sempre felis. Sii ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Intero eu eleifend mauris.
INGRANDIRE
Questa struttura, nonostante sembri un po' squadrata, è molto flessibile, poiché dobbiamo solo fare una specie di gioco con i contenitori e le loro colonne, per ottenere i risultati desiderati. Con questo finiamo questo tutorial, abbiamo effettivamente mosso i nostri primi passi con Bootstrap e ora possiamo iniziare a sfruttarne i vantaggi più direttamente sui nostri progetti o applicazioni web.
