Comment le dimensionnement de la boîte « border-box » de Bootstrap 3 a-t-il un impact sur la disposition et les calculs du système de grille ?

Comprendre le passage de Bootstrap 3 au dimensionnement de la boîte : Border-Box

Lorsque vous migrez vos thèmes Bootstrap de la version 2.3.2 à la version 3.0 .0, vous pouvez rencontrer des différences notables dans les calculs de dimensions. Cela est principalement dû à l'introduction des styles suivants dans bootstrap.css :

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

Le raisonnement derrière le changement

Bootstrap 3 adopte la "border-box " valeur par défaut pour le dimensionnement de la boîte pour tous les éléments. Cette approche offre plusieurs avantages, en particulier pour le nouveau système de grille basé sur un pourcentage.

Avec "border-box", le navigateur calcule la boîte finale rendue en fonction de la largeur déclarée. Toutes les valeurs de bordure et de remplissage sont incluses dans la zone, ce qui rend les calculs simples et cohérents. Cela élimine le risque de calculs de largeur complexes lors de la combinaison de grilles fluides avec des gouttières basées sur des pixels.

Avantages pour le système de grille

Le passage à la « boîte de bordure » ​​a avantages significatifs pour le système de grille Bootstrap :

• Dimensionnement plus facile : La largeur déclarée d'une colonne devient la largeur réelle rendue, quels que soient les bordures ou le remplissage.
• Cohérence améliorée : Le calcul de la largeur reste cohérent pour toutes les colonnes, simplifiant la disposition et l'alignement.

Avantages supplémentaires

En plus des avantages du système de réseau, "border-box" box-sizing offre des améliorations générales :

• Marges et remplissage cohérents : Les marges et les valeurs de remplissage sont indépendantes du contenu de l'élément, ce qui donne lieu à des mises en page plus prévisibles.
• Compatibilité multi-navigateurs améliorée : La valeur « border-box » garantit un comportement cohérent entre les différents navigateurs. navigateurs, réduisant ainsi les incohérences potentielles.

Conclusion

L'adoption du dimensionnement de boîte "border-box" dans Bootstrap 3 offre un certain nombre d'avantages, en particulier pour le nouveau système de grille. Ce changement simplifie les calculs, améliore la cohérence et améliore la compatibilité entre navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!