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

  • Breek <hr>elemente gebruik nou in heightplaas van borderom die sizekenmerk beter te ondersteun. Dit maak dit ook moontlik om opvullingshulpmiddels te gebruik om dikker verdelers te skep (bv. <hr class="py-1">).

  • 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.

Tooltips

  • Breaking Renamed .arrow to .tooltip-arrow in our default tooltip template.

  • Breaking The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of popper elements.

  • Breaking Renamed whiteList option to allowList.

Utilities

  • Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:

    • Renamed .left-* and .right-* to .start-* and .end-*.
    • Renamed .float-left and .float-right to .float-start and .float-end.
    • Renamed .border-left and .border-right to .border-start and .border-end.
    • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
    • Renamed .ml-* and .mr-* to .ms-* and .me-*.
    • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
    • Renamed .text-left and .text-right to .text-start and .text-end.

  • Breaking Disabled negative margins by default.

  • Added new .bg-body class for quickly setting the <body>’s background to additional elements.

  • Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.

  • Added new .translate-middle-x & .translate-middle-y utilities to horizontally or vertically center absolute/fixed positioned elements.

  • Added new border-width utilities.

  • Breaking Renamed .text-monospace to .font-monospace.

  • Breaking Removed .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore.

  • Added .fs-* utilities for font-size utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.

  • Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.

  • Breaking Renamed .font-style-* utilities as .fst-* for brevity and consistency.

  • Added .d-grid to display utilities and new gap utilities (.gap) for CSS Grid and flexbox layouts.

  • Breaking Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.

  • Added new line-height utilities: .lh-1, .lh-sm, .lh-base and .lh-lg. See here.

  • Moved the .d-none utility in our CSS to give it more weight over other display utilities.

  • Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

  • Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.

    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.

  • Breaking “Screen reader” classes are now “visually hidden” classes.

    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

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

  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Removed underscore from public static methods like _getInstance() → getInstance().