Derniers tutoriels de développement web
 

Bootstrap Grid - Small Devices


Bootstrap Grille Exemple: petits appareils

Supposons que nous ayons une mise en page simple avec deux colonnes. Nous voulons que les colonnes à fractionner 25%/75% pour les petits appareils.

Astuce: Les petits appareils sont définis comme ayant une largeur d'écran de 768 pixels à 991 pixels.

Pour les petits appareils que nous allons utiliser les .col-sm-* classes.

Nous allons ajouter les classes suivantes à nos deux colonnes:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Maintenant Bootstrap va dire "à la petite taille, chercher des cours avec -sm- en eux et utiliser ces".

L'exemple suivant se traduira par un 25%/75% divisée sur les petites (et moyennes et grandes) appareils. Sur les petits appareils supplémentaires, il sera automatiquement pile (100%):

col-sm-3
col-sm-9

Exemple

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
Essayez - le vous - même »

Remarque: Assurez - vous que la somme ajoute toujours à 12.

Pour un / 66,6% répartition de 33,3%, vous devez utiliser .col-sm-4 et .col-sm-8 :

col-sm-4
col-sm-8

Exemple

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
Essayez - le vous - même »

Le chapitre suivant montre comment ajouter un pour cent de partage différent pour les appareils de taille moyenne.