Source

Migrazzjoni lejn v4

Bootstrap 4 huwa kitba mill-ġdid maġġuri tal-proġett kollu. L-aktar bidliet notevoli huma miġbura fil-qosor hawn taħt, segwiti minn bidliet aktar speċifiċi għall-komponenti rilevanti.

Bidliet stabbli

Nimxu minn Beta 3 għar-rilaxx stabbli tagħna v4.x, m'hemm l-ebda tibdil ta 'ksur, iżda hemm xi bidliet notevoli.

Stampar

  • Utilitajiet fissi stampati miksura. Preċedentement, l-użu ta' .d-print-*klassi kien jegħleb bla mistenni kwalunkwe .d-*klassi oħra. Issa, jaqblu mal-utilitajiet tal-wiri l-oħra tagħna u japplikaw biss għal dik il-midja ( @media print).

  • Utilitajiet tal-wiri tal-istampar disponibbli estiżi biex jaqblu ma 'utilitajiet oħra. Beta 3 u anzjani kellhom biss block, inline-block, inline, u none. Stabbli v4 miżjud flex, inline-flex, table, table-row, u table-cell.

  • Irrendi fissi tal-preview tal-istampar fil-browsers bi stili tal-istampar ġodda li jispeċifikaw @page size.

Beta 3 bidliet

Filwaqt li Beta 2 raw il-biċċa l-kbira tal-bidliet ta 'tkissir tagħna matul il-fażi beta, iżda għad għandna ftit li kellhom jiġu indirizzati fir-rilaxx ta' Beta 3. Dawn il-bidliet japplikaw jekk qed taġġorna għal Beta 3 minn Beta 2 jew kwalunkwe verżjoni eqdem ta' Bootstrap.

Mixxellanji

  • Neħħa l- $thumbnail-transitionvarjabbli mhux użat. Aħna ma kinux transizzjoni xejn, għalhekk kien biss kodiċi żejjed.
  • Il-pakkett npm m'għadux jinkludi xi fajls minbarra l-fajls tas-sors u dist tagħna; jekk inti bbażat fuqhom u kienu qed imexxu l-iskripts tagħna permezz tal- node_modulesfolder, għandek tadatta l-fluss tax-xogħol tiegħek.

Formoli

  • Inkiteb mill-ġdid kemm kaxxi ta' kontroll u radjijiet tad-dwana kif ukoll dawk default. Issa, it-tnejn għandhom struttura HTML li taqbel (barra <div>ma 'aħwa <input>u <label>) u l-istess stili ta' tqassim (default f'munzelli, inline mal-klassi tal-modifikatur). Dan jippermettilna nstiljaw it-tikketta bbażati fuq l-istat tal-input, jissimplifikaw l-appoġġ għall- disabledattribut (li qabel kien jeħtieġ klassi ġenitur) u nappoġġjaw aħjar il-validazzjoni tal-formola tagħna.

    Bħala parti minn dan, biddilna s-CSS għall-ġestjoni ta' multipli background-imagefuq kaxxi ta' kontroll u radjijiet tal-formoli tad-dwana. Preċedentement, l- .custom-control-indicatorelement issa mneħħi kellu l-kulur tal-isfond, il-gradjent u l-ikona SVG. Il-personalizzazzjoni tal-gradjent fl-isfond kienet tfisser li tissostitwixxi dawk kollha kull darba li kellek bżonn tibdel wieħed biss. Issa, għandna .custom-control-label::beforegħall-mili u gradjent u .custom-control-label::aftermankijiet l-ikona.

    Biex tagħmel kontroll personalizzat inline, żid .custom-control-inline.

  • Selettur aġġornat għal gruppi ta' buttuna bbażati fuq input. Minflok [data-toggle="buttons"] { }għall-istil u l-imġieba, nużaw l- dataattribut biss għall-imgieba JS u niddependu fuq .btn-group-toggleklassi ġdida għall-grafika.

  • Imneħħija .col-form-legendfavur kemmxejn imtejba .col-form-label. Dan il-mod .col-form-label-smu .col-form-label-lgjista 'jintuża fuq <legend>elementi b'faċilità.

  • L-inputs tal-fajls personalizzati rċevew bidla fil- $custom-file-textvarjabbli Sass tagħhom. M'għadhiex mappa Sass imnaqqsa u issa tissaħħaħ biss string waħda—il- Browsebuttuna peress li dik issa hija l-uniku psewdo-element iġġenerat mis-Sass tagħna. It- Choose filetest issa ġej mill- .custom-file-label.

