in English

Migrer vers la v4

Bootstrap 4 est une réécriture majeure de l'ensemble du projet. Les changements les plus notables sont résumés ci-dessous, suivis de changements plus spécifiques aux composants pertinents.

Changements stables

En passant de la bêta 3 à notre version stable v4.x, il n'y a pas de changements majeurs, mais il y a quelques changements notables.

Impression

  • Correction des utilitaires d'impression cassés. Auparavant, l'utilisation d'une .d-print-*classe annulait de manière inattendue toute autre .d-*classe. Désormais, ils correspondent à nos autres utilitaires d'affichage et ne s'appliquent qu'à ce support ( @media print).

  • Utilitaires d'affichage d'impression disponibles étendus pour correspondre à d'autres utilitaires. La version bêta 3 et les versions antérieures n'avaient que block, inline-block, inlineet none. Stable v4 ajouté flex, inline-flex, table, table-rowet table-cell.

  • Correction du rendu de l'aperçu avant impression dans les navigateurs avec de nouveaux styles d'impression qui spécifient @page size.

Modifications de la bêta 3

Bien que la bêta 2 ait vu l'essentiel de nos changements de rupture pendant la phase bêta, nous en avons encore quelques-uns qui devaient être traités dans la version bêta 3. Ces modifications s'appliquent si vous effectuez une mise à jour vers la version bêta 3 à partir de la version bêta 2 ou de toute version antérieure de Bootstrap.

Divers

  • $thumbnail-transitionSuppression de la variable inutilisée . Nous n'étions pas en train de faire la transition, donc c'était juste du code supplémentaire.
  • Le package npm n'inclut plus aucun fichier autre que nos fichiers source et dist ; si vous comptiez sur eux et que vous exécutiez nos scripts via le node_modulesdossier, vous devez adapter votre flux de travail.

Formes

  • Réécriture des cases à cocher et radios personnalisées et par défaut. Maintenant, les deux ont une structure HTML correspondante (externe <div>avec frère <input>et <label>) et les mêmes styles de mise en page (empilés par défaut, en ligne avec la classe de modificateur). Cela nous permet de styliser l'étiquette en fonction de l'état de l'entrée, de simplifier la prise en charge de l' disabledattribut (nécessitant auparavant une classe parente) et de mieux prendre en charge notre validation de formulaire.

    Dans ce cadre, nous avons modifié le CSS pour gérer plusieurs background-images sur les cases à cocher et les radios des formulaires personnalisés. Auparavant, l' .custom-control-indicatorélément maintenant supprimé avait la couleur d'arrière-plan, le dégradé et l'icône SVG. Personnaliser le dégradé d'arrière-plan signifiait remplacer tous ceux-ci chaque fois que vous deviez en changer un seul. Maintenant, nous avons .custom-control-label::beforepour le remplissage et le dégradé et .custom-control-label::aftergère l'icône.

    Pour créer une vérification personnalisée en ligne, ajoutez .custom-control-inline.

  • Sélecteur mis à jour pour les groupes de boutons basés sur l'entrée. Au lieu de [data-toggle="buttons"] { }pour le style et le comportement, nous utilisons l' dataattribut uniquement pour les comportements JS et nous nous appuyons sur une nouvelle .btn-group-toggleclasse pour le style.

  • Supprimé .col-form-legendau profit d'un .col-form-label. De cette façon .col-form-label-smet .col-form-label-lgpeut être utilisé <legend>facilement sur des éléments.

  • Les entrées de fichier personnalisées ont reçu une modification de leur $custom-file-textvariable Sass. Ce n'est plus une carte Sass imbriquée et n'alimente plus qu'une seule chaîne - le Browsebouton car c'est maintenant le seul pseudo-élément généré à partir de notre Sass. Le Choose filetexte vient maintenant du .custom-file-label.

