Apprenez Bootstrap 4 en 5 minutes
Découvrez la nouvelle version de la bibliothèque de composants Frontend la plus populaire au monde.
En janvier dernier, Bootstrap 4 a finalement été libéré après avoir été en alpha pendant plus de deux ans. Cela représente une réécriture majeure.
Non seulement il y a beaucoup de changements, mais il y a aussi quelques nouveaux concepts dont vous aurez besoin pour vous en sortir.
donc, dans cette article, je vais vous expliquer les changements les plus importants de Bootstrap v3 à v4.
Je suppose que vous avez déjà utilisé Bootstrap, donc je ne vais pas vous expliquer les bases.
Voyons maintenant les changements les plus importants (sans ordre particulier):
#1: Flatter buttons
Commençons par un visuel amusant ! Les boutons de la version 4 ont un design plus plat que dans la version 3
Voici les boutons précédents:
Et voici quelques-uns des nouveaux:
Ceci est plus en ligne avec les directives de conception plus modernes comme celles trouvées dans Material Design, qui est devenu extrêmement populaire ces dernières années....
#2: les media queries sont meilleures qu'avant
Bootstrap v3 avait trop peu de points de rupture pour sa grille, à mon avis, comme le plus bas, xs, était à 768 px.
Une grande partie du trafic provient généralement d'écrans plus étroits que cela, ce qui a été frustrant pour de nombreux développeurs.
Alors maintenant, ils ont ajouté un nouveau point d'arrêt, xl.
Celui-ci prend le rôle que l'on avait auparavant, et pousse le reste des points de rupture vers le bas, ce qui fait que la portée descend jusqu'à 576 px.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px )
Cela facilite la construction de grilles qui fonctionnent bien sur toutes les tailles d'écran.
#3: Le Flexbox vous donne plus de flexibilité
Les célèbres grilles Bootstrap sont maintenant créées avec Flexbox au lieu de floats.
À première vue, cela ne fait pas une énorme différence pour vous en tant que développeur, car la plupart des configurations de grille fonctionnent exactement de la même manière.
Cependant, cela ouvre un peu plus de possibilités.
Auparavant, vous deviez définir la largeur de chaque colonne (de 1 à 12).
Vous pouvez maintenant définir la largeur d'une colonne, puis laisser les autres éléments automatiquement définies par le Flexbox.
Voici un exemple de faire exactement cela:
Comme vous pouvez le voir dans le balisage ci-dessous, nous ne définissons que la largeur de la colonne du milieu à 6 (ce qui équivaut à la moitié de la largeur) et le reste des colonnes prendra simplement tout l'espace restant.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Flexbox classes
Bootstrap 4 est également livré avec un tas de classes que vous pouvez appliquer pour contrôler les conteneurs et les éléments Flexbox. Pour transformer un élément en conteneur Flexbox, il suffit de lui donner la classe "d-flex".
<div class="d-flex">I'm a flexbox container!</div>
Ce qui vous donnera un container Flexbox avec du texte à l'intérieur:
Ajoutons aussi quelques éléments, et ajoutons une autre classe pour contrôler comment ils se positionneront dans le container.
<div class="d-flex justify-content-center"">
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>
#4: Control spacing avec les classes
Vous pouvez maintenant contrôler le remplissage et les marges en utilisant les classes p- * et m- *.
La gamme va de 0,25 rem à 3 rem en appliquant les nombres de 0 à 5.
Par exemple, donnons à notre conteneur Flexbox une classe p-5, afin de créer autant de remplissage que possible:
<div class="d-flex p-5">I'm a flexbox container!</div>
Voici comment cela va ressembler:
Vous pouvez également ajouter t, b, r og l si vous voulez un espacement sur des côtés spécifiques (haut, bas, droite, gauche), comme ceci:
<div class="d-flex pl-5">I'm a flexbox container!</div>
|Note: le container flexbox fait une classe p-2 par défaut.
#5: Du pixels au rems
Bootstrap 4 a permuté des pixels avec des unités relatives de mesures (rems) dans tous les endroits sauf les media queries et les comportements de grille.
Cela signifie plus de flexibilité et de réactivité, car les unités rem ne sont pas absolues, ce sont les pixels.
Avec rems, toutes les tailles de police sont relatives à l'élément racine (la balise html), et par défaut, 1rem est égal à 16px.
Cependant, si vous changez la taille de police à, disons, 50% dans l'élément racine, alors 1rem sera égal à 8px dans toute la page.
Notez que ce changement ne signifie pas que vous devez utiliser rems quand vous appliquez vos propres styles sur votre site Web.
#6: Cards remplace panels, wells, and thumbnails
Bootstrap est également livré avec un tout nouveau composant appelé cards, qui remplacent panels, wells, and thumbnails. card est un container de contenu flexible et extensible. Il inclut des options pour les en-têtes et les pieds de page, une grande variété de contenu, des couleurs d'arrière-plan contextuelles et des options d'affichage puissantes.
#7: Goodbye IE9
Bootstrap v4 a abandonné le support pour IE8, IE9 et iOS 6. v4 est maintenant seulement IE10 + et iOS 7+. Pour les sites qui en ont besoin, utilisez v3.
Il y a bien sûr beaucoup d'autres changements qui ne sont pas inclus dans cet article, alors consultez la section Migration dans la doc pour voir tous les changements