Gruppi ta' input

  • Addons tal-grupp ta 'input issa huma speċifiċi għat-tqegħid tagħhom relattiv għal input. Aħna waqgħu .input-group-addonu .input-group-btngħal żewġ klassijiet ġodda, .input-group-prependu .input-group-append. Int trid tuża b'mod espliċitu append jew prepend issa, biex tissimplifika ħafna mis-CSS tagħna. F'append jew prepend, poġġi l-buttuni tiegħek kif ikunu jeżistu imkien ieħor, iżda wrap-test fi .input-group-text.

  • L-istili ta' validazzjoni issa huma appoġġjati, kif ukoll inputs multipli (għalkemm tista' tivvalida input wieħed biss għal kull grupp).

  • Il-klassijiet tad-daqs għandhom ikunu fuq il-ġenitur .input-groupu mhux l-elementi tal-forma individwali.

Beta 2 bidliet

Waqt li nkunu fil-beta, aħna nimmiraw li ma jkollna l-ebda tibdil. Madankollu, l-affarijiet mhux dejjem imorru kif ippjanat. Hawn taħt huma l-bidliet li wieħed iżomm f'moħħu meta tiċċaqlaq minn Beta 1 għal Beta 2.

Tkissir

  • Imneħħija $badge-colorvarjabbli u l-użu tagħha fuq .badge. Aħna nużaw funzjoni ta 'kuntrast tal-kulur biex nagħżlu colorbbażata fuq il- background-color, għalhekk il-varjabbli mhix meħtieġa.
  • grayscale()Funzjoni b'isem ġdid biex tevita li tkisser il-kunflitt mal- filtru gray()nattiv CSS .grayscale
  • Isimha mill -ġdid .table-inverse, .thead-inverse, u .thead-defaultgħal .*-darku .*-light, li tqabbel l-iskemi tal-kuluri tagħna użati x'imkien ieħor.
  • It-tabelli li jirrispondu issa jiġġeneraw klassijiet għal kull breakpoint tal-grilja. Dan jinkiser minn Beta 1 fis-sens li l .table-responsiveinti kont qed tuża huwa aktar simili .table-responsive-md. Issa tista' tuża .table-responsivejew .table-responsive-{sm,md,lg,xl}kif meħtieġ.
  • Waqqa 'l-appoġġ ta' Bower peress li l-maniġer tal-pakketti ġie deprecato għal alternattivi (eż., Ħjut jew npm). Ara bower/bower#2298 għad-dettalji.
  • Bootstrap għadu jeħtieġ jQuery 1.9.1 jew ogħla, imma int avżat li tuża l-verżjoni 3.x peress li l-browsers appoġġjati minn v3.x huma dawk li Bootstrap jappoġġja u v3.x għandu xi soluzzjonijiet ta' sigurtà.
  • Neħħa l- .form-control-labelklassi mhux użata. Jekk għamilt użu minn din il-klassi, kienet duplikata tal- .col-form-labelklassi li ċċentrata vertikalment a <label>bl-input assoċjat tagħha f'formati orizzontali.
  • Biddlet color-yiqminn mixin li kien jinkludi l- colorproprjetà għal funzjoni li tirritorna valur, li tippermettilek tużaha għal kwalunkwe proprjetà CSS. Per eżempju, minflok color-yiq(#000), inti tikteb color: color-yiq(#000);.

Il-punti ewlenin

  • Introduċa pointer-eventsużu ġdid fuq modali. Il-parti ta 'barra .modal-dialogtgħaddi minn avvenimenti bi pointer-events: nonegħall-immaniġġjar tal-ikklikkjar apposta (li jagħmilha possibbli li tisma' biss fuq il- .modal-backdropgħal kwalunkwe klikks), u mbagħad tikkontrobattuha għall-attwali .modal-contentbi pointer-events: auto.

Sommarju

Hawn huma l-oġġetti tal-biljetti kbar li trid tkun konxju minnhom meta tiċċaqlaq minn v3 għal v4.

Appoġġ għall-browser

  • Waqqa 'appoġġ IE8, IE9, u iOS 6. v4 issa huwa biss IE10+ u iOS 7+. Għal siti li jeħtieġu xi wieħed minn dawn, uża v3.
  • Miżjud appoġġ uffiċjali għall-Browser u WebView ta 'Android v5.0 Lollipop. Verżjonijiet preċedenti tal-Browser Android u WebView jibqgħu biss appoġġjati b'mod mhux uffiċjali.

