Kosala migrate na v5

v5.2.0

Design oyo ezongisami sika

Bootstrap v5.2.0 ezali na mise à jour ya conception subtil mpo na mwa ndambo ya ba composants mpe ba propriétés na kati ya projet, mingi mingi na nzela ya ba border-radiusvaleurs refinées na ba boutons mpe ba contrôles ya formulaire . Mikanda na biso mpe ebongwani na lokasa ya sika ya ebandeli, ebongiseli ya mikanda ya pɛtɛɛ oyo ekitisaka lisusu biteni ya barre ya mopanzi te, mpe bandakisa oyo ezali komonana mingi ya Bootstrap Icons .

Ba variables ya CSS mingi

Tobongisi ba composants na biso nionso pona kosalela ba variables CSS. Alors que Sass ezali kaka ko soutenir nionso, composant moko na moko ezongisami na mikolo pona ko inclure ba variables ya CSS na ba classes ya base ya composant (par exemple, .btn), ko permettre plus de personnalisation en temps réel ya Bootstrap. Na ba versions oyo ekolanda, tokokoba ko augmenter usage na biso ya ba variables ya CSS na layout na biso, ba formulaire, ba aide, na ba utilitaires. Tanga mingi na ntina ya ba variables ya CSS na composante moko na moko na ba pages ya mikanda na bango respectifs.

Usage na biso ya variable CSS ekozala quelque part incomplète tii na Bootstrap 6. Atako tolingaki ko mettre en œuvre entièrement oyo na kati ya tableau, bazali na risque ya kosala ba changements ya kobukana. Ndakisa, réglage $alert-border-width: var(--bs-border-width)na code source na biso ebukaka potentiel Sass na code na yo moko soki ozalaki kosala $alert-border-width * 2mpo na raison moko boye.

Lokola yango, bisika nyonso oyo ekoki kosalema, tokokoba kopusama epai ya ba variables CSS mingi, kasi tosengi oyeba ete bosaleli na biso ekoki kozala mwa moke na v5.

Ya sika_maps.scss

Bootstrap v5.2.0 ekotisaki fichier ya sika ya Sass na _maps.scss. Ezali kobimisa ba cartes Sass ebele na _variables.scssmpo na kobongisa likambo moko esika wapi ba mises à jour na carte originale esalemaki te na ba cartes secondaires oyo epanzani yango. Ndakisa, ba mises à jour to $theme-colorsezalaki kosalelama te na ba cartes thématiques mosusu oyo etielaki motema na $theme-colors, kobuka ba flux ya mosala ya personnalisation ya ba clés. Na mokuse, Sass ezali na limitation esika soki variable to carte par défaut esalelami , ekoki kozala mise à jour te. Ezali na manque ya ndenge moko na ba variables ya CSS tango basalelaka yango pona ko composer ba variables misusu ya CSS.

Yango wana ba personnalisations variables na Bootstrap esengeli eya sima ya @import "functions", mais avant @import "variables"na reste ya stack ya importation na biso. Ezali mpe bongo mpo na bakarte ya Sass —osengeli koboya ba défauts liboso ete emesana. Bakarte oyo elandi esili kokende na oyo ya sika _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

Ba builds na yo ya CSS ya Bootstrap personnalisé esengeli sikoyo ezala eloko lokola oyo na import ya ba cartes ekeseni.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Ba utilités ya sika

• font-weightBa utilitaires oyo epanzani mpo na kokɔtisa .fw-semiboldmpo na bafonte ya semi-gras.
• border-radiusBa utilitaires epanzani mpo na kozala na ba taille mibale ya sika, .rounded-4mpe .rounded-5, mpo na ba options mingi.

Mbongwana mosusu

• Akotisi $enable-container-classesoption ya sika. — Sikawa ntango ozali kopona na kati ya layout ya Grille CSS ya komeka, .container-*bakelasi ekozala kaka kosangisama, longola se soki option oyo etiamaki na false. Ba récipients mpe sikoyo babatelaka ba valeurs na yango ya gouttière.

• Composant Offcanvas ezali sikoyo na ba variations responsives . Kelasi ya ebandeli .offcanvasetikali kobongwana te —ebombaka makambo na kati ya bisika nyonso ya kotala. Mpo na kosala ete ezala na boyokani, bongola kelasi wana .offcanvasna kelasi nyonso .offcanvas-{sm|md|lg|xl|xxl}.

• Ba diviseurs ya table ya minene ezali sikoyo opt-in. — Tolongoli ndelo ya monene mpe ya mpasi mpo na kolongolama kati na bituluku ya bamesa mpe tomemi yango na kelasi ya kopona oyo okoki kosalela, .table-group-divider. Tala ba docs ya tableau pona ndakisa.

