Was ist das Prinzip der Bootstrap-Rasterisierung?

Beim Bootstrap besteht das Prinzip der Rasterung darin, entsprechend der Größe des Geräts zu segmentieren, wobei jedes Segment eine feste Breite hat, und ein reaktionsfähiges Layout durch Prozentsätze und Medienabfragen zu implementieren, wodurch derselbe Satz von Seiten an Geräte mit angepasst werden kann verschiedene Auflösungen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

Was ist das Prinzip der Bootstrap-Rasterisierung?

Bootstrap verwendet ein 12-Spalten-Rastersystem, unterteilt nach Die Größe von Mainstream-Geräten ist segmentiert, jedes Segment hat eine feste Breite und ein reaktionsfähiges Layout wird durch Prozentsätze und Medienabfragen erreicht.

Wenn Sie zum ersten Mal mit Bootstrap in Berührung kommen, werden Sie von seinem Rasterlayout begeistert sein. Es bietet uns eine Reihe responsiver Layoutlösungen.

Layout des Bootstrap-Rastersystems

Um es einfach auszudrücken:
1. Bootstrap verfügt über ein integriertes, reaktionsfähiges, mobiles, flüssiges Rastersystem, wenn die Größe des Bildschirmgeräts oder des Ansichtsfensters zunimmt in bis zu 12 Spalten.

2. Das Implementierungsprinzip des Rastersystems ist sehr einfach: Definieren Sie die Größe des Behälters und teilen Sie ihn in 12 gleiche Teile auf (es kann auch in 24 oder 32 Teile unterteilt werden, am häufigsten sind jedoch 12 Teile). , passen Sie dann die inneren und äußeren Ränder an und kombinieren Sie schließlich 媒体查询，就制作出了强大的响应式网格系统. Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile.

Medienabfragen

Im Rastersystem verwenden wir die folgende Medienabfrage in der Less-Datei, um wichtige Haltepunktschwellenwerte zu erstellen.

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

Gelegentlich schließen wir auch die maximale Breite in den Medienabfragecode ein, um die Auswirkungen von CSS auf einen kleineren Bereich von Bildschirmgrößen zu beschränken.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der Bootstrap-Rasterisierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!