ionique Grille (Grid)

ionique Grille (Grid) et la plupart des autres cadres sont différents, il utilise un modèle de boîte élastique (Flexible Box Model). Et dans le terminal mobile, au fond des téléphones sont pris en charge. ligne style de ligne spécifiée, le style de col colonne spécifiée.

grille même taille

Dans la ligne avec les éléments de style dans le style si vous incluez le col, col sera mis à la même taille.

Voici des exemples de style de ligne suivante contient 5 style de col, chaque largeur de col de 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez »

Indique la largeur d'une colonne

Vous pouvez définir la taille des échantillons pour chaque colonne dans une rangée. Par défaut, la colonne sera divisée en taille égale. Mais vous pouvez également être défini comme un pourcentage de la largeur de la colonne (un comportement 12 mesh).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez »

Note: Des exemples de chaque style seront automatiquement ajoutés à col frontière et un fond gris.

Ci-dessous sont quelques-unes de la colonne spécifiée nom de style de pourcentage largeur:

Il décalage grille

Vous pouvez définir la colonne de gauche décalée exemples sont les suivants:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Essayez »

Voici un certain pourcentage de décalage nom style:

Portrait Aligner sur la grille

modèle de boîte flexible peut facilement régler la colonne alignée longitudinalement. Comprenant haut alignées longitudinalement, partie centrale du fond, il peut être appliqué à chaque ligne de la colonne, ou une colonne spécifiée.

Exemple, le dernier a mis en place le contenu de démonstration pour une meilleure grille d'alignement longitudinal.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Essayez »

Grille Responsive

écran pour ordinateur de poche lorsque vous passez, par exemple, écran horizontal, écran vertical et ainsi de suite. Nous devons établir la grille pour chaque ligne peut être mis en œuvre en fonction de la largeur de la taille adaptative.

Différents dispositifs de style en réponse de la classe comme suit:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Essayez »