• Scrollspy ekomami lisusu mpo na kosalela API ya Intersection Observer , elingi koloba ete ozali lisusu na mposa ya ba enveloppes ya moboti relative te, e deprecatesoffsetconfig, mpe mingi mosusu. Boluka ba implémentations na bino ya Scrollspy po ezala plus précis et constant na ba soulignants nav na bango.

• Ba Popovers mpe ba tolips ya bisaleli esalela sikoyo ba variables ya CSS. Ba variables mosusu ya CSS ezongisami na mikolo na ba homologues na yango ya Sass mpo na kokitisa motango ya ba variables. Yango wana, ba variables misato esili kozala deprecated na version oyo: $popover-arrow-color, $popover-arrow-outer-color, mpe $tooltip-arrow-color.

• Babakisaki .text-bg-{color}basalisi ya sika. Na esika ya kotya moto na moto .text-*mpe .bg-*biloko ya ntina, okoki sikoyo kosalela basalisi mpo na.text-bg-* kotya background-colorna liboso ya esika oyo ekeseni color.

• Abakisaki .form-check-reversemodificateur mpo na kobalusa ordre ya ba étiquettes mpe ba cases/radios oyo esangisi yango.

• Abakisaki ba colonnes rayées soutien na ba tableaux via .table-striped-columnsclasse ya sika.

Mpo na liste mobimba ya mbongwana, tala projet ya v5.2.0 na GitHub .

v5.1.0

• Abakisaki lisungi ya komeka mpo na bobongisi ya CSS Grid . — Oyo ezali mosala oyo ezali kosalama, mpe ezali naino prêt te mpo na kosalela yango na production, kasi okoki ko opter na fonctionnalité ya sika na nzela ya Sass. Mpo na kofungola yango, kokanga grille ya liboso, na kotiaka $enable-grid-classes: falsempe kofungola Grille ya CSS na kotiaka $enable-cssgrid: true.

• Mikolo oyo navbars mpo na kosunga offcanvas. — Bakisa ba tiroirs offcanvas na navbar nionso na ba classes responsives .navbar-expand-*na mua marquage hors toile.

• Babakisaki eteni ya sika ya esika ya kofanda . — Composante na biso ya sika, lolenge ya kopesa ba blocs temporaires na esika ya ba contenus ya solo mpo na kosalisa kolakisa que eloko moko ezali kaka ko charger na site to app na yo.

• Plugin ya collapse esimbaka sikoyo collapse horizontale . — Bakisa .collapse-horizontalna yo .collapsempo na kokweisa na widthesika ya height. Bokima kozongisa langi ya navigateur na kotyá min-heightto height.

• Babakisaki basungi ya sika ya stack mpe ya mibeko ya vertical. — Salelá nokinoki ba propriétés ya flexbox ebele mpo na kosala nokinoki ba layouts personnalisés na ba stacks . Pona kati na ba stacks horizontal ( .hstack) mpe vertical ( .vstack). Bakisa ba diviseurs verticals oyo ekokani na <hr>ba éléments na ba aide ya sika.vr .

• Babakisaki ba :rootvariables ya sika ya CSS ya mokili mobimba. — Abakisaki ba variables ya sika ya CSS ebele na :rootniveau mpo na ko contrôler <body>ba styles. Mingi ezali na misala, bakisa mpe na kati ya ba utilitaires mpe ba composants na biso, kasi mpo na sikoyo tanga ba variables ya CSS na eteni Personnaliser .

• Ebongisamaki lisusu ba utilitaires ya couleur mpe ya fond mpo na kosalela ba variables ya CSS, mpe ebakisaki ba utilitaires ya sika ya opacité ya texte mpe ya opacité ya fond . — .text-* mpe .bg-*ba utilitaires etongami sikoyo na ba variables CSS mpe rgba()ba valeurs ya couleur, ko permettre yo o personnaliser facilement utilitaire nionso na ba utilitaires ya sika ya opacité.

• Abakisaki bandakisa ya sika ya fragment oyo esalemi mpo na kolakisa ndenge ya kosala ba composants na biso na ndenge ya moto ye moko. — Benda prêt ya kosalela ba composants personnalisés na ba modèles misusu ya conception oyo emonanaka mingi na ba exemples na biso ya sika ya Snippets . Ezali na ba footers , ba dropdowns , ba groupes ya liste , na ba modals .

• Elongolami ba styles ya positionnement oyo esalelami te na ba popovers na ba tolips ya bisaleli lokola oyo esimbami kaka na Popper. $tooltip-marginesili kozala deprecated mpe etiamaki na na nullkati ya mosala.

Olingi koyeba makambo mosusu? Tanga mokanda ya blog ya v5.1.0.

Ba dépendances

