グリッドが表示されている場合、コードは次のようになります。
<div> <div> <p>ボックス1 </p> </div> <div> <p>ボックス2 </p> </div> <div> <p> box 3 </p> </div> <div> <p> box 4 </p> </div> <p> box 5 </p> </div> <div> <p> box 6 </p> </div> <p> box 7 </p> </div> <div> <p>ボックス8 </p> </div> <div> <p>ボックス9 </p> </div> <div> <p>ボックス10 </p> </div> <div> <p> box 11 </p> </div> <div> <p> box 10 </p> </div 8 </p> </div> <div> <p>ボックス9 </p> </div> <div> <p>ボックス10 </p> </div> <div> <p>ボックス11 </p> </div> <div> <p> box 12 </p> </div> </div> </div>
ここで、col - * - *は、さまざまなタイプのデバイスでグリッドシステムが占める列幅を表します。
非常に小さい 携帯電話（<768px） | 小さい タブレット（≥768px） | 真ん中 コンピューター（≥992px） | 大きい コンピューター（≥1200px） | |
|---|---|---|---|---|
| コンテナの最大幅 | なし（自動） | 750px | 970px | 1170px |
| クラス名プレフィックス | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 最大列幅 | Auto | ~62px | ~81px | ~97px |
| 列のギャップ | 15px （すなわち30px ） | |||
列の高さが異なる場合、フロートの効果はグリッドの構造を破壊し、応答クラスを使用することで回避できます。これが完全なグリッドコードです：
<div> <div> <p>ボックス1 </p> </div> <div> <p>ボックス2 </p> </div> <div> div> div> <div> <p>ボックス3 </p> </div> <div> </div> <p>ボックス4 </p> </div> <div> </div 6 </p> </div> <div> </div> <div> <p>ボックス7 </p> </div> <div> <p>ボックス8 </p> </div> </div> <div> <p>ボックス8 </p> </div> <div> </div> <div> <p> box 5 </p 6 </p> </div> <div> </div> <div> <p>ボックス7 </p> </div> <div> <p>ボックス8 </p> </div> </div> <div> <p>ボックス9 </p> </div> <div> </div> <div> <p> box 10 </p> </div> <> <pud 11 </p> </div> <div> <p>ボックス12 </p> </div> </div> </div>
可視 - * - *は、どのデバイスが表示されるかを示します。表示属性。小さなデバイスはデフォルトで単一の列になるため、応答クラスを使用してカスタマイズする必要はありません。
応答クラスは、次のコードなど、通常のタグでも使用できます。
<p>この段落は、余分な小さなデバイスでのみ表示されます。</p> <p>この段落は小さなデバイスでのみ表示されます。</p> <p>この段落は中程度のデバイスでのみ表示されます。</p> <p>この段落は、大きなデバイスでのみ表示されます。
同様に、Hidden-*を使用して特定のデバイスに隠すように設定することもできます。
<p>この段落は、余分な小さなデバイスにのみ隠されています。</p> <p>この段落は小さなデバイスにのみ隠されています。</p> <p>この段落は中程度のデバイスにのみ隠されています。
応答クラスは、印刷の形式を設定することもできます。
上記は、編集者によって導入されたbootstrap3研究ノート（1）のグリッドシステムです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！