in English

Flutningur í v4

Bootstrap 4 er mikil umritun á öllu verkefninu. Áberandi breytingarnar eru teknar saman hér að neðan, fylgt eftir með sértækari breytingum á viðeigandi íhlutum.

Stöðugar breytingar

Að flytja úr Beta 3 yfir í stöðugu v4.x útgáfuna okkar, það eru engar breytingar sem eru brotnar, en það eru nokkrar athyglisverðar breytingar.

Prentun

  • Lagað biluð prenttæki. Áður .d-print-*fyrr myndi notkun flokks óvænt yfirbuga annan .d-*flokk. Nú passa þau við önnur skjától okkar og eiga aðeins við um þann miðil ( @media print).

  • Stækkuð tiltæk prentskjátæki til að passa við önnur tól. Beta 3 og eldri voru aðeins með block, inline-block, inline, og none. Stöðugt v4 bætt við flex, inline-flex, table, table-row, og table-cell.

  • Lagfærð prentforskoðun í gegnum vafra með nýjum prentstílum sem tilgreina @page size.

Beta 3 breytingar

Þó að Beta 2 hafi séð megnið af brotlegum breytingum okkar á beta áfanganum, en við höfum samt nokkrar sem þurfti að taka á í Beta 3 útgáfunni. Þessar breytingar eiga við ef þú ert að uppfæra í Beta 3 úr Beta 2 eða einhverri eldri útgáfu af Bootstrap.

Ýmislegt

  • Fjarlægði ónotaða $thumbnail-transitionbreytuna. Við vorum ekki að skipta um neitt, svo þetta var bara aukakóði.
  • npm pakkinn inniheldur ekki lengur neinar skrár aðrar en uppruna- og dist skrárnar okkar; ef þú treystir á þau og varst að keyra forskriftirnar okkar í gegnum node_modulesmöppuna ættirðu að laga vinnuflæðið þitt.

Eyðublöð

  • Endurskrifaði bæði sérsniðna og sjálfgefna gátreiti og útvarp. Nú eru báðir með samsvarandi HTML uppbyggingu (ytri <div>með systkini <input>og <label>) og sömu útlitsstíla (staflað sjálfgefinn, innbyggður með breytingaflokki). Þetta gerir okkur kleift að stilla merkimiðann út frá ástandi inntaksins, einfalda stuðning við disabledeigindina (þarf áður foreldrisflokks) og styðja betur við löggildingu eyðublaða okkar.

    Sem hluti af þessu höfum við breytt CSS fyrir stjórnun margra background-images á sérsniðnum gátreitum og útvarpstækjum. Áður hafði þátturinn sem nú var fjarlægður .custom-control-indicatorbakgrunnslitinn, hallann og SVG táknið. Að sérsníða bakgrunnshallann þýddi að skipta út öllum þeim í hvert skipti sem þú þurftir að breyta aðeins einum. Nú höfum við .custom-control-label::beforefyrir fyllingu og halla og .custom-control-label::afterhöndlar táknið.

    Til að gera sérsniðna ávísun innbyggða skaltu bæta við .custom-control-inline.

  • Uppfærður veljari fyrir inntaksbundna hnappahópa. Í staðinn [data-toggle="buttons"] { }fyrir stíl og hegðun notum við dataeiginleikann bara fyrir JS hegðun og treystum á nýjan .btn-group-toggleflokk fyrir stíl.

  • Fjarlægt .col-form-legendí þágu örlítið endurbættrar .col-form-label. Á þennan hátt .col-form-label-smog .col-form-label-lger hægt að nota á <legend>þætti með auðveldum hætti.

  • Sérsniðin skráarinntak fékk breytingu á $custom-file-textSass breytu sinni. Það er ekki lengur hreiðrað Sass kort og knýr nú aðeins einn streng - Browsehnappurinn þar sem hann er nú eini gerviþátturinn sem myndaður er úr Sass okkar. Textinn Choose filekemur nú frá .custom-file-label.

Inntakshópar

  • Inntakshópaviðbætur eru nú sértækar fyrir staðsetningu þeirra miðað við inntak. Við höfum hætt .input-group-addonog .input-group-btnfyrir tvo nýja flokka, .input-group-prependog .input-group-append. Þú verður beinlínis að nota viðauka eða undirskrift núna, sem einfaldar mikið af CSS okkar. Settu hnappana þína eins og þeir myndu vera til annars staðar í viðhengi eða viðhengi, en settu texta inn í .input-group-text.

  • Staðfestingarstílar eru nú studdir, sem og mörg inntak (þó þú getur aðeins staðfest eitt inntak í hvern hóp).

  • Stærðarflokkar verða að vera á foreldri .input-groupen ekki einstökum formþáttum.

Beta 2 breytingar

Meðan á tilraunaútgáfu stendur stefnum við að því að hafa engar breytingar. Hins vegar fara hlutirnir ekki alltaf eins og ætlað er. Hér að neðan eru brotabreytingarnar sem þarf að hafa í huga þegar farið er úr Beta 1 í Beta 2.

Brot

  • Fjarlægð $badge-colorbreyta og notkun hennar á .badge. Við notum litaskilafall til að velja colorút frá background-color, svo breytan er óþörf.
  • Endurnefnt grayscale()aðgerð til gray()að forðast að rjúfa árekstra við CSS innfædda grayscalesíu.
  • Endurnefnt .table-inverse, .thead-inverse, og .thead-defaulttil .*-darkog .*-light, sem passa við litasamsetningu okkar sem notuð er annars staðar.
  • Móttækilegar töflur búa nú til flokka fyrir hvern rist brotpunkt. Þetta brýtur frá Beta 1 að því leyti að það sem .table-responsiveþú hefur notað er meira eins og .table-responsive-md. Þú getur nú notað .table-responsiveeða .table-responsive-{sm,md,lg,xl}eftir þörfum.
  • Sleppti Bower stuðningi þar sem pakkastjórinn hefur verið úreltur fyrir aðra valkosti (td Yarn eða npm). Sjá bower/bower#2298 fyrir nánari upplýsingar.
  • Bootstrap krefst enn jQuery 1.9.1 eða nýrra, en þér er ráðlagt að nota útgáfu 3.x þar sem studdir vafrar v3.x eru þeir sem Bootstrap styður auk þess sem v3.x er með nokkrar öryggisleiðréttingar.
  • Fjarlægði ónotaða .form-control-labelbekkinn. Ef þú notaðir þennan flokk var hann afrit af .col-form-labelbekknum sem miðlaði lóðrétt <label>með tilheyrandi inntaki í láréttum formum.
  • Breytti color-yiqúr mixin sem innihélt coloreignina í fall sem skilar gildi, sem gerir þér kleift að nota það fyrir hvaða CSS eign sem er. Til dæmis, í stað color-yiq(#000), myndir þú skrifa color: color-yiq(#000);.

Hápunktar

  • Kynnt nýja pointer-eventsnotkun á aðferðum. Ytra .modal-dialogfer í gegnum atburði með pointer-events: nonesérsniðinni smellameðferð (sem gerir það mögulegt að hlusta bara á .modal-backdrophvaða smelli sem er) og vinnur síðan á móti því fyrir raunverulegan .modal-contentmeð pointer-events: auto.

Samantekt

Hér eru stóru miðaatriðin sem þú vilt vera meðvitaður um þegar þú ferð úr v3 í v4.

Stuðningur við vafra

  • Sleppti stuðningi við IE8, IE9 og iOS 6. v4 er nú aðeins IE10+ og iOS 7+. Fyrir síður sem þurfa annað hvort þeirra, notaðu v3.
  • Bætti við opinberum stuðningi fyrir Android v5.0 Lollipop's Browser og WebView. Eldri útgáfur af Android vafranum og WebView eru aðeins studdar óopinberlega.

Hnattrænar breytingar

  • Flexbox er sjálfgefið virkt. Almennt séð þýðir þetta að hverfa frá flotum og fleiru yfir íhluti okkar.
  • Skipt úr Less til Sass fyrir uppruna CSS skrárnar okkar.
  • Skipt úr pxí remsem aðal CSS eining okkar, þó að pixlar séu enn notaðir fyrir miðlunarfyrirspurnir og nethegðun þar sem tegundarstærð hefur ekki áhrif á útsýnisgáttir tækisins.
  • Alþjóðleg leturstærð jókst úr 14pxí 16px.
  • Endurbætt kerfisþrep til að bæta við fimmta valmöguleikanum (snertir smærri tæki við 576pxog fyrir neðan) og fjarlægði -xsinnréttinguna úr þessum flokkum. Dæmi: .col-6.col-sm-4.col-md-3.
  • Skipti út valkvæða þemanu fyrir stillanlega valkosti með SCSS breytum (td $enable-gradients: true).
  • Byggingarkerfi endurskoðað til að nota röð af npm skriftum í stað Grunt. Skoðaðu package.jsonfyrir öll handrit, eða lestur verkefnisins okkar fyrir staðbundnar þróunarþarfir.
  • Ósvarandi notkun á Bootstrap er ekki lengur studd.
  • Sleppti sérsniðnum á netinu í þágu víðtækari uppsetningargagna og sérsniðinna smíði.
  • Bætti við tugum nýrra nytjaflokka fyrir algeng CSS eignagildapör og flýtileiðir fyrir spássíu/fyllingarbil.

Ratkerfi

  • Fært í flexbox.
    • Bætti við stuðningi við flexbox í grid mixins og fyrirfram skilgreindum flokkum.
    • Sem hluti af flexbox, innifalinn stuðningur fyrir lóðrétta og lárétta röðunarflokka.
  • Uppfært heiti töfluflokka og nýtt töflulag.
    • Bætti við nýju smristli fyrir neðan 768pxtil að fá nákvæmari stjórn. Við höfum núna xs, sm, md, lg, og xl. Þetta þýðir líka að hvert stig hefur verið hækkað eitt stig (svo .col-md-6í v3 er nú .col-lg-6í v4).
    • xsgrid flokkum hefur verið breytt til að krefjast þess að innfellingin sé ekki nákvæmari fyrir að þeir byrji að beita stílum á min-width: 0en ekki settu pixlagildi. Í stað þess .col-xs-6er það núna .col-6. Öll önnur töfluþrep krefjast innréttingarinnar (td sm).
  • Uppfærðar riststærðir, blöndur og breytur.
    • Grindrennur eru nú með Sass kort svo þú getur tilgreint sérstakar þakrennur við hvern brotpunkt.
    • Uppfærðar ristblöndur til að nota make-col-readyundirbúningsblöndun og til make-colað stilla flexog max-widthfyrir einstaka dálkstærð.
    • Breytt kerfismiðlunarfyrirspurnarbrotpunktum og gámabreiddum til að taka tillit til nýrra töfluþreps og tryggja að dálkar séu jafnt deilanlegir með 12hámarksbreidd.
    • Riðlabrotspunktar og gámabreiddir eru nú meðhöndlaðir með Sass kortum ( $grid-breakpointsog $container-max-widths) í stað handfylli af aðskildum breytum. Þetta kemur @screen-*algjörlega í stað breytanna og gerir þér kleift að sérsníða töflurnar að fullu.
    • Fjölmiðlafyrirspurnir hafa einnig breyst. Í stað þess að endurtaka yfirlýsingar okkar um fjölmiðlafyrirspurnir með sama gildi hverju sinni, höfum við núna @include media-breakpoint-up/down/only. Nú, í stað þess að skrifa @media (min-width: @screen-sm-min) { ... }, geturðu skrifað @include media-breakpoint-up(sm) { ... }.

Íhlutir

  • Slepptu spjöldum, smámyndum og brunnum fyrir nýjan alltumlykjandi íhlut, spil .
  • Sleppti leturgerð Glyphicons táknsins. Ef þú þarft tákn eru nokkrir valkostir:
  • Sleppti Affix jQuery viðbótinni.
    • Við mælum með því að nota position: stickyí staðinn. Sjá HTML5 vinsamlega færsluna fyrir upplýsingar og sérstakar ráðleggingar um fjölfyllingu. Ein tillaga er að nota @supportsreglu til að útfæra hana (td @supports (position: sticky) { ... })
    • Ef þú varst að nota Affix til að nota fleiri, ekki positionstíla, gæti fjölfyllingarnar ekki stutt notkunartilvikið þitt. Einn valkostur fyrir slíka notkun er þriðja aðila ScrollPos-Styler bókasafnið.
  • Sleppti símboðshlutanum þar sem það voru í rauninni örlítið sérsniðnir hnappar.
  • Endurskoðaði næstum alla íhluti til að nota fleiri óhreiðra flokkavalara í stað ofsértækra barnavalara.

Eftir íhlut

Þessi listi undirstrikar helstu breytingar eftir íhlutum á milli v3.xx og v4.0.0.

Endurræstu

Nýtt í Bootstrap 4 er endurræsingin , nýtt stílblað sem byggir á Normalize með okkar eigin, nokkuð skoðanakenndu endurstillingarstílum. Valarar sem birtast í þessari skrá nota aðeins þætti - það eru engir flokkar hér. Þetta einangrar endurstillingarstíla okkar frá íhlutastílum okkar fyrir einingalegri nálgun. Nokkrar af mikilvægustu endurstillingunum sem þetta felur í sér eru box-sizing: border-boxbreytingin, flutningur frá emtil remeininga á mörgum þáttum, tengistílar og margar endurstillingar á formþáttum.

Leturfræði

  • Færði öll .text-tól í _utilities.scssskrána.
  • Sleppt .page-headerþar sem hægt er að beita stílum þess með tólum.
  • .dl-horizontalhefur verið felld niður. Í staðinn, notaðu .rowá <dl>og notaðu grid dálkaflokka (eða mixins) á hana <dt>og <dd>börn.
  • Endurhannaðar blokkatilvitnanir, færa stíl þeirra úr <blockquote>frumefninu í einn flokk, .blockquote. Sleppti .blockquote-reversebreytingum fyrir textaforrit.
  • .list-inlinekrefst þess nú að barnalistaatriðin hafi nýja .list-inline-itemflokkinn notaðan á sig.

Myndir

  • Endurnefnt .img-responsiveí .img-fluid.
  • Endurnefnt .img-roundedí.rounded
  • Endurnefnt .img-circleí.rounded-circle

Töflur

  • Næstum öll tilvik >valsins hafa verið fjarlægð, sem þýðir að hreiður töflur munu nú sjálfkrafa erfa stíl frá foreldrum sínum. Þetta einfaldar til muna velur okkar og hugsanlegar sérstillingar.
  • Endurnefnt .table-condensedí .table-smfyrir samkvæmni.
  • .table-inverseNýjum valkosti bætt við .
  • Bætt við breytingum á töfluhaus: .thead-defaultog .thead-inverse.
  • Endurnefndir samhengisflokkar til að hafa .table--forskeyti. Þess vegna .active, .success, og til , , og . .warning_.danger.info.table-active.table-success.table-warning.table-danger.table-info

Eyðublöð

  • Fluttur þáttur endurstillir _reboot.scssskrána.
  • Endurnefnt .control-labelí .col-form-label.
  • Endurnefnt .input-lgog .input-smtil .form-control-lgog .form-control-sm, í sömu röð.
  • Hætti .form-group-*kennslustundum til einföldunar. Notaðu .form-control-*námskeið í staðinn núna.
  • Sleppti .help-blockþví og kom í staðinn .form-textfyrir hjálpartexta á blokkarstigi. Fyrir innbyggðan hjálpartexta og aðra sveigjanlega valkosti, notaðu tólaflokka eins og .text-muted.
  • Sleppt .radio-inlineog .checkbox-inline.
  • Sameinað .checkboxog .radioinn í .form-checkog ​​hina ýmsu .form-check-*flokka.
  • Lárétt form endurskoðuð:
    • Sleppti .form-horizontalbekkjarkröfunni.
    • .form-groupnotar ekki lengur stíla frá .rowvia mixin, svo .rower nú krafist fyrir lárétt rist skipulag (td <div class="form-group row">).
    • Nýjum flokki bætt .col-form-labelvið lóðrétt miðja merki með .form-controls.
    • Bætt við nýju .form-rowfyrir þéttar formuppsetningar með grid flokkunum (skiptaðu út .rowfyrir a .form-rowog farðu).
  • Bætt við sérsniðnum eyðublöðum (fyrir gátreiti, útvarp, val og skráainnslátt).
  • Skipt út .has-error, .has-warning, og .has-successflokkum fyrir HTML5 eyðublaðsprófun í gegnum CSS :invalidog :validgerviflokka.
  • Endurnefnt .form-control-staticí .form-control-plaintext.

Hnappar

  • Endurnefnt .btn-defaultí .btn-secondary.
  • Sleppti .btn-xsbekknum algjörlega þar sem hann .btn-smer hlutfallslega miklu minni en v3.
  • Yfirlitshnappaeiginleika jQuery viðbótarinnar button.jshefur verið sleppt. Þetta felur í sér $().button(string)og $().button('reset')aðferðir. Við ráðleggjum því að nota örlítið sérsniðið JavaScript í staðinn, sem mun hafa þann ávinning að haga sér nákvæmlega eins og þú vilt hafa það.
    • Athugaðu að öðrum eiginleikum viðbótarinnar (gátreitir fyrir hnappa, útvarpstæki fyrir hnappa, hnappar með einum skipta) hefur verið haldið í v4.
  • Breyttu hnöppum [disabled]í :disabledeins og IE9+ styður :disabled. Hins vegar fieldset[disabled]er enn nauðsynlegt vegna þess að innfædd fötluð sviðsett eru enn þrjósk í IE11 .

Hnappahópur

  • Endurskrifaði hluti með flexbox.
  • Fjarlægt .btn-group-justified. Í staðinn er hægt að nota <div class="btn-group d-flex" role="group"></div>sem umbúðir utan um þætti með .w-100.
  • Hætti .btn-group-xsbekknum algjörlega eftir að hafa verið fjarlægður .btn-xs.
  • Fjarlægði skýrt bil á milli hnappahópa á hnappastikum; nota framlegðarveitur núna.
  • Bætt skjöl til notkunar með öðrum íhlutum.
  • Skipt úr foreldraveljum yfir í eintölu flokka fyrir alla íhluti, breytingar o.s.frv.
  • Einfaldaðir fellilistastílar til að senda ekki lengur með örvum sem snúa upp eða niður á við fellivalmyndina.
  • Hægt er að búa til fellilista með <div>s eða <ul>s núna.
  • Endurbyggðir fellilistastílar og merkingar til að veita auðveldan, innbyggðan stuðning fyrir <a>og <button>byggða fellilistahluti.
  • Endurnefnt .dividerí .dropdown-divider.
  • Nú þarf að fella niður atriði .dropdown-item.
  • Val á fellivalmyndum þarf ekki lengur skýran <span class="caret"></span>; þetta er nú veitt sjálfkrafa í gegnum CSS ::afterá .dropdown-toggle.

Ratkerfi

  • Bætti við nýjum 576pxhnitapunkti sem sm, sem þýðir að það eru nú fimm heildarþrep ( xs, sm, md, lg, og xl).
  • Endurnefnt móttækilegir netbreytingarflokkar frá .col-{breakpoint}-{modifier}-{size}til .{modifier}-{breakpoint}-{size}fyrir einfaldari netflokka.
  • Slepptu push and pull modifier flokkum fyrir nýju flexbox-knúnu orderflokkana. Til dæmis, í stað .col-8.push-4og .col-4.pull-8, myndirðu nota .col-8.order-2og .col-4.order-1.
  • Bætt við flexbox gagnsemisflokkum fyrir netkerfi og íhluti.

Listaðu hópa

  • Endurskrifaði hluti með flexbox.
  • Skipt út a.list-group-itemfyrir skýran flokk, .list-group-item-action, fyrir stíltengla og hnappaútgáfur af listahópatriðum.
  • Bætt við .list-group-flushbekk til notkunar með kortum.
  • Endurskrifaði hluti með flexbox.
  • Í ljósi þess að farið er yfir í flexbox, er líklegt að jöfnun afvísunartákna í hausnum sé biluð þar sem við erum ekki lengur að nota flot. Float efni kemur fyrst, en með flexbox er það ekki lengur raunin. Uppfærðu afvísunartáknin þín til að koma á eftir modal titlum til að laga.
  • Valmöguleikinn remote(sem hægt var að nota til að hlaða og sprauta utanaðkomandi efni sjálfkrafa inn í form) og samsvarandi loaded.bs.modalatburður voru fjarlægðir. Við mælum með því að nota í staðinn sniðmát fyrir viðskiptavini eða gagnabindingaramma, eða að hringja í jQuery.load sjálfur.
  • Endurskrifaði hluti með flexbox.
  • Sleppti næstum öllum >valmöguleikum fyrir einfaldari stíl í gegnum óhreiðra flokka.
  • Í stað HTML-sértækra veljara eins og .nav > li > a, notum við sérstaka flokka fyrir .navs, .nav-items og .nav-links. Þetta gerir HTML þinn sveigjanlegri á sama tíma og þú færð aukinn stækkanleika.

Navbarinn hefur að öllu leyti verið endurskrifaður í flexbox með bættum stuðningi við röðun, svörun og aðlögun.

  • Móttækileg hegðun navbar er nú beitt á .navbarbekkinn í gegnum það sem krafist er .navbar-expand-{breakpoint} þar sem þú velur hvar á að draga saman stýristikuna. Áður var þetta minni breytileg breyting og þurfti endursamsetningu.
  • .navbar-defaulter núna .navbar-light, þó .navbar-darker það óbreytt. Einn af þessum er nauðsynlegur á hverri siglingastiku. Hins vegar setja þessir flokkar ekki lengur background-colors; í staðinn hafa þeir í rauninni aðeins áhrif á color.
  • Navbars þurfa nú bakgrunnsyfirlýsingu af einhverju tagi. Veldu úr bakgrunnsforritum okkar ( .bg-*) eða stilltu þitt eigið með ljósum/öfugum flokkum hér að ofan fyrir vitlausa aðlögun .
  • Með hliðsjón af flexbox stílum geta navbars nú notað flexbox tól til að auðvelda stillingarmöguleika.
  • .navbar-toggleer núna .navbar-togglerog hefur mismunandi stíl og innri álagningu (ekki fleiri þrjú <span>s).
  • Hætti .navbar-formbekknum algjörlega. Það er ekki lengur nauðsynlegt; í staðinn skaltu bara nota .form-inlineog nota framlegðartól eftir þörfum.
  • Navbars innihalda ekki lengur margin-bottomeða border-radiussjálfgefið. Notaðu tól eftir þörfum.
  • Öll dæmi með siglingastikum hafa verið uppfærð til að innihalda nýja álagningu.

Síðuskipting

  • Endurskrifaði hluti með flexbox.
  • Nú er krafist skýrra flokka ( .page-item, .page-link) á afkomendum .paginations
  • Sleppti .pageríhlutnum algjörlega þar sem hann var lítið annað en sérsniðnir útlínuhnappar.
  • Skýrt bekk, .breadcrumb-item, er nú krafist á afkomendum .breadcrumbs

Merki og merki

  • Sameinað .labelog .badgeað greina frá <label>frumefninu og einfalda tengda hluti.
  • Bætt við .badge-pillsem breytiefni fyrir ávöl „pillu“ útlit.
  • Merki eru ekki lengur sjálfkrafa á floti í listahópum og öðrum hlutum. Til þess þarf nú veituflokka.
  • .badge-defaulthefur verið sleppt og .badge-secondarybætt við til að passa við íhlutabreytingaflokka sem notaðir eru annars staðar.

Spjöld, smámyndir og brunnar

Hætti algjörlega fyrir nýja kortahlutann.

Spjöld

  • .paneltil .card, nú byggð með flexbox.
  • .panel-defaultfjarlægð og engin skipti.
  • .panel-groupfjarlægð og engin skipti. .card-grouper ekki í staðinn, það er öðruvísi.
  • .panel-headingtil.card-header
  • .panel-titletil .card-title. Það fer eftir útlitinu sem þú vilt, þú gætir líka viljað nota fyrirsagnareiningar eða flokka (td <h3>, .h3) eða feitletraða þætti eða flokka (td <strong>, <b>, .font-weight-bold). Athugaðu að .card-title, þó að það sé nefnt með svipuðu nafni, gefur það annað útlit en .panel-title.
  • .panel-bodytil.card-body
  • .panel-footertil.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, og .panel-dangerhefur verið sleppt fyrir .bg-, .text-, og .bordertól sem eru búin til af $theme-colorsSass kortinu okkar.

Framfarir

  • Skipti út samhengisflokkum .progress-bar-*fyrir .bg-*tól. Til dæmis class="progress-bar progress-bar-danger"verður class="progress-bar bg-danger".
  • Skipt út .activefyrir hreyfimyndastikur með .progress-bar-animated.
  • Endurskoðaði allan íhlutinn til að einfalda hönnun og stíl. Við höfum færri stíla sem þú getur hnekið, nýjar vísbendingar og ný tákn.
  • Allur CSS hefur verið afhleyptur og endurnefnaður og tryggt að hver flokkur sé með forskeyti .carousel-.
    • Fyrir hringekjuhluti, .next, .prev, .left, og .righteru núna .carousel-item-next, .carousel-item-prev, .carousel-item-left, og .carousel-item-right.
    • .itemer líka núna .carousel-item.
    • Fyrir fyrri/næsta stýringar, .carousel-control.rightog .carousel-control.lefteru nú .carousel-control-nextog .carousel-control-prev, sem þýðir að þeir þurfa ekki lengur sérstakan grunnflokk.
  • Fjarlægði alla móttækilega stíl, frestað til tóla (td sýna yfirskrift á ákveðnum útsýnisgluggum) og sérsniðnum stílum eftir þörfum.
  • Fjarlægðar hnekkir mynda fyrir myndir í hringekjuhlutum, sem vísað er til tóla.
  • Gerði Carousel dæmið til að innihalda nýja álagningu og stíl.

Töflur

  • Fjarlægði stuðning fyrir stílfærðar töflur. Allir borðstílar eru nú arfir í v4 fyrir einfaldari veljara.
  • Bætt við öfugu töfluafbrigði.

Veitur

  • Birta, falið og fleira:
    • Gerði skjátólin móttækileg (td .d-noneog d-{sm,md,lg,xl}-none).
    • Sleppti megninu af .hidden-*tólum fyrir ný skjától . Til dæmis, í stað þess að .hidden-sm-upnota .d-sm-none. Endurnefna .hidden-printtólin til að nota nafnakerfi skjágagna. Nánari upplýsingar undir móttækilegum tólum hluta þessarar síðu.
    • Bætt við .float-{sm,md,lg,xl}-{left,right,none}flokkum fyrir móttækileg flot og fjarlægð .pull-leftog .pull-rightþar sem þeir eru óþarfir til .float-leftog .float-right.
  • Tegund:
    • Bætti móttækilegum afbrigðum við textajöfnunarflokkana okkar .text-{sm,md,lg,xl}-{left,center,right}.
  • Jöfnun og bil:
  • Clearfix uppfært til að hætta við stuðning fyrir eldri vafraútgáfur.

Blöndur fyrir forskeyti söluaðila

Bootstrap 3's forskeytiblöndun , sem voru úrelt í v3.2.0, hafa verið fjarlægð í Bootstrap 4. Þar sem við notum Autoprefixer eru þau ekki lengur nauðsynleg.

Fjarlægði eftirfarandi blöndur : 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-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Skjöl

Skjölin okkar fengu einnig uppfærslu yfir alla línuna. Hér er lágmarkið:

  • Við erum enn að nota Jekyll, en við erum með viðbætur í blöndunni:
    • bugify.rber notað til að skrá á skilvirkan hátt færslurnar á villusíðu vafrans okkar .
    • example.rber sérsniðinn gaffli sjálfgefna highlight.rbviðbótarinnar, sem gerir kleift að meðhöndla dæmikóða auðveldari.
    • callout.rber svipaður sérsniðinn gaffli af því, en hannaður fyrir sérstaka skjalaskýringar okkar.
    • jekyll-toc er notað til að búa til efnisyfirlit okkar.
  • Allt skjalaefni hefur verið endurskrifað í Markdown (í stað HTML) til að auðvelda klippingu.
  • Síður hafa verið endurskipulagðar fyrir einfaldara efni og aðgengilegra stigveldi.
  • Við fluttum frá venjulegu CSS yfir í SCSS til að nýta til fulls breytur Bootstrap, mixins og fleira.

Móttækileg tól

Allar @screen-breytur hafa verið fjarlægðar í v4.0.0. Notaðu media-breakpoint-up(), media-breakpoint-down(), eða media-breakpoint-only()Sass mixin eða $grid-breakpointsSass kortið í staðinn.

Móttækir veituflokkar okkar hafa að mestu verið fjarlægðir í þágu gagnvirkra displayveitna.

  • Og flokkarnir hafa verið fjarlægðir vegna þess að þeir stanguðust á við jQuery og .hiddenaðferðir . Reyndu í staðinn að skipta um eigindina eða notaðu innbyggða stíla eins og og ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Allir .hidden-flokkar hafa verið fjarlægðir, nema prenttólin sem hafa verið endurnefnd.
    • Fjarlægt úr 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
    • Fjarlægt úr 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
  • Prentaforrit byrja ekki lengur á .hidden-eða .visible-, heldur með .d-print-.
    • Gömul nöfn: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nýir flokkar: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Frekar en að nota skýra .visible-*flokka gerirðu þátt sýnilegan með því einfaldlega að fela hann ekki í þeirri skjástærð. Þú getur sameinað einn .d-*-noneflokk með einum .d-*-blockflokki til að sýna þátt aðeins á tilteknu bili skjástærða (td .d-none.d-md-block.d-xl-nonesýnir þáttinn aðeins á meðalstórum og stórum tækjum).

Athugaðu að breytingar á hnitapunktum í v4 þýðir að þú þarft að fara einu brotpunkti stærri til að ná sömu niðurstöðum. Hinir nýju móttækilegu gagnsemisflokkar reyna ekki að koma til móts við sjaldgæfari tilvik þar sem ekki er hægt að tjá sýnileika frumefnis sem eitt samfellt svið af útsýnisstærðum; þú þarft í staðinn að nota sérsniðið CSS í slíkum tilvikum.