Bootstrap-grid-system

提供：Dev Guides
移動先:案内、検索

ブートストラップ-グリッドシステム

この章では、ブートストラップグリッドシステムについて説明します。

グリッドとは何ですか？

wikepediaによると-

'_グラフィックデザインでは、グリッドは、コンテンツの構造化に使用される一連の交差する直線（垂直、水平）で構成される構造（通常は2次元）です。 印刷デザインのレイアウトとコンテンツ構造の設計に広く使用されています。 Webデザインでは、HTMLとCSSを使用して一貫性のあるレイアウトを迅速かつ効果的に作成する非常に効果的な方法です。_

簡単に言えば、Webデザインのグリッドはコンテンツを整理および構造化し、Webサイトをスキャンしやすくし、ユーザーの認知的負荷を軽減します。

Bootstrap Grid Systemとは何ですか？

グリッドシステム用のBootstrapの公式ドキュメントによると-

'_ブートストラップには、デバイスまたはビューポートのサイズの増加に応じて最大12列まで適切にスケールする、応答性の高いモバイルの最初の流体グリッドシステムが含まれています。 簡単なレイアウトオプション用の定義済みクラスと、よりセマンティックレイアウトを生成するための強力なミックスインが含まれています。_

上記の声明を理解しましょう。 Bootstrap 3は、モバイルデバイス、タブレットなどの小さな画面を対象としてブートストラップのコードを開始し、ラップトップ、デスクトップなどの大きな画面のコンポーネントとグリッドを「拡張」するという意味で、最初にモバイルです。

モバイルファースト戦略

  • コンテンツ
  • 最も重要なものを決定します。
  • レイアウト
  • 最初に小さい幅に設計します。
  • ベースCSSはモバイルデバイスを最初にアドレスします。タブレット、デスクトップのメディアクエリアドレス。
  • プログレッシブエンハンスメント
  • 画面サイズが大きくなるにつれて要素を追加します。

ブートストラップグリッドシステムの動作

グリッドシステムは、コンテンツを収容する一連の行と列を介してページレイアウトを作成するために使用されます。 ブートストラップグリッドシステムの仕組みは次のとおりです-

  • 適切な配置とパディングのために、行は .container クラス内に配置する必要があります。
  • 行を使用して、列の水平グループを作成します。
  • コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。
  • グリッドレイアウトをすばやく作成するために、。rowや .col-xs-4 などの事前定義されたグリッドクラスを使用できます。 LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
  • 列は、パディングによって溝（列のコンテンツ間のギャップ）を作成します。 そのパディングは、*。rows *の負のマージンを介して最初と最後の列の行にオフセットされます。
  • グリッド列は、スパンする12の使用可能な列の数を指定することにより作成されます。 たとえば、3つの等しい列は3つの .col-xs-4 を使用します。

メディアクエリ

メディアクエリは、「条件付きCSSルール」の非常に洗練された用語です。 指定された特定の条件に基づいて、CSSを単に適用します。 これらの条件が満たされると、スタイルが適用されます。

Bootstrapのメディアクエリを使用すると、ビューポートサイズに基づいてコンテンツを移動、表示、非表示できます。 ブートストラップグリッドシステムにキーブレークポイントを作成するために、LESSファイルで次のメディアクエリが使用されます。 

/*Extra small devices (phones, less than 768px)*/
/*No media query since this is the default in Bootstrap*/

/*Small devices (tablets, 768px and up)*/
@media (min-width: @screen-sm-min) { ... }

/*Medium devices (desktops, 992px and up)*/
@media (min-width: @screen-md-min) { ... }

/*Large devices (large desktops, 1200px and up)*/
@media (min-width: @screen-lg-min) { ... }

時折、これらは max-width を含むように拡張され、CSSをより狭いデバイスセットに制限します。 

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

メディアクエリには、デバイス仕様とサイズルールの2つの部分があります。 上記の場合、次のルールが設定されています-

この行を考えてみましょう- 

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

