Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
in English

Migreer na v5

Volg en hersien veranderinge aan die Bootstrap-bronlêers, dokumentasie en komponente om jou te help om van v4 na v5 te migreer.

Op hierdie bladsy

Afhanklikhede

  • Het jQuery laat val.
  • Opgegradeer van Popper v1.x na Popper v2.x.
  • Het Libsass met Dart Sass vervang aangesien ons Sass-samesteller gegewe Libsass afgekeur is.
  • Van Jekyll na Hugo migreer vir die bou van ons dokumentasie

Blaaier ondersteuning

  • Internet Explorer 10 en 11 laat val
  • Microsoft Edge < 16 laat val (Legacy Edge)
  • Firefox < 60 laat val
  • Safari laat vaar < 12
  • iOS Safari < 12 laat val
  • Chrome < 60 laat val

Dokumentasie veranderinge

  • Herontwerpte tuisblad, dokumentuitleg en voetskrif.
  • Nuwe Pakkiegids bygevoeg .
  • Nuwe Pasmaak-afdeling bygevoeg , wat v4 se Tema-bladsy vervang , met nuwe besonderhede oor Sass, globale konfigurasie-opsies, kleurskemas, CSS-veranderlikes, en meer.
  • Het alle vormdokumentasie in 'n nuwe Vorms-afdeling herorganiseer en die inhoud in meer gefokusde bladsye opgebreek.
  • Op dieselfde manier het die Uitleg-afdeling opgedateer om roosterinhoud duideliker uit te beeld.
  • Hernoem "Navs" komponent bladsy na "Navs & Tabs".
  • Hernoem "Tjeks"-bladsy na "Tjeks en radio's".
  • Het die navigasiebalk herontwerp en 'n nuwe subnav bygevoeg om dit makliker te maak om by ons werwe en dokumentweergawes rond te kom.
  • Bygevoeg nuwe sleutelbordkortpad vir die soekveld: Ctrl + /.

Sass

  • Ons het die standaard Sass-kaartsamevoegings laat vaar om dit makliker te maak om oortollige waardes te verwyder. Hou in gedagte dat jy nou alle waardes in die Sass-kaarte moet definieer, soos $theme-colors. Kyk hoe om Sass-kaarte te hanteer .

  • BreekHernoem color-yiq()funksie en verwante veranderlikes na color-contrast()aangesien dit nie meer met YIQ-kleurruimte verband hou nie. Sien #30168.

    • $yiq-contrasted-thresholdword hernoem na $min-contrast-ratio.
    • $yiq-text-darken $yiq-text-lightword onderskeidelik hernoem na $color-contrast-darken $color-contrast-light.

  • BreekMedianavrae-mengparameters het verander vir 'n meer logiese benadering.

    • media-breakpoint-down()gebruik die breekpunt self in plaas van die volgende breekpunt (bv., media-breakpoint-down(lg)in plaas van media-breakpoint-down(md)teiken kykpoorte kleiner as lg).
    • Net so gebruik die tweede parameter in media-breakpoint-between()ook die breekpunt self in plaas van die volgende breekpunt (bv. media-between(sm, lg)in plaas van media-breakpoint-between(sm, md)teiken-kykpoorte tussen smen lg).

  • BreekVerwyder drukstyle en $enable-print-stylesveranderlike. Drukvertoonklasse is nog steeds beskikbaar. Sien #28339 .

  • BreekLaat val color(), theme-color(), en gray()funksioneer ten gunste van veranderlikes. Sien #29083 .

  • BreekHernoem theme-color-level()funksie na color-level()en aanvaar nou enige kleur wat jy wil hê in plaas van net $theme-colorkleure. Sien #29083 Pasop: color-level() is later ingeval v5.0.0-alpha3.

  • BreekHernoem $enable-prefers-reduced-motion-media-queryen $enable-pointer-cursor-for-buttonsna $enable-reduced-motionen $enable-button-pointersvir beknoptheid.

  • BreekHet die bg-gradient-variant()mengsel verwyder. Gebruik die .bg-gradientklas om gradiënte by elemente te voeg in plaas van die gegenereerde .bg-gradient-*klasse.

  • Breek Verwyder voorheen verouderde mengsels:

    • hover, hover-focus, plain-hover-focus, enhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(het ook die gepaardgaande nutsklas laat vaar, .text-hide)
    • visibility()
    • form-control-focus()

  • BreekHernoem scale-color()funksie na shift-color()om botsing met Sass se eie kleurskaalfunksie te vermy.

  • box-shadowmixins laat nou nullwaardes toe en val nonevan verskeie argumente af. Sien #30394 .

  • Die border-radius()mixin het nou 'n verstekwaarde.