• Abwakaki jQuery.
• Ebongwani uta na Popper v1.x kino na Popper v2.x.
• Remplacer Libsass na Dart Sass lokola compilateur na biso ya Sass oyo bapesaki Libsass ezalaki déprequé.
• Migré de Jekyll à Hugo pona kotonga mikanda na biso

Lisungi ya navigateur

• Abwakaki Internet Explorer 10 mpe 11
• Ekitisaki Microsoft Edge < 16 (Edge ya kala) .
• Ekitisaki Firefox < 60
• Safari oyo babwaki < 12
• Ekitisaki Safari ya iOS < 12
• Chrome oyo ekiti < 60

Mikanda ebongwanaka

• Lokasa ya ebandeli oyo ebongisami lisusu, ndenge ya kosala mikanda, mpe na nse ya lokasa.
• Abakisaki buku ya sika ya Parcelle .
• Abakisaki eteni ya sika ya Personnaliser , kozongisa lokasa ya Thème ya v4 , na makambo ya sika na Sass, ba options ya configuration mondiale, ba schemes ya couleur, ba variables ya CSS, mpe mingi mosusu.
• Bobongisi lisusu mikanda nyonso ya baformilɛrɛ na eteni ya sika ya Baformilɛrɛ , kokabola makambo oyo ezali na kati na nkasa oyo etali mingi.
• Ndenge moko mpe, ebongisi eteni ya Layout , mpo na kosala mosuni ya makambo ya grille polele.
• Ebongoli nkombo ya lokasa ya eteni “Navs” na “Navs & Tabs”.
• Babongoli nkombo ya lokasa “Checks” na “Checks & radios”.
• Redesigner navbar mpe abakisaki subnav ya sika mpo na kosala ete ezala pete mpo na kokende zingazinga ya ba sites na biso mpe ba versions ya docs.
• Babakisaki nzela mokuse ya sika ya klaviatware mpo na esika ya boluki: Ctrl + /.

Sass oyo azali

• To ditched ba fusions ya carte Sass par défaut mpo na kosala que ezala facile ya kolongola ba valeurs redundantes. Bozala na makanisi il faut sikoyo o définir ba valeurs nionso na ba cartes ya Sass lokola $theme-colors. Tala ndenge nini okoki kosala na ba cartes ya Sass .

• KobukanaRenommé color-yiq()fonction mpe ba variables oyo etali color-contrast()yango lokola ezali lisusu na boyokani te na espace ya couleur YIQ. Talá #30168.

  • $yiq-contrasted-thresholdebongwani nkombo na yango na $min-contrast-ratio.
  • $yiq-text-darkmpe $yiq-text-lightbabongoli nkombo mosusu na yango $color-contrast-darkmpe $color-contrast-light.

• KobukanaBa paramètres ya mixins ya requête ya media ebongwani pona approche moko plus logique.

  • media-breakpoint-down()esalela esika ya bokati yango moko na esika ya esika ya bokati oyo elandi (ndakisa, media-breakpoint-down(lg)na esika ya media-breakpoint-down(md)ba cibles ya botali oyo ezali moke koleka lg).
  • Ndenge moko mpe, paramètre ya mibale na media-breakpoint-between()esalela mpe point de rupture yango moko na esika ya point de rupture oyo elandi (ndakisa, media-between(sm, lg)na esika ya media-breakpoint-between(sm, md)ba cibles viewports entre smmpe lg).

• KobukanaElongolami ba styles ya impression na $enable-print-stylesvariable. Ba classes ya affichage ya impression ezali kaka nzinga nzinga. Talá #28339 .

• KobukanaEbwaki color(), theme-color(), mpe gray()misala na faveur ya ba variables. Talá #29083 .

• KobukanaRenommé theme-color-level()fonction na color-level()mpe sikoyo endimi couleur nionso olingi au lieu ya kaka $theme-colorba couleurs. Tala #29083 Keba: color-level() ezalaki sima na kobwakama na v5.0.0-alpha3.

• KobukanaBabongoli nkombo $enable-prefers-reduced-motion-media-querympe $enable-pointer-cursor-for-buttonsna $enable-reduced-motionmpe $enable-button-pointersmpo na bokuse.

• KobukanaBalongoli bg-gradient-variant()mixin oyo ezalaki. Salelá .bg-gradientkelasi mpo na kobakisa ba gradients na biloko na esika ya .bg-gradient-*bakelasi oyo esalemi.

• Kobukana Elongolami ba mixins oyo ezalaki liboso te:

  • hover, hover-focus, plain-hover-focus, mpehover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(abwakaki mpe kelasi ya utilité oyo esangisi yango, .text-hide)
  • visibility()
  • form-control-focus()

• KobukanaRenommé scale-color()fonction to mpo na shift-color()ko éviter collision na fonction ya échelle ya couleur ya Sass ye moko.

