Come realizzare velocemente siti internet “responsive” con Bootstrap framework
Bootstrap esempio sito: in questo articolo ti introduciamo all’utilizzo di Bootstrap versione 5.3, un framework eccezionale per realizzare rapidamente il tuo nuovo sito internet responsive.
Inoltre, al termine della pagina, potrai scaricare il nostri template:
1. Mini-sito internet sul Gumdam LEGO, realizzato con Bootstrap, HTML5 e CSS3.
2. Pagina web sui robottoni LEGO, creati con Bootstrap, HTML5 e CSS3
Come potrai notare, entrambi gli esempi hanno un impianto “core” con il framework Bootstrap, ma utilizzano anche alcune righe di codice CSS (CSS esterni, interni ed in linea).
Bootstrap esempio sito: cos’è Bootstrap?
Bootstrap è un framework gratuito ed “open source” per lo di sviluppo di siti web ed è progettato per facilitare la creazione di siti web “responsive”, in ottica “mobile-first”.
Grazie alla “libreria Bootstrap”, puoi avviare rapidamente un progetto, utilizzando varie parti del framework, con componenti e layout personalizzati. Con l’utilizzo di questi “componenti”, puoi puoi creare siti internet più velocemente, senza proccuparti delle funzioni base!
Inoltre, se hai sufficiente dimistichezza con HTML5 e CSS3, puoi personalizzare ulteriormente i tuoi progetti, rendendoli unici ed originali!
Bootstrap: filosofia a “12 colonne virtuali” con “breakpoint minimi”, per layout responsive!
Come accennato nel paragrafo precedente, se hai poco tempo da dedicare alla progettazione di un sito web “responsive”, utilizzare Bootstrap può essere davvero molto vantaggioso.
Infatti, l’obiettivo principale di questo web framework è creare siti web “responsive” e “mobile-first”, facendo in modo che tutti gli elementi dell’interfaccia di un sito internet funzionino in modo ottimale su tutti device (dispositivi) e le dimensioni dello schermo (viewport).
Infatti, con l’impiego di una serie minima di “query multimediali”, puoi creare “punti di interruzione” funzionali per tuoi nostri layout.
Questi punti di interruzione (“breakpoints”), si basano principalmente sulle larghezze minime della finestra e ti consentono di ridimensionare gli elementi man mano che la finestra cambia.
- X-Small: None <576px
- Small: sm ≥576px
- Medium: md ≥768px
- Large: lg ≥992px
- Extra: large xl ≥1200px
- Extra extra large: xxl ≥1400px
Bootstrap, inoltre, è dotato di una potente griglia “flexbox mobile-first”, studiata per creare layout di tutte le forme e dimensioni, grazie a un sistema a dodici colonne virtuali che ti permette di progettare pagine web completamente reattive.
Un’altro “pilastro” distintivo di Bootstrap sono i “container” (i contenitori), che contengono, riempiono e allineano i tuoi contenuti all’interno di un determinato dispositivo o viewport:
- .container
- container-sm
- container-md
- container-lg
- container-xl
- container-xxl
- container-fluid
Esempio template Bootstrap: link particolarmente utili:
Di seguito, riportiamo alcuni link al sito istituzionale Bootstrap particolarmente importanti:
Esempio template Bootstrap: mini-sito con il nostro Gundam LEGO da 65 cm!
Con questo mini-sito (composto da una homepage e da altre 2 pagine web), abbiamo realizzato un semplice template per introdurti al fantastico mondo di Bootstrap Framework. Protagonista di queste pagine, è il nostro Gundam LEGO Jumbo, da 65 cm realizzato con i noti mattoncini.
Questo sito è stato creato utilizzando il codice html/css e js di Bootstrap, insieme ad un nosto “foglio si stile”, in modo da personalizzare eulteriormente il sito web.
Scarica il nostro primo template Bootstrap!
Esempio template Bootstrap: esempio pagina web con robot LEGO
Questo secondo template, è realizzato scaricando i file “CSS” e “JS” dai link riportati sul sito Bootstrap: https://getbootstrap.com/docs/5.3/getting-started/download/
A differenza dell’esempio precedente, questa pagina web NON ha i collegamenti ai file “CSS” e “JS” esterni alla libreria Bootstrap, ma nella cartella che la ospita (insieme alle immagini ed alla pagina “index.html”) ha altri due file:
- bootstrap.bundle.min.js
- bootstrap.min.css
CONSIGLIO:
nel caso volessi esercitarti con i tuoi template, puoi scaricare le cartelle “CSS” e “JS” dalla libreria Bootstrap “in locale” (sul tuo PC), procedendo in questo modo:
- VAI SIU SITO BOOTSTRAP: https://getbootstrap.com/
- DOCS: https://getbootstrap.com/docs/5.3/getting-started/introduction/
- DOWNLOAD: https://getbootstrap.com/docs/5.3/getting-started/download/ click su pulsante “download”
A questo punto puoi scaricare le due cartelle sul tuo PC:“CSS” “JS”:
- Nella cartella “JS” puoi cancellare tutti i file TRANNE il file: bootstrap.bundle.min.js
- Nella cartella “CSS” puoi cancellare tutti i file TRANNE il file: bootstrap.min.css
- Inserisci file bootstrap.bundle.min.js e bootstrap.min.css dentro la cartella dove vorrai pubblicare il tuo sito (che si trova sul tuo PC desktop).
Scarica il nostro secondo template Bootstrap!
