Wie wirkt sich die „Border-Box'-Boxgröße von Bootstrap 3 auf Layout- und Rastersystemberechnungen aus?

Verstehen des Bootstrap 3 Wechseln Sie zur Box-Größe: Border-Box

Bei der Migration Ihrer Bootstrap-Themen von Version 2.3.2 auf 3.0 .0, kann es bei der Dimensionsberechnung zu deutlichen Unterschieden kommen. Dies ist in erster Linie auf die Einführung der folgenden Stile in bootstrap.css zurückzuführen:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

The Reasoning Behind the Change

Bootstrap 3 übernimmt die „border-box“. " Standardwert für die Boxgröße für alle Elemente. Dieser Ansatz bietet mehrere Vorteile, insbesondere für das neue prozentbasierte Rastersystem.

Mit „border-box“ berechnet der Browser die endgültig gerenderte Box basierend auf der angegebenen Breite. Alle Rand- und Füllwerte sind im Feld enthalten, sodass die Berechnungen einfach und konsistent sind. Dadurch entfällt das Potenzial für komplexe Breitenberechnungen bei der Kombination von fließenden Gittern mit pixelbasierten Dachrinnen.

Vorteile für das Rastersystem

Die Umstellung auf „Grenzkasten“ hat erhebliche Vorteile für das Bootstrap-Grid-System:

• Einfachere Dimensionierung: Die Die deklarierte Breite einer Spalte wird zur tatsächlich gerenderten Breite, unabhängig von Rändern oder Abstand.
• Verbesserte Konsistenz: Die Breitenberechnung bleibt für alle Spalten konsistent, was Layout und Ausrichtung vereinfacht.

Zusätzliche Vorteile

Zusätzlich zu den Vorteilen des Rastersystems bietet „Border-Box“ Box-Sizing bietet allgemeine Verbesserungen:

• Konsistente Ränder und Auffüllung: Ränder und Auffüllungswerte sind unabhängig vom Inhalt des Elements, was zu vorhersehbareren Layouts führt.
• Verbesserte Cross-Browser-Kompatibilität: Der „Border-Box“-Wert gewährleistet ein konsistentes Verhalten über verschiedene Browser hinweg und reduziert so das Potenzial Inkonsistenzen.

Fazit

Die Einführung der „Border-Box“-Boxgröße in Bootstrap 3 bietet eine Reihe von Vorteilen, insbesondere für das neue Grid-System . Diese Änderung vereinfacht Berechnungen, erhöht die Konsistenz und verbessert die browserübergreifende Kompatibilität.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die „Border-Box'-Boxgröße von Bootstrap 3 auf Layout- und Rastersystemberechnungen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!