Quelle est la différence entre col-lg- *, col-md- * et col-sm- * dans twitter bootstrap3?

Question

Quelle est la différence entre col-lg-* , col-md-* et col-sm-* dans twitter bootstrap 3 ?

Answer 1

Le Bootstrap 3 de la grille se décline en 4 tailles (ou "points d'arrêt").

Minuscules (pour les smartphones .col-xs-*), petite (pour les comprimés .col-sm-*), moyen (pour les ordinateurs portables, .col-md-*) et les grands (pour les ordinateurs portables/ordinateurs de bureau .col-lg-*).

Les trois tailles de grille permettent le contrôle de la grille de comportement sur différents appareils, c'est à dire de bureau, ordinateurs portables, tablette, smartphone, etc.

Donc:

col-sm-3 3 colonnes de la grille de large (25%) sur un typique petit appareil largeur (plus de 768 pixels)

col-md-3 3 colonnes de la grille de large (25%) sur un moyen de l'appareil largeur (plus de 992 pixels)

etc.

L' sm, md et lg des grilles de tous "pile" à la verticale sur les écrans/fenêtres de moins de 768 pixels. C'est là que l' xs de la grille s'adapte. Les colonnes qui utilisent l' col-xs-* classes ne sont pas pile à la verticale et de continuer à l'échelle vers le bas sur les plus petits écrans.

Redimensionner votre navigateur à l'aide de la démo suivante et vous verrez la grille mise à l'échelle des effets:

<link href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="visible-lg"><span class="label label-default">lg</span>
  </div>
  <div class="visible-md"><span class="label label-default">md</span>
  </div>
  <div class="visible-sm"><span class="label label-default">sm</span>
  </div>
  <div class="visible-xs"><span class="label label-default">xs</span>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6">col-lg-3 col-md-4 col-xs-6</div>
    <div class="col-lg-3 col-md-4 col-xs-6">col-lg-3 col-md-4 col-xs-6</div>
    <div class="col-lg-3 col-md-4 col-xs-6">col-lg-3 col-md-4 col-xs-6</div>
    <div class="col-lg-3 col-md-4 col-xs-6">col-lg-3 col-md-4 col-xs-6</div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-6">col-xs-6</div>
    <div class="col-xs-6">col-xs-6</div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-8">col-xs-6 col-sm-8</div>
    <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-8">col-xs-6 col-md-8</div>
    <div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
  </div>
</div>

Answer 2

De documentation Twitter Bootstrap

Petite grille (≥768px) = .col - sm-*

Grille moyenne (≥992px) = .col - md-*

Grande grille (≥1200px) = .col - lg-*