イオングリッド(グリッド)2024 年の最新の入門チュートリアル。このコースでは グリッドにポートレートスナップ,応答グリッド, について学習できます。
イオングリッド(グリッド)および他のほとんどのフレームワークは、弾性ボックスモデル(フレキシブルボックスモデル)を使用して、異なっています。 そして、携帯端末で、基本的に電話がサポートされています。 行のスタイル指定された行、列のスタイル指定された列。
あなたはCOLが含まれている場合スタイルで、スタイルの要素を持つ行では、列は同じサイズに設定されます。
次の例の行のスタイルは5コルスタイル、20%の各COL幅が含まれています。
<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>
あなたは、行の各列のサンプルサイズを設定することができます。 デフォルトでは、カラムが同じサイズに分割されます。 しかし、あなたはまた、カラム(行動12メッシュ)の幅の割合として設定することができます。
<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>
注:各スタイルの例には、自動的にコル境界線と灰色の背景に追加されます。
以下に記載されている指定された列幅のパーセンテージスタイル名の一部です:
.COL-10 | 10% |
.COL-20 | 20% |
.COL-25 | 25% |
.COL-33 | 33.3333% |
.COL-50 | 50% |
.COL-67 | 66.6666% |
.COL-75 | 75パーセント |
.COL-80 | 80% |
.COL-90 | 90% |
あなたは、左の列には、次のような例は、オフセットを設定することができます。
<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>
ここではいくつかの割合は、スタイル名をオフセットされています。
.COL-オフセット-10 | 10% |
.COL-オフセット-20 | 20% |
.COL-オフセット-25 | 25% |
.COL-オフセット-33 | 33.3333% |
.COL-オフセット-50 | 50% |
.COL-オフセット-67 | 66.6666% |
.COL-オフセット-75 | 75パーセント |
.COL-オフセット-80 | 80% |
.COL-オフセット-90 | 90% |
フレキシブルボックスモデルを簡単に縦方向に整列された列を設定することができます。 長手方向に整列上部、底の中央部を含む、それが列の各行、または指定された列に適用することができます。
たとえば、優れた縦位置合わせグリッドのデモコンテンツを設定し、最後の1。
<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>
例えばあなたがスイッチハンドヘルド画面、横画面、縦画面のように。 我々は、適応サイズの幅に応じて実施することができる行ごとにグリッドを設定する必要があります。
異なるデバイスクラスの応答スタイルを次のように
応答クラス | 説明 |
.responsive-SM | クロススクリーンの携帯電話よりも小さいです |
.responsive-MD | フラット縦画面未満 |
.responsive-LG | フラット横画面未満 |
<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>