Kleur stelsel

  • Die kleurstelsel waarmee gewerk color-level()en $theme-color-intervalverwyder is ten gunste van 'n nuwe kleurstelsel. Alle lighten()en darken()funksies in ons kodebasis word vervang deur tint-color()en shade-color(). Hierdie funksies sal die kleur met óf wit óf swart meng in plaas daarvan om die ligheid daarvan met 'n vaste hoeveelheid te verander. Die shift-color()kleur sal óf tint óf 'n kleur skaker, afhangende van of die gewigsparameter positief of negatief is. Sien #30622 vir meer besonderhede.

  • Bygevoeg nuwe kleure en skakerings vir elke kleur, wat nege afsonderlike kleure vir elke basiskleur verskaf, as nuwe Sass-veranderlikes.

  • Verbeterde kleurkontras. Gestampte kleurkontrasverhouding van 3:1 tot 4.5:1 en opgedateerde blou, groen, siaan en pienk kleure om WCAG 2.1 AA kontras te verseker. Het ook ons ​​kleurkontraskleur verander van $gray-900na $black.

  • Om ons kleurstelsel te ondersteun, het ons nuwe pasgemaakte tint-color()en shade-color()funksies bygevoeg om ons kleure gepas te meng.

Roosteropdaterings

  • Nuwe breekpunt! Bygevoeg nuwe xxlbreekpunt vir 1400pxen op. Geen veranderinge aan alle ander breekpunte nie.

  • Verbeterde geute. Geute is nou in rems gestel en is nouer as v4 ( 1.5rem, of ongeveer 24px, af van 30px). Dit bring ons roosterstelsel se geute in lyn met ons spasiëringshulpmiddels.

    • Bygevoeg nuwe geute klas ( .g-*, .gx-*, en .gy-*) om horisontale/vertikale geute, horisontale geute en vertikale geute te beheer.
    • BreekHernoem .no-guttersna .g-0om by nuwe geuthulpprogramme te pas.

  • Kolomme het nie meer position: relativetoegepas nie, so jy sal dalk .position-relativeby sommige elemente moet byvoeg om daardie gedrag te herstel.

  • BreekVerskeie .order-*klasse laat val wat dikwels ongebruik gegaan het. Ons verskaf nou net .order-1aan .order-5uit die boks.

  • BreekHet die .mediakomponent laat val aangesien dit maklik met nutsprogramme gerepliseer kan word. Sien #28265 en die flex utilities-bladsy vir 'n voorbeeld .

  • Breek bootstrap-grid.cssis nou net van toepassing box-sizing: border-boxop die kolom in plaas daarvan om die globale boksgrootte terug te stel. Op hierdie manier kan ons roosterstyle sonder inmenging op meer plekke gebruik word.

  • $enable-grid-classesdeaktiveer nie meer die generering van houerklasse nie. Sien #29146.

  • Het die make-colmixin opgedateer na verstek na gelyke kolomme sonder 'n gespesifiseerde grootte.

