ブートストラップは何列に分割できますか?

ブートストラップでは、ページを最大 12 列に分割できます。ブートストラップのグリッド システムは比較的柔軟で、ページを 1、2、3、4、6、および 12 列に分割できます。デフォルトでは、 bootstrap は最大 12 列まで分割でき、ページは 12 列に分割されます。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

列数ブートストラップは最大で分割できます

このグリッド レイアウト システムは、足場 (フレームワーク、レイアウト) 部分に属します。 Scaffolding には、(固定) グリッド レイアウト (Grid System) と流体グリッド レイアウト (Fluid Grid System) があります。この記事では、最初の固定グリッド レイアウトについて説明します。

Bootstrap は 12 列のレイアウト形式を使用します。つまり、ページの 1 行内に最大 12 列を配置できます。

ブートストラップのデフォルトは 12 列のみです。12 は数値「1、2、3、4、6」の最小公倍数であるため、12 列のグリッド システムは比較的柔軟で、行の分割をサポートします。 1列、2列、3列、4列、6列に分割します。

Bootstrap では、ページの合計幅が 940px であると規定されており、これは他の CSS フレームワークとは異なります (960px (960grid など) のものや 950px (blueprint など) のものもあります)。この 940 ピクセルは、次のように、container という名前のクラスで指定されます。

.container,
{
  width: 940px;
}

このコンテナのページが中央に配置されることも指定されます

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(ここには、 div in さまざまなブラウザで同じセンタリング効果を生成する最も簡単な方法は、margin-left と margin-right の値を auto に設定することです ※zoom CSS ハックは ie6 と 7 と互換性があるはずですが、なぜズームを使用するのでしょうか=1?不明)

同時にCSS疑似要素セレクターも使用しており、このクラスでは前後の内容もクリアされ、後ろのフローティングコンテンツもクリアされます。 .

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

コンテナ内 複数列のレイアウトを直接実行することはできません。このとき、行を二次コンテナとして使用する必要があります。行コンテナのスタイルは非常に興味深いです。

.row {
  margin-left: -20px;
  *zoom: 1;
}

左側のマージンは -20px です。マイナス 20 であることに注意してください。つまり、行の幅が外側のコンテナを 20 ピクセル超えます。なぜ？後でわかります。もちろん、コンテナと同様に、行内のコンテンツやフローティング スタイルを空にしてフローティングする設定もありますので、ここでは詳しく説明しません。

内側の行は、実行したい特定の複数列レイアウトのスパン クラスです。特にレイアウトを使用する場合、コードは次のようになります。

    <div class="container">
        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span8">
                span8</div>
        </div>
    </div>

なぜスパンをコンテナーに直接配置できないのですか?また、なぜ行に margin-left=-20px が必要なのですか?スパンについて詳しくお話しますが、これが著者が「洗練されたグリッドレイアウト」について語る理由でもあります。

実際、Bootstrap には、span1、span2、...span12 という合計 12 個の Span クラスがあり、それらの定義は非常に単純です

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

もちろん、疑似クラスを使用することもできますそれらを統合するためのセレクター フローティング スタイルに設定

[class*="span"] {
  float: left;
}

フローティングは別の理論であり、私たちはそれを押しません。スパン 1 からスパン 12 までを注意深く調べたところ、スパンが増加するたびに 80 ピクセルずつ増加するというパターンが見つかりました。これは、span1 が 60 からカウントを開始するだけです。span1 が 80 からカウントを開始して、各スパンが 80 の倍数になるようにしてはどうでしょうか。これも覚えやすくなります。実際、スパンは 80 から数え始めます。表示されている部分が 60 で、残りの 20 がスタイルで margin-left=20 で設定されているだけです; 次のように

[class*="span"] {
  margin-left: 20px;
}

この 20 には別の意味があり、つまり、上の 2 つのスパンを表すことができます。スパン間の間隔とは、すべてのスパンの間に 20 ピクセルの間隔があることを意味し、スパンがくっついてエンド ユーザーにとって分離できなくなることはありません。

関連する推奨事項: ブートストラップ チュートリアル

以上がブートストラップは何列に分割できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。