ブートストラップグリッドの使用法

ブートストラップ グリッドの使用法: 1. コンテナを使用して div をラップする; 2. div 内に行を設定する; 3. このフレームを素早く構築するために列を設定する; 4. ブラウザをドラッグして幅を変更することができます。

#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。

ブートストラップのグリッドを使用するにはどうすればよいですか?

コンテナを使用して div をラップし、その中に行を設定します。行を設定してから列を設定した後、このフレームをすばやく構築できます。

<div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    第一列占1个md
                    </p>
                </div>
         
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        这个是第二列 占 2 个md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>最后一个md占9个列
                        </p>
                </div>
            </div>
        </div>

合計数は 12 です。ドラッグ アンド ドロップで変更します。ブラウザの幅を変更すると、変更が表示されます。

また、画面サイズにも影響しますので、このとき列のクラスも大きい方の列を使用する必要があります。ブラウザをドラッグすると変更が確認できます。

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占4
                </div>
                <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占8
                </div>
            </div>
        </div>

全体のグリッド サイズ割り当て

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

推奨: "ブートストラップ チュートリアル"

以上がブートストラップグリッドの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。