Bootstrap visualizzare la media query applicata

Con questo snippet inserito in una pagina html che usa Bootstrap, è possibile visualizzare quale media query viene applicata quando si ridimensiona la finestra:

HTML

<div>Bootstrap media query: 
  <h3 class="badge visible-xs-inline-block">XS</h3>
  <h3 class="badge visible-sm-inline-block">SM</h3>
  <h3 class="badge visible-md-inline-block">MD</h3>
  <h3 class="badge visible-lg-inline-block">LG</h3>
</div>
Bootstrap 3 di default usa 4 media query identificate con:
  • xs: applicata quando la larghezza della finestra è inferiore a 768px
  • sm: applicata quando la larghezza della finestra è superiore a 768px
  • md: applicata quando la larghezza della finestra è superiore a 992px
  • lg: applicata quando la larghezza della finestra è superiore a 1200px
Tags:
Bootstrap2 CSS19 Esempi224 HTML74 HTML 554
Potrebbe interessarti anche: