Source

Selitev na v4

Bootstrap 4 je velika prenova celotnega projekta. Najopaznejše spremembe so povzete spodaj, sledijo pa jim natančnejše spremembe ustreznih komponent.

Stabilne spremembe

Pri prehodu iz Beta 3 v našo stabilno izdajo v4.x ni nobenih pomembnih sprememb, je pa nekaj opaznih sprememb.

Tiskanje

  • Odpravljeni okvarjeni pripomočki za tiskanje. Prej je uporaba .d-print-*razreda nepričakovano preglasila kateri koli drug .d-*razred. Zdaj se ujemajo z našimi drugimi prikazovalnimi pripomočki in veljajo samo za ta medij ( @media print).

  • Razširjeni razpoložljivi pripomočki za prikaz tiskanja, da se ujemajo z drugimi pripomočki. Beta 3 in starejše so imele samo block, inline-block, inlinein none. Stable v4 dodano flex, inline-flex, table, table-rowin table-cell.

  • Popravljeno upodabljanje predogleda tiskanja v brskalnikih z novimi slogi tiskanja, ki določajo @page size.

Beta 3 spremembe

Medtem ko je Beta 2 doživela večino naših prelomnih sprememb med fazo beta, imamo še vedno nekaj, ki jih je treba obravnavati v izdaji Beta 3. Te spremembe veljajo, če posodabljate na Beta 3 iz Beta 2 ali katere koli starejše različice Bootstrapa.

Razno

  • Odstranjena neuporabljena $thumbnail-transitionspremenljivka. Ničesar nismo spreminjali, tako da je bila samo dodatna koda.
  • Paket npm ne vključuje več nobenih datotek razen naših izvornih in dist datotek; če ste se zanašali nanje in izvajali naše skripte prek node_modulesmape, bi morali prilagoditi svoj potek dela.

Obrazci

  • Na novo smo napisali tako prilagojena kot privzeta potrditvena polja in radijske postaje. Zdaj imata oba ujemajočo se strukturo HTML (zunanji <div>s sorodnikom <input>in <label>) in enake sloge postavitve (zložen privzeto, v vrstici z razredom modifikatorja). To nam omogoča oblikovanje oznake glede na stanje vnosa, poenostavitev podpore za disabledatribut (ki je prej zahteval nadrejeni razred) in boljšo podporo našemu preverjanju obrazca.

    Kot del tega smo spremenili CSS za upravljanje več background-images na potrditvenih poljih obrazca po meri in radijskih postajah. Prej je imel zdaj odstranjeni .custom-control-indicatorelement barvo ozadja, preliv in ikono SVG. Prilagajanje preliva ozadja je pomenilo zamenjavo vseh vsakič, ko ste morali spremeniti samo enega. Zdaj imamo .custom-control-label::beforepolnilo in preliv ter .custom-control-label::afterročaji ikone.

    Če želite narediti preverjanje po meri v vrstici, dodajte .custom-control-inline.

  • Posodobljen izbirnik za skupine gumbov, ki temeljijo na vnosu. Namesto [data-toggle="buttons"] { }za slog in vedenje uporabljamo dataatribut samo za vedenje JS in se zanašamo na nov .btn-group-togglerazred za stil.

  • Odstranjeno .col-form-legendv korist nekoliko izboljšanega .col-form-label. Na ta način .col-form-label-smin .col-form-label-lgse lahko z lahkoto uporablja na <legend>elementih.

  • Vnosi datotek po meri so prejeli spremembo $custom-file-textspremenljivke Sass. To ni več ugnezdeni zemljevid Sass in zdaj napaja samo en niz – Browsegumb, ker je to zdaj edini psevdoelement, ustvarjen iz našega Sass. Besedilo Choose filezdaj izvira iz .custom-file-label.

Vhodne skupine

  • Dodatki za skupine vnosov so zdaj specifični glede na njihovo umestitev glede na vnos. Izpustili smo .input-group-addonin .input-group-btnza dva nova razreda .input-group-prependin .input-group-append. Zdaj morate izrecno uporabiti dodajanje ali prednastavitev, kar poenostavlja velik del našega CSS-ja. Znotraj dodajanja ali dodajanja postavite svoje gumbe tako, kot bi obstajali kjer koli drugje, vendar ovijte besedilo v .input-group-text.

  • Slogi preverjanja veljavnosti so zdaj podprti, kot tudi več vnosov (čeprav lahko potrdite le en vnos na skupino).

  • Razredi velikosti morajo biti na nadrejenih .input-groupin ne na posameznih elementih obrazca.