Bidliet globali

  • Flexbox hija attivata awtomatikament. B'mod ġenerali dan ifisser li titbiegħed minn sufruni u aktar madwar il-komponenti tagħna.
  • Qlib minn Less għal Sass għall-fajls CSS tas-sors tagħna.
  • Qlib minn pxgħal rembħala l-unità CSS primarja tagħna, għalkemm il-pixels għadhom jintużaw għal mistoqsijiet tal-midja u l-imġiba tal-grilja peress li l-viewports tal-apparat mhumiex affettwati mid-daqs tat-tip.
  • Id-daqs tat-tipa globali żdied minn 14pxgħal 16px.
  • Saffi tal-grilja mġedda biex iżżid il-ħames għażla (li tindirizza apparati iżgħar fi 576pxu taħt) u neħħa l- -xsinfiss minn dawk il-klassijiet. Eżempju: .col-6.col-sm-4.col-md-3.
  • Ibdel it-tema fakultattiva separata b'għażliet konfigurabbli permezz ta' varjabbli SCSS (eż, $enable-gradients: true).
  • Is-sistema tal-bini ġiet riveduta biex tuża serje ta 'skripts npm minflok Grunt. Ara package.jsongħall-iskripts kollha, jew readme tal-proġett tagħna għall-bżonnijiet ta' żvilupp lokali.
  • L-użu ta' Bootstrap li ma jirrispondix m'għadux appoġġjat.
  • Waqqa 'l-Customizer onlajn favur dokumentazzjoni ta' setup aktar estensiva u bini personalizzat.
  • Miżjud għexieren ta ' klassijiet ta' utilità ġodda għal pari komuni ta 'valur ta' proprjetà CSS u shortcuts ta 'spazjar ta' marġni/ikkuttunar.

Sistema tal-grilja

  • Imċaqlaq għal flexbox.
    • Appoġġ miżjud għall-flexbox fil-mixins tal-grilja u klassijiet predefiniti.
    • Bħala parti mill-flexbox, inkluż appoġġ għal klassijiet ta 'allinjament vertikali u orizzontali.
  • Ismijiet tal-klassi tal-grilja aġġornati u livell ġdid tal-grilja.
    • Miżjud livell ta ' smgrilja ġdid hawn taħt 768pxgħal aktar kontroll granulari. Issa għandna xs, sm, md, lg, u xl. Dan ifisser ukoll li kull saff żdied livell wieħed (għalhekk .col-md-6f'v3 issa huwa .col-lg-6f'v4).
    • xsklassijiet tal-grilja ġew modifikati biex ma jeħtiġux li l-infiss jirrappreżenta b'mod aktar preċiż li jibdew japplikaw stili fuq min-width: 0u mhux valur tal-pixel stabbilit. Minflok .col-xs-6, issa .col-6. Il-livelli tal-grilja l-oħra kollha jeħtieġu l-infiss (eż, sm).
  • Daqsijiet tal-grilja aġġornati, mixins, u varjabbli.
    • Il-kanal tal-grilja issa għandhom mappa Sass sabiex tkun tista' tispeċifika wisgħat speċifiċi tal-kanal f'kull breakpoint.
    • Mixins tal-grilja aġġornati biex tuża make-col-readymixin tal-preparazzjoni u make-colbiex tissettja l- flexu max-widthgħad-daqs tal-kolonna individwali.
    • Inbidlu l-punti ta' mistoqsija tal-midja tas-sistema tal-grilja u l-wisgħat tal-kontenituri biex jitqiesu l-livell il-ġdid tal-grilja u jiġi żgurat li l-kolonni jkunu diviżibbli b'mod ugwali bil 12-wisa' massimu tagħhom.
    • Il-punti ta 'waqfien tal-grilja u l-wisa' tal-kontenituri issa huma ttrattati permezz ta 'mapep Sass ( $grid-breakpointsu $container-max-widths) minflok numru żgħir ta' varjabbli separati. Dawn jissostitwixxu l- @screen-*varjabbli għal kollox u jippermettulek tippersonalizza bis-sħiħ is-saffi tal-grilja.
    • Il-mistoqsijiet tal-midja nbidlu wkoll. Minflok ma nirrepetu d-dikjarazzjonijiet tagħna tal-mistoqsijiet tal-midja bl-istess valur kull darba, issa għandna @include media-breakpoint-up/down/only. Issa, minflok tikteb @media (min-width: @screen-sm-min) { ... }, tista 'tikteb @include media-breakpoint-up(sm) { ... }.

Komponenti

  • Pannelli, thumbnails, u bjar imwaqqgħin għal komponent ġdid li jinkludi kollox, karti .
  • Waqqa 'l-font tal-ikona Glyphicons. Jekk għandek bżonn ikoni, xi għażliet huma:
  • Waqqa 'l-plugin Affix jQuery.
    • Nirrakkomandaw li tuża position: stickyminflok. Ara l-HTML5 Jekk jogħġbok dħul għal dettalji u rakkomandazzjonijiet speċifiċi tal-polyfill. Suġġeriment wieħed huwa li tuża @supportsregola għall-implimentazzjoni tagħha (eż. @supports (position: sticky) { ... })/
    • Jekk kont qed tuża Affix biex tapplika positionstili mhux addizzjonali, il-polyfills jistgħu ma jappoġġjawx il-każ tal-użu tiegħek. Għażla waħda għal tali użi hija l- librerija ScrollPos-Styler ta 'parti terza .
  • Waqqa 'l-komponent tal-pager peress li essenzjalment kien buttuni kemmxejn personalizzati.
  • Rifactored kważi l-komponenti kollha biex tuża aktar seletturi tal-klassi mhux ibbed minflok seletturi tat-tfal speċifiċi żżejjed.

Skond il-komponent

Din il-lista tenfasizza bidliet ewlenin skont il-komponent bejn v3.xx u v4.0.0.

Reboot

Ġdid għal Bootstrap 4 huwa r- Reboot , stil ġdid li jibni fuq Normalizza bl-istili ta 'reset kemmxejn opinjoni tagħna stess. Is-seletturi li jidhru f'dan il-fajl jużaw biss elementi—m'hemm l-ebda klassijiet hawn. Dan iżola l-istili reset tagħna mill-istili tal-komponenti tagħna għal approċċ aktar modulari. Uħud mir-resets l-aktar importanti li dan jinkludi huma l- box-sizing: border-boxbidla, li jiċċaqalqu minn emgħal remunitajiet fuq ħafna elementi, stili ta 'link, u ħafna resets ta' elementi tal-forma.

Tipografija

  • Imċaqlaq l- .text-utilitajiet kollha għall- _utilities.scssfajl.
  • Waqqa .page-header'l-istili tiegħu jistgħu jiġu applikati permezz ta' utilitajiet.
  • .dl-horizontaltwaqqgħet. Minflok, uża .rowfuq <dl>u uża klassijiet tal-kolonni tal-grilja (jew mixins) fuq tagħha <dt>u t- <dd>tfal.
  • Kwoti imfassla mill-ġdid, li jċaqalqu l-istili tagħhom mill- <blockquote>element għal klassi waħda, .blockquote. Waqqa 'l- .blockquote-reversemodifikatur għall-utilitajiet tat-test.
  • .list-inlineissa jeħtieġ li l-oġġetti tal-lista tat-tfal tagħha jkollhom il- .list-inline-itemklassi l-ġdida applikata għalihom.

Stampi

  • Ismu mill -ġdid .img-responsivegħal .img-fluid.
  • Ismu mill -ġdid .img-roundedgħal.rounded
  • Ismu mill -ġdid .img-circlegħal.rounded-circle

Tabelli

  • Kważi l-istanzi kollha tas- >selettur tneħħew, jiġifieri t-tabelli nested issa se jirtu stili awtomatikament mill-ġenituri tagħhom. Dan jissimplifika bil-kbir is-seletturi tagħna u l-personalizzazzjonijiet potenzjali.
  • Ismu mill -ġdid .table-condensedgħal .table-smgħall-konsistenza.
  • Miżjud .table-inversegħażla ġdida.
  • Miżjuda modifikaturi header tabella: .thead-defaultu .thead-inverse.
  • Isimhom mill-ġdid klassijiet kuntestwali biex ikollhom .table--prefiss. Għalhekk .active, .success, .warning, .dangeru .infogħal .table-active, .table-success, .table-warning, .table-dangeru .table-info.

