ionische Grid (Gitter)

ionische Grid (Gitter) und die meisten anderen Frameworks sind unterschiedlich, es verwendet einen elastischen Box-Modell (Flexible Box-Modell). Und in dem mobilen Endgerät, im Grunde Telefone unterstützt. Zeile Stil angegebenen Zeile, Spalte Stil angegebene Spalte.

Gleiche Größe Gitter

In der Reihe mit den Elementen der Stil in der Art, wenn Sie die Spalte enthalten, col wird auf die gleiche Größe eingestellt werden.

Die folgenden Beispiele Reihe Stil enthält 5 col Stil, jede Spalte Breite von 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>

Versuchen »

Gibt die Breite einer Spalte

Sie können die Probengrößen für jede Spalte in einer Zeile gesetzt. Standardmäßig wird die Säule in gleicher Größe aufgeteilt werden. Sie können aber auch als Prozentsatz der Breite der Spalte (ein Verhalten 12 mesh) eingestellt werden.

<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>

Versuchen »

Hinweis: Beispiele für jeden Stil wird automatisch bis Spalte Rand und einen grauen Hintergrund hinzugefügt werden.

Im Folgenden sind einige der angegebenen Spaltenbreite Name Prozentsatz Stil:

Es versetzt Gitter

Sie können die linke Spalte Offset Beispiele sind wie folgt:

<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>

Versuchen »

Hier sind einige Prozentstilnamen Offset:

Portrait Raster ausrichten

Flexible Box-Modell kann die Säule leicht eingestellt Längsrichtung ausgerichtet. Bestehend aus längs ausgerichteten oberen, mittleren Teil des Bodens, kann es zu jeder Zeile der Spalte angewendet werden, oder eine Spalte angegeben.

Beispiel, stellen Sie die letzte der Demo-Inhalt für eine bessere Längsausrichtung Raster auf.

<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>

Versuchen »

Responsive Grid

Handheld-Bildschirm, wenn Sie wechseln zum Beispiel horizontale Bildschirm, vertikale Bildschirm und so weiter. Wir müssen das Raster für jede Zeile festlegen können in Abhängigkeit von der Breite des adaptiven Größe realisiert werden.

Verschiedene Geräte ansprechenden Stil der Klasse wie folgt:

<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>

Versuchen »