• box-shadowmixins sikoyo epesaka nzela nullna ba valeurs mpe ekiti nonena ba arguments ebele. Talá #30394 .

• Mixin ezali border-radius()sikoyo na valeur ya défaut.

Système ya couleur

• Système ya couleur oyo esalaki na color-level()pe $theme-color-intervalelongolamaki en faveur ya système ya couleur ya sika. Nionso lighten()na ba darken()fonctions na codebase na biso ezo remplacer na tint-color()pe shade-color(). Ba fonctions wana ekosangisa couleur soit na pembe soit na noir au lieu ya ko changer légèreté na yango na quantité fixe. The shift-color()ekozala soit teinter to shade couleur moko selon soki paramètre ya poids na yango ezali positive to négatif. Tala #30622 mpo na koyeba makambo mosusu.

• Babakisaki ba teints mpe ba nuances ya sika mpo na langi nyonso, kopesaka balangi libwa ekeseni mpo na langi moko na moko ya base, lokola ba variables ya sika ya Sass.

• Bokeseni ya langi oyo ebongisami malamu. Ratio ya contraste ya couleur ezo bumped de 3:1 à 4.5:1 et mise à jour ya ba couleurs bleu, vert, cyan, na rose pona ko assurer contraste ya WCAG 2.1 AA. Lisusu abongoli langi na biso ya bokeseni ya langi uta $gray-900na $black.

• Mpo na kosunga système na biso ya couleur, tobakisi ba personnalisés ya sika tint-color()mpe shade-color()ba fonctions mpo na kosangisa ba couleurs na biso na ndenge esengeli.

Mikolo oyo ya grille

• Point de rupture ya sika! Abakisaki xxlpoint de rupture ya sika mpo na 1400pxmpe likolo. Mbongwana moko te na ba points de rupture mosusu nyonso.

• Ba gouttières oyo ebongisami malamu. Ba gouttières etiamaki sikawa na rems, mpe ezali moke koleka v4 ( 1.5rem, to pene na 24px, na nse uta 30px). Yango e aligner ba gouttières ya système na biso ya réseau na ba utilitaires na biso ya espacement.

  • Babakisaki kelasi ya sika ya gouttières ( .g-*, .gx-*, mpe .gy-*) mpo na kotambwisa ba gouttières horizontales/verticales, ba gouttières horizontales, mpe ba gouttières verticales.
  • KobukanaRenommé .no-guttersto mpo na .g-0ko correspondre na ba utilitaires ya sika ya gouttière.

• Ba colonnes esalemi lisusu te position: relative, yango wana ekoki kozala ete osengeli kobakisa .position-relativena mwa biloko mpo na kozongisa ezaleli wana.

• KobukanaAbwakaki .order-*bakelasi mingi oyo mbala mingi ezalaki kokende kozanga kosalelama. Tozali sikoyo kopesa kaka .order-1na .order-5libanda ya boîte.

• KobukanaAbwakaki .mediacomposant lokola ekoki ko reproduire facilement na ba utilitaires. Tala #28265 mpe lokasa ya ba utilitaires flex mpo na ndakisa .

• Kobukana bootstrap-grid.csssikoyo etali kaka box-sizing: border-boxcolonne na esika ya kozongisa bonene ya boîte ya mokili mobimba. Na ndenge wana, ba styles na biso ya grille ekoki kosalelama na bisika mingi sans interférence.

• $enable-grid-classesezo désactiver lisusu génération ya ba classes ya ba conteneurs te. Talá #29146.

• Mikolo oyo make-colmixin na ndenge ya default na ba colonnes ekokani sans taille oyo elakisami.

Contenu, Reboot, etc

• RFS ezali sikoyo activé par défaut. Ba têtes oyo esalelakafont-size()mixin eko ajuster automatiquement na bangofont-sizena échelle na viewport. Ezaleli oyo ezalaki liboso opt-in na v4.

• KobukanaTobongisaki typographie na biso ya kolakisa mpo na kozwa esika ya ba $display-*variables na biso mpe na $display-font-sizescarte ya Sass. Lisusu alongolaki ba $display-*-weightvariables individuelles mpo na s moko $display-font-weightmpe ajusté font-size.

• Babakisaki .display-*bonene mibale ya sika ya mitó ya makambo, .display-5mpe .display-6.

• Ba liens ezali souligné par défaut (kaka na hover te), longola se soki ezali eteni ya ba composants spécifiques.

• Ba tableaux oyo esalemi lisusu mpo na ko refresher ba styles na yango mpe kotonga yango lisusu na ba variables CSS mpo na contrôle mingi ya styling.

• KobukanaBa tableaux encastrés ezo hériter lisusu ba styles te.

