Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Migrasyon nan v5

Swiv epi revize chanjman ki fèt nan dosye sous Bootstrap yo, dokimantasyon, ak konpozan pou ede w imigre soti nan v4 a v5.

Nan paj sa a

Depandans

  • Depoze jQuery.
  • Amelyore soti nan Popper v1.x nan Popper v2.x.
  • Ranplase Libsass ak Dart Sass kòm konpilatè Sass nou an bay Libsass te obsolèt.
  • Migre soti nan Jekyll nan Hugo pou bati dokiman nou an

Sipò navigatè

  • Depoze Internet Explorer 10 ak 11
  • Drop Microsoft Edge < 16 (Legacy Edge)
  • Depoze Firefox <60
  • Depoze Safari < 12
  • Depoze iOS Safari < 12
  • Depoze Chrome <60

Dokimantasyon chanjman

  • Redesigning paj dakèy, docs layout, ak footer.
  • Te ajoute nouvo gid Pasèl .
  • Te ajoute nouvo seksyon Customize , ranplase paj Theming v4 a , ak nouvo detay sou Sass, opsyon konfigirasyon mondyal, plan koulè, varyab CSS, ak plis ankò.
  • Reòganize tout dokiman fòm yo nan nouvo seksyon Fòm yo , separe kontni an nan paj ki pi konsantre.
  • Menm jan an tou, mete ajou seksyon Layout la , pou mete kontni kadriyaj la pi klè.
  • Chanje non paj eleman "Navs" nan "Navs & Tabs".
  • Chanje non paj "Tchèk" nan "Tchèk ak radyo".
  • Navbar la reamenaje epi ajoute yon nouvo subnav pou rann li pi fasil pou jwenn sit nou yo ak vèsyon dokiman yo.
  • Te ajoute nouvo rakoursi klavye pou jaden rechèch la: Ctrl + /.

Sass

  • Nou te abandone fusions kat Sass default yo pou rann li pi fasil pou retire valè redondants yo. Kenbe nan tèt ou kounye a ou dwe defini tout valè nan kat Sass yo tankou $theme-colors. Tcheke ki jan fè fas ak kat Sass .

  • KrazeChanje non color-yiq()fonksyon ak varyab ki gen rapò ak color-contrast()kòm li pa gen rapò ak espas koulè YIQ ankò. Gade #30168.

    • $yiq-contrasted-thresholdyo chanje non an $min-contrast-ratio.
    • $yiq-text-darkepi $yiq-text-lightyo respektivman chanje non $color-contrast-darkak $color-contrast-light.

  • KrazeParamèt mixins rechèch medya yo te chanje pou yon apwòch ki pi lojik.

    • media-breakpoint-down()sèvi ak breakpoint nan tèt li olye pou pwochen breakpoint la (egzanp, media-breakpoint-down(lg)olye pou media-breakpoint-down(md)yo vize viewports ki pi piti pase lg).
    • Menm jan an tou, dezyèm paramèt nan media-breakpoint-between()tou itilize breakpoint nan tèt li olye pou yo breakpoint kap vini an (egzanp, media-between(sm, lg)olye pou media-breakpoint-between(sm, md)yo vize viewports ant smak lg).

  • KrazeRetire estil enprime ak $enable-print-stylesvaryab. Klas ekspozisyon enprime yo toujou alantou. Gade #28339 .

  • KrazeDrop color(), theme-color(), ak gray()fonksyon an favè varyab. Gade #29083 .

  • KrazeChanje non theme-color-level()fonksyon color-level()ak kounye a aksepte nenpòt koulè ou vle olye pou $theme-coloryo koulè sèlman. Gade #29083 Atansyon: color-level() li te lage pita nan v5.0.0-alpha3.

  • KrazeChanje non $enable-prefers-reduced-motion-media-queryak $enable-pointer-cursor-for-buttonspou $enable-reduced-motionak $enable-button-pointerspou konsizyon.

  • KrazeRetire bg-gradient-variant()mixin la. Sèvi ak .bg-gradientklas la pou ajoute gradyan nan eleman olye pou yo klas pwodwi .bg-gradient-*yo.

  • Kraze Retire mixin ki te dekonekte deja:

    • hover, hover-focus, plain-hover-focus, akhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(tou te tonbe klas sèvis piblik ki asosye, .text-hide)
    • visibility()
    • form-control-focus()

  • KrazeChanje non scale-color()fonksyon pou shift-color()evite kolizyon ak pwòp fonksyon koulè Sass dekale.

  • box-shadowmixins kounye a pèmèt nullvalè ak gout nonesoti nan agiman miltip. Gade #30394 .

  • Mixin nan border-radius()kounye a gen yon valè default.

Sistèm koulè

  • Sistèm koulè ki te travay ak color-level()te $theme-color-intervalretire an favè yon nouvo sistèm koulè. Tout lighten()ak darken()fonksyon nan baz kòd nou an ranplase pa tint-color()ak shade-color(). Fonksyon sa yo pral melanje koulè a ​​ak swa blan oswa nwa olye pou yo chanje légèreté li pa yon kantite lajan fiks. A shift-color()pral swa tente oswa lonbraj yon koulè depann sou si paramèt pwa li yo pozitif oswa negatif. Gade #30622 pou plis detay.

  • Te ajoute nouvo koulè ak tout koulè pou chak koulè, bay nèf koulè separe pou chak koulè baz, kòm nouvo varyab Sass.

  • Amelyore kontras koulè. Pwopòsyon kontras koulè a ​​soti nan 3:1 a 4.5:1 ak ajou koulè ble, vèt, cyan, ak woz pou asire kontras WCAG 2.1 AA. Epitou chanje koulè kontras koulè nou an soti $gray-900nan $black.

  • Pou sipòte sistèm koulè nou an, nou te ajoute nouvo koutim tint-color()ak shade-color()fonksyon pou melanje koulè nou yo kòmsadwa.

Mizajou griyaj

  • Nouvo breakpoint! Te ajoute nouvo xxlbreakpoint pou 1400pxak moute. Pa gen chanjman nan tout lòt breakpoints.

  • Goutyè yo amelyore. Goutyè yo kounye a mete an rems, epi yo pi etwat pase v4 ( 1.5rem, oswa apeprè 24px, desann soti nan 30px). Sa a aliman goutyè sistèm kadriyaj nou an ak sèvis piblik espas nou yo.

    • Te ajoute nouvo klas goutyè ( .g-*, .gx-*, ak .gy-*) pou kontwole goutyè orizontal/vètikal, goutyè orizontal, ak goutyè vètikal.
    • KrazeChanje non .no-guttersan .g-0pou matche ak nouvo sèvis piblik goutyè yo.

  • Kolòn yo pa position: relativeaplike ankò, kidonk ou ka oblije ajoute .position-relativekèk eleman pou retabli konpòtman sa a.

  • KrazeDepoze plizyè .order-*klas ki souvan te pa itilize. Nou kounye a sèlman bay .order-1soti .order-5nan bwat la.

  • KrazeDepoze .mediaeleman an kòm li ka fasil replike ak sèvis piblik. Gade #28265 ak paj sèvis piblik flex pou yon egzanp .

  • Kraze bootstrap-grid.csskounye a sèlman aplike box-sizing: border-boxnan kolòn nan olye pou yo retabli bwat-gwosè mondyal la. Nan fason sa a, estil kadriyaj nou yo ka itilize nan plis kote san entèferans.

  • $enable-grid-classespa enfim jenerasyon klas veso yo ankò. Gade #29146.

  • Mizajou make-colmixin a pou default nan kolòn egal san yon gwosè espesifye.

