Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Üleminek versioonile 5

Jälgige ja vaadake üle Bootstrapi lähtefailide, dokumentatsiooni ja komponentide muudatused, mis aitavad teil versioonilt 4 versioonile 5 üle minna.

Sellel lehel

Sõltuvused

  • jQuery tühistati.
  • Popper v1.x uuendatud versioonile Popper v2.x.
  • Asendasime Libsassi Dart Sassiga, kuna meie Libsassi Sassi kompilaator oli aegunud.
  • Migreeriti Jekyllist meie dokumentatsiooni koostamiseks Hugole

Brauseri tugi

  • Internet Explorer 10 ja 11 tühistati
  • Loobunud Microsoft Edge < 16 (Legacy Edge)
  • Eemaldatud Firefox < 60
  • Välja kukkunud Safari < 12
  • Loobunud iOS Safari < 12
  • Langenud Chrome < 60

Muudatused dokumentides

  • Uuendatud avaleht, dokumentide paigutus ja jalus.
  • Lisatud uus pakijuhend .
  • Lisati uus jaotis Kohanda , mis asendab v4 teemalehe , uute üksikasjadega Sassi, globaalsete konfiguratsioonivalikute, värviskeemide, CSS-i muutujate ja muu kohta.
  • Kogu vormidokumentatsioon korraldati ümber uueks jaotiseks Vormid , jagades sisu rohkem keskendunud lehtedeks.
  • Samamoodi värskendati jaotist Paigutus , et täpsustada ruudustiku sisu.
  • Komponentide leht "Navs" nimetati ümber "Navs & Tabs".
  • Leht "Tšekid" nimetati ümber "Tšekid ja raadiod".
  • Kujundasime navigeerimisriba ümber ja lisasime uue alamnavigaatori, et hõlbustada meie saitide ja dokumentide versioonide liikumist.
  • Otsinguvälja jaoks on lisatud uus kiirklahv: Ctrl + /.

Sass

  • Liigsete väärtuste eemaldamise hõlbustamiseks oleme loobunud vaikimisi Sassi kaardiühenditest. Pidage meeles, et nüüd peate Sassi kaartidel määratlema kõik väärtused, näiteks $theme-colors. Vaadake, kuidas Sassi kaartidega hakkama saada .

  • Puruneminecolor-yiq()Funktsioon ja sellega seotud muutujad on ümber nimetatud, color-contrast()kuna see pole enam YIQ värviruumiga seotud . Vt #30168.

    • $yiq-contrasted-thresholdon ümber nimetatud $min-contrast-ratio.
    • $yiq-text-darkja $yiq-text-lighton vastavalt ümber nimetatud $color-contrast-darkja $color-contrast-light.

  • PurunemineMeediumipäringu mixinsi parameetrid on loogilisema lähenemise huvides muutunud.

    • media-breakpoint-down()kasutab murdepunkti ennast järgmise murdepunkti asemel (nt sihtmärkide media-breakpoint-down(lg)asemel, mis on väiksemad kui ).media-breakpoint-down(md)lg
    • Sarnaselt kasutab ka teine ​​parameeter media-breakpoint-between()järgmise murdepunkti asemel katkestuspunkti ennast (nt ja vahel olevate sihtmärkide vaateavade media-between(sm, lg)asemel ).media-breakpoint-between(sm, md)smlg

  • PurunemineEemaldatud prindistiilid ja $enable-print-stylesmuutuja. Trükiväljapaneku klassid on endiselt olemas. Vt #28339 .

  • PurunemineKukkunud color(), theme-color()ja gray()funktsioonid muutujate kasuks. Vt #29083 .

  • Puruneminetheme-color-level()Funktsioon nimetati ümber color-level()ja aktsepteerib nüüd ainult värvide asemel kõiki soovitud $theme-colorvärve. Vt #29083 Ettevaatust: color-level() see langes hiljem välja v5.0.0-alpha3.

  • PurunemineÜmbernimetatud $enable-prefers-reduced-motion-media-queryja -ks $enable-pointer-cursor-for-buttonsja lühiduse mõttes.$enable-reduced-motion$enable-button-pointers

  • PurunemineSegu eemaldati bg-gradient-variant(). Kasutage .bg-gradientklassi, et lisada elementidele loodud .bg-gradient-*klasside asemel gradiente.

  • Purunemine Eemaldatud varem aegunud segud:

    • hover, hover-focus, plain-hover-focus, jahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(jätsin välja ka seotud kasuliku klassi, .text-hide)
    • visibility()
    • form-control-focus()

  • Puruneminescale-color()Funktsioon on ümber nimetatud, shift-color()et vältida kokkupõrget Sassi enda värvi skaleerimise funktsiooniga.

  • box-shadowmixins lubab nüüd nullväärtusi ja langeb nonemitmest argumendist. Vt #30394 .

  • Miksinil border-radius()on nüüd vaikeväärtus.

Värvisüsteem

  • Värvisüsteem, mis töötas color-level()ja $theme-color-intervaleemaldati uue värvisüsteemi kasuks. Kõik meie koodibaasi funktsioonid lighten()ja darken()funktsioonid on asendatud tint-color()ja shade-color(). Need funktsioonid segavad värvi valge või mustaga, selle asemel et muuta selle heledust kindla summa võrra. Kas shift-color()toonib või varjutab värvi sõltuvalt sellest, kas selle kaaluparameeter on positiivne või negatiivne. Lisateabe saamiseks vaadake #30622 .

  • Lisatud uued toonid ja toonid iga värvi jaoks, pakkudes igale põhivärvile üheksa eraldi värvi uute Sassi muutujatena.

  • Täiustatud värvikontrast. Värvide kontrastsuse suhe 3:1 kuni 4,5:1 ning värskendatud sinine, roheline, tsüaan ja roosa värv, et tagada WCAG 2.1 AA kontrastsus. Muutis ka meie värvi kontrasti värvi $gray-900väärtusest $black.

  • Meie värvisüsteemi toetamiseks oleme lisanud uusi kohandatud funktsioone tint-color()ja shade-color()funktsioone, et värve sobivalt segada.

Võrguvärskendused

  • Uus murdepunkt! Lisatud uus xxlkatkestuspunkt 1400pxja üles. Muudes murdepunktides muudatusi ei tehta.

  • Täiustatud vihmaveerennid. Vihmaveerennid on nüüd seatud remsesse ja on kitsamad kui v4 ( 1.5rem, või umbes 24px, allapoole 30px). See joondab meie võrgusüsteemi vihmaveerennid meie vahekauguse utiliitidega.

    • Lisatud uus rennide klass ( .g-*, .gx-*, ja .gy-*) horisontaalsete/vertikaalsete rennide, horisontaalsete ja vertikaalsete vihmaveerennide juhtimiseks.
    • PurunemineNimetatud ümber .no-gutters, et .g-0see sobiks uute vihmaveerennide kommunaalteenustega.

  • Veerud ei ole enam rakendunud, seega peate võib-olla selle käitumise taastamiseks mõnda elementi position: relativelisama ..position-relative

  • PurunemineLoobunud mitmest .order-*klassist, mis sageli jäid kasutamata. Nüüd pakume ainult .order-1karbist .order-5välja.

  • PurunemineKomponent loobus, .mediakuna seda saab utiliitidega hõlpsasti kopeerida. Vaadake näidet #28265 ja paindlike utiliitide lehte .

  • Purunemine bootstrap-grid.cssbox-sizing: border-boxkehtib nüüd globaalse kasti suuruse lähtestamise asemel ainult veerule. Nii saab meie ruudustiku stiile segamatult kasutada rohkemates kohtades.

  • $enable-grid-classesei keela enam konteineriklasside genereerimist. Vt #29146.

  • Värskendati make-colmiksin vaikimisi võrdseteks veergudeks ilma määratud suuruseta.

Sisu, taaskäivitamine jne

  • RFS on nüüd vaikimisi lubatud. Pealkirjad, mis kasutavadfont-size()mixini, kohandavad omafont-sizemastaapi koos vaateavaga automaatselt. See funktsioon oli varem versiooniga 4 lubatud.

  • PurunemineUuendasime oma kuva tüpograafiat, et asendada meie $display-*muutujad ja $display-font-sizesSassi kaart. Samuti eemaldati üksikud $display-*-weightmuutujad ühe $display-font-weightja kohandatud font-sizes jaoks.

  • Lisati kaks uut .display-*pealkirja suurust .display-5ja .display-6.

  • Lingid on vaikimisi alla kriipsutatud (mitte ainult hõljutades), välja arvatud juhul, kui need on osa konkreetsetest komponentidest.

  • Uuesti kujundatud tabelid nende stiilide värskendamiseks ja CSS-i muutujatega ümberehitamiseks, et stiili üle paremini kontrollida.

  • PuruneminePesastatud tabelid ei päri enam stiile.

  • Purunemine .thead-lightja .thead-darkjäetakse kõrvale variantklasside kasuks, .table-*mida saab kasutada kõigi tabelielementide jaoks ( thead, tbody, tfoot, tr, thja td).

  • PurunemineMiksin table-row-variant()nimetatakse ümber table-variant()ja aktsepteerib ainult 2 parameetrit: $color(värvinimi) ja $value(värvikood). Äärise värv ja aktsentvärvid arvutatakse automaatselt tabeliteguri muutujate põhjal.

  • Jagage tabeli lahtrite täitemuutujad jagamiseks -y.-x

  • PurunemineLanges .pre-scrollableklass. Vt #29135

  • Purunemine .text-*utiliidid ei lisa linkidele enam hõljumise ja fookuse olekuid. .link-*selle asemel saab kasutada abistavaid klasse. Vt #29267

  • PurunemineLanges .text-justifyklass. Vt #29793

  • Lähtesta vaikehorisontaalne padding-leftja elemendid brauseri vaikeväärtusest <ul>väärtusele .<ol>40px2rem

  • Lisatud $enable-smooth-scroll, mis kehtib kogu maailmas, välja arvatud kasutajatele, kes soovivad meediumipäringu scroll-behavior: smoothkaudu liikumist vähendada . Vt #31877prefers-reduced-motion

RTL

  • Horisontaalse suuna spetsiifilised muutujad, utiliidid ja mikserid on kõik ümber nimetatud, et kasutada loogilisi omadusi, nagu need, mida leidub flexboxi paigutustes, nt startja endasemel left.right

Vormid

  • Lisatud uued ujuvad vormid! Oleme viinud ujuvate siltide näite täielikult toetatud vormikomponentideks. Vaadake uut ujuvate siltide lehte.

  • Purunemine Konsolideeritud oma- ja kohandatud vormielemendid. Märkeruudud, raadiod, valikud ja muud sisendid, millel olid v4-s algklassid ja kohandatud klassid, on konsolideeritud. Nüüd on peaaegu kõik meie vormielemendid täielikult kohandatud, enamik ilma kohandatud HTML-i kasutamata.

    • .custom-checkon praegu .form-check.
    • .custom-check.custom-switchon praegu .form-check.form-switch.
    • .custom-selecton praegu .form-select.
    • .custom-fileja .form-fileneed on asendatud kohandatud stiilidega peal .form-control.
    • .custom-rangeon praegu .form-range.
    • Langenud native .form-control-fileja .form-control-range.

  • PurunemineLanges .input-group-appendja .input-group-prepend. Nüüd saate lihtsalt lisada nuppe ja .input-group-textsisestusrühmade otseste alamrühmadena.

  • Valideerimise tagasiside veaga sisendrühma pikaajaline puuduva piiri raadius parandatakse lõpuks, lisades valideerimisega sisendrühmadele täiendava .has-validationklassi.

  • Purunemine Loobunud meie ruudustikusüsteemi vormipõhised paigutusklassid. Kasutage meie võrku ja utiliite .form-group, .form-row, või asemel .form-inline.

  • PurunemineVormisildid nõuavad nüüd .form-label.

  • Purunemine .form-textei määra enam display, mis võimaldab teil vastavalt HTML-i elementi muutes luua või blokeerida abiteksti.

  • Valideerimisikoone ei rakendata enam <select>s-ile koos multiple.

  • Ümberkorraldatud allika Sass-failid all scss/forms/, sealhulgas sisendrühmade stiilid.

