web-dev-qa-db-fra.com

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

Je migre mes Bootstrap thèmes de v2.3.2 à v3.0.0) et une chose que j’ai constatée est que de nombreuses dimensions sont calculées différemment, en raison des styles suivants dans bootstrap.css.

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

Quelqu'un peut-il expliquer pourquoi Bootstrap fait passer la taille de la boîte de tous les éléments à la bordure-boîte? Je suppose que cela a à voir avec le nouveau système de grille basé sur le pourcentage, mais le sélecteur ci-dessus ne fait pas appliquer aux éléments de la grille évidemment.

Cela semble un peu radical à mon humble avis :-)

Quelqu'un veut donner un aperçu?

csstwitter-bootstraptwitter-bootstrap-3boxsizer
95
Alexander Rechsteiner

Les notes de publication vous disent: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

Meilleur modèle de boîte par défaut. Tout dans Bootstrap obtient une taille de boîte: border-box, ce qui facilite les options de dimensionnement et un système de grille amélioré.

Personnellement, je pense que la plupart des avantages vont au réseau. Dans Twitter Bootstrap, toutes les grilles sont fluides. Les colonnes sont définies en tant que pourcentage de la largeur totale. Mais la gouttière a une largeur fixe en pixels. Par défaut, un remplissage de 15 pixels de chaque côté de la colonne. La combinaison de la largeur en pixels et du pourcentage peut être complexe.Avec border-box, Ce calcul est simple car la valeur border-box (Par opposition à la valeur par défaut de la zone de contenu) donne à la zone de rendu final la largeur déclarée. et toute bordure et tout rembourrage coupés à l'intérieur de la boîte. ( http://css-tricks.com/box-sizing/ )

Lisez également: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

99
Bass Jobsen