Kontni, rdemare, elatriye

  • RFS kounye a aktive pa default. Tit ki sèvi akfont-size()mixin la pral otomatikman ajiste yofont-sizenan echèl ak viewport la. Karakteristik sa a te deja patisipe ak v4.

  • KrazeRevize tipografi ekspozisyon nou an pou ranplase $display-*varyab nou yo ak yon $display-font-sizeskat Sass. Epitou retire $display-*-weightvaryab endividyèl yo pou yon sèl $display-font-weightak ajiste font-sizes.

  • Te ajoute de nouvo .display-*gwosè tit, .display-5ak .display-6.

  • Lyen yo souliye pa default (pa sèlman sou hover), sof si yo fè pati eleman espesifik.

  • Tablo reamenaje pou rafrechi estil yo epi rekonstwi yo ak varyab CSS pou plis kontwòl sou stil.

  • KrazeTablo anbrike pa eritye estil ankò.

  • Kraze .thead-lightepi .thead-darkyo abandone an favè .table-*klas variant yo ki ka itilize pou tout eleman tab yo ( thead, tbody, tfoot, tr, thak td).

  • KrazeYo table-row-variant()chanje non mixin nan table-variant()epi li aksepte sèlman 2 paramèt: $color(non koulè) ak $value(kod koulè). Koulè fwontyè a ak koulè aksan yo otomatikman kalkile dapre varyab faktè tab yo.

  • Divize varyab padding selil tab yo nan -yak -x.

  • KrazeDepoze .pre-scrollableklas la. Gade #29135

  • Kraze .text-*sèvis piblik yo pa ajoute eta yo hover ak konsantre sou lyen ankò. .link-*Yo ka itilize klas asistan pito. Gade #29267

  • KrazeDepoze .text-justifyklas la. Gade #29793

  • Kraze <hr>eleman kounye a itilize heightolye pou borderyo pi byen sipòte sizeatribi a. Sa a pèmèt tou itilize sèvis piblik padding pou kreye divizyon ki pi epè (egzanp, <hr class="py-1">).

  • Reyajiste default orizontal padding-leftsou <ul>ak <ol>eleman nan navigatè default 40pxnan 2rem.

  • Te ajoute $enable-smooth-scroll, ki aplike scroll-behavior: smoothglobalman—eksepte pou itilizatè ki mande pou redui mouvman atravè prefers-reduced-motiondemann medya yo. Gade #31877

RTL

  • Direksyon orizontal varyab espesifik, sèvis piblik, ak mixin yo tout te chanje non yo sèvi ak pwopriyete lojik tankou sa yo jwenn nan layouts flexbox—eg, startak endnan plas leftak right.

Fòm

  • Te ajoute nouvo fòm k ap flote! Nou te ankouraje egzanp Floating Labels nan eleman fòm konplètman sipòte. Gade nouvo paj Etikèt k ap flote.

  • Kraze Konsolide eleman fòm natif natal ak koutim. Yo te konsolide kaz, radyo, seleksyon, ak lòt antre ki te gen klas natif natal ak koutim nan v4. Koulye a, prèske tout eleman fòm nou yo se antyèman koutim, pifò san yo pa bezwen HTML koutim.

    • .custom-checkse kounye a .form-check.
    • .custom-check.custom-switchse kounye a .form-check.form-switch.
    • .custom-selectse kounye a .form-select.
    • .custom-fileepi .form-fileyo te ranplase pa estil koutim sou tèt .form-control.
    • .custom-rangese kounye a .form-range.
    • Depoze natif natal .form-control-fileak .form-control-range.

  • KrazeDepoze .input-group-appendak .input-group-prepend. Ou kapab kounye a jis ajoute bouton ak .input-group-textkòm pitit dirèk nan gwoup yo opinyon.

  • Reyon fwontyè ki manke depi lontan sou gwoup opinyon ak ensèk fidbak validasyon finalman fikse lè yo ajoute yon .has-validationklas adisyonèl nan gwoup antre ak validation.

  • Kraze Depoze klas layout fòm espesifik pou sistèm kadriyaj nou an. Sèvi ak kadriyaj nou an ak sèvis piblik olye pou yo .form-group, .form-row, oswa .form-inline.

  • KrazeEtikèt fòm kounye a mande pou .form-label.

  • Kraze .form-textpa mete ankò display, sa ki pèmèt ou kreye tèks èd aliye oswa bloke jan ou vle jis pa chanje eleman HTML la.

  • Ikon validasyon yo pa aplike ankò nan <select>s ak multiple.

  • Fichye Sass sous rearanje anba scss/forms/, ki gen ladan estil gwoup opinyon.

