boostrap

Bootstrap: caratteristiche base

Un buon developer deve sempre saper qualcosina anche di CSS. Sì, ebbene è così, anche da qui non si scappa! Andiamo a dare un’occhiata al framework CSS per eccellenza, ovverosia Bootstrap. Stiamo parlando di uno strumento essenziale per rendere responsive i vostri siti web e per velocizzare la produzione dello stile nei template.

Cos’è Bootstrap

  • Bootstrap è un framework front-end gratuito per uno sviluppo web più rapido e semplice
  • Bootstrap include modelli di progettazione basati su HTML e CSS per tipografia, moduli, pulsanti, tabelle, navigazione, modali, caroselli di immagini e molti altri, oltre a plug-in JavaScript facoltativi
  • Bootstrap dà la possibilità di creare facilmente responsive design

Esistono due modi per iniziare a utilizzare Bootstrap 4 in una pagina web.

  • includere Bootstrap 4 da un CDN
  • scaricare Bootstrap 4 da getbootstrap.com

Scarica Bootstrap gratis!

Bootstrap 4 è progettato per essere sensibile ai dispositivi mobili.

Per garantire il corretto rendering e il tocco dello zoom, bisogna aggiungere il tag <meta name=”viewport” content=”width=device-width, initial-scale=1″> all’interno dell’elemento <head>. La parte width=device-width imposta la larghezza della pagina in modo che segua la larghezza dello schermo del dispositivo.

La parte initial-scale=1 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.

Bootstrap 4 richiede un elemento contenitore che avvolge il contenuto della pagina (container) che può essere:

  • .container: contenitore a larghezza fissa
  • .container-fluid: contenitore a larghezza intera che copre l’intera larghezza del viewport

Il sistema a griglia di Bootstrap è realizzato in flexbox e consente di inserire fino a 12 colonne nella pagina.

Se non si desidera utilizzare tutte e 12 le colonne singolarmente, è possibile raggruppare le colonne per creare colonne più ampie.

Il sistema a griglia di Bootstrap 4 ha cinque classi:

  • .col- (Piccoli dispositivi – larghezza dello schermo inferiore a 576 px)
  • .col-sm- (piccoli dispositivi – larghezza dello schermo uguale o superiore a 576 px)
  • .col-md- (dispositivi medi: larghezza dello schermo uguale o superiore a 768 px)
  • .col-lg- (dispositivi di grandi dimensioni – larghezza dello schermo uguale o superiore a 992 px)
  • .col-xl- (dispositivi xlarge – larghezza dello schermo uguale o superiore a 1200px)

Leave a reply