• Kobukana .thead-lightmpe .thead-darkbabwakaka na faveur ya ba .table-*classes variantes oyo ekoki kosalelama pona ba éléments nionso ya tableau ( thead, tbody, tfoot, tr, thna td).

• KobukanaMixin table-row-variant()ebongwani kombo na yango table-variant()mpe endimaka kaka 2 paramètres: $color(kombo ya langi) mpe $value(code ya langi). Langi ya ndelo mpe balangi ya accent ezwamaka na ndenge ya automatique na kotalela ba variables ya facteur ya tableau.

• Bokabola ba variables ya remplissage ya cellule ya table na -ympe -x.

• KobukanaBatikaki .pre-scrollablekelasi. Talá #29135

• Kobukana .text-*ba utilitaires ebakisaka lisusu ba états ya hover na focus te na ba liens. .link-*bakelasi ya mosungi ekoki kosalelama na esika na yango. Talá #29267

• KobukanaBatikaki .text-justifykelasi. Talá #29793

• Kobukana <hr>ba éléments sikoyo basalelaka heightau lieu ya borderpona ko soutenir malamu sizeattribut. Yango epesaka mpe nzela ya kosalela ba utilitaires ya remplissage mpo na kosala ba diviseurs ya minene (par exemple, <hr class="py-1">).

• Réinitialiser par défaut horizontal padding-lefton <ul>mpe <ol>ba éléments depuis défaut ya navigateur 40pxna 2rem.

• Added $enable-smooth-scroll, oyo esalemaka scroll-behavior: smoothna mokili mobimba —longola kaka basaleli oyo bazali kosenga kokitisa mouvement na nzela ya botuna ya prefers-reduced-motionmedia. Talá #31877

RTL

• Ba variables spécifiques ya direction horizontale, ba utilitaires, na ba mixins nionso ebongwani kombo mosusu mpo na kosalela ba propriétés logique lokola oyo ezwami na ba layouts ya flexbox —ndakisa, startmpe endna esika ya leftmpe right.

Baformilɛrɛ

• Babakisaki baformilɛrɛ ya sika oyo ezali kopumbwapumbwa! Totombolaki ndakisa ya ba étiquettes Flottant na ba composants ya formulaire oyo esungami mobimba. Tala lokasa ya sika ya ba étiquettes flottantes.

• Kobukana Ba éléments ya forme natif na personnalisé oyo esangisi. Ba cases ya kotiya bilembo, ba radios, ba selects, mpe ba entrées mosusu oyo ezalaki na ba classes native mpe personnalisée na v4 esangisami. Sikoyo pene na ba éléments na biso nionso ya formulaire ezali entièrement personnalisé, mingi sans besoin ya HTML personnalisé.

  • .custom-control.custom-checkboxezali sikoyo .form-check.
  • .custom-control.custom-custom-radioezali sikoyo .form-check.
  • .custom-control.custom-switchezali sikoyo .form-check.form-switch.
  • .custom-selectezali sikoyo .form-select.
  • .custom-filempe .form-filebasili kozwa esika ya mitindo oyo esalemi na kolanda bamposa ya bato likoló ya .form-control.
  • .custom-rangeezali sikoyo .form-range.
  • Abwakaki native .form-control-filempe .form-control-range.

• KobukanaEkweyi .input-group-appendmpe .input-group-prepend. Okoki sikoyo kaka kobakisa ba boutons mpe .input-group-textlokola bana direct ya ba groupes ya entrée.

• Rayon ya ndelo ya kozanga kala na groupe ya entrée na bug ya rétroaction ya validation ebongisi na suka na kobakisa .has-validationclasse ya kobakisa na ba groupes ya entrée na validation.

• Kobukana Abwakaki ba classes ya layout spécifique ya formulaire pona système na biso ya grille. Salelá grille mpe ba utilités na biso na esika ya .form-group, .form-row, to .form-inline.

• KobukanaBa étiquettes ya formulaire esengi sikoyo .form-label.

• Kobukana .form-textno longer sets display, kopesa yo nzela ya kosala na kati to kokanga makomi ya lisalisi ndenge olingi kaka na kobongola eleman HTML.

• Ba contrôles ya formulaire esalelamaka lisusu te fixe heightsoki likoki ezali, na esika ya ko différer na min-heightmpo na kobongisa personnalisation mpe compatibilité na ba composants mosusu.

• Ba icônes ya validation esalemaka lisusu te na <select>s na multiple.

• Ba fisyé Sass ya source ebongisami lisusu na se ya scss/forms/, bakisa mpe ba styles ya groupe ya entrée.

Ba composants