Eleman

  • Valè inifye paddingpou alèt, breadcrumbs, kat, dropdowns, gwoup lis, modal, popovers, ak konsèy sou zouti yo dwe baze sou $spacervaryab nou an. Gade #30564 .

Akòdeyon

Alèt

  • Alèt kounye a gen egzanp ak ikon .

  • Retire estil koutim pou <hr>s nan chak alèt paske yo deja itilize currentColor.

Badj

  • KrazeDepoze tout .badge-*klas koulè pou sèvis piblik background (egzanp, sèvi ak .bg-primaryolye de .badge-primary).

  • KrazeDropped .badge-pill- sèvi ak .rounded-pillsèvis piblik la pito.

  • KrazeRetire estil hover ak konsantre pou <a>ak <button>eleman yo.

  • Ogmante padding default pou badj soti nan .25em/ .5emrive .35em/ .65em.

  • Senplifye aparans la default nan ti kal pen pa retire padding, background-color, ak border-radius.

  • Te ajoute nouvo pwopriyete koutim CSS --bs-breadcrumb-dividerpou personnalisation fasil san yo pa bezwen rekonpile CSS.

Bouton

  • Kraze Bouton baskile , ki gen kaz oswa radyo, pa bezwen JavaScript ankò epi yo gen nouvo mak. Nou pa bezwen yon eleman anbalaj ankò, ajoute.btn-checknan<input>, epi pè li ak nenpòt.btnklas sou<label>. Gade #30650 . Dokiman pou sa a te deplase soti nan paj Bouton nou an nan nouvo seksyon Fòm yo.

  • Kraze Depoze .btn-blockpou sèvis piblik. Olye pou yo itilize .btn-blocksou .btn, vlope bouton ou yo ak .d-gridyon .gap-*sèvis piblik pou espas yo jan sa nesesè. Chanje nan klas ki reponn pou plis kontwòl sou yo. Li dokiman yo pou kèk egzanp.

  • Mete ajou nou button-variant()ak button-outline-variant()mixins pou sipòte paramèt adisyonèl.

  • Mizajou bouton pou asire plis kontras sou eta aktif ak plan.

  • Bouton andikape kounye a gen pointer-events: none;.

Kat

  • KrazeDepoze .card-deckan favè griy nou an. Anvlope kat ou yo nan klas kolòn epi ajoute yon .row-cols-*veso paran pou rkree kat kat (men ak plis kontwòl sou aliyman reponn).

  • KrazeDepoze .card-columnsan favè masonry. Gade #28922 .

  • KrazeRanplase .cardakòdeyon ki baze a ak yon nouvo eleman akòdeyon .

  • Te ajoute nouvo .carousel-darkvariant pou tèks nwa, kontwòl, ak endikatè (bon anpil pou orijin pi lejè).

  • Ranplase ikon chevron pou kontwòl Carousel ak nouvo SVG ki soti nan Bootstrap Icons .

Bouton fèmen

  • KrazeChanje non .closean .btn-closepou yon non mwens jenerik.

  • Bouton fèmen kounye a sèvi ak yon background-image(SVG entegre) olye pou yo yon &times;nan HTML a, ki pèmèt pou personnalisation pi fasil san yo pa bezwen manyen maketing ou a.

  • Te ajoute nouvo .btn-close-whitevariant ki itilize filter: invert(1)pou pèmèt pi wo kontras ranvwaye ikon kont orijin ki pi fonse.

