Twitter Bootstrap 3ではいつコンテナと行を使用する必要がありますか？

Question 1

クラスcontainerとをいつ使用するかを説明してくださいrow。Bootstrapのドキュメントがこの部分についてかなり不明確であるため、私にはわかりません。

Bootstrap3を使用しています。

Question 2

containerrow要素のコンテナです。

row 要素は列のコンテナです（ドキュメントではグリッドシステムと呼ばれています）

また、containerレイアウトのレスポンシブな動作を処理するコンテンツのマージンを設定します。

したがって、このcontainerクラスは、Bootstrapプロジェクトのスタイルガイドラインに基づいて「ボックス化された」コンテンツを作成するためによく使用されます。

「箱から出して」全幅グリッドを作成する場合はrow、内部に列がある要素のみを使用できます（通常の合計12列にまたがります）。

containerそしてrowクラスは、本体内の要素のためのものです。したがって、基本的なレイアウトは次のようになります。

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

ボックス化されたレスポンシブレイアウトの場合。

を省略すると、container全幅のレイアウトになります。

ジャンボトロンの例

ジャンボトロンはそのcontainer振る舞いの良い例です。ジャンボトロン要素を要素に配置するcontainerと、境界が丸くなり、応答幅に基づいて幅が固定されます。ジャンボトロンがコンテナの外側にある場合は、境界線なしで全幅に広がります。

Question 3

私は同じことについて疑問に思っていました、そして私がbootstrap.cssバージョン3のを通過したことを理解しました。答えは行番号からです。1585年から1605年。以下のように理解を深めるために、これらの行をここに投稿します。

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

コード全体は自明です。しかし、これについては詳しく説明し、コンテナがかかるだろう750px、画面幅が間にある場合768pxや992pxなどのコードに示すように。これで、1200を超える一般的な画面解像度の場合、コンテナにはがかかり1170pxますが、30 px（15px+15px）のパディングを差し引くと、左の有効スペースは1140px、左右のマージンが自動に設定されているため、画面の中央に配置されます。

さて、の場合、class="row"以下のコードがあります：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

したがって、行がコンテナ内にある場合、コンテナから両側に15pxのパディングを効果的に奪い、スペース全体を使用します。ただし、クラス行がbodyタグ内にある場合は、マージンが負であるため、表示領域からブラウザの左側と右側の両方に移動する傾向があります。

それが明らかにされたことを願っています。

Question 4

コンテナ

コンテナは、レスポンシブ幅に幅の制約を提供します。レスポンシブサイズが変わると、変わるのはコンテナです。行と列はすべてパーセンテージベースであるため、変更する必要はありません。行によってキャンセルされた、両側に15pxのマージンがあることに注意してください。

行

行は常にコンテナ内にある必要があります。

この行は、列に住む場所を提供します。理想的には、合計12の列があります。すべての列が左にフロートするため、ラッパーとしても機能します。フロートがおかしくなったときに、追加の行がオーバーラップすることはありません。

行には、両側に15pxの負のマージンもあります。行を構成するdivは通常、コンテナのパディングの内側に拘束され、ピンクの領域の端に接触しますが、それを超えることはありません。15pxの負のマージンは、行をコンテナーの15pxのパディングの上に押し出し、本質的に否定します。さらに、行により、その中のすべてのdivが、前の行と次の行から分離された独自の行に表示されます。

列

列に15pxのパディングが追加されました。このパディングは、行のマージンが負であり、コンテナーのパディングが正であるため、列が実際に行の端に接触し、それ自体がコンテナーの端に接触することを意味します。ただし、列のパディングは、列内のすべてのものを必要な場所に押し込み、列間に30pxのガターを提供します。行の外側の列は絶対に使用しないでください。機能しません。

詳細については、この記事を読むことをお勧めします。それは本当に明確であり、Bootstrapのグリッドシステムがどのように機能するかをよく説明しています。

Question 5

クラス 'container'は、コンテンツをビューポートの中心にラップします。in bodyタグ付きのコンテンツ全体を、ページの中央に指定された幅で表示されるページの結果に配置できます。

クラス「row」は、コンテンツを1行の列に配置する必要がある場合に使用されます。各行には、合計で最大12列を含めることができます。

Question 6

従来のCSSプラクティスでは、おそらく次のクラスを使用します。

wrapper, header, navigator, contents, footer

上記のクラスの使用法は、次の例のようになります。

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

ブートストラップでは、必要に応じて、または上記のテンプレートに慣れている場合は、次の例のようなブートストラップクラスを使用できます。

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

行クラスの場合、ページの表形式のレイアウトを設計する場合は行クラスを使用できますが、データを表形式で表示する場合は表クラスを使用する必要がありますが、表は応答しません。

データテーブルとは異なる表形式のレイアウトを作成するには、次の例のように行クラスを使用します。

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

テーブルベースのレイアウトの使用を避け、ここで説明するようなレスポンシブテーブルの使用を試みる必要があります