Bootstrap - Utilità reattive

Bootstrap fornisce alcune classi di aiuto manciate, per uno sviluppo più veloce per dispositivi mobili. Questi possono essere usati per mostrare e nascondere i contenuti per dispositivo tramite media query, combinati con dispositivi grandi, piccoli e medi.

Usali con parsimonia ed evita di creare versioni completamente diverse dello stesso sito. Responsive utilities are currently only available for block and table toggling.

Classi	dispositivi
.visible-xs	Piccolo extra (meno di 768px) visibile
.visible-sm	Piccolo (fino a 768 px) visibile
.visible-md	Medio (da 768 px a 991 px) visibile
.visible-lg	Visibile più grande (992 px e oltre)
.hidden-xs	Piccolo extra (meno di 768px) nascosto
.hidden-sm	Piccolo (fino a 768 px) nascosto
.hidden-md	Medio (da 768 px a 991 px) nascosto
.hidden-lg	Più grande (992 px e oltre) nascosto

Corsi di stampa

La tabella seguente elenca le classi di stampa. Usali per alternare il contenuto per la stampa.

Classi	Stampa
.visible-print	Sì visibile
.hidden-print	Visibile solo al browser per non stampare.

Esempio

L'esempio seguente mostra l'uso delle classi di supporto elencate sopra. Ridimensiona il browser o carica l'esempio su diversi dispositivi per testare le classi di utilità reattive.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indica che l'elemento è visibile nella visualizzazione corrente.