• Ba valeurs unifiées paddingpona ba alertes, ba miettes ya mapa, ba cartes, ba dropdowns, ba groupes ya liste, ba modals, ba popovers, na ba toli ya bisaleli pona kozala basé na $spacervariable na biso. Talá #30564 .

Accordion

• Babakisaki composant ya sika ya accordéon .

Ba alertes

• Ba alertes ezali sikoyo na ba exemples na ba icons .

• Balongoli ba styles personnalisés pona <hr>s na alerte moko na moko puisque basalelaka déjà currentColor.

Badge ya ba badges

• KobukanaAbwaki ba .badge-*classes nionso ya couleur pona ba utilitaires ya fond (ndakisa, salela .bg-primaryna esika ya .badge-primary).

• KobukanaEbwaki .badge-pill—salela .rounded-pillutilitaire na esika na yango.

• KobukanaElongolami ba styles ya hover na focus pona <a>na ba <button>éléments.

• Bobakisi padding ya default mpo na ba badges kobanda .25em/ .5emkino .35em/ .65em.

Biloko ya kosala mampa

• Simplifié appearance par défaut ya ba mikuwa ya mampa na kolongolaka padding, background-color, mpe border-radius.

• Abakisaki propriété personnalisée ya sika ya CSS --bs-breadcrumb-dividermpo na personnalisation ya pete sans besoin ya ko recompiler CSS.

Ba boutons

• Kobukana Ba boutons ya kobongola , na ba cases ya kotiya elembo to ba radios, esengaka lisusu JavaScript te mpe ezali na marque ya sika. Tozali lisusu na mposa ya eloko ya kokanga te, kobakisa.btn-checkna<input>, mpe kosala yango na.btnbakelasi nyonso oyo ezali na<label>. Talá #30650 . Ba docs mpo na yango elongwi na lokasa na biso ya Ba Boutons mpe ekómi na eteni ya sika ya Baformilɛrɛ.

• Kobukana Babwakaki .btn-blockmpo na ba utilités. Na esika ya kosalela .btn-blockna .btn, zingá ba boutons na yo na .d-gridmpe .gap-*utilitaire moko mpo na kotya esika na yango soki esengeli. Bobongola na bakelasi oyo ezali koyanola mpo na kozala na bokonzi mingi koleka likoló na yango. Tanga ba docs pona ba exemples mosusu.

• Mikolo oyo na biso button-variant()mpe button-outline-variant()mixins mpo na kosunga ba paramètres ya kobakisa.

• Ba boutons actualisés pona ko assurer contraste emati na hover na ba états actifs.

• Ba boutons oyo ekangami ezali sikoyo na pointer-events: none;.

Karte

• KobukanaEkiti .card-deckna faveur ya grille na biso. Envelopper ba cartes na yo na ba classes ya colonne mpe bakisa .row-cols-*conteneur parent mpo na ko recréer ba decks ya carte (kasi na contrôle mingi likolo ya alignment responsive).

• KobukanaAkweyi .card-columnsna faveur ya Maçonnerie. Talá #28922 .

• KobukanaBa remplacer .cardaccordéon oyo ezalaki na base na composant ya sika ya Accordion .

Carrousel ya kosala

• Babakisaki .carousel-darkvariante ya sika mpo na makomi ya molili, ba contrôles, mpe ba indicateurs (ezali malamu mpo na ba fond ya pole).

• Ba remplacer ba icônes ya chevron pona ba contrôles ya carousel na ba SVG ya sika ya Bootstrap Icons .

Bouton ya kokanga

• KobukanaBabongoli kombo .closena yango .btn-closempo na kombo oyo ezali moins générique.

• Ba boutons ya kokanga esalela sikoyo a background-image(SVG oyo ekotisami) na esika ya a ×na kati ya HTML, epesaka nzela na kosala personnalisation ya pete sans besoin ya kosimba marquage na yo.

• Abakisaki .btn-close-whitevariante ya sika oyo esalelaka filter: invert(1)mpo na kopesa nzela na ba icônes ya ko rejeter contraste ya likolo contre ba fond ya molili.

Kokwea

• Balongoli ancrage ya rouleau mpo na ba accordéons.

Ba dropdowns ya kokita

• Abakisaki .dropdown-menu-darkvariante ya sika mpe ba variables associées mpo na ba dropdowns ya molili na demande.

• Babakisaki variable ya sika mpo na $dropdown-padding-x.

• Ekómisaki molili na mokaboli oyo ezalaki kokita mpo na kobongisa bokeseni.

• KobukanaBa événements nionso pona dropdown ezo déclenché sikoyo na bouton toggle ya dropdown et puis ezo bubbler tii na élément parent.

• Ba menu ya kokita ezali sikawa na data-bs-popper="static"attribut oyo etiamaki ntango positionnement ya kokita ezali statique, to kokita ezali na navbar. Yango ebakisami na JavaScript na biso mpe esalisaka biso tosalela ba styles ya position personnalisé sans ko interférer na positionnement ya Popper.