Formoli

  • L-element imċaqlaq mill-ġdid għall- _reboot.scssfajl.
  • Ismu mill -ġdid .control-labelgħal .col-form-label.
  • Ismu mill -ġdid .input-lgu .input-smgħal .form-control-lgu .form-control-sm, rispettivament.
  • Klassijiet waqgħu .form-group-*għal finijiet ta 'sempliċità. Uża .form-control-*klassijiet minflok issa.
  • Waqqa .help-blocku biddelha .form-textgħal test ta' għajnuna fil-livell ta' blokk. Għal test ta' għajnuna inline u għażliet flessibbli oħra, uża klassijiet ta' utilità bħal .text-muted.
  • Waqqa .radio-inlineu .checkbox-inline.
  • Konsolidati .checkboxu .radiofi u l- klassijiet .form-checkvarji ..form-check-*
  • Forom orizzontali riveduti:
    • Waqqa 'l- .form-horizontalħtieġa tal-klassi.
    • .form-groupm'għadux japplika stili mill- .rowvia mixin, għalhekk .rowissa huwa meħtieġ għal layouts ta 'grilja orizzontali (eż, <div class="form-group row">).
    • Miżjud .col-form-labelklassi ġdida biex jiċċentra vertikalment tikketti b .form-control's.
    • Miżjud ġdid .form-rowgħal layouts ta 'forma kompatti mal-klassijiet tal-grilja (tbiddel tiegħek .rowgħal a .form-rowu mur).
  • Appoġġ miżjud għall-formoli tad-dwana (għal checkboxes, radjijiet, selezzjonijiet, u inputs tal-fajls).
  • Mibdula .has-error, .has-warning, u .has-successklassijiet b'validazzjoni tal-forma HTML5 permezz ta' CSS :invalidu :validpsewdo-klassijiet.
  • Ismu mill -ġdid .form-control-staticgħal .form-control-plaintext.

Buttuni

  • Ismu mill -ġdid .btn-defaultgħal .btn-secondary.
  • Waqqa 'l- .btn-xsklassi kompletament kif .btn-smhuwa proporzjonalment ħafna iżgħar minn v3's.
  • Il- karatteristika tal- buttuna statefulbutton.js tal- plugin jQuery twaqqfet. Dan jinkludi l- $().button(string)u $().button('reset')metodi. Aħna nagħtu parir minflok tuża ftit JavaScript personalizzat, li jkollu l-benefiċċju li jġib ruħu eżattament kif trid.
    • Innota li l-karatteristiċi l-oħra tal-plugin (kaxxi ta 'kontroll tal-buttuni, radjijiet tal-buttuni, buttuni ta' toggle wieħed) inżammu f'v4.
  • Ibdel il-buttuni ' [disabled]għal :disabledkif IE9+ jappoġġja :disabled. Madankollu fieldset[disabled]għadu meħtieġ minħabba li fieldsets indiġeni b'diżabbiltà għadhom buggy f'IE11 .

Grupp tal-buttuni

  • Komponent rewrote bil-flexbox.
  • Imneħħija .btn-group-justified. Bħala sostituzzjoni tista 'tuża <div class="btn-group d-flex" role="group"></div>bħala tgeżwir madwar elementi b' .w-100.
  • Waqqa 'l- .btn-group-xsklassi kompletament mogħtija tneħħija ta' .btn-xs.
  • Imneħħi l-ispazjar espliċitu bejn il-gruppi tal-buttuni fil-toolbars tal-buttuni; uża utilitajiet marġini issa.
  • Dokumentazzjoni mtejba għall-użu ma 'komponenti oħra.
  • Mibdula minn seletturi ġenituri għal klassijiet singulari għall-komponenti, modifikaturi, eċċ kollha.
  • Stili dropdown simplifikati biex ma jibqgħux jibagħtu bi vleġeġ 'il fuq jew 'l isfel mehmuża mal-menu dropdown.
  • Dropdowns jistgħu jinbnew b <div>'s jew <ul>s issa.
  • Stili dropdown u markup mibnijin mill-ġdid biex jipprovdu appoġġ faċli u integrat għal <a>u <button>oġġetti dropdown bbażati.
  • Ismu mill -ġdid .dividergħal .dropdown-divider.
  • Oġġetti dropdown issa jeħtieġu .dropdown-item.
  • Dropdown toggles m'għadhomx jeħtieġu espliċita <span class="caret"></span>; dan issa huwa pprovdut awtomatikament permezz tas-CSS ::afterfuq .dropdown-toggle.