Inhoud, herlaai, ens

  • RFS is nou by verstek geaktiveer. Opskrifte wat diefont-size()mixin gebruik, sal hulle outomaties aanpasfont-sizena skaal met die viewport. Hierdie kenmerk is voorheen ingeteken met v4.

  • BreekHet ons vertoontipografie hersien om ons $display-*veranderlikes te vervang en met 'n $display-font-sizesSass-kaart. Verwyder ook die individuele $display-*-weightveranderlikes vir 'n enkele $display-font-weighten aangepaste font-sizes.

  • Het twee nuwe .display-*opskrifgroottes bygevoeg, .display-5en .display-6.

  • Skakels word by verstek onderstreep (nie net as jy beweeg nie), tensy dit deel is van spesifieke komponente.

  • Herontwerp tabelle om hul style te verfris en hulle te herbou met CSS veranderlikes vir meer beheer oor stilering.

  • BreekGeneste tabelle erf nie meer style nie.

  • Breek .thead-lighten .thead-darkword laat vaar ten gunste van die .table-*variantklasse wat vir alle tabelelemente ( thead, tbody, tfoot, tr, then td) gebruik kan word.

  • BreekDie table-row-variant()mixin word hernoem na table-variant()en aanvaar slegs 2 parameters: $color(kleurnaam) en $value(kleurkode). Die randkleur en aksentkleure word outomaties bereken op grond van die tabelfaktorveranderlikes.

  • Verdeel tabelselvulveranderlikes in -yen -x.

  • BreekKlas gedaal .pre-scrollable. Sien #29135

  • Breek .text-*nutsprogramme voeg nie meer sweef- en fokustoestande by skakels nie. .link-*helperklasse kan eerder gebruik word. Sien #29267

  • BreekKlas gedaal .text-justify. Sien #29793

  • Stel verstek horisontaal padding-leftaan <ul>en <ol>elemente van blaaier verstek 40pxna 2rem.

  • Bygevoeg $enable-smooth-scroll, wat scroll-behavior: smoothwêreldwyd van toepassing is—behalwe vir gebruikers wat vir verminderde beweging deur middel van prefers-reduced-motionmedianavraag vra. Sien #31877

RTL

  • Horisontale rigting-spesifieke veranderlikes, nutsprogramme en mixins is almal hernoem om logiese eienskappe te gebruik soos dié wat in flexbox-uitlegte gevind word—bv starten endin plaas van leften right.

Vorms

  • Nuwe drywende vorms bygevoeg! Ons het die voorbeeld van swewende etikette bevorder tot volledig ondersteunde vormkomponente. Sien die nuwe drywende etikette-bladsy.

  • Breek Gekonsolideerde inheemse en pasgemaakte vormelemente. Merkblokkies, radio's, keuses en ander insette wat oorspronklike en pasgemaakte klasse in v4 gehad het, is gekonsolideer. Nou is byna al ons vormelemente heeltemal pasgemaak, die meeste sonder die behoefte aan persoonlike HTML.

    • .custom-checkis nou .form-check.
    • .custom-check.custom-switchis nou .form-check.form-switch.
    • .custom-selectis nou .form-select.
    • .custom-fileen .form-fileis vervang deur pasgemaakte style bo-op .form-control.
    • .custom-rangeis nou .form-range.
    • Geval inheemse .form-control-fileen .form-control-range.

  • BreekGeval .input-group-appenden .input-group-prepend. Jy kan nou net knoppies en .input-group-textas direkte kinders van die invoergroepe byvoeg.

  • Die jarelange ontbrekende grensradius op invoergroep met valideringterugvoerfout word uiteindelik reggestel deur 'n bykomende .has-validationklas by insetgroepe met validering by te voeg.

  • Breek Vormspesifieke uitlegklasse vir ons roosterstelsel laat val. Gebruik ons ​​rooster en nutsprogramme in plaas van .form-group, .form-row, of .form-inline.

  • BreekVormetikette vereis nou .form-label.

  • Breek .form-textstel nie meer in nie display, wat jou toelaat om inlyn- of blokhulpteks te skep soos jy wil net deur die HTML-element te verander.

  • Validasie-ikone word nie meer toegepas op <select>s met multiple.

  • Herrangskik bron Sass-lêers onder scss/forms/, insluitend invoergroepstyle.

