BOOTSTRAP 5 GET STARTED
Bootstrap è una delle librerie di componenti per lo sviluppo front-end più famose al mondo, open-Source, venne originalmente sviluppata da Mark Otto e Jacob Thornton presso Twitter. Mobile-First: ci permette di sviluppare siti web responsivi, che si adattano automaticamente al dispositivo usato. Bootstrap è un framework front-end gratuito per uno sviluppo web più semplice e veloce, include modelli di progettazione basati su HTML e CSS per typography, forms, buttons, tables, navigation, modals, image carousels e molti altri, oltre a plug-in JavaScript opzionali. Bootstrap ti dà anche la possibilità di creare facilmente design responsive.
NOTA: Quando parleremo di componenti di Bootstrap, tratterò come post quelli più importanti. Alcuni come gli Alert, le Cards, i pulsanti DropDown e i Forms saranno scaricabili come esempi di codice direttamente da GITHUB.
CHE COS’E’ IL RESPONSIVE WEB DESIGN
Il responsive web design consiste nella creazione di siti Web che si adattano automaticamente su tutti i dispositivi, dai piccoli telefoni ai desktop di grandi dimensioni.
PERCHE’ USARE BOOTSTRAP?
Vantaggi di Bootstrap:
- Facile da usare: chiunque abbia solo una conoscenza di base di HTML e CSS può iniziare a utilizzare Bootstrap
- Funzionalità responsive: il CSS responsive di Bootstrap si adatta a telefoni, tablet e desktop
- Approccio mobile first: in Bootstrap, gli stili mobile first fanno parte del framework principale
- Compatibilità browser: Bootstrap 5 è compatibile con tutti i browser moderni (Chrome, Firefox, Edge, Safari e Opera). Tieni presente che se hai bisogno del supporto per IE11 e versioni precedenti, devi utilizzare BS4 o BS3.
COME AGGIUNGERE BOOTSTRAP AI NOSTRI PROGETTI
Ci sono due modi:
In locale e tramite CDN (Content-Delivery-Network).
Rechiamoci all’indirizzo https://getbootstrap.com/docs/5.0/getting-started/introduction/ e vediamo come integrare bootstrap tramite CDN. Allego un’immagine del file css e del file javascript che dovranno essere inseriti nei nostri file HTML. Sempre a questo indirizzo più in basso c’è lo start template, una pagina HTML pronta all’uso con tutte le CDN.
INTEGRAZIONE DI BOOTSTRAP IN VISUAL STUDIO CODE
Installare l’estensione come da immagine riportata.
Vantaggi dell’utilizzo di Bootstrap 5 CDN:
Molti utenti hanno già scaricato Bootstrap 5 da jsDelivr quando visitano un altro sito. Di conseguenza, verrà caricato dalla cache quando visitano il tuo di sito, il che porta a tempi di caricamento più rapidi. Inoltre, la maggior parte dei CDN si assicurerà che quando un utente richiede un file da esso, verrà servito dal server più vicino, il che porta anche a tempi di caricamento più rapidi. Tuttavia, in alcune situazioni non è possibile avere il collegamento internet, quindi in questi casi occorre installare bootstrap in locale. Vediamo come. Andiamo ancora sulla home page di bootstrap e facciamo click sulla sezione download come da immagine riportata.
Copiamo le due cartelle all’interno del nostro progetto e aggiungiamo i link al file css e al file javascript. Il codice sopra riportato mostra un esempio.
BOOTSTRAP 5 IS MOBILE FIRST
Gli stili Mobile-first fanno parte del framework principale. Per garantire un rendering e uno zoom al tocco corretti, aggiungi il seguente tag all’interno dell’elemento:
La parte width=device-width imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varia a seconda del dispositivo).
La parte initial-scale=1 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
CONTAINERS
Bootstrap 5 richiede anche un elemento contenitore per avvolgere i contenuti del sito. Sono disponibili due classi di contenitori tra cui scegliere:
- La classe .container fornisce un contenitore responsive a larghezza fissa
- La classe .container-fluid fornisce un contenitore a larghezza intera, che copre l’intera larghezza della finestra
Scrivi un commento