Sistema tal-grilja

  • Żieda 576pxbreakpoint ġdid tal-grid bħala sm, li jfisser li issa hemm ħames livelli totali ( xs, sm, md, lg, u xl).
  • Isimha mill-ġdid il-klassijiet tal-modifikatur tal-grilja li jirrispondu minn .col-{breakpoint}-{modifier}-{size}sa .{modifier}-{breakpoint}-{size}għal klassijiet tal-grilja aktar sempliċi.
  • Klassijiet ta' modifikaturi push and pull waqgħu għall-klassijiet ġodda li jaħdmu bil-flexbox order. Per eżempju, minflok .col-8.push-4u .col-4.pull-8, inti tuża .col-8.order-2u .col-4.order-1.
  • Miżjud klassijiet ta 'utilità tal-flexbox għas-sistema u l-komponenti tal-grilja.

Lista gruppi

  • Komponent rewrote bil-flexbox.
  • Mibdul a.list-group-itembi klassi espliċita, .list-group-item-action, għall-link tal-grafika u verżjonijiet tal-buttuni tal-oġġetti tal-grupp tal-lista.
  • .list-group-flushKlassi miżjuda għall-użu mal-karti.
  • Komponent rewrote bil-flexbox.
  • Minħabba ċ-ċaqliq lejn flexbox, l-allinjament tal-ikoni tat-tkeċċija fl-header x'aktarx jitkisser peress li m'għadniex nużaw sufruni. Il-kontenut float jiġi l-ewwel, iżda bil-flexbox dak m'għadux il-każ. Aġġorna l-ikoni tat-tkeċċija tiegħek biex jiġu wara t-titoli modali biex tirranġa.
  • L- remotegħażla (li tista 'tintuża biex awtomatikament tagħbija u tinjetta kontenut estern f'modal) u l- loaded.bs.modalavveniment korrispondenti tneħħew. Nirrakkomandaw minflok tuża templating min-naħa tal-klijent jew qafas ta' rabta tad-dejta, jew issejjaħ jQuery.load lilek innifsek.
  • Komponent rewrote bil-flexbox.
  • Waqqa 'kważi s- >seletturi kollha għal stil aktar sempliċi permezz ta' klassijiet mhux ibbed.
  • Minflok seletturi speċifiċi għall-HTML bħal .nav > li > a, nużaw klassijiet separati għal .navs, .nav-items, u .nav-links. Dan jagħmel l-HTML tiegħek aktar flessibbli filwaqt li jġib aktar estensibilità.

In-navbar ġiet miktuba mill-ġdid għal kollox fil-flexbox b'appoġġ imtejjeb għall-allinjament, ir-rispons, u l-adattament.

  • L-imgieba tan-navbar li tirreaġixxi issa huma applikati għall- .navbarklassi permezz tal - .navbar-expand-{breakpoint} ħtieġa fejn tagħżel fejn tikkollassa n-navbar. Preċedentement din kienet modifika Inqas varjabbli u kienet teħtieġ rikompilazzjoni mill-ġdid.
  • .navbar-defaulthuwa issa .navbar-light, għalkemm .navbar-darkjibqa l-istess. Waħda minn dawn hija meħtieġa fuq kull navbar. Madankollu, dawn il-klassijiet m'għadhomx jistabbilixxu background-colors; minflok huma essenzjalment jaffettwaw biss color.
  • Navbars issa jeħtieġu dikjarazzjoni ta' sfond ta' xi tip. Agħżel mill-utilitajiet fl-isfond tagħna ( .bg-*) jew issettja tiegħek bil-klassijiet ħfief/inversi hawn fuq għal customization mad .
  • Minħabba l-istili tal-flexbox, in-navbars issa jistgħu jużaw utilitajiet tal-flexbox għal għażliet ta 'allinjament faċli.
  • .navbar-togglehija issa .navbar-toggleru għandha stili differenti u markup ta 'ġewwa (mhux aktar tliet <span>s).
  • Waqqa 'l- .navbar-formklassi għal kollox. M'għadux meħtieġ; minflok, uża .form-inlineu tapplika l-utilitajiet tal-marġni kif meħtieġ.
  • In-Navbars m'għadhomx jinkludu margin-bottomjew border-radiusb'mod awtomatiku. Uża l-utilitajiet kif meħtieġ.
  • L-eżempji kollha li fihom navbars ġew aġġornati biex jinkludu markup ġdid.