Komponente

  • Verenigde paddingwaardes vir waarskuwings, broodkrummels, kaarte, aftreklys, lysgroepe, modale, popovers en gereedskapwenke om op ons $spacerveranderlike gebaseer te wees. Sien #30564 .

Trekklavier

Waarskuwings

  • Waarskuwings het nou voorbeelde met ikone .

  • Verwyder pasgemaakte style vir <hr>s in elke waarskuwing aangesien hulle reeds gebruik currentColor.

Kentekens

  • BreekHet alle .badge-*kleurklasse vir agtergrondhulpmiddels laat val (bv. gebruik .bg-primaryin plaas van .badge-primary).

  • BreekGeval — gebruik eerder .badge-pilldie hulpprogram..rounded-pill

  • BreekVerwyder beweeg- en fokusstyle vir <a>en <button>elemente.

  • Verhoogde verstekvulling vir kentekens van .25em/ .5emna .35em/ .65em.

  • Vereenvoudig die verstekvoorkoms van broodkrummels deur padding, background-color, en te verwyder border-radius.

  • Nuwe CSS-pasgemaakte eiendom bygevoeg --bs-breadcrumb-dividervir maklike aanpassing sonder om CSS te hersaamstel.

Knoppies

  • Breek Wisselknoppies , met merkblokkies of radio's, benodig nie meer JavaScript nie en het nuwe opmaak. Ons benodig nie meer 'n wikkelelement nie, voeg.btn-checkby die<input>, en koppel dit met enige.btnklasse op die<label>. Sien #30650 . Die dokumente hiervoor het van ons Knoppies-bladsy na die nuwe Vorms-afdeling geskuif.

  • Breek Geval .btn-blockvir nutsdienste. In plaas daarvan om .btn-blockop die te gebruik .btn, draai jou knoppies toe met .d-grid'n .gap-*nutsding om hulle te spasieer soos nodig. Skakel oor na responsiewe klasse vir selfs meer beheer daaroor. Lees die dokumente vir 'n paar voorbeelde.

  • Het ons button-variant()en button-outline-variant()mixins opgedateer om bykomende parameters te ondersteun.

  • Opgedateerde knoppies om verhoogde kontras op sweef en aktiewe toestande te verseker.

  • Gedeaktiveerde knoppies het nou pointer-events: none;.

Kaart

  • BreekGeval .card-deckten gunste van ons rooster. Draai jou kaarte in kolomklasse toe en voeg 'n ouerhouer .row-cols-*by om kaartdekke te herskep (maar met meer beheer oor responsiewe belyning).

  • BreekGeval .card-columnsten gunste van Masonry. Sien #28922 .

  • BreekVervang die .cardgebaseerde trekklavier met 'n nuwe Trekklavier-komponent .

  • Bygevoeg nuwe .carousel-darkvariant vir donker teks, kontroles en aanwysers (ideaal vir ligter agtergronde).

  • Vervang chevron-ikone vir karrouselkontroles met nuwe SVG's van Bootstrap Icons .

Maak toe-knoppie

  • BreekHernoem .closena .btn-closevir 'n minder generiese naam.

  • Maak toe-knoppies gebruik nou 'n background-image(ingebedde SVG) in plaas van 'n &times;in die HTML, wat dit makliker maak om aan te pas sonder dat dit nodig is om aan jou opmaak te raak.

  • .btn-close-whiteNuwe variant bygevoeg wat gebruik filter: invert(1)word om hoër kontras te aktiveer om ikone teen donkerder agtergronde te verwyder.

Inval

  • Verwyder rol-ankering vir trekklaviere.

  • Bygevoeg nuwe .dropdown-menu-darkvariant en gepaardgaande veranderlikes vir op-aanvraag donker dropdowns.

  • Bygevoeg nuwe veranderlike vir $dropdown-padding-x.

  • Het die aftrekverdeler verdonker vir verbeterde kontras.

  • BreekAl die gebeure vir die aftreklys word nou op die aftrek-skakelknoppie geaktiveer en dan opgeborrel na die ouerelement.

  • Aftrekkieslys het nou 'n data-bs-popper="static"kenmerk gestel wanneer die posisionering van die aftreklys staties is en data-bs-popper="none"wanneer aftreklys in die navigasiebalk is. Dit word bygevoeg deur ons JavaScript en help ons om pasgemaakte posisiestyle te gebruik sonder om met Popper se posisionering in te meng.

  • BreekOpsie vir dropdown plugin laat val flipten gunste van inheemse Popper-konfigurasie. U kan nou die flipgedrag deaktiveer deur 'n leë skikking vir fallbackPlacementsopsie in flip - wysiger deur te gee.

  • Aftrekkieslyste kan nou klikbaar wees met 'n nuwe autoCloseopsie om die outomatiese toemaakgedrag te hanteer . U kan hierdie opsie gebruik om die klik binne of buite die aftreklys te aanvaar om dit interaktief te maak.

  • Aftrekkies ondersteun nou .dropdown-items toegedraai in <li>s.

Jumbotron

Lys groep

  • Het nuwe nullveranderlikes vir font-size, font-weight, color, en :hover colorby die .nav-linkklas gevoeg.
  • BreekNavbars benodig nou 'n houer binne (om spasiëringvereistes en CSS vereis drasties te vereenvoudig).

Offcanvas

Paginering

  • Pagineringskakels het nou aanpasbare margin-leftwat dinamies op alle hoeke afgerond is wanneer dit van mekaar geskei word.

  • Bygevoeg transitions by paginering skakels.

Popovers

  • BreekHernoem .arrowna .popover-arrowin ons verstek popover-sjabloon.

  • Hernoem whiteListopsie na allowList.

Spinners

  • Spinners eer nou prefers-reduced-motion: reducedeur animasies te vertraag. Sien #31882 .

  • Verbeterde vertikale belyning van die draaier.

Heilbroodjies

  • Heilbroodjies kan nou in ' n geposisioneer word .toast-containermet behulp van posisioneringshulpmiddels .

  • Verander verstek roosterbrood duur na 5 sekondes.

  • Van roosterbrood verwyder overflow: hiddenen vervang met behoorlike border-radiuss met calc()funksies.

Gereedskapwenke

  • BreekHernoem .arrowna .tooltip-arrowin ons verstek nutswenk-sjabloon.

  • BreekDie verstekwaarde vir die fallbackPlacementsword verander na ['top', 'right', 'bottom', 'left']vir 'n beter plasing van springer-elemente.

  • BreekHernoem whiteListopsie na allowList.

Nutsprogramme

  • BreekVerskeie nutsprogramme hernoem om logiese eiendomsname in plaas van rigtingname te gebruik met die byvoeging van RTL-ondersteuning:

    • Hernoem .left-*en .right-*na .start-*en .end-*.
    • Hernoem .float-leften .float-rightna .float-starten .float-end.
    • Hernoem .border-leften .border-rightna .border-starten .border-end.
    • Hernoem .rounded-leften .rounded-rightna .rounded-starten .rounded-end.
    • Hernoem .ml-*en .mr-*na .ms-*en .me-*.
    • Hernoem .pl-*en .pr-*na .ps-*en .pe-*.
    • Hernoem .text-leften .text-rightna .text-starten .text-end.

  • BreekNegatiewe marges by verstek gedeaktiveer.

  • Nuwe klas bygevoeg .bg-bodyom die agtergrond vinnig <body>op bykomende elemente te stel.

  • Bygevoeg nuwe posisie nutsprogramme vir top, right, bottom, en left. Waardes sluit in 0, 50%, en 100%vir elke eiendom.

  • Bygevoeg nuwe .translate-middle-xen .translate-middle-ynutsprogramme om horisontaal of vertikaal absolute/vaste geposisioneerde elemente te sentreer.

  • border-widthNuwe nutsprogramme bygevoeg .

  • BreekHernoem .text-monospacena .font-monospace.

  • BreekVerwyder .text-hideaangesien dit 'n verouderde metode is om teks te versteek wat nie meer gebruik behoort te word nie.

  • Bygevoeg .fs-*nutsprogramme vir font-sizenutsprogramme (met RFS geaktiveer). Hierdie gebruik dieselfde skaal as HTML se verstekopskrifte (1-6, groot tot klein), en kan via Sass-kaart gewysig word.

  • BreekHernoem .font-weight-*nutsprogramme .fw-*vir bondigheid en konsekwentheid.

  • BreekHernoem .font-style-*nutsprogramme .fst-*vir bondigheid en konsekwentheid.

  • Bygevoeg .d-gridom nutsprogramme en nuwe gapnutsprogramme ( .gap) vir CSS Grid en flexbox-uitlegte te vertoon.

  • BreekVerwyder .rounded-smen rounded-lg, en het 'n nuwe skaal van klasse bekendgestel, .rounded-0na .rounded-3. Sien #31687 .

  • Bygevoeg nuwe line-heightnutsprogramme: .lh-1, .lh-sm, .lh-baseen .lh-lg. Kyk hier .

  • Het die .d-nonenutsprogram in ons CSS geskuif om dit meer gewig te gee bo ander vertoonnutsprogramme.

  • Die .visually-hidden-focusablehelper is uitgebrei om ook op houers te werk, met behulp van :focus-within.