Beta 2 spremembe

Medtem ko smo v različici beta, si prizadevamo, da ne bi bilo nobenih prelomnih sprememb. Vendar pa stvari ne gredo vedno po načrtih. Spodaj so najpomembnejše spremembe, ki jih morate upoštevati pri prehodu z Beta 1 na Beta 2.

Lomljenje

  • Odstranjena $badge-colorspremenljivka in njena uporaba na .badge. Uporabimo funkcijo barvnega kontrasta, da izberemo colorna podlagi background-color, zato je spremenljivka nepotrebna.
  • grayscale()Funkcija je bila preimenovana v, gray()da bi se izognili prekinitvi spora z izvornim grayscalefiltrom CSS.
  • Preimenovano .table-inverse, .thead-inverse, in .thead-defaultv .*-darkin .*-light, ki ustreza našim barvnim shemam, ki se uporabljajo drugje.
  • Odzivne tabele zdaj ustvarjajo razrede za vsako prelomno točko mreže. To se razlikuje od Beta 1, saj je datoteka, ki .table-responsivejo uporabljate, bolj podobna .table-responsive-md. Zdaj lahko uporabite .table-responsiveali .table-responsive-{sm,md,lg,xl}po potrebi.
  • Opuščena podpora za Bower kot upravitelja paketov je bila opuščena za alternative (npr. Yarn ali npm). Za podrobnosti glejte bower/bower#2298 .
  • Bootstrap še vedno zahteva jQuery 1.9.1 ali novejšo različico, vendar vam svetujemo, da uporabite različico 3.x, saj so podprti brskalniki v3.x tisti, ki jih Bootstrap podpira, poleg tega pa ima v3.x nekaj varnostnih popravkov.
  • Odstranjen neuporabljen .form-control-labelrazred. Če ste uporabili ta razred, je bil dvojnik .col-form-labelrazreda, ki je navpično centriral a <label>s svojim povezanim vnosom v horizontalnih postavitvah obrazcev.
  • color-yiqMiksin, ki je vključeval lastnost, je spremenjen v colorfunkcijo, ki vrne vrednost, kar vam omogoča, da jo uporabite za katero koli lastnost CSS. Na primer, namesto color-yiq(#000), bi napisali color: color-yiq(#000);.

Poudarki

  • Uvedena nova pointer-eventsuporaba na načinih. Zunanji .modal-dialogprehaja skozi dogodke z pointer-events: noneza obdelavo klikov po meri (kar omogoča samo poslušanje .modal-backdropmorebitnih klikov) in se nato .modal-contentz pointer-events: auto.

Povzetek

Tukaj so pomembni predmeti vstopnic, na katere boste želeli biti pozorni pri prehodu z različice 3 na različico 4.

Podpora za brskalnik

  • Opuščena podpora za IE8, IE9 in iOS 6. v4 je zdaj samo IE10+ in iOS 7+. Za spletna mesta, ki potrebujejo karkoli od tega, uporabite v3.
  • Dodana uradna podpora za brskalnik in spletni pogled Android v5.0 Lollipop. Prejšnje različice brskalnika Android in WebView ostajajo le neuradno podprte.

Globalne spremembe

  • Flexbox je privzeto omogočen. Na splošno to pomeni odmik od lebdečih in več v naših komponentah.
  • Preklop z Less na Sass za naše izvorne datoteke CSS.
  • Preklopili smo iz pxna remkot našo primarno enoto CSS, čeprav se slikovne pike še vedno uporabljajo za medijske poizvedbe in vedenje mreže, saj velikost tipa ne vpliva na vidna okna naprave.
  • Globalna velikost pisave se je povečala z 14pxna 16px.
  • Prenovljeni nivoji mreže za dodajanje pete možnosti (naslavljanje manjših naprav na 576pxin pod) in odstranjeni -xspriponi iz teh razredov. Primer: .col-6.col-sm-4.col-md-3.
  • Zamenjana ločena izbirna tema z nastavljivimi možnostmi prek spremenljivk SCSS (npr. $enable-gradients: true).
  • Gradbeni sistem je bil prenovljen za uporabo niza skriptov npm namesto Grunta. Oglejte si package.jsonvse skripte ali našo datoteko readme za potrebe lokalnega razvoja.
  • Neodzivna uporaba Bootstrapa ni več podprta.
  • Opustili smo spletni Customizer v korist obsežnejše namestitvene dokumentacije in prilagojenih gradenj.
  • Dodanih je na desetine novih uporabnih razredov za običajne pare lastnost-vrednost CSS in bližnjice za razmik med robom/oblazinjenjem.

Mrežni sistem

  • Premaknjeno v flexbox.
    • Dodana podpora za flexbox v mešanicah mreže in vnaprej določenih razredih.
    • Kot del flexboxa je vključena podpora za razrede navpične in vodoravne poravnave.
  • Posodobljena imena razredov mreže in nova stopnja mreže.
    • Spodaj je dodan nov smnivo mreže 768pxza bolj razdrobljen nadzor. Zdaj imamo xs, sm, md, lg, in xl. To tudi pomeni, da je bila vsaka stopnja dvignjena za eno raven (torej .col-md-6v v3 je zdaj .col-lg-6v v4).
    • xsmrežni razredi so bili spremenjeni tako, da ne potrebujejo pripona za natančnejšo predstavo, da začnejo uporabljati sloge pri min-width: 0in ne pri nastavljeni vrednosti pikslov. Namesto .col-xs-6, zdaj je .col-6. Vse druge ravni omrežja zahtevajo infiks (npr. sm).
  • Posodobljene velikosti mreže, miksini in spremenljivke.
    • Mrežni žlebovi imajo zdaj zemljevid Sass, tako da lahko določite specifične širine žlebov na vsaki prelomni točki.
    • Posodobljeni omrežni mešalniki za uporabo make-col-readypripravljalnega mešalnika in a make-colza nastavitev flexin max-widthza velikost posameznega stolpca.
    • Spremenjene so prelomne točke medijskih poizvedb omrežnega sistema in širine vsebnika, da se upošteva nova omrežna stopnja in zagotovi, da so stolpci enakomerno deljivi z 12največjo širino.
    • Prelomne točke mreže in širine vsebnika se zdaj obravnavajo prek zemljevidov Sass ( $grid-breakpointsin $container-max-widths) namesto peščice ločenih spremenljivk. Te v @screen-*celoti nadomestijo spremenljivke in vam omogočajo, da v celoti prilagodite mrežne nivoje.
    • Spremenila so se tudi medijska poizvedovanja. Namesto ponavljanja naših deklaracij medijske poizvedbe z vsakič isto vrednostjo, imamo zdaj @include media-breakpoint-up/down/only. Zdaj lahko namesto pisanja @media (min-width: @screen-sm-min) { ... }pišete @include media-breakpoint-up(sm) { ... }.

Komponente

  • Izpuščene plošče, sličice in vrtine za novo vseobsegajočo komponento, kartice .
  • Izpuščena je pisava ikone Glyphicons. Če potrebujete ikone, so nekatere možnosti:
  • Odstranjen je vtičnik Affix jQuery.
    • position: stickyNamesto tega priporočamo uporabo . Oglejte si vnos HTML5 Prosim za podrobnosti in posebna priporočila za polifill. Eden od predlogov je uporaba @supportspravila za njegovo izvajanje (npr @supports (position: sticky) { ... }.
    • Če ste uporabljali Affix za uporabo dodatnih, ne position-slogov, polifili morda ne bodo podpirali vašega primera uporabe. Ena možnost za takšno uporabo je knjižnica ScrollPos-Styler tretje osebe .
  • Opustili smo komponento pozivnika , saj so bili v bistvu nekoliko prilagojeni gumbi.
  • Skoraj vse komponente so bile preoblikovane za uporabo več neugnezdenih izbirnikov razredov namesto preveč specifičnih podrejenih izbirnikov.

Po komponentah

Ta seznam poudarja ključne spremembe po komponentah med v3.xx in v4.0.0.

Znova zaženite

Novost v Bootstrap 4 je Reboot , nova tabela slogov, ki nadgrajuje Normalize z našimi nekoliko samozavestnimi slogi ponastavitve. Izbirniki, ki se pojavljajo v tej datoteki, uporabljajo samo elemente – tukaj ni razredov. To izolira naše sloge ponastavitve od naših slogov komponent za bolj modularen pristop. Nekatere najpomembnejše ponastavitve, ki jih to vključuje, so box-sizing: border-boxsprememba, premik z emna remenote na številnih elementih, slogi povezav in številne ponastavitve elementov obrazca.

Tipografija

  • .text-Vse pripomočke premaknil v _utilities.scssdatoteko.
  • Izpuščeno .page-header, ker je njegove sloge mogoče uporabiti prek pripomočkov.
  • .dl-horizontalje bil opuščen. Namesto tega uporabite .rowon <dl>in uporabite razrede stolpcev mreže (ali miksine) na njegovih <dt>in podrejenih elementih <dd>.
  • Preoblikovani narekovaji blokov, premik njihovih slogov iz <blockquote>elementa v en razred, .blockquote. Opuščen je .blockquote-reversemodifikator za besedilne pripomočke.
  • .list-inlinezdaj zahteva, da se za postavke njegovega podrejenega seznama uporabi nov .list-inline-itemrazred.

Slike

  • Preimenovan .img-responsivev .img-fluid.
  • Preimenovano .img-roundedv.rounded
  • Preimenovano .img-circlev.rounded-circle

Mize

  • Skoraj vsi primerki >izbirnika so bili odstranjeni, kar pomeni, da bodo ugnezdene tabele zdaj samodejno podedovale sloge od svojih staršev. To močno poenostavi naše izbirnike in morebitne prilagoditve.
  • Zaradi doslednosti preimenovan .table-condensedv ..table-sm
  • Dodana nova .table-inversemožnost.
  • Dodani modifikatorji glave tabele: .thead-defaultin .thead-inverse.
  • Kontekstualni razredi so bili preimenovani tako, da imajo .table-predpono -. Zato .active, .success, .warning, .dangerin .infodo .table-active, .table-success, .table-warning, .table-dangerin .table-info.

Obrazci

  • Premaknjeni element se ponastavi v _reboot.scssdatoteko.
  • Preimenovan .control-labelv .col-form-label.
  • Preimenovan .input-lgin .input-smv oz .form-control-lg..form-control-sm
  • Opustil .form-group-*predavanja zaradi preprostosti. Namesto tega zdaj uporabite .form-control-*razrede.
  • Izpuščen .help-blockin nadomeščen z .form-textbesedilom pomoči na ravni bloka. Za besedilo pomoči v vrstici in druge prilagodljive možnosti uporabite razrede pripomočkov, kot je .text-muted.
  • Spuščeno .radio-inlinein .checkbox-inline.
  • Konsolidirano .checkboxin .radiov .form-checkrazlične .form-check-*razrede.
  • Horizontalne oblike prenovljene:
    • Opustil je .form-horizontalrazredne zahteve.
    • .form-groupne uporablja več slogov iz .rowvia mixina, zato .rowje zdaj potreben za horizontalne mrežne postavitve (npr. <div class="form-group row">).
    • Dodan nov .col-form-labelrazred navpično centriranim oznakam s .form-controls.
    • Dodano novo .form-rowza kompaktne postavitve obrazcev z mrežnimi razredi (zamenjajte svoje .rowza .form-rowin pojdite).
  • Dodana podpora za obrazce po meri (za potrditvena polja, radijske postaje, izbire in vnose datotek).
  • .has-errorRazredi , .has-warning, in zamenjani .has-successs preverjanjem obrazca HTML5 prek CSS :invalidin :validpsevdorazredov.
  • Preimenovan .form-control-staticv .form-control-plaintext.

Gumbi

  • Preimenovan .btn-defaultv .btn-secondary.
  • .btn-xsRazred je popolnoma opustil, saj je .btn-smsorazmerno veliko manjši od v3.
  • Funkcija gumba za spremljanje stanja button.jsvtičnika jQuery je bila opuščena. To vključuje metode $().button(string)in . $().button('reset')Svetujemo, da namesto tega uporabite majhen košček JavaScripta po meri, ki bo imel prednost, da se bo obnašal točno tako, kot želite.
    • Upoštevajte, da so bile druge funkcije vtičnika (potrditvena polja gumbov, radijski gumbi, gumbi z enim preklopom) ohranjene v različici 4.
  • Spremenite gumbe, [disabled]če jih :disabledpodpira IE9+ :disabled. Vendar fieldset[disabled]je še vedno potreben, ker so izvorni onemogočeni nabori polj še vedno hrošči v IE11 .

Skupina gumbov

  • Preoblikovana komponenta s flexboxom.
  • odstranjeno .btn-group-justified_ Kot zamenjavo lahko uporabite <div class="btn-group d-flex" role="group"></div>kot ovoj okoli elementov z .w-100.
  • Zaradi .btn-group-xsodstranitve .btn-xs.
  • Odstranjen izrecni razmik med skupinami gumbov v orodnih vrsticah gumbov; zdaj uporabite pripomočke za marže.
  • Izboljšana dokumentacija za uporabo z drugimi komponentami.
  • Preklop z nadrejenih izbirnikov na posamezne razrede za vse komponente, modifikatorje itd.
  • Poenostavljeni slogi spustnega menija, da ne bodo več dobavljeni s puščicami, obrnjenimi navzgor ali navzdol, pritrjenimi na spustni meni.
  • Spustne menije lahko sestavite s <div>s ali <ul>s zdaj.
  • Ponovno izdelani spustni slogi in označevanje, da zagotovite preprosto, vgrajeno podporo za <a>in <button>zasnovane spustne elemente.
  • Preimenovan .dividerv .dropdown-divider.
  • Spustni elementi zdaj zahtevajo .dropdown-item.
  • Spustni preklopi ne zahtevajo več eksplicitnega <span class="caret"></span>; to je zdaj na voljo samodejno prek CSS ::afterna .dropdown-toggle.

Mrežni sistem

  • Dodana nova 576pxprelomna točka mreže kot sm, kar pomeni, da je zdaj skupno pet stopenj ( xs, sm, md, lgin xl).
  • Razredi odzivnih modifikatorjev mreže so bili preimenovani iz .col-{breakpoint}-{modifier}-{size}v .{modifier}-{breakpoint}-{size}za preprostejše razrede mreže.
  • Izpuščeni modifikatorski razredi potiskanja in vlečenja za nove razrede, ki jih poganja orderflexbox. Na primer, namesto .col-8.push-4in .col-4.pull-8bi uporabili .col-8.order-2in .col-4.order-1.
  • Dodani razredi pripomočkov flexbox za mrežni sistem in komponente.

Seznam skupin

  • Preoblikovana komponenta s flexboxom.
  • Zamenjano a.list-group-itemz eksplicitnim razredom .list-group-item-actionza oblikovanje različic povezav in gumbov elementov skupine seznamov.
  • Dodan .list-group-flushrazred za uporabo s karticami.
  • Preoblikovana komponenta s flexboxom.
  • Glede na prehod na flexbox je poravnava ikon za opustitev v glavi verjetno pokvarjena, ker ne uporabljamo več lebdečih elementov. Lebdeča vsebina je na prvem mestu, vendar s flexboxom ni več tako. Posodobite ikone za opustitev, da bodo prišle za modalnimi naslovi, da popravite.
  • Možnost remote(ki se lahko uporablja za samodejno nalaganje in vstavljanje zunanje vsebine v modal) in ustrezen loaded.bs.modaldogodek sta bila odstranjena. Namesto tega priporočamo uporabo predlog na strani odjemalca ali ogrodje za vezavo podatkov ali pa sami pokličete jQuery.load .
  • Preoblikovana komponenta s flexboxom.
  • Izpuščeni so bili skoraj vsi >izbirniki zaradi enostavnejšega oblikovanja prek negnezdenih razredov.
  • Namesto izbirnikov, specifičnih za HTML, kot .nav > li > aje , uporabljamo ločene razrede za .navs, .nav-items in .nav-links. To naredi vaš HTML bolj prilagodljiv, hkrati pa prinaša večjo razširljivost.

Navbar je bil v celoti prepisan v flexboxu z izboljšano podporo za poravnavo, odzivnost in prilagajanje.

  • Odzivna vedenja vrstice za krmarjenje se zdaj uporabljajo za .navbarrazred prek zahtevanega, .navbar-expand-{breakpoint} kjer izberete, kje strniti vrstico za krmarjenje. Prej je bila to manj spremenljiva sprememba in je zahtevala ponovno prevajanje.
  • .navbar-defaultje zdaj .navbar-light, čeprav .navbar-darkostaja enak. Eden od teh je obvezen v vsaki vrstici za krmarjenje. Vendar pa ti razredi ne postavljajo več background-colors; namesto tega v bistvu samo vplivajo color.
  • Navbars zdaj zahtevajo nekakšno deklaracijo ozadja. Izbirajte med našimi pripomočki za ozadje ( .bg-*) ali nastavite svojega z zgornjimi razredi light/inverse za noro prilagajanje .
  • Glede na sloge flexbox lahko navbars zdaj uporablja pripomočke flexbox za enostavne možnosti poravnave.
  • .navbar-toggleje zdaj .navbar-togglerin ima različne sloge in notranjo oznako (nič več treh <span>s).
  • Popolnoma opustil .navbar-formrazred. Ni več potrebno; namesto tega .form-inlinepo potrebi samo uporabite in uporabite pripomočke za marže.
  • Navbars ne vključuje več margin-bottomali border-radiusprivzeto. Po potrebi uporabite pripomočke.
  • Vsi primeri z vrsticami za krmarjenje so bili posodobljeni, da vključujejo nove oznake.

Paginacija

  • Preoblikovana komponenta s flexboxom.
  • Eksplicitni razredi ( .page-item, .page-link) so zdaj potrebni za potomce .paginations
  • Komponento smo popolnoma opustili, .pagersaj je bila le malo več kot prilagojeni orisni gumbi.
  • Eksplicitni razred, .breadcrumb-item, je zdaj potreben za potomce .breadcrumbs

Etikete in značke

  • Konsolidirano .labelin .badgeza ločitev od <label>elementa ter poenostavitev povezanih komponent.
  • Dodan .badge-pillkot modifikator za zaobljeni videz "tabletke".
  • Značke niso več samodejno prikazane v skupinah seznamov in drugih komponentah. Za to so zdaj potrebni razredi uporabnosti.
  • .badge-defaultje bil opuščen in .badge-secondarydodan, da se ujema z razredi modifikatorjev komponent, ki se uporabljajo drugje.

Paneli, sličice in vodnjaki

Popolnoma opuščeno zaradi nove komponente kartice.

Plošče

  • .paneldo .card, zdaj zgrajen s flexboxom.
  • .panel-defaultodstranjen in brez zamenjave.
  • .panel-groupodstranjen in brez zamenjave. .card-groupni nadomestek, je drugačen.
  • .panel-headingdo.card-header
  • .panel-titledo .card-title. Odvisno od želenega videza boste morda želeli uporabiti tudi elemente naslovov ali razrede (npr. <h3>, .h3) ali krepke elemente ali razrede (npr. <strong>, <b>, .font-weight-bold). Upoštevajte, da .card-titleima, čeprav ima podobno ime, drugačen videz kot .panel-title.
  • .panel-bodydo.card-body
  • .panel-footerdo.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, in .panel-dangerso bili opuščeni za .bg-, .text-, in .borderpripomočke, ustvarjene iz našega $theme-colorszemljevida Sass.

Napredek

  • Kontekstualni .progress-bar-*razredi so bili zamenjani s .bg-*pripomočki. Na primer, class="progress-bar progress-bar-danger"postane class="progress-bar bg-danger".
  • Zamenjano .activeza animirane vrstice napredka z .progress-bar-animated.
  • Celotna komponenta je bila prenovljena za poenostavitev oblikovanja in stila. Imamo manj stilov, ki jih lahko preglasite, nove indikatorje in nove ikone.
  • Vsi CSS so bili razgnezdeni in preimenovani, kar zagotavlja, da ima vsak razred predpono .carousel-.
    • Za elemente vrtiljaka so .next, .prev, .leftin .rightzdaj .carousel-item-next, .carousel-item-prev, .carousel-item-leftin .carousel-item-right.
    • .itemje tudi zdaj .carousel-item.
    • Za kontrolnike prejšnji/naslednji .carousel-control.rightin .carousel-control.leftsta zdaj .carousel-control-nextin .carousel-control-prev, kar pomeni, da ne potrebujeta več določenega osnovnega razreda.
  • Odstranjeni so bili vsi odzivni slogi, pri čemer so bili odloženi pripomočki (npr. prikazovanje napisov na določenih pogledih) in slogi po meri po potrebi.
  • Odstranjene preglasitve slik za slike v elementih vrtiljaka, odloženo pripomočkom.
  • Prilagojen primer vrtiljaka, da vključuje nove oznake in sloge.

Mize

  • Odstranjena podpora za stilizirane ugnezdene tabele. Vsi slogi tabel so zdaj podedovani v različici 4 za preprostejše izbirnike.
  • Dodana različica inverzne tabele.

Pripomočki

  • Prikaz, skrito in drugo:
    • Pripomočki za prikaz so postali odzivni (npr. .d-nonein d-{sm,md,lg,xl}-none).
    • Opustili smo večino .hidden-*pripomočkov za nove pripomočke za zaslone . Na primer, namesto .hidden-sm-upuporabite .d-sm-none. Preimenoval .hidden-printpripomočke za uporabo sheme poimenovanja pripomočkov za prikaz. Več informacij v razdelku Odzivni pripomočki na tej strani.
    • Dodani .float-{sm,md,lg,xl}-{left,right,none}razredi za odzivne lebdeče in odstranjeni .pull-leftin .pull-rightker so odveč za .float-leftin .float-right.
  • Tip:
    • Dodane odzivne različice našim razredom za poravnavo besedila .text-{sm,md,lg,xl}-{left,center,right}.
  • Poravnava in razmik:
    • Dodani so novi odzivni pripomočki za robove in oblazinjenje za vse strani ter navpične in vodoravne stenografije.
    • Dodan boatload pripomočkov flexbox .
    • Odpadlo .center-blockzaradi novega .mx-autorazreda.
  • Clearfix posodobljen tako, da opusti podporo za starejše različice brskalnika.

Miksini predpone prodajalca

Miksini predpone prodajalca Bootstrap 3 , ki so bili opuščeni v različici 3.2.0, so bili odstranjeni v Bootstrap 4. Ker uporabljamo Autoprefixer , niso več potrebni.

Odstranjeni so naslednji miksini: 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-transform, translate, translate3d,user-select

Dokumentacija

Tudi naša dokumentacija je bila nadgrajena na vseh področjih. Tukaj je nizko:

  • Še vedno uporabljamo Jekyll, vendar imamo v mešanici vtičnike:
    • bugify.rbse uporablja za učinkovito izpisovanje vnosov na naši strani z napakami brskalnika .
    • example.rbje razcep po meri privzetega highlight.rbvtičnika, ki omogoča lažje ravnanje s primeri kode.
    • callout.rbje podoben razcep po meri tega, vendar zasnovan za naše posebne oblačke dokumentov.
    • jekyll-toc se uporablja za ustvarjanje našega kazala.
  • Vsa vsebina dokumentov je bila prepisana v Markdown (namesto HTML) za lažje urejanje.
  • Strani so bile reorganizirane za preprostejšo vsebino in bolj dostopno hierarhijo.
  • Z običajnega CSS smo prešli na SCSS, da bi v celoti izkoristili spremenljivke Bootstrapa, mixine in drugo.

Odzivni pripomočki

Vse @screen-spremenljivke so bile odstranjene v različici 4.0.0. Namesto tega uporabite miksine media-breakpoint-up(), media-breakpoint-down(), ali Sass ali zemljevid Sass.media-breakpoint-only()$grid-breakpoints

Naši odzivni razredi pripomočkov so bili večinoma odstranjeni v korist eksplicitnih displaypripomočkov.

  • Razredi .hiddenin .showso bili odstranjeni, ker so bili v nasprotju z metodami jQuery $(...).hide()in . $(...).show()Namesto tega poskusite preklopiti [hidden]atribut ali uporabiti vstavljene sloge, kot sta style="display: none;"in style="display: block;".
  • Vsi .hidden-razredi so bili odstranjeni, razen pripomočkov za tiskanje, ki so bili preimenovani.
    • Odstranjeno iz v3:.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
    • Odstranjeno iz v4 alfa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Pripomočki za tiskanje se ne začnejo več z .hidden-ali .visible-, ampak z .d-print-.
    • Stara imena: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Novi razredi: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Namesto uporabe eksplicitnih .visible-*razredov naredite element viden tako, da ga preprosto ne skrijete pri tej velikosti zaslona. En razred lahko kombinirate .d-*-nonez enim .d-*-blockrazredom, da prikažete element samo v danem intervalu velikosti zaslona (npr. .d-none.d-md-block.d-xl-noneprikaže element samo na srednjih in velikih napravah).

Upoštevajte, da spremembe prelomnih točk mreže v različici 4 pomenijo, da boste morali za doseganje enakih rezultatov povečati eno prelomno točko. Novi odzivni uporabniški razredi ne poskušajo prilagoditi manj običajnih primerov, ko vidnosti elementa ni mogoče izraziti kot en sam sosednji obseg velikosti vidnega polja; namesto tega boste morali v takih primerih uporabiti CSS po meri.