ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップ グリッド system_html/css_WEB-ITnose
ブートストラップ グリッド system_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:471372ブラウズ
フロントエンドを学習する過程で、以前のレイアウトは CSS の位置やマージンによって調整されました。最近、いくつかのレイアウト方法を学びました。
これらのレイアウト方法には、ブートストラップ グリッド システム、聖杯レイアウト、ネガティブ マージン レイアウトが含まれます。
今日は、Bootstrap グリッド システムについて話しましょう。
Bootstrap グリッド システム:
Bootstrap には、応答性の高いモバイルファーストの流体グリッド システムが組み込まれており、画面デバイスまたはビューポートのサイズが増加すると、システムは自動的に最大 12 列に分割されます。これには、よりセマンティックなレイアウトを生成するための、使いやすい事前定義クラスと強力なミックスインが含まれています。
はじめに: グリッド システムは、行と列の一連の組み合わせを通じてページ レイアウトを作成するために使用され、コンテンツは構築されたレイアウト
に配置できます。以下に、Bootstrap グリッド システムの動作原理を紹介します。
1. 適切な配置とパディングを与えるために、「Row」を .container に含める必要があります。
2.「行」を使って横方向に「列」のグループを作成します。
3. コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になることができます。これらの事前定義されたグリッド クラス (.row や .col-xs-4) と同様です。クラスを使用して、グリッド レイアウトをすばやく作成できます。Bootstrap ソース コードで定義されたミックスインを使用して、セマンティック レイアウトを作成することもできます。
5. パディング (列) を設定して、パディングの効果をオフセットします。最初と最後に負のマージンを設定する
6. グリッド システムの列は、範囲を表す 1 から 12 までの値を指定することで指定されます。たとえば、3 つの同じ幅の列を作成できます。 Col-xs-4
これらの原則をコードに適用してください
グリッド オプション:
以下の表を参照して、Bootstrap のグリッド システムがさまざまな画面デバイスでどのように動作するかを詳しく確認できます
グリッド クラスが動作する画面幅がしきい値以上のデバイスが対象となり、小さな画面デバイスに設定されたクラスはオーバーライドされます。したがって、任意の要素に .col-md-class を適用すると、中サイズの画面にのみ適用されるわけではありません。ただし、大画面デバイスにも (.col-lg-class が設定されていない場合)
以下は Bootstrap で作成した簡単なレイアウトです:
1 <body> 2 <div class="container"> 3 <div class="row r1"> 4 顶部内容 5 </div> 6 <div class="row r2"> 7 <div class="col-xs-5 col-xs-offset-4 left"> 8 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 9 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容10 11 </div>12 <div class="col-xs-3 right">13 右边内容14 </div>15 </div>16 <div class="row r3">17 底部内容18 </div>19 </div>20 </body>
上記のように、1 行が分割されています3 つの等しい幅の列を取得したい場合は、3 つの
列オフセットを使用できることがわかります。
上記のレイアウトでは、列オフセットを使用して位置を調整することもできます
初期位置:
.col-xs-offset-* を使用して列を右にオフセットします。たとえば、* セレクターを使用して列の左マージンを移動します。たとえば、.col-xs-offset-4 は .col-xs-5 を 4 列右に移動します。ただし、次の div も移動します。影響を受けません。
- 効果は次のとおりです:
ネストされた列
組み込みグリッドを使用してコンテンツをネストするには、新しい .row と一連の .col-md-* 列を追加するだけです。既存の .col-md-* 列の実装。ネストされた行に含まれる列の合計は 12 である必要があります。
代码如下：
1 <div class="col-xs-4 right"> 2 右边内容 3 <div class="row r2_1"> 4 <div class="col-xs-5 left2"> 5 右边的左部分 6 </div> 7 <div class="col-xs-7 right2"> 8 右边的右部分 9 </div>10 </div>11 </div>
效果图如下：
列排序
1.方向右移動还可用.col- xs-push-4，しかしただ移動これdiv の場合、以下のものは効果がありません。
コード: 3cc27246f755a62c8d7cbdbe8f215a3d
レンダリング:
次のように右側の部分を左に移動します:
1c0b7a50170cb075776bc1a37f0276a3
ef2af7023f77dbb1b2a957cd7079d617
レンダリングは次のとおりです:
ブートストラップ グリッド システムについてはこれですべてです。次の概要は次のとおりです。聖杯レイアウト。