• KobukanaOption flipekiti mpo na plugin ya kokita na faveur ya configuration native ya Popper. Okoki sikoyo ko désactiver comportement ya flipping na koleka array ya pamba pona fallbackPlacementsoption na modificateur ya flip .

• Ba menu ya kokita ekoki sikoyo kozala cliquer na autoCloseoption ya sika pona ko gérer comportement ya auto close . Okoki kosalela option oyo mpo na kondima kofina na kati to libanda ya menu oyo ezali kokita mpo na kosala ete ezala interactive.

• Ba dropdowns sikoyo esungaka .dropdown-items enveloppé na <li>s.

Jumbotron oyo azali

• KobukanaAbwakaki composante ya jumbotron lokola ekoki ko reproduire na ba utilitaires. Tala ndakisa na biso ya sika ya Jumbotron mpo na démonstration.

Liste ya groupe

• Abakisaki mobongisi ya sika na .list-group-numberedbituluku ya liste.

Navs na ba onglets

• Abakisaki ba nullvariables ya sika mpo na font-size, font-weight, color, mpe :hover colorna .nav-linkkelasi.

Ba Navbars

• KobukanaNavbars esengaka sikoyo conteneur na kati (mpo na ko simplifier drastiquement ba exigences ya espacement na CSS esengeli).
• KobukanaKelasi .activeekoki lisusu kosalelama na .nav-items te, esengeli kosalelama mbala moko na .nav-links.

Offcanvas ezali

• Abakisaki eteni ya sika ya offcanvas .

Kosala ba paginations

• Ba liens ya pagination ezali sikoyo na personnalisable margin-leftoyo ezali dynamiquement arrondi na ba coins nionso tango ekabwani moko na mosusu.

• Babakisaki transitions na ba liens ya pagination.

Bapopovers

• KobukanaRenommé .arrowà .popover-arrowdans notre modèle popover par défaut.

• Ebongoli nkombo whiteListya option na allowList.

Bato oyo basalaka spinner

• Ba spinners bapesaka sikoyo lokumu prefers-reduced-motion: reducena kolɛmbisaka ba animations. Talá #31882 .

• Alignment vertical ya spinner oyo ebongisami.

Ba toasts ya kosala

• Ba toasts ekoki sikoyo kozala positionnés na a .toast-containerna aide ya positionnement utilités .

• Ba changer durée ya toast par défaut na 5 secondes.

• Elongolami overflow: hiddenna ba toasts mpe e remplacer yango na border-radiuss propre na ba calc()fonctions.

Batoli ya bisaleli

• KobukanaRenommé .arrowna .tooltip-arrowna modèle na biso ya tooltip par défaut.

• KobukanaValeur ya défaut mpo na fallbackPlacementsebongwanaki na ['top', 'right', 'bottom', 'left']mpo na placement ya malamu ya ba éléments popper.

• KobukanaEbongoli nkombo whiteListya option na allowList.

Ba utilités

• KobukanaEbongoli kombo ya ba utilitaires ebele mpo na kosalela ba kombo ya propriété logique na esika ya ba kombo ya direction na kobakisa lisungi ya RTL:

  • Ebongolamaki nkombo .left-*mpe .right-*na .start-*mpe .end-*.
  • Ebongolamaki nkombo .float-leftmpe .float-rightna .float-startmpe .float-end.
  • Ebongolamaki nkombo .border-leftmpe .border-rightna .border-startmpe .border-end.
  • Ebongolamaki nkombo .rounded-leftmpe .rounded-rightna .rounded-startmpe .rounded-end.
  • Ebongolamaki nkombo .ml-*mpe .mr-*na .ms-*mpe .me-*.
  • Ebongolamaki nkombo .pl-*mpe .pr-*na .ps-*mpe .pe-*.
  • Ebongolamaki nkombo .text-leftmpe .text-rightna .text-startmpe .text-end.

• KobukanaDésactivé ba marges négatives par défaut.

• Abakisaki .bg-bodykelasi ya sika mpo na kotya nokinoki <body>fond ya 's na biloko mosusu.

• Abakisaki ba utilitaires ya sika ya position mpo na top, right, bottom, mpe left. Mituya ezali na 0, 50%, mpe 100%mpo na eloko moko na moko.

• Abakisaki ya sika .translate-middle-x& .translate-middle-yutilitaires na horizontalement to verticalement centre absolument/fixe ba éléments positionné.

• Babakisaki ba border-widthutilités ya sika .

• KobukanaBapesaki nkombo mosusu .text-monospacena .font-monospace.

