Pourquoi Bootstrap 3 a-t-il choisi « box-sizing : border-box » comme valeur par défaut ?

Pourquoi Bootstrap 3 a-t-il introduit Box-Sizing : Border-Box pour tous les éléments ?

Dans la transition de Bootstrap 2.3.2 à 3.0 .0, un changement notable a été l'adoption de border-box comme taille de boîte par défaut pour tous les éléments. Ce changement fondamental mérite d'être exploré pour comprendre pourquoi Bootstrap a pris cette décision.

Les notes de version officielles indiquent que le changement visait à « améliorer le système de grille et à simplifier les options de dimensionnement ». En englobant tous les éléments, l'attribut border-box garantit des calculs de dimensionnement plus faciles, en particulier au sein du système de grille.

Le système de grille Bootstrap est entièrement fluide, avec des colonnes définies en pourcentage de la largeur totale. Cependant, les gouttières conservent une largeur de pixels fixe avec un remplissage de 15 pixels de chaque côté. Traditionnellement, cette combinaison pouvait conduire à des calculs complexes en raison des différentes unités utilisées.

Cependant, border-box simplifie ce processus en incluant la bordure et le remplissage dans la largeur déclarée de l'élément. Cela élargit efficacement la zone occupée par l'élément, ce qui facilite l'alignement des colonnes et la détermination de la disposition globale de la grille.

De plus, l'adoption de border-box s'aligne sur les meilleures pratiques de l'industrie. Des experts tels que Paul Irish ont plaidé en faveur de son adoption généralisée, citant ses avantages en termes de contrôle précis de la mise en page, de réactivité et de maintenabilité globale du CSS.

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!