Skip to main content

Introduzione

Classi e utilità per organizzare le diverse tipologie di contenuti all’interno di una pagina web

In questa sezione sono mostrate utilità per l’organizzazione dei contenuti, come testi, liste, tabelle e immagini.

Di seguito viene introdotto “Reboot”, una collezione di regole CSS applicate agli elementi HTML che Bootstrap utilizza per definire una base consistente di stile su cui è costruito tutto il resto.

Reboot

Reboot è una piccola parte del CSS di Bootstrap che si basa su Normalize e “inizializza” lo stile di molti elementi HTML attraverso il solo utilizzo di selettori di tipo (quindi non selettori di classe).

Ogni altro stile aggiuntivo è invece applicato da Bootstrap, e quindi da Bootstrap Italia, con l’utilizzo di selettori di classe. Ad esempio, la parte Reboot di Bootstrap inizializza gli stili per le tabelle utilizzando <table>, ed in seguito definisce .table, .table-bordered ed altri.

Di seguito, alcuni dettagli di ciò che Reboot implementa e che sarebbe bene seguire:

  • Aggiorna alcuni valori di default del browser con l’utilizzo di rem anziché em per avere componenti più semplicemente ridimensionabili.
  • Evita margin-top. Margini verticali possono collassare tra loro, portando risultati inattesi a seconda del dispositivo.
  • Per avere una migliore ridimensionabilità a diverse dimensioni, elementi block dovrebbero usare rem per i margini.
  • Lascia ogni dichiarazione relativa alle proprietà dei testi (font-) al minimo, usando il default inherit quando possibile.

Default di pagina

Gli elementi <html> e <body> stessi impostano attraverso Reboot alcuni comportamenti, tra cui:

  • box-sizing è settato a border-box globalmente, anche per *::before e *::after. Questo assicura che la dimensione dichiarata non aumenti mai per la presenza di padding o bordi.
  • <html> non imposta una dimensione di base per font-size, assumendola in 16px, come da default del browser.
  • <body> imposta un font-size: 1rem, per un migliore ridimensionamento dei testi via media-queries, rispettando le preferenze degli utenti e assicurando così un approccio più accessibile.
  • <body> imposta anche font-family, line-height, e text-align globali, per evitare inconsistenze in alcuni elementi dei form.
  • <body> imposta background-color a #fff.

Reboot si occupa uniformare e semplificare comportamenti tra diversi browser e dispositivi anche inizializzando alcune regole su tabelle, form, attributi, ecc.

Per maggiori informazioni si rimanda alla pagina descrittiva di Reboot sul sito di Bootstrap (in inglese).

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy