Üleminek versioonile 4

Bootstrap 4 on kogu projekti oluline ümberkirjutamine. Allpool on kokku võetud kõige olulisemad muudatused, millele järgnevad asjakohaste komponentide täpsemad muudatused.

Stabiilsed muutused

Liikudes beetaversioonilt 3 meie stabiilsele versioonile 4.0, ei ole murrangulisi muudatusi, kuid on mõned märkimisväärsed muudatused.

Trükkimine

• Parandatud katkised printimisutiliidid. Varem .d-print-*tühistas klassi kasutamine ootamatult kõik teised .d-*klassid. Nüüd vastavad need meie teistele kuvamisutiliitidele ja kehtivad ainult sellele meediumile ( @media print).

• Laiendatud saadaolevad prindikuvamise utiliidid, et need sobiksid teiste utiliitidega. Beta 3 ja vanematel versioonidel olid ainult block, inline-block, inlineja none. Stabiilne v4 lisati flex, inline-flex, table, table-row, ja table-cell.

• Parandatud prindi eelvaate renderdamine kõigis brauserites uute prindistiilidega, mis määravad @page size.

Beeta 3 muudatused

Kuigi Beta 2 nägi beetafaasis suuremat osa meie murrangulistest muudatustest, on meil siiski mõned, mida tuli Beta 3 versioonis käsitleda. Need muudatused kehtivad, kui värskendate Beta 2-st või mis tahes vanemast Bootstrapi versioonist Beta 3-le.

Mitmesugust

• Eemaldas kasutamata $thumbnail-transitionmuutuja. Me ei viinud midagi üle, nii et see oli lihtsalt lisakood.
• Pakett npm ei sisalda enam muid faile peale meie lähte- ja dist-failide; kui tuginesite neile ja käitasite meie skripte node_moduleskausta kaudu, peaksite oma töövoogu kohandama.

Vormid

• Kirjutas ümber nii kohandatud kui ka vaikimisi märkeruudud ja raadiod. Nüüd on mõlemal sobiv HTML-struktuur (välimine <div>koos sibling <input>ja <label>) ja samad paigutusstiilid (virnastatud vaikimisi, koos modifikaatoriklassiga). See võimaldab meil kujundada sildi stiili sisendi oleku alusel, lihtsustades disabledatribuudi tuge (varem nõudis ülemklassi) ja toetades paremini meie vormi valideerimist.

  Selle osana oleme muutnud CSS-i mitme background-images-i haldamiseks kohandatud vormide märkeruutudes ja raadiotes. Varem oli nüüd eemaldatud .custom-control-indicatorelemendil taustavärv, gradient ja SVG-ikoon. Taustagradiendi kohandamine tähendas kõigi nende asendamist iga kord, kui oli vaja ainult ühte muuta. Nüüd on meil .custom-control-label::beforetäidis ja gradient ning .custom-control-label::afterikooni käepidemed.

  Kohandatud tšeki tekstisiseseks tegemiseks lisage .custom-control-inline.

• Uuendatud sisendipõhiste nupurühmade valija. Stiili ja käitumise asemel [data-toggle="buttons"] { }kasutame dataatribuuti ainult JS-i käitumise jaoks ja tugineme stiilimisel uuele .btn-group-toggleklassile.

• Eemaldatud .col-form-legendveidi täiustatud kasuks .col-form-label. Sel viisil .col-form-label-smja .col-form-label-lgseda saab hõlpsasti kasutada <legend>elementidel.

• Kohandatud failisisendid said oma $custom-file-textSassi muutuja muudatuse. See ei ole enam pesastatud Sassi kaart ja toidab nüüd ainult ühte stringi – see Browsenupp on nüüd ainus meie Sassist loodud pseudoelement. Tekst Choose filepärineb nüüd saidilt .custom-file-label.

Sisestusrühmad

• Sisestusrühma lisandmoodulid on nüüd spetsiifilised nende paigutuse suhtes sisendi suhtes. Oleme loobunud kahest uuest klassist .input-group-addonja . Peate nüüd selgesõnaliselt kasutama lisamist või eesliidet, mis lihtsustab suurt osa meie CSS-ist. Paigutage oma nupud lisamise või eesliidese sisse nii, nagu need oleksid kõikjal mujal, kuid mähkige tekst ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• Nüüd toetatakse valideerimisstiile, nagu ka mitut sisendit (kuigi saate kinnitada ainult ühe sisendi rühma kohta).

• Suurusklassid peavad asuma vanemal, .input-groupmitte üksikutel vormielementidel.

Beeta 2 muudatused

Beetaversioonis olemise ajal püüame vältida murrangulisi muudatusi. Alati ei lähe aga asjad plaanipäraselt. Allpool on toodud murrangulised muudatused, mida beeta 1-lt beetaversioonilt 2-le üleminekul meeles pidada.

Purunemine

• $badge-colorMuutuja ja selle kasutamine on eemaldatud .badge. Kasutame värvikontrastsuse funktsiooni, et valida , mis colorpõhineb background-color, nii et muutuja pole vajalik.
• grayscale()Funktsioon nimetati ümber , gray()et vältida konflikti katkestamist CSS-i algfiltriga grayscale.
• Ümbernimetatud .table-inverse, .thead-inverse, ja .thead-defaultnimeks .*-darkja .*-light, sobitades meie mujal kasutatud värviskeemidega.
• Kohustuslikud tabelid loovad nüüd klassid iga ruudustiku katkestuspunkti jaoks. See erineb beetaversioonist 1, kuna .table-responsiveteie kasutatud on pigem .table-responsive-md. Nüüd saate kasutada .table-responsivevõi .table-responsive-{sm,md,lg,xl}vastavalt vajadusele.
• Boweri tugi on tühistatud, kuna paketihaldur on alternatiivide jaoks (nt lõng või npm) aegunud. Vaadake üksikasju bower/bower#2298 .
• Bootstrap vajab endiselt versiooni jQuery 1.9.1 või uuemat, kuid teil on soovitatav kasutada versiooni 3.x, kuna Bootstrap toetab v3.x-i toetatud brausereid ja v3.x-l on mõned turvaparandused.
• .form-control-labelKasutamata klass eemaldati . Kui kasutasite seda klassi, oli see klassi duplikaat, .col-form-labelmis tsentreeris vertikaalselt a <label>ja sellega seotud sisendi horisontaalsetes vormipaigutustes.
• Muudeti color-yiqatribuuti sisaldavast mixinist colorfunktsiooniks, mis tagastab väärtuse, võimaldades teil seda kasutada mis tahes CSS-i atribuudi jaoks. Näiteks selle asemel color-yiq(#000), et kirjutada color: color-yiq(#000);.

Esiletõstmised

• Modaalides tutvustati uut pointer-eventskasutusviisi. Välimine .modal-dialogläbib sündmusi pointer-events: nonekohandatud klikkide käsitlemiseks (mis võimaldab lihtsalt kuulata mis .modal-backdroptahes klikke) ja seejärel neutraliseerib selle tegelike klõpsude .modal-contentjaoks pointer-events: auto.

Kokkuvõte

Siin on peamised piletitooted, mida peaksite v3-lt v4-le üleminekul teadma.

Brauseri tugi

• Loobunud IE8, IE9 ja iOS 6 tugi. v4 on nüüd ainult IE10+ ja iOS 7+. Saitide jaoks, mis vajavad üht neist, kasutage versiooni v3.
• Lisatud on ametlik tugi Android v5.0 Lollipopi brauserile ja WebView'le. Androidi brauseri ja WebView varasemaid versioone toetatakse ainult mitteametlikult.

Globaalsed muutused

• Flexbox on vaikimisi lubatud. Üldiselt tähendab see ujukidest eemaldumist ja rohkemat meie komponentide vahel.
• Meie lähte-CSS-failide jaoks lülitati Lessilt Sassile .
• Vahetati pxmeie rempeamiseks CSS-üksuseks, kuigi meediumipäringute ja ruudustiku käitumise jaoks kasutatakse endiselt piksleid, kuna tüübi suurus ei mõjuta seadme vaateporte.
• Ülemaailmset fondi suurust suurendati 14pxväärtuselt 16px.
• Uuendati ruudustiku tasemeid, et lisada viies valik (aadresseerida väiksemaid seadmeid, mis asuvad 576pxja allpool) ning eemaldati -xsnendest klassidest lisand. Näide: .col-6.col-sm-4.col-md-3.
• Asendati eraldi valikuline teema SCSS-i muutujate kaudu konfigureeritavate suvanditega (nt $enable-gradients: true).
• Ehitati süsteem ümber, et Grunti asemel kasutada npm-skripte. Vaadake package.jsonkõiki skripte või kohalike arenguvajaduste jaoks meie projekti readme.
• Bootstrapi mittereageerivat kasutamist enam ei toetata.
• Loobunud võrgukohandajast, eelistades ulatuslikumat häälestusdokumentatsiooni ja kohandatud järge.
• Lisati kümneid uusi utiliidiklasse tavaliste CSS-i atribuut-väärtuste paaride ja veerise/täidise vahe otseteede jaoks.

Võrgusüsteem

• Kolis flexboxi.
  • Lisatud flexboxi tugi ruudustiku mikserites ja eelmääratletud klassides.
  • Flexboxi osana sisaldab tuge vertikaalsete ja horisontaalsete joondusklasside jaoks.
• Värskendatud ruudustiku klasside nimed ja uus ruudustiku tase.
  • Põhjalikumaks juhtimiseks lisati alla uus smruudustiku tase . 768pxMeil on nüüd xs, sm, md, lgja xl. See tähendab ka seda, et iga tasand on ühe taseme võrra üles tõstetud (nii .col-md-6et versioonis v3 on nüüd .col-lg-6versioonis 4).
  • xsruudustiku klasse on muudetud nii, et need ei nõua infiksit, et näidata täpsemalt, et nad alustavad stiilide rakendamist min-width: 0mitte määratud piksliväärtusest. Selle asemel on .col-xs-6see nüüd .col-6. Kõik teised ruudustiku tasemed nõuavad infiksit (nt sm).
• Värskendatud ruudustiku suurused, segud ja muutujad.
  • Võre rennidel on nüüd Sassi kaart, nii et saate igas katkestuspunktis määrata konkreetse renni laiuse.
  • Värskendatud ruudustiku segajad, et kasutada make-col-readyettevalmistavat segamist ja a -d make-col, et määrata flexja max-widthindividuaalse veeru suuruse määramiseks.
  • Ruudustikusüsteemi meediumipäringu murdepunkte ja konteineri laiusi muudeti, et võtta arvesse uut ruudustiku taset ja tagada, et veerud oleksid 12maksimaalse laiusega ühtlaselt jagatavad.
  • Ruudustiku murdepunkte ja konteineri laiusi käsitletakse nüüd Sassi kaartide ( $grid-breakpointsja $container-max-widths) kaudu, mitte käputäie eraldi muutujate asemel. Need asendavad @screen-*muutujad täielikult ja võimaldavad teil ruudustiku astmeid täielikult kohandada.
  • Muutunud on ka meediapäringud. Selle asemel, et korrata iga kord sama väärtusega meediumipäringu deklaratsioone, on meil nüüd @include media-breakpoint-up/down/only. @media (min-width: @screen-sm-min) { ... }Nüüd saate kirjutamise asemel kirjutada @include media-breakpoint-up(sm) { ... }.

Komponendid

• Loobutud paneelid, pisipildid ja süvendid uue kõikehõlmava komponendi, kaartide jaoks .
• Glyphiconsi ikooni font loobuti. Kui vajate ikoone, on järgmised valikud:
  • Glyphiconsi ülesvoolu versioon
  • Octicons
  • Font Suurepärane
  • Alternatiivide loendi leiate lehelt Laiendamine . Kas teil on täiendavaid soovitusi? Avage probleem või PR.
• Affix jQuery pistikprogrammist loobuti.
  • Soovitame position: stickyselle asemel kasutada. Üksikasjade ja konkreetsete polütäidete soovituste saamiseks vaadake HTML5-i sisestust . Üks soovitus on kasutada selle @supportsrakendamiseks reeglit (nt @supports (position: sticky) { ... })/
  • Kui kasutasite lisateavet täiendavate mittestiilide rakendamiseks, positionei pruugi polütäited teie kasutusjuhtu toetada. Üks võimalus sellisteks kasutusteks on kolmanda osapoole ScrollPos-Styleri teek.
• Loobusin piipari komponendist , kuna see oli sisuliselt veidi kohandatud nupud.
• Peaaegu kõik komponendid muudeti ümber, et kasutada liiga spetsiifiliste alamvalijate asemel rohkem pesastamata klassivalijaid.

Komponendi järgi

See loend tõstab esile peamised muudatused v3.xx ja v4.0.0 vahel komponentide kaupa.

Taaskäivitage

Bootstrap 4 uus on Reboot , uus laaditabel, mis põhineb Normalize'il ja meie endi pisut arvamuslike lähtestamisstiilidega. Selles failis olevad valijad kasutavad ainult elemente – siin pole klasse. See eraldab meie lähtestamisstiilid meie komponentstiilidest modulaarsema lähenemisviisi jaoks. Mõned kõige olulisemad lähtestused, mida see hõlmab, on paljude elementide box-sizing: border-boxmuudatused, üleminek emüksustele rem, lingilaadid ja paljud vormielementide lähtestused.

Tüpograafia

• .text-Kõik utiliidid teisaldati _utilities.scssfaili.
• Loobutakse .page-header, kuna kõiki selle stiile saab peale ääriste rakendada utiliitide kaudu.
• .dl-horizontalon maha lastud. Selle asemel kasutage .rowja <dl>kasutage ruudustiku veergude klasse (või mixine) selle <dt>ja <dd>laste puhul.
• Kohandatud <blockquote>stiil on kolinud klassidesse .blockquoteja .blockquote-reversemodifikaatorisse.
• .list-inlinenõuab nüüd, et selle alamloendi üksustele oleks rakendatud uus .list-inline-itemklass.

Pildid

• Ümber .img-responsivenimetatud nimeks .img-fluid.
• Ümbernimetatud .img-rounded_.rounded
• Ümbernimetatud .img-circle_.rounded-circle

Tabelid

• Peaaegu kõik >valija eksemplarid on eemaldatud, mis tähendab, et pesastatud tabelid pärivad nüüd automaatselt stiilid oma vanematelt. See lihtsustab oluliselt meie valijaid ja võimalikke kohandusi.
• Tundlikud tabelid ei vaja enam ümbriselementi. Selle asemel pange lihtsalt .table-responsiveparemale <table>.
• Järjepidevuse huvides on ümber .table-condensednimetatud .table-sm.
• Lisatud uus .table-inversevalik.
• Lisatud tabeli päise modifikaatorid: .thead-defaultja .thead-inverse.
• Kontekstiklassid nimetati ümber, et neil oleks .table--eesliide. Seega .active, .success, .warning, .dangerja .info, .table-active, .table-success, ja . .table-warning_.table-danger.table-info

Vormid

• Teisaldatud element lähtestatakse _reboot.scssfailile.
• Ümber .control-labelnimetatud nimeks .col-form-label.
• Nimetatud ümber .input-lgja .input-smvastavalt .form-control-lgja .form-control-sm.
• .form-group-*Lihtsuse huvides loobuti klassidest . Kasutage .form-control-*selle asemel kursusi kohe.
• Loobunud .help-blockja asendatud plokitaseme .form-textabitekstiga. Tekstisisese abiteksti ja muude paindlike valikute jaoks kasutage utiliidiklasse, nagu .text-muted.
• Langes .radio-inlineja .checkbox-inline.
• Konsolideeritud .checkboxja erinevatesse .radioklassidesse ..form-check.form-check-*
• Horisontaalsed vormid kapitaalremont:
  • Loobus klassinõudest .form-horizontal.
  • .form-groupei rakenda enam .rowvia mixinist pärit stiile, seega .rowon see nüüd vajalik horisontaalse ruudustiku paigutuse jaoks (nt <div class="form-group row">).
  • Lisati uus .col-form-labelklass s-iga vertikaalselt tsentreeritud siltidele .form-control.
  • Lisatud uus .form-rowkompaktsete vormipaigutuste jaoks koos ruudustikuklassidega (vahetage oma .rowa vastu .form-rowja minge).
• Lisatud kohandatud vormide tugi (märkeruutude, raadiote, valikute ja failisisendite jaoks).
• Klassid .has-error, .has-warning, ja asendati .has-successHTML5 vormi valideerimisega CSS-i :invalidja :validpseudoklasside kaudu.
• Ümber .form-control-staticnimetatud nimeks .form-control-plaintext.

Nupud

• Ümber .btn-defaultnimetatud nimeks .btn-secondary.
• Loobus .btn-xsklassist täielikult, kuna .btn-smsee on proportsionaalselt palju väiksem kui v3.
• jQuerybutton.js pistikprogrammi olekunupu funktsioon on välja jäetud . See hõlmab $().button(string)ja $().button('reset')meetodeid. Soovitame selle asemel kasutada väikest kohandatud JavaScripti, mille eeliseks on käitumine täpselt nii, nagu soovite.
  • Pange tähele, et pistikprogrammi muud funktsioonid (nuppude märkeruudud, nupuraadiod, ühe lülitiga nupud) on versioonis 4 säilinud.
• Muutke nupud olekuks [disabled]nagu :disabledIE9+ toetab :disabled. Siiski fieldset[disabled]on see endiselt vajalik, kuna keelatud väljade algtasemed on IE11-s endiselt vigased .

Nupurühm

• Komponent kirjutati flexboxiga ümber.
• Eemaldatud .btn-group-justified. Asendusena saate kasutada <div class="btn-group d-flex" role="group"></div>elementide ümber ümbrisena .w-100.
• Loobus .btn-group-xsklassist täielikult, kuna eemaldati .btn-xs.
• Eemaldatud selgesõnaline vahekaugus nupurühmade vahel nuppude tööriistaribadel; kasutage nüüd marginaali utiliite.
• Täiustatud dokumentatsioon kasutamiseks koos teiste komponentidega.

Rippmenüüd

• Lülitati kõigi komponentide, modifikaatorite jne vanemvalijatelt ainsuse klassidele.
• Lihtsustatud rippmenüü stiilid, et enam ei tarnitaks rippmenüü külge kinnitatud üles- või allapoole suunatud nooltega.
• Rippmenüüd saab luua <div>s või <ul>s abil kohe.
• <a>Ümberehitatud rippmenüü stiilid ja märgistus, et pakkuda <button>rippmenüü üksustele lihtsat sisseehitatud tuge .
• Ümber .dividernimetatud nimeks .dropdown-divider.
• Rippmenüü üksused nõuavad nüüd .dropdown-item.
• Rippmenüü lülitid ei vaja enam selgesõnalist <span class="caret"></span>; seda pakutakse nüüd automaatselt CSS-i kaudu ::afteraadressil .dropdown-toggle.

Võrgusüsteem

• Lisati uus 576pxruudustiku katkestuspunkt kujul sm, mis tähendab, et nüüd on kokku viis taset ( xs, sm, md, lgja xl).
• Lihtsamate ruudustikuklasside jaoks nimetati reageerivad ruudustiku modifikaatorite klassid ümber klassist .col-{breakpoint}-{modifier}-{size}klassiks ..{modifier}-{breakpoint}-{size}
• Uute flexbox-toitega orderklasside push ja pull modifikaatorite klassid on välja jäetud. Näiteks ja .col-8.push-4asemel .col-4.pull-8kasutaksite .col-8.order-2ja .col-4.order-1.
• Lisatud flexboxi utiliidiklassid võrgusüsteemi ja komponentide jaoks.

Loetlege rühmad

• Komponent kirjutati flexboxiga ümber.
• Asendati a.list-group-itemselgesõnalise klassiga .list-group-item-actionloendirühma üksuste linkide ja nuppude versioonide kujundamiseks.
• Lisatud .list-group-flushklass kasutamiseks kaartidega.

Modaalne

• Komponent kirjutati flexboxiga ümber.
• Flexboxi üleminekul on päises olevate loobumisikoonide joondus tõenäoliselt katki, kuna me ei kasuta enam ujuki. Ujuv sisu on esikohal, kuid flexboxi puhul see enam nii ei ole. Värskendage oma loobumisikoone, et need ilmuksid pärast parandatavate modaalpealkirju.
• Valik remote(mida sai kasutada välise sisu automaatseks laadimiseks ja sisestamiseks modaali) ja vastav loaded.bs.modalsündmus eemaldati. Soovitame selle asemel kasutada kliendipoolset malli või andmete sidumise raamistikku või helistada ise failile jQuery.load .

Navid

• Komponent kirjutati flexboxiga ümber.
• >Pesastamata klasside lihtsamaks kujundamiseks loobuti peaaegu kõigist valijatest.
• HTML-spetsiifiliste valijate, näiteks .nav > li > a, asemel kasutame .navs, .nav-items ja .nav-links jaoks eraldi klasse. See muudab teie HTML-i paindlikumaks, pakkudes samal ajal suuremat laiendatavust.

Navibar

Navigeerimisriba on flexboxis täielikult ümber kirjutatud, täiustatud joondamise, reageerimisvõime ja kohandamise toega.

• Tundlikku navigeerimisriba käitumist rakendatakse nüüd .navbarklassile kohustusliku valiku kaudu, kus .navbar-expand-{breakpoint} saate valida, kus navigeerimisriba ahendada. Varem oli see vähem muutuv modifikatsioon ja nõudis uuesti kompileerimist.
• .navbar-defaulton praegu .navbar-light, kuigi .navbar-darkjääb samaks. Üks neist on nõutav igal navigeerimisribal. Kuid need klassid ei määra enam background-colors; selle asemel mõjutavad need sisuliselt ainult color.
• Navbarid nõuavad nüüd mingisugust taustadeklaratsiooni. Valige meie taustautiliitide hulgast ( ) või määrake hulluks kohandamiseks.bg-* ülaltoodud valguse/pöördklasside abil oma .
• Arvestades flexboxi stiile, saavad navigeerimisribad nüüd kasutada flexboxi utiliite hõlpsaks joondusvalikuks.
• .navbar-toggleon nüüd .navbar-togglerja sellel on erinevad stiilid ja sisemine märgistus (mitte enam kolm <span>s).
• Lõpetas .navbar-formklassi täielikult. See pole enam vajalik; selle asemel kasutage .form-inlineja rakendage vajadusel marginaaliutiliite.
• Navigeerimisribad ei sisalda enam margin-bottomega border-radiusvaikimisi. Vajadusel kasutage kommunaalteenuseid.
• Kõiki navigeerimisribasid sisaldavaid näiteid on värskendatud, et lisada uus märgistus.

Leheküljed

• Komponent kirjutati flexboxiga ümber.
• Eksplitsiitsed klassid ( .page-item, .page-link) on nüüd nõutavad .paginations -i järeltulijate puhul
• Loobusin .pagerkomponendist täielikult, kuna see oli lihtsalt kohandatud kontuurinupud.

Riivsai

• Eksplitsiitne klass , on nüüd nõutav s .breadcrumb-item-i järglastel.breadcrumb

Sildid ja märgid

• Elemendist eristamiseks nimetati ümber .label..badge<label>
• Komponent langes maha, .badgekuna see oli peaaegu identne siltidega. Selle ümara välimuse jaoks kasutage selle .badge-pillasemel modifikaatorit koos sildikomponendiga.
• Märke ei ujutata enam automaatselt loendirühmades ja muudes komponentides. Nüüd on selleks vaja kommunaalklasse.
• .badge-defaulton välja jäetud ja .badge-secondarylisatud mujal kasutatavate komponentide modifikaatorite klasside sobitamiseks.

Paneelid, pisipildid ja kaevud

Uue kaardikomponendi jaoks loobuti täielikult.

Paneelid

• .panel, .cardnüüd ehitatud flexboxiga.
• .panel-defaulteemaldatud ja asendamata.
• .panel-groupeemaldatud ja asendamata. .card-groupei ole asendus, see on erinev.
• .panel-headingjuurde.card-header
• .panel-titlekuni .card-title. Sõltuvalt soovitud välimusest võite kasutada ka pealkirja elemente või klasse (nt <h3>, .h3) või paksus kirjas elemente või klasse (nt <strong>, <b>, .font-weight-bold). Pange tähele .card-title, et kuigi sarnase nimega, annab see erineva välimuse kui .panel-title.
• .panel-bodyjuurde.card-body
• .panel-footerjuurde.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ja .panel-dangeron välja jäetud .bg-, .text-, ja .bordermeie $theme-colorsSassi kaardilt loodud utiliitide jaoks.

Edusammud

• Kontekstiklassid asendati .progress-bar-*utiliitidega .bg-*. Näiteks class="progress-bar progress-bar-danger"muutub class="progress-bar bg-danger".
• .activeAnimeeritud edenemisribade jaoks asendatud .progress-bar-animated.

Karussell

• Disaini ja stiili lihtsustamiseks uuendati kogu komponent. Meil on vähem stiile, mida saate alistada, uusi indikaatoreid ja uusi ikoone.
• Kõik CSS-id on pesast eemaldatud ja ümber nimetatud, tagades, et iga klassi eesliide on .carousel-.
  • Karussellüksuste puhul on .next, .prev, .left, ja .rightnüüd .carousel-item-next, .carousel-item-prev, .carousel-item-left, ja .carousel-item-right.
  • .itemon ka praegu .carousel-item.
  • Eelmiste/järgmiste juhtelementide jaoks .carousel-control.righton .carousel-control.leftnüüd .carousel-control-nextja .carousel-control-prev, mis tähendab, et need ei vaja enam kindlat põhiklassi.
• Eemaldati kõik reageerivad stiilid, lükati edasi utiliitidele (nt teatud vaateavades pealkirjade kuvamine) ja vastavalt vajadusele kohandatud stiilidele.
• Eemaldati karusselliüksuste piltide kujutiste alistamised, lükates edasi utiliitidele.
• Kohandas karusselli näidet, et lisada uus märgistus ja stiil.

Tabelid

• Eemaldatud stiiliga pesastatud tabelite tugi. Kõik tabelistiilid on nüüd lihtsamate valijate jaoks päritud versioonis v4.
• Lisatud tabeli pöördvariant.

Kommunaalteenused

• Kuvatav, peidetud ja palju muud:
  • Muutis kuva utiliidid tundlikuks (nt .d-noneja d-{sm,md,lg,xl}-none).
  • .hidden-*Uute kuvamisutiliitide jaoks loobuti enamikust utiliitidest . Näiteks .hidden-sm-upkasutage selle asemel .d-sm-none. Nimetas .hidden-printutiliidid ümber, et kasutada kuvamise utiliidi nimetamisskeemi. Lisateavet leiate selle lehe jaotisest Reageerivad utiliidid.
  • Lisatud .float-{sm,md,lg,xl}-{left,right,none}klassid reageerivate ujukite jaoks ja eemaldatud .pull-leftning .pull-rightkuna need on üleliigsed .float-leftja .float-right.
• Tüüp:
  • Lisasime meie teksti joondusklassidesse reageerivad variatsioonid .text-{sm,md,lg,xl}-{left,center,right}.
• Joondus ja vahekaugus:
  • Lisatud uued tundliku veerise ja polsterduse utiliidid kõikidele külgedele ning vertikaalsed ja horisontaalsed stenogrammid.
  • Lisatud paaditäis flexboxi kommunaalteenuseid .
  • Loobunud .center-blockuude .mx-autoklassi.
• Clearfixi värskendati, et katkestada vanemate brauseriversioonide tugi.

Müüja eesliidete segud

Bootstrap 3 tarnija prefiksi segud, mille tugi versioonis 3.2.0 aegus, on Bootstrap 4-st eemaldatud. Kuna me kasutame Autoprefixerit , pole need enam vajalikud.

Eemaldati järgmised segud : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function,transition-transformtranslatetranslate3duser-select

Dokumentatsioon

Ka meie dokumentatsiooni uuendati üldiselt. Siin on madalseisu:

• Kasutame endiselt Jekylli, kuid meie segus on pistikprogrammid:
  • bugify.rbkasutatakse meie brauseri vigade lehe kirjete tõhusaks loetlemiseks.
  • example.rbon vaikeplugina kohandatud kahvel highlight.rb, mis võimaldab lihtsamalt näidiskoodi käsitlemist.
  • callout.rbon selle sarnane kohandatud kahvel, kuid mõeldud meie spetsiaalsete dokumentide tähelepanulaiendite jaoks.
  • markdown-block.rbkasutatakse Markdowni katkendite renderdamiseks HTML-i elementides, näiteks tabelites.
  • jekyll-toci kasutatakse meie sisukorra loomiseks.
• Kogu dokumentide sisu on redigeerimise hõlbustamiseks ümber kirjutatud Markdowni (HTML-i asemel).
• Lehed on ümber korraldatud, et sisu oleks lihtsam ja hierarhia oleks lihtsam.
• Liikusime tavaliselt CSS-ilt SCSS-ile, et kasutada täielikult ära Bootstrapi muutujad, mikserid ja palju muud.

Reageerivad kommunaalteenused

Kõik @screen-muutujad on versioonist 4.0.0 eemaldatud. Kasutage selle asemel miksine media-breakpoint-up(), media-breakpoint-down(), või Sass või Sassi kaarti.media-breakpoint-only()$grid-breakpoints

Meie reageerivad utiliidiklassid on suures osas eemaldatud selgesõnaliste displaykommunaalteenuste kasuks.

• Klassid ja on eemaldatud, kuna need olid vastuolus jQuery .hiddenja meetoditega . Selle asemel proovige atribuuti vahetada või kasutada tekstisiseseid stiile, nagu ja ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• Kõik .hidden-klassid on eemaldatud, välja arvatud ümbernimetatud prindiutiliidid.
  • Eemaldatud versioonist 3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • V4 alfast eemaldatud:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Printimisutiliidid ei alga enam tähega .hidden-või .visible-, vaid tähega .d-print-.
  • Vanad nimed: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Uued klassid: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Selgete klasside kasutamise asemel .visible-*muudate elemendi nähtavaks, lihtsalt ei varja seda selle ekraanisuuruse juures. Saate ühendada ühe .d-*-noneklassi ühe .d-*-blockklassiga, et kuvada elementi ainult etteantud ekraanisuuruste intervallil (nt .d-none.d-md-block.d-xl-nonekuvab elementi ainult keskmiste ja suurte seadmete puhul).

Pange tähele, et ruudustiku katkestuspunktide muudatused versioonis 4 tähendavad, et peate samade tulemuste saavutamiseks muutma murdepunkti võrra suuremaks. Uued reageerivad utiliidiklassid ei püüa võtta arvesse vähem levinud juhtumeid, kus elemendi nähtavust ei saa väljendada ühe külgneva vaateava suuruste vahemikuna. selle asemel peate sellistel juhtudel kasutama kohandatud CSS-i.