Komponendid

  • Meie muutujal põhinevad ühtsed paddingväärtused hoiatuste, teeradade, kaartide, rippmenüüde, loendirühmade, modaalide, hüpikaknade ja kohtspikrite jaoks . Vt #30564 .$spacer

Akordion

Märguanded

  • Märguannetel on nüüd ikoonidega näited .

  • Igast märguandest eemaldati s-i kohandatud stiilid, <hr>kuna need juba kasutavad currentColor.

Märgid

  • PurunemineLoobuti kõigist taustautiliitide .badge-*värviklassidest (nt kasutage utiliiti .bg-primaryasemel .badge-primary).

  • PurunemineLoobutud .badge-pill— kasutage .rounded-pillselle asemel utiliiti.

  • Purunemine<a>Elementide ja elementide hõljutus- ja fookusstiilid on eemaldatud <button>.

  • Suurenenud vaiketähistus märkide jaoks vahemikus .25em/ .5emkuni .35em/ .65em.

  • Lihtsustas riivsaia vaikeilmet, eemaldades padding, background-colorja border-radius.

  • Lisatud uus CSS-i kohandatud atribuut --bs-breadcrumb-divider, et saaks hõlpsasti kohandada ilma CSS-i uuesti kompileerimata.

Nupud

  • Purunemine Märkeruutude või raadiotega lülitusnupud ei vaja enam JavaScripti ja neil on uus märgistus. Me ei nõua enam ümbriselementi, lisame.btn-checksellesse<input>ja sidume selle mis tahes.btnklassiga<label>. Vt #30650 . Selle dokumendid on kolinud meie nuppude lehelt uude jaotisesse Vormid.

  • Purunemine Kommunaalteenuste .btn-blockeest langenud. Selle asemel, et kasutada .btn-blocknuppu .btn, mähkige nupud .d-gridja .gap-*utiliidiga, et neid vastavalt vajadusele paigutada. Lülituge tundlikele klassidele, et neid veelgi paremini kontrollida. Mõned näited leiate dokumentidest.

  • Täiendavate parameetrite toetamiseks värskendati meie button-variant()ja miksine.button-outline-variant()

  • Uuendatud nupud, et tagada suurem kontrast hõljutus- ja aktiivses olekus.

  • Keelatud nuppudel on nüüd pointer-events: none;.

Kaart

  • PurunemineLanges .card-deckmeie ruudustiku kasuks. Pakkige oma kaardid veeruklassidesse ja lisage .row-cols-*kaardipakkide taasloomiseks emakonteiner (kuid paremini kontrolli all reageeriva joondamise üle).

  • PurunemineLanges .card-columnsmüüritise kasuks. Vt #28922 .

  • PuruneminePõhiline .cardakordion asendati uue Akordioni komponendiga .

  • Lisatud uus .carousel-darkvariant tumeda teksti, juhtnuppude ja indikaatorite jaoks (sobib suurepäraselt heledama tausta jaoks).

  • Asendati karusselli juhtnuppude nööriikoonid Bootstrap Iconsi uute SVG-dega .

Sulgemisnupp

  • PurunemineNimetati ümber .closevähem .btn-closeüldiseks nimeks.

  • Sulgemisnupud kasutavad nüüd background-image(manustatud SVG-d) HTML-is a asemel &times;, mis võimaldab hõlpsamini kohandada ilma, et peaksite märgistust puudutama.

  • Lisatud on uus .btn-close-whitevariant, mis filter: invert(1)võimaldab suurema kontrastiga ikoonid tumedamal taustal eemaldada.

Ahenda

  • Eemaldatud akordionide kerimisankurdus.

  • Lisatud uus .dropdown-menu-darkvariant ja seotud muutujad nõudmisel tumedate rippmenüüde jaoks.

  • Lisati uus muutuja jaoks $dropdown-padding-x.

  • Kontrastsuse parandamiseks muutis rippmenüü jaguri tumedamaks.

  • PurunemineKõik rippmenüü sündmused käivitatakse nüüd rippmenüü lülitusnupul ja seejärel kuvatakse ülemelemendini.

  • Rippmenüüdes on nüüd määratud data-bs-popper="static"atribuut, kui rippmenüü asukoht on staatiline ja data-bs-popper="none"kui rippmenüü on navigeerimisribal. Selle lisab meie JavaScript ja see aitab meil kasutada kohandatud positsioonistiile Popperi positsioneerimist segamata.

  • PurunemineLoobutud flipvalik rippmenüü pistikprogrammist Popperi konfiguratsiooni kasuks. Nüüd saate ümberpööramise keelata, edastades ümberpööramise modifikaatoris suvandi fallbackPlacementsjaoks tühja massiivi.

  • Rippmenüüd saab nüüd klõpsata koos uue autoClosevalikuga automaatse sulgemise käitumise käsitlemiseks . Selle valiku abil saate nõustuda klõpsuga rippmenüü sees või väljaspool, et muuta see interaktiivseks.

  • Rippmenüüd toetavad nüüd .dropdown-items-i mähitud <li>s-i.

