Bootstrap-Grid-Nutzung

Verwendung des Bootstrap-Rasters: 1. Verwenden Sie den Container, um div zu umschließen. 3. Legen Sie Spalten fest, um diesen Rahmen schnell zu erstellen. 4. Ändern Sie die Breite, indem Sie den Browser ziehen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

Wie verwende ich das Bootstrap-Raster?

Verwenden Sie den Container, um das Div einzuschließen, und legen Sie dann die Zeilen darin fest. Nachdem Sie die Zeilen und dann die Spalten festgelegt haben, können Sie dieses Framework schnell erstellen

<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>

Die Gesamtzahl beträgt garantiert 12. Sie können die Änderungen sehen indem Sie den Browser ziehen, um die Breite zu ändern.

Darüber hinaus wirkt sich auch die Bildschirmgröße darauf aus. Zu diesem Zeitpunkt sollte auch die Klasse der Spalte die größere Spalte verwenden. Sie können die Änderung sehen, indem Sie den Browser ziehen.

<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>

Die gesamte Rastergrößenverteilung

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

Empfohlen: „Bootstrap-Tutorial“

Das obige ist der detaillierte Inhalt vonBootstrap-Grid-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!