Groupes d'entrée

  • Les addons de groupe d'entrée sont désormais spécifiques à leur placement par rapport à une entrée. Nous avons abandonné .input-group-addonet .input-group-btnpour deux nouvelles classes, .input-group-prependet .input-group-append. Vous devez utiliser explicitement un ajout ou un préfixe maintenant, simplifiant une grande partie de notre CSS. Dans un ajout ou un préfixe, placez vos boutons comme ils existeraient n'importe où ailleurs, mais enveloppez le texte dans .input-group-text.

  • Les styles de validation sont désormais pris en charge, tout comme les entrées multiples (bien que vous ne puissiez valider qu'une seule entrée par groupe).

  • Les classes de dimensionnement doivent être sur le parent .input-groupet non sur les éléments de formulaire individuels.

Modifications de la bêta 2

Pendant la version bêta, nous visons à n'avoir aucun changement de rupture. Cependant, les choses ne se passent pas toujours comme prévu. Vous trouverez ci-dessous les changements de rupture à garder à l'esprit lors du passage de la bêta 1 à la bêta 2.

Rupture

  • $badge-colorVariable supprimée et son utilisation sur .badge. Nous utilisons une fonction de contraste de couleur pour choisir un colorbasé sur le background-color, donc la variable est inutile.
  • grayscale()Fonction renommée en gray()pour éviter de rompre le conflit avec le grayscalefiltre natif CSS.
  • Renommé .table-inverse, .thead-inverse, et .thead-defaulten .*-darket .*-light, correspondant à nos schémas de couleurs utilisés ailleurs.
  • Les tables réactives génèrent désormais des classes pour chaque point d'arrêt de la grille. Cela rompt avec la version bêta 1 en ce que le que .table-responsivevous avez utilisé ressemble plus à .table-responsive-md. Vous pouvez maintenant utiliser .table-responsiveou .table-responsive-{sm,md,lg,xl}au besoin.
  • Suppression de la prise en charge de Bower car le gestionnaire de packages a été déprécié pour les alternatives (par exemple, Yarn ou npm). Voir bower/bower#2298 pour plus de détails.
  • Bootstrap nécessite toujours jQuery 1.9.1 ou supérieur, mais il est conseillé d'utiliser la version 3.x car les navigateurs pris en charge par la v3.x sont ceux que Bootstrap prend en charge et la v3.x contient des correctifs de sécurité.
  • Suppression de la classe inutilisée .form-control-label. Si vous avez utilisé cette classe, il s'agissait d'un doublon de la .col-form-labelclasse qui a centré verticalement a <label>avec son entrée associée dans les dispositions de formulaire horizontales.
  • Modification color-yiqdu mixin qui incluait la colorpropriété en une fonction qui renvoie une valeur, vous permettant de l'utiliser pour n'importe quelle propriété CSS. Par exemple, au lieu de color-yiq(#000), vous écririez color: color-yiq(#000);.

Points forts

  • Introduit une nouvelle pointer-eventsutilisation sur les modaux. L'extérieur .modal-dialogpasse par des événements avec pointer-events: nonepour la gestion personnalisée des clics (ce qui permet d'écouter simplement .modal-backdroptous les clics), puis le contrecarre pour le réel .modal-contentavec pointer-events: auto.

Sommaire

Voici les éléments importants dont vous voudrez être conscient lors du passage de la v3 à la v4.

Prise en charge du navigateur

  • Suppression de la prise en charge d'IE8, IE9 et iOS 6. La v4 est désormais uniquement IE10+ et iOS 7+. Pour les sites nécessitant l'un ou l'autre, utilisez la v3.
  • Ajout de la prise en charge officielle du navigateur et de WebView d'Android v5.0 Lollipop. Les versions antérieures du navigateur Android et de WebView ne sont prises en charge que de manière non officielle.

Changements globaux

  • Flexbox est activé par défaut. En général, cela signifie s'éloigner des flotteurs et plus sur nos composants.
  • Passé de Less à Sass pour nos fichiers CSS source.
  • Passé de pxà en remtant qu'unité CSS principale, bien que les pixels soient toujours utilisés pour les requêtes multimédias et le comportement de la grille, car les fenêtres d'affichage de l'appareil ne sont pas affectées par la taille du texte.
  • La taille globale de la police est passée de 14pxà 16px.
  • Niveaux de grille remaniés pour ajouter une cinquième option (adressage des appareils plus petits au niveau 576pxet au-dessous) et suppression de l' -xsinfixe de ces classes. Exemple : .col-6.col-sm-4.col-md-3.
  • Remplacement du thème facultatif séparé par des options configurables via des variables SCSS (par exemple, $enable-gradients: true).
  • Le système de construction a été révisé pour utiliser une série de scripts npm au lieu de Grunt. Voir package.jsonpour tous les scripts, ou notre projet readme pour les besoins de développement local.
  • L'utilisation non réactive de Bootstrap n'est plus prise en charge.
  • Abandon du Customizer en ligne au profit d'une documentation de configuration plus complète et de versions personnalisées.
  • Ajout de dizaines de nouvelles classes utilitaires pour les paires propriété-valeur CSS courantes et les raccourcis d'espacement marge/remplissage.

Système de grille

  • Déplacé vers flexbox.
    • Ajout de la prise en charge de flexbox dans les mixins de grille et les classes prédéfinies.
    • Dans le cadre de flexbox, inclut la prise en charge des classes d'alignement vertical et horizontal.
  • Noms de classe de grille mis à jour et nouveau niveau de grille.
    • Ajout d'un nouveau smniveau de grille ci-dessous 768pxpour un contrôle plus granulaire. Nous avons maintenant xs, sm, md, lget xl. Cela signifie également que chaque niveau a été augmenté d'un niveau (donc .col-md-6dans la v3 est maintenant .col-lg-6dans la v4).
    • xsles classes de grille ont été modifiées pour ne pas exiger que l'infixe représente plus précisément qu'elles commencent à appliquer des styles à min-width: 0et non à une valeur de pixel définie. Au lieu de .col-xs-6, c'est maintenant .col-6. Tous les autres niveaux de grille nécessitent l'infixe (par exemple, sm).
  • Mise à jour des tailles de grille, des mixins et des variables.
    • Les gouttières de grille ont maintenant une carte Sass afin que vous puissiez spécifier des largeurs de gouttière spécifiques à chaque point d'arrêt.
    • Mixins de grille mis à jour pour utiliser un make-col-readymixin de préparation et un make-colpour définir le flexet max-widthpour le dimensionnement des colonnes individuelles.
    • Modification des points d'arrêt des requêtes multimédias du système de grille et des largeurs de conteneur pour tenir compte du nouveau niveau de grille et garantir que les colonnes sont divisibles de manière égale 12à leur largeur maximale.
    • Les points d'arrêt de grille et les largeurs de conteneur sont désormais gérés via des cartes Sass ( $grid-breakpointset $container-max-widths) au lieu d'une poignée de variables distinctes. Celles-ci remplacent @screen-*entièrement les variables et vous permettent de personnaliser entièrement les niveaux de grille.
    • Les requêtes des médias ont également changé. Au lieu de répéter nos déclarations de requête multimédia avec la même valeur à chaque fois, nous avons maintenant @include media-breakpoint-up/down/only. Maintenant, au lieu d'écrire @media (min-width: @screen-sm-min) { ... }, vous pouvez écrire @include media-breakpoint-up(sm) { ... }.

Composants

  • Panneaux, vignettes et puits supprimés pour un nouveau composant global, les cartes .
  • Suppression de la police d'icône Glyphicons. Si vous avez besoin d'icônes, certaines options sont :
  • Suppression du plugin Affix jQuery.
    • Nous vous recommandons d'utiliser à position: stickyla place. Voir l'entrée HTML5 Please pour plus de détails et des recommandations de polyfill spécifiques. Une suggestion est d'utiliser une @supportsrègle pour l'implémenter (par exemple, @supports (position: sticky) { ... })
    • Si vous utilisiez Affixe pour appliquer des non- positionstyles supplémentaires, les polyfills pourraient ne pas prendre en charge votre cas d'utilisation. Une option pour de telles utilisations est la bibliothèque tierce ScrollPos-Styler .
  • Suppression du composant de téléavertisseur car il s'agissait essentiellement de boutons légèrement personnalisés.
  • Refactorisation de presque tous les composants pour utiliser davantage de sélecteurs de classe non imbriqués au lieu de sélecteurs d'enfants trop spécifiques.

Par composant

Cette liste met en évidence les principaux changements par composant entre la v3.xx et la v4.0.0.

Redémarrer

La nouveauté de Bootstrap 4 est le Reboot , une nouvelle feuille de style qui s'appuie sur Normalize avec nos propres styles de réinitialisation quelque peu opiniâtres. Les sélecteurs apparaissant dans ce fichier n'utilisent que des éléments - il n'y a pas de classes ici. Cela isole nos styles de réinitialisation de nos styles de composants pour une approche plus modulaire. Certaines des réinitialisations les plus importantes que cela inclut sont le box-sizing: border-boxchangement, le passage d' emunités remà de nombreux éléments, les styles de lien et de nombreuses réinitialisations d'éléments de formulaire.

Typographie

  • Déplacement de tous les .text-utilitaires vers le _utilities.scssfichier.
  • Abandonné .page-headercar ses styles peuvent être appliqués via des utilitaires.
  • .dl-horizontala été abandonné. Au lieu de cela, utilisez .rowon <dl>et utilisez les classes de colonne de grille (ou mixins) sur ses <dt>et ses <dd>enfants.
  • Blocs de citations repensés, déplaçant leurs styles de l' <blockquote>élément vers une seule classe, .blockquote. Suppression du .blockquote-reversemodificateur pour les utilitaires de texte.
  • .list-inlineexige maintenant que ses éléments de liste enfants aient la nouvelle .list-inline-itemclasse qui leur est appliquée.

Images

  • Renommé .img-responsiveen .img-fluid.
  • Renommé .img-roundeden.rounded
  • Renommé .img-circleen.rounded-circle

les tables

  • Presque toutes les instances du >sélecteur ont été supprimées, ce qui signifie que les tables imbriquées hériteront désormais automatiquement des styles de leurs parents. Cela simplifie grandement nos sélecteurs et les personnalisations potentielles.
  • Renommé .table-condenseden .table-smpar souci de cohérence.
  • Ajout d'une nouvelle .table-inverseoption.
  • Ajout de modificateurs d'en-tête de tableau : .thead-defaultet .thead-inverse.
  • Classes contextuelles renommées pour avoir un .table-préfixe -. D'où .active, .success, .warning, .dangeret .infoà .table-active, .table-success, .table-warning, .table-dangeret .table-info.

Formes

  • L'élément déplacé est réinitialisé dans le _reboot.scssfichier.
  • Renommé .control-labelen .col-form-label.
  • Renommés .input-lget .input-smen .form-control-lget .form-control-sm, respectivement.
  • Cours abandonnés .form-group-*pour des raisons de simplicité. Utilisez .form-control-*les classes à la place maintenant.
  • Supprimé .help-blocket remplacé par .form-textpour le texte d'aide au niveau du bloc. Pour le texte d'aide en ligne et d'autres options flexibles, utilisez des classes utilitaires telles que .text-muted.
  • A chuté .radio-inlineet .checkbox-inline.
  • Consolidé .checkboxet .radiodans .form-checket les différentes .form-check-*classes.
  • Formes horizontales révisées :
    • Suppression de l' .form-horizontalexigence de classe.
    • .form-groupn'applique plus les styles du .rowvia mixin, il .rowest donc désormais nécessaire pour les dispositions de grille horizontales (par exemple, <div class="form-group row">).
    • Ajout d'une nouvelle .col-form-labelclasse pour centrer verticalement les étiquettes avec .form-controls.
    • Ajout de nouvelles .form-rowpour les mises en page de formulaires compacts avec les classes de grille (échangez votre .rowpour un .form-rowet c'est parti).
  • Ajout de la prise en charge des formulaires personnalisés (pour les cases à cocher, les radios, les sélections et les entrées de fichiers).
  • Remplacement des classes .has-error, .has-warninget .has-successpar la validation des formulaires HTML5 via les CSS :invalidet les :validpseudo-classes.
  • Renommé .form-control-staticen .form-control-plaintext.

Boutons

  • Renommé .btn-defaulten .btn-secondary.
  • Suppression .btn-xscomplète de la classe car .btn-smelle est proportionnellement beaucoup plus petite que celle de la v3.
  • La fonctionnalité de boutonbutton.js avec état du plugin jQuery a été abandonnée. Cela inclut les méthodes $().button(string)et . $().button('reset')Nous vous conseillons d'utiliser un tout petit peu de JavaScript personnalisé à la place, qui aura l'avantage de se comporter exactement comme vous le souhaitez.
    • Notez que les autres fonctionnalités du plugin (cases à cocher des boutons, boutons radios, boutons à bascule unique) ont été conservées dans la v4.
  • Remplacez les boutons [disabled]par :disabledcomme IE9 + prend en charge :disabled. Cependant fieldset[disabled], cela reste nécessaire car les champs natifs désactivés sont toujours bogués dans IE11 .

Groupe de boutons

  • Composant réécrit avec flexbox.
  • Supprimé .btn-group-justified. En remplacement, vous pouvez utiliser <div class="btn-group d-flex" role="group"></div>comme wrapper autour des éléments avec .w-100.
  • Suppression de la .btn-group-xsclasse entièrement compte tenu de la suppression de .btn-xs.
  • Suppression de l'espacement explicite entre les groupes de boutons dans les barres d'outils de boutons ; utilisez les utilitaires de marge maintenant.
  • Documentation améliorée pour une utilisation avec d'autres composants.
  • Passé des sélecteurs parents aux classes singulières pour tous les composants, modificateurs, etc.
  • Styles de liste déroulante simplifiés pour ne plus être livrés avec des flèches orientées vers le haut ou vers le bas attachées au menu déroulant.
  • Les listes déroulantes peuvent être construites avec <div>s ou <ul>s maintenant.
  • Styles de liste déroulante et balisage reconstruits pour fournir une prise en charge facile et intégrée des <a>éléments de <button>liste déroulante basés.
  • Renommé .divideren .dropdown-divider.
  • Les éléments déroulants nécessitent désormais .dropdown-item.
  • Les bascules déroulantes ne nécessitent plus un explicite<span class="caret"></span> ; ceci est maintenant fourni automatiquement via CSS ::aftersur .dropdown-toggle.

Système de grille

  • Ajout d'un nouveau 576pxpoint d'arrêt de grille en tant que sm, ce qui signifie qu'il y a maintenant cinq niveaux au total ( xs, sm, md, lg, et xl).
  • Renommer les classes de modificateurs de grille réactifs de .col-{breakpoint}-{modifier}-{size}à .{modifier}-{breakpoint}-{size}pour des classes de grille plus simples.
  • Suppression des classes de modificateurs push et pull pour les nouvelles classes alimentées par flexbox order. Par exemple, au lieu de .col-8.push-4et .col-4.pull-8, vous utiliserez .col-8.order-2et .col-4.order-1.
  • Ajout de classes utilitaires flexbox pour le système de grille et les composants.

Liste des groupes

  • Composant réécrit avec flexbox.
  • Remplacé a.list-group-itempar une classe explicite, .list-group-item-action, pour styliser les versions de lien et de bouton des éléments de groupe de liste.
  • Classe ajoutée .list-group-flushpour une utilisation avec des cartes.
  • Composant réécrit avec flexbox.
  • Étant donné le passage à flexbox, l'alignement des icônes de rejet dans l'en-tête est probablement rompu car nous n'utilisons plus de flottants. Le contenu flottant vient en premier, mais avec flexbox ce n'est plus le cas. Mettez à jour vos icônes de rejet pour venir après les titres modaux à corriger.
  • L' remoteoption (qui pouvait être utilisée pour charger et injecter automatiquement du contenu externe dans un modal) et l' loaded.bs.modalévénement correspondant ont été supprimés. Nous vous recommandons plutôt d'utiliser des modèles côté client ou un framework de liaison de données, ou d'appeler vous-même jQuery.load .
  • Composant réécrit avec flexbox.
  • Suppression de presque tous les >sélecteurs pour un style plus simple via des classes non imbriquées.
  • Au lieu de sélecteurs spécifiques à HTML comme .nav > li > a, nous utilisons des classes distinctes pour .navs, .nav-items et .nav-links. Cela rend votre HTML plus flexible tout en apportant une extensibilité accrue.

La barre de navigation a été entièrement réécrite en flexbox avec une prise en charge améliorée de l'alignement, de la réactivité et de la personnalisation.

  • Les comportements de la barre de navigation réactive sont désormais appliqués à la .navbarclasse via l' emplacement requis .navbar-expand-{breakpoint} où vous choisissez où réduire la barre de navigation. Auparavant, il s'agissait d'une modification moins variable et d'une recompilation nécessaire.
  • .navbar-defaultest maintenant .navbar-light, mais .navbar-darkreste le même. L'un d'entre eux est requis sur chaque barre de navigation. Cependant, ces classes ne définissent plus background-colors ; au lieu de cela, ils n'affectent essentiellement que color.
  • Les barres de navigation nécessitent désormais une déclaration d'arrière-plan quelconque. Choisissez parmi nos utilitaires d'arrière-plan ( .bg-*) ou définissez les vôtres avec les classes light/inverse ci-dessus pour une personnalisation folle .
  • Compte tenu des styles flexbox, les barres de navigation peuvent désormais utiliser les utilitaires flexbox pour des options d'alignement faciles.
  • .navbar-toggleest maintenant .navbar-toggleret a différents styles et balisage interne (pas plus de trois <span>s).
  • A complètement abandonné la .navbar-formclasse. Ce n'est plus nécessaire; à la place, utilisez .form-inlineet appliquez simplement les utilitaires de marge si nécessaire.
  • Les barres de navigation n'incluent plus margin-bottomou border-radiuspar défaut. Utilisez les utilitaires si nécessaire.
  • Tous les exemples comportant des barres de navigation ont été mis à jour pour inclure un nouveau balisage.

Pagination

  • Composant réécrit avec flexbox.
  • Les classes explicites ( .page-item, .page-link) sont maintenant requises sur les descendants de .paginations
  • Suppression .pagercomplète du composant car il ne s'agissait que de boutons de contour personnalisés.
  • Une classe explicite, .breadcrumb-item, est maintenant requise sur les descendants de .breadcrumbs

Étiquettes et insignes

  • Consolidé .labelet .badgepour lever l'ambiguïté de l' <label>élément et simplifier les composants associés.
  • Ajouté .badge-pillcomme modificateur pour un look "pilule" arrondi.
  • Les badges ne flottent plus automatiquement dans les groupes de listes et autres composants. Les classes utilitaires sont maintenant requises pour cela.
  • .badge-defaulta été supprimé et .badge-secondaryajouté pour correspondre aux classes de modificateurs de composants utilisées ailleurs.

Panneaux, vignettes et puits

Entièrement abandonné pour le nouveau composant de carte.

Panneaux

  • .panelà .card, maintenant construit avec flexbox.
  • .panel-defaultsupprimé et pas de remplacement.
  • .panel-groupsupprimé et pas de remplacement. .card-groupn'est pas un remplacement, c'est différent.
  • .panel-headingà.card-header
  • .panel-titleà .card-title. Selon l'apparence souhaitée, vous pouvez également utiliser des éléments ou des classes d'en-tête (par exemple <h3>, .h3) ou des éléments ou des classes en gras (par exemple <strong>, <b>, .font-weight-bold). Notez que .card-title, bien que portant le même nom, produit un aspect différent de .panel-title.
  • .panel-bodyà.card-body
  • .panel-footerà.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, et .panel-dangeront été supprimés pour les utilitaires .bg-, .text-, et .bordergénérés à partir de notre $theme-colorscarte Sass.

Progrès

  • .progress-bar-*Remplacement des classes contextuelles par des .bg-*utilitaires. Par exemple, class="progress-bar progress-bar-danger"devient class="progress-bar bg-danger".
  • Remplacé .activepour les barres de progression animées par .progress-bar-animated.
  • Révision de l'ensemble du composant pour simplifier la conception et le style. Nous avons moins de styles à remplacer, de nouveaux indicateurs et de nouvelles icônes.
  • Tous les CSS ont été désimbriqués et renommés, garantissant que chaque classe est préfixée par .carousel-.
    • Pour les éléments du carrousel, .next, .prev, .leftet .rightsont désormais .carousel-item-next, .carousel-item-prev, .carousel-item-leftet .carousel-item-right.
    • .itemest aussi maintenant .carousel-item.
    • Pour les contrôles prev/next, .carousel-control.rightet .carousel-control.leftsont maintenant .carousel-control-nextet .carousel-control-prev, ce qui signifie qu'ils ne nécessitent plus une classe de base spécifique.
  • Suppression de tous les styles réactifs, en reportant les utilitaires (par exemple, l'affichage des légendes sur certaines fenêtres) et les styles personnalisés selon les besoins.
  • Suppression des remplacements d'image pour les images dans les éléments du carrousel, reportant aux utilitaires.
  • Ajustement de l'exemple de carrousel pour inclure le nouveau balisage et les nouveaux styles.

les tables

  • Suppression de la prise en charge des tableaux imbriqués stylisés. Tous les styles de tableau sont désormais hérités dans la v4 pour des sélecteurs plus simples.
  • Ajout d'une variante de table inversée.

Utilitaires

  • Afficher, masquer et plus :
    • Rendre les utilitaires d'affichage réactifs (par exemple, .d-noneet d-{sm,md,lg,xl}-none).
    • Suppression de la majeure partie des .hidden-*utilitaires pour les nouveaux utilitaires d'affichage . Par exemple, au lieu de .hidden-sm-up, utilisez .d-sm-none. Renommer les .hidden-printutilitaires pour utiliser le schéma de nommage des utilitaires d'affichage. Plus d'informations dans la section Utilitaires réactifs de cette page.
    • Classes ajoutées .float-{sm,md,lg,xl}-{left,right,none}pour les flottants réactifs et supprimées .pull-leftet .pull-rightpuisqu'elles sont redondantes avec .float-leftet .float-right.
  • Taper:
    • Ajout de variantes réactives à nos classes d'alignement de texte .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignement et espacement :
  • Clearfix mis à jour pour supprimer la prise en charge des anciennes versions de navigateur.

Mixins de préfixe de fournisseur

Les mixins de préfixe du fournisseur de Bootstrap 3 , qui étaient obsolètes dans la v3.2.0, ont été supprimés dans Bootstrap 4. Puisque nous utilisons Autoprefixer , ils ne sont plus nécessaires.

Suppression des mixins suivants : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Documentation

Notre documentation a également été mise à niveau dans tous les domaines. Voici le bas :

  • Nous utilisons toujours Jekyll, mais nous avons des plugins dans le mix :
    • bugify.rbest utilisé pour répertorier efficacement les entrées sur notre page de bogues de navigateur .
    • example.rbest un fork personnalisé du highlight.rbplugin par défaut, permettant une gestion plus facile des exemples de code.
    • callout.rbest un fork personnalisé similaire à celui-ci, mais conçu pour nos appels de documents spéciaux.
    • jekyll-toc est utilisé pour générer notre table des matières.
  • Tout le contenu de la documentation a été réécrit en Markdown (au lieu de HTML) pour une édition plus facile.
  • Les pages ont été réorganisées pour un contenu plus simple et une hiérarchie plus accessible.
  • Nous sommes passés du CSS standard au SCSS pour tirer pleinement parti des variables, des mixins et plus encore de Bootstrap.

Utilitaires réactifs

Toutes les @screen-variables ont été supprimées dans la v4.0.0. Utilisez plutôt les mixins , ou Sass ou la media-breakpoint-up()carte media-breakpoint-down()Sass .media-breakpoint-only()$grid-breakpoints

Nos classes d'utilitaires réactifs ont été largement supprimées au profit d' displayutilitaires explicites.

  • Les classes .hiddenet ont été supprimées car elles étaient en conflit avec les méthodes et .showde jQuery . Au lieu de cela, essayez de basculer l' attribut ou d'utiliser des styles en ligne comme et .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Toutes les .hidden-classes ont été supprimées, à l'exception des utilitaires d'impression qui ont été renommés.
    • Supprimé de la v3 :.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Supprimé des alphas v4 :.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Les utilitaires d'impression ne commencent plus par .hidden-ou .visible-, mais par .d-print-.
    • Anciens noms : .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nouvelles classes : .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Plutôt que d'utiliser des .visible-*classes explicites, vous rendez un élément visible simplement en ne le masquant pas à cette taille d'écran. Vous pouvez combiner une .d-*-noneclasse avec une .d-*-blockclasse pour afficher un élément uniquement sur un intervalle donné de tailles d'écran (par exemple .d-none.d-md-block.d-xl-none, affiche l'élément uniquement sur les appareils moyens et grands).

Notez que les modifications apportées aux points d'arrêt de la grille dans la v4 signifient que vous devrez augmenter d'un point d'arrêt pour obtenir les mêmes résultats. Les nouvelles classes d'utilitaires réactifs ne tentent pas de s'adapter aux cas moins courants où la visibilité d'un élément ne peut pas être exprimée sous la forme d'une seule plage contiguë de tailles de fenêtres ; vous devrez plutôt utiliser un CSS personnalisé dans de tels cas.