すべてのデバイスで、min-widthの種類に関係なく：@ screen-sm-min_画面の幅が @ screen-sm-max_より小さくなった場合は、それから何かを実行します。

グリッドオプション

次の表は、Bootstrapグリッドシステムが複数のデバイス間でどのように機能するかの側面をまとめたものです-

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 12 12 12
Max column width Auto 60px 78px 95px
Gutter width

30px

（列の両側に15ピクセル）

a

30px

（列の両側に15ピクセル）

a

30px

（列の両側に15ピクセル）

a

30px

（列の両側に15ピクセル）

Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

基本的なグリッド構造

以下は、Bootstrapグリッドの基本構造です- 

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>

   <div class = "row">...</div>

</div>

<div class = "container">
   ....
</div>

いくつかの簡単なグリッドの例を見てみましょう-

  • link：/bootstrap/bootstrap_grid_system_example1 [例-水平に積み上げ]
  • link：/bootstrap/bootstrap_grid_system_example2 [例-中規模および大規模デバイス]
  • リンク：/bootstrap/bootstrap_grid_system_example3 [例-モバイル、タブレット、デスクトップ]

応答列のリセット

4層のグリッドを使用できるため、特定のブレークポイントで、一方が他方よりも高いために列が完全にクリアされないという問題が発生します。 これを修正するには、次の例に示すように、クラス .clearfix とリンクの組み合わせを使用します。/bootstrap/bootstrap_sensitive_utilities[応答ユーティリティクラス]- 

<div class = "container">
   <div class = "row" >

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.</p>

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim</p>
      </div>

   </div>
</div>

これは、次の結果を生成します-

'_ビューポートのサイズを変更するか、この例の望ましい結果を得るために携帯電話で確認してください。_

オフセット列

オフセットは、より特殊なレイアウトに役立つ機能です。 これらを使用して、列を押して間隔を広げることができます（たとえば）。 .col-xs = *クラスはオフセットをサポートしていませんが、空のセルを使用して簡単に複製できます。

大きなディスプレイでオフセットを使用するには、。col-md-offset-クラスを使用します。 これらのクラスは、 *1 から 11 の範囲の*列だけ列の左マージンを増やします。

次の例では、<div class = "col-md-6"> .. </div>があります。これをクラス .col-md-offset-3 を使用して中央揃えします。 

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>

</div>

これは、次の結果を生成します-

ネスト列

デフォルトのグリッドでコンテンツをネストするには、既存の* .col-md-列内に新しい .row および* .col-md-列のセットを追加します。 入れ子になった行には、合計12個の列のセットを含める必要があります。

次の例では、レイアウトに2つの列があり、2番目の列は2つの行で4つのボックスに分割されています。 

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">

            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>Consectetur art party Tonx culpa semiotics.
                  Pinterest assumenda minim organic quis.</p>
            </div>

            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

         </div>

         <div class = "row">

            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip
                  ex ea commodo consequat.</p>
            </div>

            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim.</p>
            </div>

         </div>

      </div>

   </div>

</div>

これは、次の結果を生成します-

列の順序

Bootstrapグリッドシステムのもう1つの優れた機能は、列を順番に簡単に記述し、別の列に表示できることです。 * .col-md-push-および* .col-md-pull-修飾子クラスを使用して、 1 から 11 の範囲の組み込みグリッド列の順序を簡単に変更できます。

次の例では、左側の列が最も狭く、サイドバーとして機能する2列のレイアウトがあります。 * .col-md-push-および* .col-md-pull-クラスを使用して、これらの列の順序を入れ替えます。 

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">
      <p>Before Ordering</p>

      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         I am on left
      </div>

      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         I am on right
      </div>

   </div>

   <br>

   <div class = "row">
      <p>After Ordering</p>

      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         I was on left
      </div>

      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         I was on right
      </div>

   </div>

</div>

これは、次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Bootstrap-grid-system&oldid=7319」から取得
Powered by MediaWiki