Jumbotron

Nimekirja rühm

  • Lisati klassi jaoks uued nullmuutujad font-size, font-weight, colorja :hover colorjaoks ..nav-link
  • PurunemineNavibarid nõuavad nüüd konteinerit (vahenõuete ja CSS-i oluliseks lihtsustamiseks).

Offcanvas

Leheküljed

  • Leheküljelingid on nüüd kohandatavad margin-left, mis ümardatakse üksteisest eraldatuna kõigist nurkadest dünaamiliselt.

  • transitionLehekülgede linkidele lisatud s.

Popovers

  • PurunemineMeie vaikimisi hüpikakna mallis on ümber .arrownimetatud ..popover-arrow

  • whiteListValik nimetati ümber allowList.

Spinnerid

  • Spinnerid austavad nüüd prefers-reduced-motion: reduceanimatsioone aeglustades. Vt #31882 .

  • Täiustatud spinneri vertikaalne joondamine.

Röstsaid

  • Röstsaid saab nüüd positsioneerimisutiliitide.toast-container abil a -sse paigutada .

  • Röstsaia vaikekestuseks määrati 5 sekundit.

  • Eemaldatud overflow: hiddenröstsaiadest ja asendatud õigete funktsioonidega border-radiuss-ga calc().

Tööriistanõuanded

  • PurunemineMeie kohtspikri vaikemallis on ümber .arrownimetatud ..tooltip-arrow

  • PurunemineVaikeväärtuseks fallbackPlacementsmuudetakse ['top', 'right', 'bottom', 'left']hüpikelementide paremaks paigutamiseks.

  • PuruneminewhiteListValik nimetati ümber allowList.

Kommunaalteenused

  • PurunemineNimetas mitu utiliiti ümber, et kasutada suunanimede asemel loogilisi atribuutide nimesid, lisades RTL-i toe:

    • Nimetati ümber .left-*ja .right-*nimeks .start-*ja .end-*.
    • Nimetati ümber .float-leftja .float-rightnimeks .float-startja .float-end.
    • Nimetati ümber .border-leftja .border-rightnimeks .border-startja .border-end.
    • Nimetati ümber .rounded-leftja .rounded-rightnimeks .rounded-startja .rounded-end.
    • Nimetati ümber .ml-*ja .mr-*nimeks .ms-*ja .me-*.
    • Nimetati ümber .pl-*ja .pr-*nimeks .ps-*ja .pe-*.
    • Nimetati ümber .text-leftja .text-rightnimeks .text-startja .text-end.

  • PurunemineVaikimisi on negatiivsed veerised keelatud.

  • Lisatud on uus .bg-bodyklass, mis võimaldab kiirelt seadistada <body>tausta lisaelementidele.

  • Lisatud uued positsiooniutiliidid , top, rightja bottomjaoks left. Iga atribuudi väärtuste hulka kuuluvad 0, 50%ja 100%.

  • Lisatud uued .translate-middle-xja .translate-middle-yutiliidid absoluutsete/fikseeritud positsioneeritud elementide horisontaalseks või vertikaalseks tsentreerimiseks.

  • Lisatud uued border-widthkommunaalteenused .

  • PurunemineÜmber .text-monospacenimetatud nimeks .font-monospace.

  • PurunemineEemaldatud .text-hide, kuna see on vananenud meetod teksti peitmiseks, mida enam kasutada ei tohiks.

  • Lisatud .fs-*utiliidid kommunaalteenuste jaoks font-size(kui RFS on lubatud). Need kasutavad sama skaalat nagu HTML-i vaikepealkirjad (1–6, suured kuni väikesed) ja neid saab muuta Sassi kaardi kaudu.

  • PurunemineLühiduse ja järjepidevuse huvides .font-weight-*on utiliidid ümber nimetatud..fw-*

  • PurunemineLühiduse ja järjepidevuse huvides .font-style-*on utiliidid ümber nimetatud..fst-*

  • Lisatud .d-gridkuvamiseks utiliitidele ja uutele gaputiliitidele ( .gap) CSS Gridi ja flexboxi paigutuste jaoks.

  • PurunemineEemaldatud .rounded-smja rounded-lgning kasutusele võetud uus klasside .rounded-0skaala .rounded-3. Vt #31687 .

  • Lisatud uued line-heightutiliidid: .lh-1, .lh-sm, .lh-baseja .lh-lg. Vaata siit .

  • Teisaldasime .d-noneutiliidi meie CSS-is, et anda sellele muude kuvamisutiliitide ees rohkem kaalu.

  • Laiendas .visually-hidden-focusableabimeest ka konteineritega töötamiseks, kasutades :focus-within.