Helpers

  • Breek Responsiewe inbedhelpers is hernoem na verhoudinghelpers met nuwe klasname en verbeterde gedrag, sowel as 'n nuttige CSS-veranderlike.

    • Klasse is hernoem om byna xin die aspekverhouding te verander. Byvoorbeeld, .ratio-16by9is nou .ratio-16x9.
    • Ons het die .embed-responsive-itemen elementgroepkieser laat vaar ten gunste van 'n eenvoudiger .ratio > *keurder. Nie meer klas is nodig nie, en die verhouding helper werk nou met enige HTML element.
    • Die $embed-responsive-aspect-ratiosSass-kaart is hernoem na $aspect-ratiosen sy waardes is vereenvoudig om die klasnaam en die persentasie as die key: valuepaar in te sluit.
    • CSS-veranderlikes word nou gegenereer en ingesluit vir elke waarde in die Sass-kaart. Verander die --bs-aspect-ratioveranderlike op die .ratioom enige pasgemaakte aspekverhouding te skep .

  • Breek "Skermleser"-klasse is nou "visueel versteekte" klasse .

    • Het die Sass-lêer verander van scss/helpers/_screenreaders.scssnascss/helpers/_visually-hidden.scss
    • Hernoem .sr-onlyen .sr-only-focusablena .visually-hiddenen.visually-hidden-focusable
    • Hernoem sr-only()en sr-only-focusable()meng na visually-hidden()en visually-hidden-focusable().

  • bootstrap-utilities.csssluit nou ook ons ​​helpers in. Helpers hoef nie meer in gepasmaakte geboue ingevoer te word nie.

JavaScript

  • Het jQuery-afhanklikheid laat val en inproppe herskryf om in gewone JavaScript te wees.

  • BreekData-kenmerke vir alle JavaScript-inproppe is nou naamspasiëring om te help om Bootstrap-funksionaliteit van derde partye en jou eie kode te onderskei. Byvoorbeeld, ons gebruik data-bs-togglein plaas van data-toggle.

  • Alle inproppe kan nou 'n CSS-kieser as die eerste argument aanvaar. Jy kan óf 'n DOM-element óf enige geldige CSS-kieser deurgee om 'n nuwe instansie van die inprop te skep:

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

  • popperConfigkan deurgegee word as 'n funksie wat die Bootstrap se verstek Popper-konfigurasie as 'n argument aanvaar, sodat jy hierdie verstekkonfigurasie op jou manier kan saamvoeg. Van toepassing op aftreklys, popovers en gereedskapwenke.

  • Die verstekwaarde vir die fallbackPlacementsword verander na ['top', 'right', 'bottom', 'left']vir beter plasing van Popper-elemente. Van toepassing op aftreklys, popovers en gereedskapwenke.

  • Verwyder onderstreep van publieke statiese metodes soos _getInstance()→ getInstance().