Tonbe

  • Retire ancrage woulo liv pou akòdeyon.

  • Te ajoute nouvo .dropdown-menu-darkvariant ak varyab ki asosye pou deroulan nwa sou demann.

  • Te ajoute nouvo varyab pou $dropdown-padding-x.

  • Fè nwa divizyon dropdown pou amelyore kontras.

  • KrazeTout evènman yo pou deroule a yo kounye a deklanche sou bouton an aktive dropdown ak Lè sa a, bulle jiska eleman paran an.

  • Meni dropdown kounye a gen yon data-bs-popper="static"atribi mete lè pwezante nan dropdown la estatik ak data-bs-popper="none"lè dropdown nan navbar la. Sa a se ajoute pa JavaScript nou an epi li ede nou itilize estil pozisyon koutim san yo pa entèfere ak pwezante Popper a.

  • KrazeDepoze flipopsyon pou Plugin dropdown an favè konfigirasyon Popper natif natal. Ou kapab kounye a enfim konpòtman an ranvèrsan lè w pase yon etalaj vid pou fallbackPlacementsopsyon nan modifye baskile .

  • Meni déroulant kapab kounye a klike ak yon nouvo autoCloseopsyon pou okipe konpòtman fèmen oto . Ou ka itilize opsyon sa a pou aksepte klike sou andedan oswa deyò meni deroule a pou fè li entèaktif.

  • Dropdowns kounye a sipòte .dropdown-items ki vlope nan <li>s.

Jumbotron

Lis gwoup

  • Te ajoute nouvo nullvaryab pou font-size, font-weight, color, ak :hover colornan .nav-linkklas la.
  • KrazeNavbars kounye a mande pou yon veso nan (pou byen senplifye kondisyon espas ak CSS obligatwa).

Offcanvas

Papyaj

  • Lyen pajyon kounye a gen personnalisable margin-leftki dinamik awondi sou tout kwen lè yo separe youn ak lòt.

  • Te ajoute transitions nan lyen pagination.

Popovers

  • KrazeChanje non .arrowan .popover-arrownan modèl popover default nou an.

  • Chanje non whiteListopsyon a allowList.

Spinners

  • Spinners kounye a onore prefers-reduced-motion: reducepa ralanti animasyon yo. Gade #31882 .

  • Amelyore spinner aliyman vètikal.

Toasts

  • Toasts kapab kounye a pozisyone nan yon .toast-containerak èd pwezante sèvis piblik yo .

  • Chanje dire defo pen griye a 5 segonn.

  • Retire overflow: hiddennan toasts ak ranplase ak bon border-radiuss ak calc()fonksyon.

Konsèy zouti

  • KrazeChanje non .arrowan .tooltip-arrownan modèl defo tooltip nou an.

  • KrazeValè default la fallbackPlacementschanje an ['top', 'right', 'bottom', 'left']pou pi bon plasman eleman popper yo.

  • KrazeChanje non whiteListopsyon a allowList.

Itilite yo

  • KrazeChanje non plizyè sèvis piblik pou itilize non pwopriyete ki lojik olye pou yo non direksyon ak adisyon sipò RTL:

    • Chanje non .left-*ak .right-*pou .start-*ak .end-*.
    • Chanje non .float-leftak .float-rightpou .float-startak .float-end.
    • Chanje non .border-leftak .border-rightpou .border-startak .border-end.
    • Chanje non .rounded-leftak .rounded-rightpou .rounded-startak .rounded-end.
    • Chanje non .ml-*ak .mr-*pou .ms-*ak .me-*.
    • Chanje non .pl-*ak .pr-*pou .ps-*ak .pe-*.
    • Chanje non .text-leftak .text-rightpou .text-startak .text-end.

  • KrazeEnfim maj negatif pa default.

  • Te ajoute nouvo .bg-bodyklas pou byen vit mete <body>background nan nan eleman adisyonèl.

  • Te ajoute sèvis piblik nouvo pozisyon pou top, right, bottom, ak left. Valè yo enkli 0, 50%, ak 100%pou chak pwopriyete.

  • Te ajoute nouvo .translate-middle-xak .translate-middle-ysèvis piblik nan orizontal oswa vètikal sant eleman absoli / fiks pozisyone.

  • Te ajoute nouvo border-widthsèvis piblik .

  • KrazeChanje non .text-monospacean .font-monospace.

  • KrazeRetire .text-hidekòm li se yon metòd demode pou kache tèks ki pa ta dwe itilize ankò.

  • Te ajoute .fs-*sèvis piblik pou font-sizesèvis piblik (ak RFS aktive). Sa yo itilize menm echèl la ak tit default HTML yo (1-6, gwo ak piti), epi yo ka modifye atravè kat Sass.

  • KrazeChanje non .font-weight-*sèvis piblik yo kòm .fw-*pou konsizyon ak konsistans.

  • KrazeChanje non .font-style-*sèvis piblik yo kòm .fst-*pou konsizyon ak konsistans.

  • Te ajoute .d-gridnan ekspozisyon sèvis piblik ak nouvo gapsèvis piblik ( .gap) pou CSS Grid ak layouts flexbox.

  • KrazeRetire .rounded-smak rounded-lg, epi prezante yon nouvo echèl klas, .rounded-0nan .rounded-3. Gade #31687 .

  • Te ajoute nouvo line-heightsèvis piblik: .lh-1, .lh-sm, .lh-baseak .lh-lg. Gade isit la .

  • Deplase .d-nonesèvis piblik la nan CSS nou an pou bay li plis pwa sou lòt sèvis piblik ekspozisyon.

  • Pwolonje .visually-hidden-focusableèd la pou travay tou sou resipyan, lè l sèvi avèk :focus-within.