Abilised

  • Purunemine Reageerivad manustamisabistajad on ümber nimetatud uute klassinimede ja täiustatud käitumisega suhteabilisteks ning abistava CSS-i muutujaga.

    • Klassid on ümber nimetatud, et muuta bykuvasuhteks x. Näiteks .ratio-16by9on praegu .ratio-16x9.
    • Loobusime .embed-responsive-itemelemendirühma valijast ja lihtsama .ratio > *valija kasuks. Rohkem klassi pole vaja ja suhteabimees töötab nüüd mis tahes HTML-i elemendiga.
    • $embed-responsive-aspect-ratiosSassi kaart on ümber nimetatud ja $aspect-ratiosselle väärtusi on lihtsustatud, et lisada key: valuepaarina klassi nimi ja protsent.
    • Nüüd luuakse ja kaasatakse Sassi kaardi iga väärtuse jaoks CSS-muutujad. Kohandatud kuvasuhte loomiseks muutke --bs-aspect-ratiomuutujat ..ratio

  • Purunemine Ekraanilugeja klassid on nüüd visuaalselt peidetud klassid .

    • Sassi faili muudeti scss/helpers/_screenreaders.scssväärtusest failiksscss/helpers/_visually-hidden.scss
    • Nimetati ümber .sr-onlyja ja.sr-only-focusable.visually-hidden.visually-hidden-focusable
    • Ümbernimetatud sr-only()ja sr-only-focusable()miksimine on visually-hidden()ja visually-hidden-focusable().

  • bootstrap-utilities.csshõlmab nüüd ka meie abilisi. Abistajaid ei pea enam kohandatud järgudesse importima.

JavaScript

  • Loobunud jQuery sõltuvusest ja kirjutanud pistikprogrammid ümber, et need oleksid tavalises JavaScriptis.

  • PurunemineKõikide JavaScripti pistikprogrammide andmeatribuudid on nüüd nimeruumis, et eristada Bootstrapi funktsioone kolmandatest osapooltest ja teie enda koodist. Näiteks kasutame data-bs-toggleasemel data-toggle.

  • Kõik pistikprogrammid saavad nüüd esimese argumendina aktsepteerida CSS-i valijat. Plugina uue eksemplari loomiseks saate edastada DOM-i elemendi või mis tahes kehtiva CSS-i valija:

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

  • popperConfigsaab edastada funktsioonina, mis aktsepteerib argumendina Bootstrapi Popperi vaikekonfiguratsiooni, nii et saate selle vaikekonfiguratsiooni omal moel liita. Kehtib rippmenüüde, hüpikaknate ja kohtspikrite puhul.

  • Popperi elementide paremaks paigutamiseks fallbackPlacementsmuudetakse vaikeväärtuseks . Kehtib rippmenüüde, hüpikaknate ja kohtspikrite puhul.['top', 'right', 'bottom', 'left']

  • _getInstance()Avalikelt staatilistelt meetoditelt, nagu → , on alakriips eemaldatud getInstance().