ブートストラップ-グリッドデモ
グリッドとは何ですか?
グラフィックデザインでは、グリッドは、コンテンツを構造化するために使用される一連の交差する直線(垂直、水平)線で構成される構造(通常は2次元)です。印刷デザインのレイアウトやコンテンツ構造のデザインに広く使用されています。Webデザインでは、HTMLとCSSを使用して一貫したレイアウトを迅速かつ効果的に作成することは非常に効果的な方法です。
ブートストラップグリッドシステムの動作
グリッドシステムは、コンテンツを格納する一連の行と列を介してページレイアウトを作成するために使用されます。ブートストラップグリッドシステムの仕組みは次のとおりです-
行は、内に配置する必要があります .container 適切な配置とパディングのためのクラス。
行を使用して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
次のような事前定義されたグリッドクラス .row and .col-xs-4グリッドレイアウトをすばやく作成するために使用できます。LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
列は、パディングを介してガター(列の内容間のギャップ)を作成します。そのパディングは、最初と最後の列の行で負のマージンを介してオフセットされます。.rows。
グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-xs-4。
例 | 説明 | ダウンロードリンク |
---|---|---|
グリッド | この例は、Bootstrapのグリッド構造について示しています。 | ダウンロード |