ブートストラップグリッド system_html/css_WEB-ITnose-htmlチュートリアル-php.cn

フロントエンドを学習する過程で、以前のレイアウトは 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>

ログイン後にコピー

效果图如下：

列排序