Paġnar

  • Komponent rewrote bil-flexbox.
  • Klassijiet espliċiti ( .page-item, .page-link) issa huma meħtieġa fuq id-dixxendenti tal- .paginations
  • Waqqa 'l- .pagerkomponent għal kollox peress li kien ftit aktar minn buttuni tal-kontorn personalizzati.
  • Klassi espliċita, .breadcrumb-item, issa hija meħtieġa fuq id-dixxendenti ta ' .breadcrumbs

Tikketti u badges

  • Konsolidat .labelu .badgebiex jiddiżambigwa mill- <label>element u jissimplifika l-komponenti relatati.
  • Miżjud .badge-pillbħala modifikatur għal dehra ta '"pillola" tond.
  • Il-badges m'għadhomx imqiegħda f'wiċċ l-ilma awtomatikament fi gruppi ta' lista u komponenti oħra. Klassijiet ta 'utilità issa huma meħtieġa għal dan.
  • .badge-defaulttwaqqgħet u ġiet .badge-secondarymiżjuda biex tqabbel il-klassijiet tal-modifikaturi tal-komponenti użati x'imkien ieħor.

Pannelli, thumbnails, u bjar

Waqqa għal kollox għall-komponent tal-karta l-ġdid.

Pannelli

  • .panelto .card, issa mibnija bil-flexbox.
  • .panel-defaultjitneħħa u l-ebda sostituzzjoni.
  • .panel-groupjitneħħa u l-ebda sostituzzjoni. .card-groupmhix sostituzzjoni, hija differenti.
  • .panel-headingbiex.card-header
  • .panel-titlebiex .card-title. Skont id-dehra mixtieqa, tista' wkoll tkun trid tuża elementi jew klassijiet tal-intestatura (eż. <h3>, .h3) jew elementi jew klassijiet b'tipa grassa (eż. <strong>, <b>, .font-weight-bold). Innota li .card-title, filwaqt li jismu bl-istess mod, jipproduċi dehra differenti minn .panel-title.
  • .panel-bodybiex.card-body
  • .panel-footerbiex.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, u .panel-dangertwaqqgħu għal .bg-, .text-, u .borderutilitajiet iġġenerati mill- $theme-colorsmappa Sass tagħna.