Èd yo

  • Kraze Yo te chanje non moun k ap ede entègrasyon ki reponn yo an asistan rapò ak nouvo non klas ak konpòtman amelyore, ansanm ak yon varyab CSS itil.

    • Yo te chanje non klas yo pou chanje bynan xrapò aspè yo. Pou egzanp, .ratio-16by9se kounye a .ratio-16x9.
    • Nou te lage .embed-responsive-itemseleksyon an ak gwoup eleman an favè yon .ratio > *seleksyon ki pi senp. Pa gen plis klas ki nesesè, ak asistan rapò a kounye a ap travay ak nenpòt eleman HTML.
    • Yo $embed-responsive-aspect-ratioste chanje non kat Sass la $aspect-ratiosak valè li yo te senplifye pou enkli non klas la ak pousantaj la kòm key: valuepè a.
    • Varyab CSS yo kounye a pwodwi epi yo enkli pou chak valè nan kat Sass la. Modifye --bs-aspect-ratiovaryab la .ratiopou kreye nenpòt rapò aspè koutim .

  • Kraze Kounye a, klas “Lektè ekran” yo se klas “vizyèlman kache” .

    • Chanje dosye Sass la soti scss/helpers/_screenreaders.scssnanscss/helpers/_visually-hidden.scss
    • Chanje non .sr-onlyak .sr-only-focusablepou .visually-hiddenak.visually-hidden-focusable
    • Chanje non sr-only()ak sr-only-focusable()melanje visually-hidden()ak visually-hidden-focusable().

  • bootstrap-utilities.csskounye a gen ladan tou moun k ap ede nou yo. Èd yo pa bezwen enpòte nan bati koutim ankò.

JavaScript

  • Depoze depandans jQuery ak reekri grefon yo dwe nan JavaScript regilye.

  • KrazeDone atribi pou tout grefon JavaScript yo kounye a gen espas non yo ede distenge fonksyonalite Bootstrap de twazyèm pati ak pwòp kòd ou. Pa egzanp, nou itilize data-bs-toggleolye de data-toggle.

  • Tout grefon kapab kounye a aksepte yon seleksyon CSS kòm premye agiman an. Ou ka swa pase yon eleman DOM oswa nenpòt seleksyon CSS valab pou kreye yon nouvo egzanp Plugin la:

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

  • popperConfigka pase kòm yon fonksyon ki aksepte Bootstrap a default Popper konfigirasyon kòm yon agiman, pou ke ou ka rantre konfigirasyon default sa a nan fason ou. Aplike nan dropdowns, popovers, ak konsèy sou zouti.

  • Valè defo pou yo fallbackPlacementschanje an ['top', 'right', 'bottom', 'left']pou pi bon plasman eleman Popper yo. Aplike nan dropdowns, popovers, ak konsèy sou zouti.

  • Retire souliye nan metòd piblik estatik tankou _getInstance()→ getInstance().