11.28-12.1日bootstrapの学習ノート

Bootstrapの要件はHTML 5タイプ

モバイル端末装置の真の幅:

name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

レイアウトコンテナ:

.container

グリッドシステム

Bootstrapは、画面またはビューポートのサイズが増加するにつれて、最大12列に自動的に分割される応答型、モバイルデバイス優先のストリーミンググリッドシステムを提供します.

.row 1行12列

.col-md-4は3列の幅(列ごとに4部)を占める

1行にn個の同じレイアウトを表示するには、12/nを使用します.

グリッドシステムの動作原理:

• 「行(row)」はに含む必要がある.container(固定幅)または.container-fluid(100%幅)では、適切な配列(aligment)と補間(padding)を付与します.
• 「行(row)」を使用して水平方向に「列(column)」のセットを作成します.
• あなたの内容は「列(column)」内に置くべきで、「列(column)」だけが行(row)」の直接サブ要素として使用できます.
• .rowおよび.col-xs-4という事前定義されたクラスは、グリッドレイアウトを迅速に作成するために使用できます.Bootstrapソースで定義されたmixinは、意味化されたレイアウトを作成するためにも使用できます.
• 「列(column)」にを設定します.paddingプロパティを使用して、カラムとカラムの間隔を作成します..row要素設定負値marginは、に相殺する.container要素設定のpaddingは、間接的に「行(row)」に含まれる「列(column)」であり、を相殺する.padding.
• 負の値のmarginは、次の例がなぜ外に突出しているのかの原因です.グリッド列の内容を1行に並べます.
• グリッドシステムのカラムは、1～12の値を指定することで、その範囲を表します.例えば、3つの等幅の列は、3つのを用いることができる.col-xs-4を作成します.
• 「行(row)」に含まれる「列(column)」が12より大きい場合、余分な「列(column)」が存在する要素は、全体として別の行に並べ替えられます.
• グリッドクラスは、スクリーン幅が境界点サイズ以上のデバイスに適しており、小さなスクリーンデバイスに対してグリッドクラスを上書きします.したがって、要素には任意のが適用する.col-md-*グリッドクラスは、スクリーン幅が境界点サイズ以上のデバイスに適しており、小さなスクリーンデバイスに対してグリッドクラスを上書きする.したがって、要素には任意のが適用する.col-lg-*は存在せず、大画面デバイスにも影響します.

ネストして使用し、サブラベルを次の親ラベルとして12部に分けることができます.