• KobukanaElongolami .text-hidelokola ezali méthode antiquée ya kobomba texte oyo esengeli lisusu kosalelama te.

• .fs-*Ba utilitaires ebakisami mpo na font-sizeba utilitaires (na RFS oyo efungolami). Yango esalelaka échelle moko na mitó ya makambo ya HTML oyo ezali liboso (1-6, monene tii moke), mpe ekoki kobongisama na nzela ya karte ya Sass.

• Kobukana.font-weight-*Ba utilités oyo ezongisami kombo lokola mpo .fw-*na bokuse mpe boyokani.

• Kobukana.font-style-*Ba utilités oyo ezongisami kombo lokola mpo .fst-*na bokuse mpe boyokani.

• Ebakisami .d-gridmpo na kolakisa ba utilitaires mpe ba gaputilitaires ya sika ( .gap) mpo na ba layouts ya CSS Grid mpe flexbox.

• KobukanaElongolami .rounded-smmpe rounded-lg, mpe ekɔtisaki échelle ya sika ya bakelasi, .rounded-0na .rounded-3. Talá #31687 .

• Babakisaki ba line-heightutilités ya sika: .lh-1, .lh-sm, .lh-basempe .lh-lg. Talá awa .

• Ba déplacé .d-noneutilitaire na CSS na biso pona kopesa yango poids mingi sur ba utilitaires misusu ya affichage.

• Abakisaki .visually-hidden-focusablemosungi mpo na kosala mpe na ba récipients, kosalelaka :focus-within.

Basungi

• Kobukana Basungi ya kokɔtisa oyo bazali koyanola babongoli nkombo mosusu na basalisi ya ratio oyo bazali na bankombo ya sika ya kelasi mpe bizaleli oyo ebongisami, mpe lisusu variable ya CSS oyo esalisaka.

  • Ba classes ezo kombo na yango pona ko changer byna xna rapport ya aspect. Na ndakisa, .ratio-16by9ezali sikoyo .ratio-16x9.
  • Tobwaki na .embed-responsive-itemselecteur ya groupe ya élément na faveur ya .ratio > *sélecteur ya plus simple. Kelasi mosusu esengeli te, mpe mosungi ya ratio azali sikawa kosala na eleman HTML nyonso.
  • Karte ya $embed-responsive-aspect-ratiosSass ebongwani nkombo $aspect-ratiosmpe ba valeurs na yango esili ko simplifier mpo na kotia kombo ya classe mpe pourcentage lokola key: valuepaire.
  • Ba variables ya CSS esalemi sikoyo pe ekotisami pona valeur moko moko na carte ya Sass. Modifier --bs-aspect-ratiovariable na .ratiopona kosala rapport ya aspect personnalisé nionso .

• Kobukana Bakelasi ya “motángi ya écran” ezali sikawa bakelasi oyo “ebombami na miso” .

  • Abongoli fichier Sass uta scss/helpers/_screenreaders.scssna nascss/helpers/_visually-hidden.scss
  • Ebongolamaki nkombo .sr-onlympe .sr-only-focusablena .visually-hiddenmpe.visually-hidden-focusable
  • Renommé sr-only()mpe sr-only-focusable()mixins na visually-hidden()mpe visually-hidden-focusable().

• bootstrap-utilities.csssikoyo ezali mpe na basungi na biso. Basungi bazali lisusu na mposa te ya kokɔtisama na botongi ya momeseno.

JavaScript ezali

• Abwakaki dépendance ya jQuery mpe akomaki lisusu ba plugins mpo ezala na JavaScript ya mbala na mbala.

• KobukanaBa attributs ya ba données mpo na ba plugins nionso ya JavaScript ezali sikoyo na esika ya kombo mpo na kosalisa kokesenisa fonctionnalité ya Bootstrap na ba parties troisièmes mpe code na yo moko. Na ndakisa, tosalelaka data-bs-togglena esika ya data-toggle.

• Ba plugins nionso ekoki sikoyo kondima selecteur ya CSS lokola argument ya liboso. Okoki koleka eleman ya DOM to moponi CSS nyonso ya malamu mpo na kosala instance ya sika ya plugin:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigekoki koleka lokola fonction oyo endimaka config ya Popper ya liboso ya Bootstrap lokola argument, mpo ete okoka kosangisa configuration oyo ya liboso na nzela na yo. Etali ba dropdowns, ba popovers, mpe ba totips ya bisaleli.

• Valeur ya défaut mpo na fallbackPlacementsebongwanaki na ['top', 'right', 'bottom', 'left']mpo na placement ya malamu ya ba éléments ya Popper. Etali ba dropdowns, ba popovers, mpe ba totips ya bisaleli.

• Elongolami soulignement na ba méthodes statiques publiques lokola _getInstance()→ getInstance().