Pourquoi Bootstrap 3 est-il passé à « box-sizing : border-box » ?

Démêler le passage à Border-Box dans Bootstrap 3

Bootstrap 3 a introduit un changement notable avec l'inclusion de box-sizing : border-box pour tous les éléments. Cet écart par rapport à la valeur par défaut de la zone de contenu a suscité des questions sur sa justification.

Dans le processus de migration de Bootstrap 2.3.2 vers 3.0.0, les développeurs ont observé des différences dimensionnelles significatives attribuées à ce changement. La règle CSS suivante dans bootstrap.css pointe au cœur de cette modification :

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

Impact de Border-Box sur les dimensions

Dans le modèle traditionnel de boîte de contenu, la largeur et la hauteur d'un élément ne tient compte que de son contenu, à l'exclusion du remplissage et de la bordure. Cela entraînerait des problèmes lors de la tentative de calcul de la largeur ou de la hauteur totale, car elles s'étendraient au-delà des valeurs déclarées.

En revanche, border-box inclut à la fois le remplissage et la bordure dans les calculs de largeur et de hauteur. Ce modèle simplifié garantit que la taille finale de la boîte rendue s'aligne précisément sur la largeur et la hauteur spécifiées, quelle que soit la taille du remplissage ou de la bordure.

Le rôle de Border-Box dans le système de grille de Bootstrap

Alors que le déplacement vers la zone de bordure affecte tous les éléments, cela a un impact particulièrement important dans le système de grille fluide de Bootstrap 3. Dans les grilles fluides, les colonnes sont définies en pourcentage de la largeur totale du conteneur, ce qui leur permet d'évoluer de manière réactive.

Dans le modèle de boîte de contenu, le calcul de la taille des colonnes nécessiterait de prendre en compte la gouttière à largeur fixe de chaque côté. . Cette complexité est éliminée avec border-box. La largeur déclarée d'une colonne inclut désormais à la fois sa bordure et son remplissage, offrant un moyen de dimensionnement cohérent et intuitif.

Acceptation et avantages de l'industrie

Au-delà de ses avantages pour le système de grille de Bootstrap, l'adoption de box-sizing : border-box est de plus en plus accepté dans le développement Web. Il favorise un comportement cohérent dans tous les navigateurs et offre une approche intuitive de la mise en page et du dimensionnement.

Les notes de version de Bootstrap 3 indiquent explicitement l'intention derrière ce changement : "Meilleur modèle de boîte par défaut. Tout dans Bootstrap est dimensionné par boîte. : bordure, facilitant les options de dimensionnement et un système de grille amélioré."

Supplémentaire Ressources :

• [Prise en charge du navigateur pour Border-Box](http://css-tricks.com/box-sizing/)
• [Avantages de Border-Box](http https://www.paulirish.com/2012/box-sizing-border-box-ftw/)

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!