Una guida per principianti alla creazione di un sito Web reattivo con Bootstrap - Parte 1

Ultimo aggiornamento il 5 giugno 2019

Questo articolo ha lo scopo di educare gli sviluppatori Web all'utilizzo dei principi di base del Bootstrap Framework per creare siti Web reattivi in ​​modo rapido ed efficace. Ciò riduce i costi di produzione e consente alle aziende di consentire ai propri sviluppatori di gestire e creare facilmente siti Web e pagine. Analizzerò il processo di download del framework Bootstrap e i vantaggi dell'utilizzo di questo framework per i tuoi sforzi di sviluppo web.

Cos'è Bootstrap?

Secondo il sito Web ufficiale di Bootstrap (getbootstrap.com), "Bootstrap è il framework HTML, CSS e JavaScript più popolare per lo sviluppo di progetti responsive e mobile first sul web". In termini più semplici, Bootstrap è un framework eccezionalmente semplice per aiutare a rendere più veloce lo sviluppo web front-end e attraente per sviluppatori di vari livelli di abilità.

Perché usare Bootstrap?

Il potenziale per la progettazione di siti Web per vari mezzi, inclusi display di grandi dimensioni, display normali, telefoni e tablet, rende Bootstrap incredibilmente attraente e una scelta intelligente per la produzione di contenuti Web. Un framework come Bootstrap fornisce funzionalità generiche che possono essere facilmente modificate per ottimizzare il sito Web per una varietà di funzioni e reattività che non richiedono hard coding. È in breve, uno dei modi più semplici per costruire un sito Web e avere ancora la possibilità di personalizzare, a differenza di un sito WordPress.

Come iniziare

Per iniziare con Bootstrap, devi visitare il sito Web ufficiale di Bootstrap (http://getbootstrap.com/). Bootstrap è un progetto open source ed è ospitato, sviluppato e mantenuto su GitHub; ciò consente agli utenti di avere accesso al codice sorgente e comprendere l'intero ambito del framework come strumento per la creazione di siti Web.

Esistono tre modi per scaricare la versione corrente di Bootstrap (v3.3.6): puoi scaricare una versione conforme di Bootstrap, puoi scaricare il codice sorgente di Bootstrap e puoi portare il framework Bootstrap da Less a Sass. In questo caso, se sei un principiante ti consiglio di scaricare la versione omologata di Bootstrap. Se vuoi integrare il framework Bootstrap in progetti Rails, Compass o Sass solo allora dovresti portare il download da Less a Sass.

Una volta scaricato il file Boostrap, è necessario decomprimere la cartella compressa per vedere la struttura del framework Bootstrap conforme. Guarda sotto per vedere la struttura del file:

Ora puoi semplicemente trascinare questi file nel file system di qualsiasi progetto web su cui stai lavorando e iniziare a lavorare con Bootstrap per progettare e costruire il progetto desiderato. Per ulteriori informazioni sulla funzionalità di Bootstrap, che analizzeremo ulteriormente nella Parte 2 di questo post, non esitare a visitare il sito Web getboostrap.com per visualizzare i componenti, le funzionalità CSS e le funzioni JavaScript accessibili con framework.

Design reattivo

Il design reattivo è una delle caratteristiche distintive del framework Bootstrap; la capacità di sviluppare in modo reattivo con Bootstrap consente agli sviluppatori di essere in grado di sviluppare un unico sito Web che può essere formattato correttamente su tutte le piattaforme di visualizzazione. Spesso, un sito Web può essere progettato bene e l'esperienza dell'utente è ottimale solo su una piattaforma o una dimensione dello schermo specifica. Bootstrap fa un lavoro straordinario per combattere questi problemi, consentendo agli sviluppatori di assegnare determinate colonne della pagina Web a determinate dimensioni quando vengono lette su uno schermo più piccolo. Esistono quattro tipi di dispositivi di cui Bootstrap tiene conto durante la creazione di siti Web reattivi:

• Dispositivi extra piccoli (smartphone <768px)
• Piccoli dispositivi (tablet >= 768px)
• Dispositivi medi (desktop >= 992px)
• Dispositivi di grandi dimensioni (desktop >= 1200px)

Lo sviluppatore può aggiungere tag a queste classi di cui sopra per impostare determinati contenuti web in modo che si riducano, si espandano, si nascondano o siano visibili su determinate piattaforme. Ciò è estremamente utile per semplificare il processo di creazione dell'aspetto grafico del sito web.

Sistema a griglia

Bootstrap ha un sistema a griglia che è la caratteristica principale che consente di utilizzare il framework per progettare siti Web reattivi. Tutte le righe in Bootstrap devono essere inserite in una classe contenitore, quindi le righe successive possono essere definite con determinate dimensioni.

Ecco un esempio di notazione per il sistema a griglia:

• La classe di riga predefinita produce una riga
• All'interno di quella riga, la seconda classe specifica "col-md-6"
• Ciò significa che la classe sta producendo una colonna che si estende su 6 colonne nella pagina web
• Il "md" specifica che ciò avverrà solo su dispositivi di medie dimensioni o desktop che sono inferiori o uguali a 768 px.
• La classe "offset" significa che quelle colonne verranno lasciate vuote. In questo caso l'offset è 3, quindi tre colonne verranno lasciate con uno spazio vuoto per riempire parte del contenuto.
  Questo sistema a griglia consente agli sviluppatori di definire rapidamente sezioni di contenuto e avere la spaziatura appropriata tra i contenuti per avere un design pulito e reattivo.

Sfide con Bootstrap

Le dimensioni dei file JavaScript e CSS sono grandi quando si scaricano direttamente tutti i file Bootstrap. Questo può portare ad alcune difficoltà durante la creazione di una pagina veloce. Questo perché tutti i file all'interno dei file Bootstrap non vengono utilizzati completamente e questo può significare che il download di dati non necessari può essere un problema. Ciò può influire sull'esperienza dell'utente, quindi sentiti libero di verificarlo in modo più approfondito visitando il post Come utilizzare le basi di Bootstrap per migliorare l'esperienza utente (https://moz.com/ugc/how-to-use-bootstrap- nozioni di base per migliorare l'esperienza dell'utente).

Spero che proverete tutti Bootstrap, poiché è un framework fantastico per creare design di siti Web reattivi e puliti. Resta sintonizzato per il prossimo post della serie che affronta più concetti iniziali su Bootstrap.

Autore: Esme Vazquez, Junior Web Developer

Un creatore, artista, giocatore, programmatore, sviluppatore web e blogger; Esme è il creatore della recente pubblicazione del blog Indiellect sul sito del blog di gestione dei contenuti, Medium. La sua attuale esperienza risiede nello sviluppo web e nello sviluppo di giochi; attualmente sta lavorando e ricevendo una formazione in SEO presso That! Società a Leesburg, FL come Junior Web Developer. In futuro aspira a realizzare videogiochi che ritraggono la bellezza dell'umanità. In caso di domande, sentiti libero di twittarle su @EsmeVazquez18 e/o aggiungerla su LinkedIn.