Progress

  • .progress-bar-*Klassijiet kuntestwali mibdula b'utilitajiet .bg-*. Per eżempju, class="progress-bar progress-bar-danger"isir class="progress-bar bg-danger".
  • Mibdul .activegħal bars tal-progress animati b' .progress-bar-animated.
  • Irranġat il-komponent kollu biex jissimplifika d-disinn u l-istil. Għandna inqas stili għalik biex tirrivali, indikaturi ġodda, u ikoni ġodda.
  • Is-CSS kollu ma ġiex imbejtat u ssemmiet mill-ġdid, u b'hekk jiġi żgurat li kull klassi jkollha l-prefiss .carousel-.
    • Għal oġġetti tal-karużell, .next, .prev, .left, u .rightissa huma .carousel-item-next, .carousel-item-prev, .carousel-item-left, u .carousel-item-right.
    • .itemhuwa wkoll issa .carousel-item.
    • Għal kontrolli preċedenti/li jmiss, .carousel-control.rightu .carousel-control.leftissa .carousel-control-nextu .carousel-control-prev, jiġifieri m'għadhomx jeħtieġu klassi bażi speċifika.
  • Tneħħa l-istil reattiv kollu, id-differiment għall-utilitajiet (eż., il-wiri ta 'captions fuq ċerti viewports) u stili tad-dwana kif meħtieġ.
  • L-immaġini tneħħew l-overrides għall-immaġini f'oġġetti tal-karużell, b'differiment għall-utilitajiet.
  • Tweaked l-eżempju tal-Carousel biex jinkludi l-markup u l-istili l-ġodda.

Tabelli

  • Tneħħa l-appoġġ għal tabelli nested stilizzati. L-istili kollha tal-mejda issa jintirtu f'v4 għal seletturi aktar sempliċi.
  • Miżjud varjant tal-mejda inversa.

Utilitajiet

  • Wiri, moħbi, u aktar:
    • L-utilitajiet tal-wiri saru jirreaġixxu (eż., .d-noneu d-{sm,md,lg,xl}-none).
    • Waqqa 'l-biċċa l-kbira ta' utilitajiet għal utilitajiet ta ' wiri.hidden-* ġodda . Per eżempju, minflok , uża . Ismu mill-ġdid l- utilitajiet biex tuża l-iskema tal-ismijiet tal-utilità tal-wiri. Aktar informazzjoni taħt is- sezzjoni ta’ Utilitajiet Responsivi ta’ din il-paġna..hidden-sm-up.d-sm-none.hidden-print
    • Miżjuda .float-{sm,md,lg,xl}-{left,right,none}klassijiet għal sufruni li jirrispondu u mneħħija .pull-leftu .pull-rightperess li huma żejda għal .float-leftu .float-right.
  • Tip:
    • Żieda varjazzjonijiet li jirrispondu għall-klassijiet tagħna ta 'allinjament tat-test .text-{sm,md,lg,xl}-{left,center,right}.
  • Allinjament u spazjar:
  • Clearfix aġġornat biex iwaqqaf l-appoġġ għal verżjonijiet tal-browser eqdem.

Mixins tal-prefiss tal-bejjiegħ

Il-mixins tal- prefiss tal-bejjiegħ tal-Bootstrap 3 , li kienu deprecati f'v3.2.0, tneħħew f'Bootstrap 4. Peress li nużaw Autoprefixer , m'għadhomx meħtieġa.

Neħħew it-taħlitiet li ġejjin : 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,translatetranslate3duser-select

Dokumentazzjoni

Id-dokumentazzjoni tagħna rċeviet titjib madwar il-bord ukoll. Hawn l-isfel:

  • Għadna qed nużaw Jekyll, iżda għandna plugins fit-taħlita:
    • bugify.rbjintuża biex jelenka b'mod effiċjenti l-entrati fuq il- paġna tagħna tal- bugs tal-browser .
    • example.rbhija furketta tad-dwana tal- highlight.rbplugin default, li tippermetti tqandil aktar faċli ta 'kodiċi ta' eżempju.
    • callout.rbhija furketta tad-dwana simili ta 'dak, iżda ddisinjata għal callouts tad-dokumenti speċjali tagħna.
    • jekyll-toc jintuża biex jiġġenera l-kontenut tagħna.
  • Il-kontenut kollu tad-doks inkiteb mill-ġdid f'Markdown (minflok HTML) għal editjar aktar faċli.
  • Il-paġni ġew organizzati mill-ġdid għal kontenut aktar sempliċi u ġerarkija aktar avviċinabbli.
  • Aħna mċaqalqa minn CSS regolari għal SCSS biex nieħdu vantaġġ sħiħ mill-varjabbli, mixins ta 'Bootstrap, u aktar.

Utilitajiet li jirrispondu

Il @screen--varjabbli kollha tneħħew f'v4.0.0. Uża l- media-breakpoint-up(), media-breakpoint-down(), jew media-breakpoint-only()Sass mixins jew il- $grid-breakpointsmappa Sass minflok.

Il-klassijiet ta' utilità responsivi tagħna fil-biċċa l-kbira tneħħew favur displayutilitajiet espliċiti.

  • Il -klassijiet .hiddenu .showtneħħew minħabba li kienu f'kunflitt mal-jQuery $(...).hide()u l- $(...).show()metodi. Minflok, ipprova taqleb l- [hidden]attribut jew uża stili inline bħal style="display: none;"u style="display: block;".
  • Il- .hidden-klassijiet kollha tneħħew, ħlief għall-utilitajiet tal-istampar li ngħataw isem ġdid.
    • Imneħħi minn 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
    • Imneħħija minn v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • L-utilitajiet tal-istampar m'għadhomx jibdew bi .hidden-jew .visible-, iżda bi .d-print-.
    • Ismijiet qodma: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Klassijiet ġodda: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Minflok ma tuża .visible-*klassijiet espliċiti, tagħmel element viżibbli billi sempliċement ma taħbihx f'dak id-daqs tal-iskrin. Tista' tgħaqqad .d-*-noneklassi waħda ma' .d-*-blockklassi waħda biex turi element biss fuq intervall partikolari ta' daqsijiet tal-iskrin (eż. .d-none.d-md-block.d-xl-nonejuri l-element biss fuq apparati medji u kbar).

Innota li l-bidliet fil-punti ta 'waqfien tal-grilja f'v4 ifisser li jkollok bżonn li tmur breakpoint wieħed akbar biex tikseb l-istess riżultati. Il-klassijiet l-ġodda ta' utilità li jirrispondu ma jippruvawx jakkomodaw każijiet inqas komuni fejn il-viżibilità ta' element ma tistax tiġi espressa bħala firxa waħda kontigwa ta' daqsijiet ta' viewport; minflok ikollok bżonn tuża CSS personalizzat f'każijiet bħal dawn.