v4ra migratzen

Bootstrap 4 proiektu osoaren berridazketa garrantzitsu bat da. Aldaketa aipagarrienak laburbiltzen dira jarraian, eta ondoren osagai garrantzitsuenetan egindako aldaketa zehatzagoak.

Aldaketa egonkorrak

Beta 3-tik gure v4.0 bertsio egonkorrara igaroz, ez dago aldaketa handirik, baina aldaketa nabarmenak daude.

Inprimaketa

• Hautsitako inprimatzeko utilitateak konpondu dira. Aurretik, .d-print-*klase bat erabiltzeak ustekabean beste edozein klase baztertuko zituen .d-*. Orain, gure beste pantaila-erabilgarritasunekin bat datoz eta euskarri horretara soilik aplikatzen dira ( @media print).

• Inprimatzeko erabilgarri dauden erabilgarritasun hedatuak beste utilitate batzuekin bat egiteko. Beta 3 eta zaharragoek block, inline-block, inlineeta none. V4 egonkorra gehitu da flex, inline-flex, table, table-roweta table-cell.

• Inprimatzeko aurrebista errendatzea konpondu da arakatzaileetan, zehazten duten inprimatze-estilo berriekin @page size.

Beta 3 aldaketak

Beta 2-k beta fasean zehar gure hautsi-aldaketen zatirik handiena ikusi zuen bitartean, baina oraindik ere baditugu Beta 3 bertsioan landu beharreko batzuk. Aldaketa hauek Beta 2-tik edo Bootstrap-en edozein bertsio zaharretik Beta 3ra eguneratzen ari bazara aplikatzen dira.

Denetarikoa

• Erabili gabeko $thumbnail-transitionaldagaia kendu du. Ez genuen ezer trantsitzen ari, beraz, kode gehigarria besterik ez zen.
• npm paketeak jada ez du gure iturburu eta dist fitxategiak ez diren fitxategirik sartzen; haietan oinarritzen bazenute eta node_moduleskarpetaren bidez gure script-ak exekutatzen ari bazina, zure lan-fluxua egokitu beharko zenuke.

Formak

• Berridatzi kontrol-lauki pertsonalizatuak eta lehenetsiak eta irratiak. Orain, biek bat datoz HTML egitura (kanpokoa <div>anaiarekin <input>eta <label>) eta diseinu-estilo berdinak (pilatuta lehenetsia, aldatzaile klasearekin lerroan). Horri esker, etiketa sarreraren egoeraren arabera estiloa dezakegu, disabledatributuaren euskarria sinplifikatuz (lehen klase guraso bat behar zuen) eta gure inprimakiaren baliozkotzea hobeto lagunduz.

  Horren baitan, CSS aldatu dugu background-imageinprimaki pertsonalizatuen kontrol-laukietan eta irratietan hainbat s kudeatzeko. Aurretik, orain kendutako .custom-control-indicatorelementuak atzeko planoaren kolorea, gradientea eta SVG ikonoa zituen. Atzeko planoko gradientea pertsonalizatzeak horiek guztiak ordezkatzea esan nahi zuen bakarra aldatu behar zenuen bakoitzean. Orain, .custom-control-label::beforebetegarria eta gradientea dugu eta .custom-control-label::afterikonoa maneiatzen dugu.

  Sarean egiaztapen pertsonalizatu bat egiteko, gehitu .custom-control-inline.

• Sarreran oinarritutako botoi-taldeen hautatzailea eguneratua. [data-toggle="buttons"] { }Estilo eta portaeraren ordez , JS jokabideetarako soilik erabiltzen dugu atributua eta estilo berrirako klase databerri batean oinarritzen gara..btn-group-toggle

• Kendu .col-form-legendapur bat hobetu baten alde .col-form-label. Horrela .col-form-label-smeta .col-form-label-lgerraz erabil daiteke <legend>elementuetan.

• Fitxategi pertsonalizatuen sarrerak aldaketa bat jaso dute $custom-file-textSass aldagaian. Jada ez da habiaraturiko Sass mapa bat eta orain kate bakarra aktibatzen du; Browsebotoia hori baita gure Sass-etik sortutako sasi-elementu bakarra. Testua Choose fileorain .custom-file-label.

Sarrera-taldeak

• Sarrera-taldeen gehigarriak orain sarrera bati dagokion kokapenaren espezifikoak dira. Jaitsi dugu .input-group-addoneta .input-group-btnbi klase berri, .input-group-prependeta .input-group-append. Erantsi edo aurrekari bat berariaz erabili behar duzu orain, gure CSSaren zati handi bat erraztuz. Erantsi edo aurreikuspen baten barruan, jarri botoiak beste inon egongo liratekeen bezala, baina bildu testua .input-group-text.

• Baliozkotze-estiloak onartzen dira orain, sarrera anitz bezala (nahiz eta talde bakoitzeko sarrera bakarra balioztatu dezakezu).

• Tamaina-klaseek gurasoan egon behar dute .input-groupeta ez inprimaki-elementu indibidualetan.

Beta 2 aldaketak

Beta-n gauden bitartean, haustura-aldaketarik ez izatea dugu helburu. Hala ere, gauzak ez dira beti aurreikusi bezala ateratzen. Jarraian, Beta 1etik Beta 2ra pasatzean kontuan izan beharreko aldaketak daude.

Haustura

• Aldagaia kendu $badge-colorda eta haren erabilera .badge. Kolore-kontraste-funtzio bat erabiltzen dugu coloroinarrian oinarritutako bat hautatzeko background-color, beraz, aldagaia ez da beharrezkoa.
• Funtzioari izena aldatu grayscale()zaio CSS jatorrizko iragazkiarekin gray()gatazkarik ez hausteko .grayscale
• .table-inverse, .thead-inverse, eta to eta .thead-default, beste leku batzuetan erabilitako gure kolore-eskemekin bat etorriz..*-dark.*-light
• Taulen erantzunak sareko eten-puntu bakoitzeko klaseak sortzen dituzte orain. Hau Beta 1etik hausten da, .table-responsiveerabiltzen ari zarena .table-responsive-md. Orain erabil dezakezu .table-responsiveedo .table-responsive-{sm,md,lg,xl}behar duzun moduan.
• Bower-en euskarria kendu egin da pakete-kudeatzailea denez, alternatibetarako (adibidez, Yarn edo npm). Ikusi bower/bower#2298 xehetasunetarako.
• Bootstrap-ek jQuery 1.9.1 edo berriagoa behar du oraindik, baina 3.x bertsioa erabiltzea gomendatzen dizugu, v3.x-en onartzen diren arakatzaileak Bootstrap-ek onartzen dituenak eta v3.x-ek segurtasun konponketa batzuk dituelako.
• Erabili gabeko .form-control-labelklasea kendu da. Klase hau erabili bazenuen, inprimaki horizontaleko diseinuetan .col-form-labela bertikalki zentratzen zuen klasearen bikoiztua zen .<label>
• color-yiqPropietatea barne hartzen zuen nahasketa batetik balio bat itzultzen duen funtzio batera aldatu colorda, edozein CSS propietatetarako erabiltzeko aukera emanez. Adibidez, -ren ordez color-yiq(#000), idatziko zenuke color: color-yiq(#000);.

Nabarmenak

• Erabilera berria sartu pointer-eventsda modaletan. Kanpokoak .modal-dialoggertaerak igarotzen ditu pointer-events: noneklik pertsonalizatuak kudeatzeko (klik entzuteko aukera ematen du .modal-backdrop), eta, ondoren, benetakoarekin kontraesatzen .modal-contentdu pointer-events: auto.

Laburpen

Hona hemen v3-tik v4-ra pasatzean ezagutu nahi dituzun txartelaren elementu handiak.

Arakatzailearen laguntza

• IE8, IE9 eta iOS 6 laguntza kendu. v4 orain IE10+ eta iOS 7+ baino ez da. Horietako bat behar duten guneetarako, erabili v3.
• Android v5.0 Lollipop-en arakatzailea eta WebView-rako laguntza ofiziala gehitu da. Android arakatzailearen eta WebView-en aurreko bertsioek ofizialki ez-onartzen jarraitzen dute.

Aldaketa globalak

• Flexbox lehenespenez gaituta dago. Oro har, horrek karrozetatik urrundu eta gure osagaietatik gehiago aldendu behar du.
• Less - etik Sass - era aldatu da gure iturburuko CSS fitxategietarako.
• pxGure CSS unitate nagusira izatetik aldatu da rem, nahiz eta pixelak oraindik ere erabiltzen diren multimedia-kontsultetarako eta sareko portaeretarako, gailuen ikuspuntuek ez baitute motaren tamainak eragiten.
• Letra-tamaina globala handitu zenetik 14pxizatera 16px.
• Sare-mailak berritu dira bosgarren aukera bat gehitzeko (gailu txikiagoei zuzenduta 576pxeta behean) eta -xsklase horietatik infixa kendu. Adibidea .col-6.col-sm-4.col-md-3:.
• Bereizi aukerako gaia SCSS aldagaien bidez konfigura daitezkeen aukerak jarri ditu (adibidez, $enable-gradients: true).
• Eraikitze-sistema berritu da Grunt-en ordez npm script sorta bat erabiltzeko. Ikusi package.jsongidoi guztiak, edo tokiko garapenaren beharretarako gure proiektuaren readme.
• Jada ez da onartzen Bootstrap-en erantzuten ez duen erabilera.
• Lineako Pertsonalizatzailea bertan behera utzi du konfigurazio dokumentazio zabalagoaren eta pertsonalizatutako eraikuntzaren alde.
• Dozenaka erabilgarritasun-klase berri gehitu dira CSS propietate-balio bikote arruntetarako eta marjina/betetze tarterako lasterbideetarako.

Sare sistema

• Flexboxera eraman da.
  • Flexbox-erako euskarria gehitu da sareko nahasketetan eta aurrez zehaztutako klaseetan.
  • Flexbox-en zati gisa, lerrokatze bertikal eta horizontaleko klaseetarako euskarria barne.
• Sare-klaseen izenak eguneratuak eta sare-maila berri bat.
  • smBehean sare-maila berri bat gehitu 768pxda kontrol zehatzagoa izateko. Orain xs, sm, md, lgeta xl. Horrek esan nahi du maila bakoitza maila bat igo dela (beraz .col-md-6, v3- .col-lg-6n orain v4-n dago).
  • xssareta-klaseak aldatu egin dira, infixa ez dadin behar zehatzago adierazteko estiloak aplikatzen hasten direla min-width: 0eta ez ezarritako pixel-balioan. Horren ordez .col-xs-6, orain da .col-6. Beste sare-maila guztiek infixa behar dute (adibidez, sm).
• Sarearen tamaina, nahasketa eta aldagai eguneratuak.
  • Sareko erretenek orain Sass mapa bat dute, eten-puntu bakoitzean erreten-zabalera zehatzak zehaztu ahal izateko.
  • Sareko nahasketak eguneratu dira make-col-readyprestatzeko nahasketa bat erabiltzeko eta zutabe indibidualaren tamaina make-colezartzeko .flexmax-width
  • Sare-sistemako multimedia-kontsulten eten-puntuak eta edukiontzien zabalerak aldatu dira sare-maila berria kontuan hartzeko eta zutabeak berdin zatitzen direla ziurtatzeko 12gehienezko zabaleran.
  • $grid-breakpointsSarearen eten-puntuak eta edukiontzien zabalerak Sass mapen bidez ( eta ) kudeatzen dira orain $container-max-widthsaldagai bereizi batzuen ordez. Hauek aldagaiak guztiz ordezkatzen dituzte @screen-*eta sareko mailak guztiz pertsonalizatzeko aukera ematen dute.
  • Hedabideen kontsultak ere aldatu egin dira. Gure komunikabideen kontsulta-deklarazioak balio berdinarekin errepikatu beharrean, orain dugu @include media-breakpoint-up/down/only. Orain, idatzi beharrean, @media (min-width: @screen-sm-min) { ... }idatzi dezakezu @include media-breakpoint-up(sm) { ... }.

Osagaiak

• Jarritako panelak, koadro txikiak eta putzuak osagai guztiak biltzen dituen berri baterako, txartelak .
• Glyphicons ikonoaren letra-tipoa kendu du. Ikonoak behar badituzu, aukera batzuk hauek dira:
  • Glyphicons -en upstream bertsioa
  • Oktokoak
  • Letra Ikaragarria
  • Ikusi Hedatu orria alternatiben zerrenda ikusteko. Iradokizun gehigarririk al duzu? Mesedez, ireki arazo bat edo PR.
• Affix jQuery plugina kendu du.
  • position: stickyHorren ordez erabiltzea gomendatzen dugu . Ikusi HTML5 Mesedez sarrera xehetasunak eta polyfill gomendio zehatzetarako. Iradokizun bat @supportsezartzeko arau bat erabiltzea da (adibidez, @supports (position: sticky) { ... })/
  • Erabiltzen bazenu Affix positionestiloak ez direnak aplikatzeko, baliteke polibetetzeek zure erabilera kasua ez onartzea. Erabilera horietarako aukera bat hirugarrenen ScrollPos-Styler liburutegia da.
• Orrialdearen osagaia jaitsi egin da, funtsean, apur bat pertsonalizatutako botoiak baitziren.
• Osagai ia guztiak birfaktorizatu ditu habiaratu gabeko klase-hautatzaile gehiago erabiltzeko, gehiegizko hautatzaile seme-alaba espezifikoen ordez.

Osagaien arabera

Zerrenda honek osagaien araberako funtsezko aldaketak nabarmentzen ditu v3.xx eta v4.0.0 artean.

Berrabiarazi

Bootstrap 4-n berria da Berrabiarazi , Normalize-n eraikitzen den estilo-orri berri bat, gure berrezartze-estilo apur batekin. Fitxategi honetan agertzen diren hautatzaileek elementuak soilik erabiltzen dituzte; hemen ez dago klaserik. Honek gure berrezarri-estiloak gure osagai-estiloetatik isolatzen ditu ikuspegi modularagoa lortzeko. Honek barne hartzen dituen berrezartze garrantzitsuenetako batzuk box-sizing: border-boxaldaketa, elementu askoren unitateetatik igarotzea, esteka-estiloak eta inprimaki-elementuen berrezartze asko dira em.rem

Tipografia

• .text-Utilitate guztiak _utilities.scssfitxategira eraman ditu.
• Jaregin .page-headeregin da bere estiloak utilitateen bidez aplika daitezkeelako.
• .dl-horizontaljaitsi egin da. Horren ordez, erabili .rowon <dl>eta erabili grid zutabeen klaseak (edo mixins) bere <dt>eta <dd>seme-alabetan.
• <blockquote>Blokeko komatxoak birdiseinatuak, haien estiloak elementutik klase bakar batera eramanez , .blockquote. .blockquote-reverseTestu-erabilgarrientzako modifikatzailea kendu du.
• .list-inlineorain bere seme-alaben zerrendako elementuek .list-inline-itemklase berria aplikatuta izan behar dute.

Irudiak

• Izena aldatu .img-responsivezaio .img-fluid.
• Izena aldatu .img-roundedzaio.rounded
• Izena aldatu .img-circlezaio.rounded-circle

Taulak

• Hautatzailearen ia instantzia guztiak >kendu dira, hau da, habiaraturiko taulek orain automatikoki heredatuko dituzte estiloak gurasoengandik. Horrek asko errazten ditu gure hautatzaileak eta pertsonalizazio potentzialak.
• koherentziagatik izena aldatu .table-condensedzaio .table-sm.
• Aukera berri bat gehitu da .table-inverse.
• Taularen goiburuko aldatzaileak gehitu dira: .thead-defaulteta .thead-inverse.
• Testuinguruko klaseei izena aldatu zaie .table--aurrizkia izan dezaten. Horregatik .active, .success, .warning, .dangereta .info, .table-active, .table-success, eta . .table-warning_.table-danger.table-info

Formak

• Mugitutako elementua _reboot.scssfitxategira berrezartzen da.
• Izena aldatu .control-labelzaio .col-form-label.
• Izena aldatu .input-lgeta .input-smto .form-control-lgeta .form-control-sm, hurrenez hurren.
• Klaseak .form-group-*utzi ditu sinpletasunaren mesedetan. Erabili .form-control-*klaseak orain.
• Jaregin .help-blocketa ordezkatu .form-textdu bloke-mailako laguntza-testua. Sareko laguntza-testua eta beste aukera malgu batzuk lortzeko, erabili erabilgarritasun klaseak bezalakoak .text-muted.
• Jaitsi .radio-inlineeta .checkbox-inline.
• Kontsolidatu .checkboxeta .radiobarne .form-checketa hainbat .form-check-*klase.
• Inprimaki horizontalak berritu dira:
  • Klaseko .form-horizontaleskakizuna kendu du.
  • .form-groupjada ez ditu .rowvia mixin-eko estiloak aplikatzen, beraz, .roworain beharrezkoa da sare horizontaleko diseinuetarako (adibidez, <div class="form-group row">).
  • Klase berria gehitu da s .col-form-label-a duten etiketak bertikalki erdiratzeko .form-control.
  • .form-rowInprimaki-diseinu trinkoetarako berriak gehitu dira sareta-klaseekin (trukatu zure .rowa- rekin .form-roweta joan).
• Inprimaki pertsonalizatuen euskarria gehitu da (kontrol-laukietarako, irratietarako, hautapenetarako eta fitxategien sarrerarako).
• .has-error, .has-warning, eta .has-successklaseak HTML5 inprimakien baliozkotzearekin CSS :invalideta :validsasi-klaseen bidez ordezkatu dira.
• Izena aldatu .form-control-staticzaio .form-control-plaintext.

Botoiak

• Izena aldatu .btn-defaultzaio .btn-secondary.
• .btn-xsKlasea erabat jaitsi .btn-smda proportzionalki v3-a baino askoz txikiagoa baita.
• jQuery pluginaren egoera-botoien funtzioa kendu egin da . button.jsHonek $().button(string)eta $().button('reset')metodoak barne hartzen ditu. Horren ordez, JavaScript pertsonalizatu txiki bat erabiltzea aholkatzen dugu, eta horrek nahi duzun moduan jokatzeko onura izango du.
  • Kontuan izan pluginaren beste ezaugarriak (botoien kontrol-laukiak, botoien irratiak, txandakatze bakarreko botoiak) v4-n mantendu direla.
• Aldatu botoiak IE9+-k onartzen [disabled]duen moduan . Hala ere , oraindik beharrezkoa da jatorrizko desgaitutako eremu multzoak akatsak direlako oraindik IE11n .:disabled:disabledfieldset[disabled]

Botoi taldea

• Osagaia berridatzi flexbox-ekin.
• Kendua .btn-group-justified. Ordezko <div class="btn-group d-flex" role="group"></div>gisa erabil dezakezu elementuen bilgarri gisa .w-100.
• Klasea .btn-group-xserabat kendu du kenduta .btn-xs.
• Botoien tresna-barrako botoien taldeen arteko tarte esplizitua kendu da; erabili marjina utilitateak orain.
• Beste osagai batzuekin erabiltzeko dokumentazio hobetua.

Goitibeherak

• Guraso-hautatzaileetatik klase berezietara aldatu da osagai, modifikatzaile eta abar guztientzat.
• Goitibeherako estilo sinplifikatuak goitibeherako menuan gorantz edo beherantz begira dauden geziekin ez bidaltzeko.
• <div>Goitibeherak s edo s -rekin eraiki daitezke <ul>orain.
• Goitibeherako estiloak eta markaketak berreraiki ditu goitibeherako elementuei euskarria erraz eta integratua emateko <a>.<button>
• Izena aldatu .dividerzaio .dropdown-divider.
• Goitibeherako elementuek orain behar dute .dropdown-item.
• Goitibeherako txandakatzeek jada ez dute espliziturik behar <span class="caret"></span>; hau orain automatikoki ematen da CSS-en ::afterbidez .dropdown-toggle.

Sare sistema

• 576pxSarearen eten-puntu berri bat gehitu da sm, hau da, orain guztira bost maila daude ( xs, sm, md, lgeta xl).
• Sarearen modifikatzaile sentikorren klaseak batetik .col-{breakpoint}-{modifier}-{size}to izena aldatu du sareko klase .{modifier}-{breakpoint}-{size}sinpleagoetarako.
• Bultza eta tira modifikatzaile klaseak kendu dira flexbox-en funtzionatzen duten orderklase berrietarako. Adibidez, eta-ren ordez, eta .col-8.push-4erabiliko .col-4.pull-8zenuke ..col-8.order-2.col-4.order-1
• Flexbox erabilgarritasun-klaseak gehitu dira sare-sistema eta osagaietarako.

Taldeak zerrenda

• Osagaia berridatzi flexbox-ekin.
• a.list-group-itemKlase esplizitu batekin ordezkatu .list-group-item-actionda, zerrenda-taldeetako elementuen estekaren eta botoien bertsioak diseinatzeko.
• .list-group-flushTxartelekin erabiltzeko klasea gehitu da.

Modala

• Osagaia berridatzi flexbox-ekin.
• Flexboxera mugitzen denean, goiburuko baztertzeko ikonoen lerrokatzea hautsita egongo da jada karrozarik erabiltzen ez dugulako. Flotatutako edukia da lehenik, baina flexbox-ekin jada ez da horrela. Eguneratu baztertzeko ikonoak konpontzeko titulu modalen ondoren etorri daitezen.
• Aukera remote(kanpoko edukia modal batean automatikoki kargatzeko eta txertatzeko erabil zitekeena) eta dagokion loaded.bs.modalgertaera kendu ziren. Horren ordez, bezeroaren aldeko txantiloiak edo datuak lotzeko esparru bat erabiltzea edo jQuery.load zeuk deitzea gomendatzen dugu.

Nabigazioak

• Osagaia berridatzi flexbox-ekin.
• Ia >hautatzaile guztiak kendu ditu habiaratu gabeko klaseen bidez estilo errazagoa izateko.
• Hala nola HTML berariazko hautatzaileen ordez .nav > li > a, klase bereiziak erabiltzen ditugu .navs, .nav-items eta .nav-links. Horrek zure HTML malguagoa egiten du, hedagarritasun handiagoarekin batera.

Nabigazio barra

Nabigazio-barra guztiz berridatzi da flexbox-en, lerrokatze, erantzun eta pertsonalizaziorako laguntza hobetuarekin.

• .navbarNabigazio-barren portaera sentikorrak klaseari aplikatzen zaizkio , nahitaezkoaren .navbar-expand-{breakpoint} bidez, non tolestu nahi duzun aukeratzen duzun nabigazio-barra. Aurretik aldagai gutxiagoko aldaketa bat zen eta berriro konpilatu behar zen.
• .navbar-defaultorain da .navbar-light, nahiz .navbar-darketa berdin jarraitzen duen. Horietako bat beharrezkoa da nabigazio-barra bakoitzean. Hala ere, klase hauek jada ez dute background-colors ezartzen; horren ordez, funtsean, soilik eragiten dute color.
• Nabigazio-barrek nolabaiteko atzeko planoko deklarazioa behar dute orain. Aukeratu gure atzeko erabilgarritasunetatik ( .bg-*) edo ezarri zurea goiko argi/alderantzizko klaseekin pertsonalizazio erorako .
• Flexbox estiloak kontuan hartuta, navbar-ek orain flexbox utilitateak erabil ditzakete lerrokatze aukera errazetarako.
• .navbar-toggleorain da .navbar-togglereta estilo eta barneko marka desberdinak ditu (ez dira hiru <span>s gehiago).
• Klasea .navbar-formerabat utzi zuen. Jada ez da beharrezkoa; horren ordez, erabili .form-inlineeta aplikatu marjina-utilitateak behar den moduan.
• Nabigazio-barrek jada ez dute sartzen margin-bottomedo border-radiuslehenespenez. Erabili utilitateak behar den moduan.
• Nabigazio-barrak dituzten adibide guztiak eguneratu dira marka berriak sartzeko.

Paginazioa

• Osagaia berridatzi flexbox-ekin.
• Klase esplizituak ( .page-item, .page-link) behar dira orain .paginations -ren ondorengoetan
• Osagaia erabat jaitsi .pagerzen, eskema-botoi pertsonalizatuak baino ez zirelako.

Ogi birrindua

• Klase esplizitua, , beharrezkoa da orain s .breadcrumb-item-ren ondorengoei.breadcrumb

Etiketak eta txapak

• Finkatu .labeleta elementutik .badgedesanbiguatzeko <label>eta erlazionatutako osagaiak sinplifikatzeko.
• .badge-pill"pilula" itxura biribildurako modifikatzaile gisa gehitu da.
• Jada txapak ez dira automatikoki flotatzen zerrenda taldeetan eta beste osagai batzuetan. Gaur egun erabilgarritasun klaseak behar dira horretarako.
• .badge-defaultkendu eta .badge-secondarygehitu da beste nonbait erabilitako osagaien modifikatzaile klaseekin bat etortzeko.

Panelak, miniaturak eta putzuak

Txartelaren osagai berrirako erabat jaitsi da.

Panelak

• .panelto .card, orain flexbox-ekin eraikia.
• .panel-defaultkendu eta ordeztu gabe.
• .panel-groupkendu eta ordeztu gabe. .card-groupez da ordezkoa, ezberdina da.
• .panel-headingto.card-header
• .panel-titleto .card-title. Nahi den itxuraren arabera, baliteke goiburuko elementuak edo klaseak (adibidez <h3>, .h3) edo lodia elementuak edo klaseak (adibidez <strong>, <b>, .font-weight-bold) ere erabili nahi izatea. Kontuan izan .card-title, antzeko izena duen arren, itxura desberdina sortzen duela .panel-title.
• .panel-bodyto.card-body
• .panel-footerto.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, eta gure Sass mapatik sortutako , , eta utilitateetarako .panel-dangerkendu dira..bg-.text-.border$theme-colors

Aurrerapena

• Testuinguruko .progress-bar-*klaseak .bg-*utilitateekin ordezkatu ditu. Esaterako, class="progress-bar progress-bar-danger"bihurtzen da class="progress-bar bg-danger".
• .activeAurrerapen-barra animatuengatik ordezkatu da .progress-bar-animated.

Karrusela

• Osagai osoa berritu da diseinua eta estiloa errazteko. Estilo gutxiago ditugu baliogabetzeko, adierazle berriak eta ikono berriak.
• CSS guztiak habiaratu gabe eta izena aldatu dira, klase bakoitzari aurrizkia duela ziurtatuz .carousel-.
  • Karruselaren elementuetarako, .next, .prev, .left, eta .rightorain .carousel-item-next, .carousel-item-prev, .carousel-item-left, eta .carousel-item-right.
  • .itemorain ere bada .carousel-item.
  • Aurreko/hurrengo kontroletarako, .carousel-control.righteta .carousel-control.leftorain .carousel-control-nexteta .carousel-control-prev, hau da, jada ez dute oinarrizko klase zehatzik behar.
• Estilo sentikor guztiak kendu ditu, utilitateetara (adibidez, zenbait ikustaitan epigrafeak erakustea) eta estilo pertsonalizatuak behar bezala atzeratuz.
• Karruseletako elementuetako irudien gainidatziak kendu dira, utilitateetara atzeratuz.
• Karuselaren adibidea moldatu da marka eta estilo berriak sartzeko.

Taulak

• Kendu egin da estilo habiaratutako taulen euskarria. Taula-estilo guztiak v4-n heredatzen dira hautatzaile sinpleagoetarako.
• Alderantzizko taularen aldaera gehitu da.

Utilitateak

• Bistaratu, ezkutatuta eta gehiago:
  • Bistaratzeko utilitateak erantzuteko egin ditu (adibidez, .d-noneeta d-{sm,md,lg,xl}-none).
  • Bistaratzeko utilitate.hidden-* berrietarako erabilgarritasun gehienak kendu ditu . Adibidez, erabili beharrean , erabili . Utilitateak izena aldatu du bistaratzeko utilitateen izen-eskema erabiltzeko. Informazio gehiago orrialde honetako Responsive utilities atalean..hidden-sm-up.d-sm-none.hidden-print
  • .float-{sm,md,lg,xl}-{left,right,none}Karroza sentikorretarako klaseak gehitu .pull-lefteta kendu .pull-rightdira eta .float-lefteta .float-right.
• Mota:
  • Gure testu-lerrokatze-klaseei erantzunezko aldaerak gehitu dizkiegu .text-{sm,md,lg,xl}-{left,center,right}.
• Lerrokatzea eta tartea:
  • Marjina erantzuteko eta betegarrizko utilitate berriak gehitu dira alde guztietarako, eta laburpen bertikalak eta horizontalak.
  • Flexbox utilitateen boatload gehitu da .
  • Klase .center-blockberrirako jaitsi da..mx-auto
• Clearfix eguneratu da arakatzaile zaharren bertsioetarako laguntza kentzeko.

Saltzaileen aurrizkiaren nahasketak

Bootstrap 3-ren saltzaileen aurrizkiaren mixin-ak, v3.2.0-n zaharkituta zeudenak, Bootstrap 4-n kendu dira. Autoprefixer erabiltzen dugunez , jada ez dira beharrezkoak.

Nahasketa hauek kendu ditu : 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-functiontransition-transformtranslatetranslate3duser-select

Dokumentazioa

Gure dokumentazioak maila guztietan ere berritze bat jaso zuen. Hona hemen behea:

• Oraindik Jekyll erabiltzen ari gara, baina pluginak ditugu nahasketan:
  • bugify.rbgure arakatzailearen akatsen orrian sarrerak modu eraginkorrean zerrendatzeko erabiltzen da .
  • example.rbplugin lehenetsiaren sardexka pertsonalizatua da, highlight.rbadibide-kodeen kudeaketa errazteko aukera ematen duena.
  • callout.rbhorren antzeko sardexka pertsonalizatua da, baina gure dokumentuen deialdi berezietarako diseinatua.
  • jekyll-toc gure aurkibidea sortzeko erabiltzen da.
• Dokumentuen eduki guztia Markdown-en (HTML-en ordez) berridatzi da errazago editatzeko.
• Orrialdeak berrantolatu dira eduki sinpleagorako eta hierarkia hurbilago baterako.
• CSS arruntetik SCSSra pasatu ginen Bootstrap-en aldagaiak, nahasketak eta gehiago aprobetxatzeko.

Erabilgarritasun erreaktiboak

Aldagai guztiak @screen-kendu dira v4.0.0-n. Erabili media-breakpoint-up(), media-breakpoint-down(), edo media-breakpoint-only()Sass nahasketak edo $grid-breakpointsSass mapa.

displayGure responsive erabilgarritasun-klaseak neurri handi batean kendu dira utilitate esplizituen alde .

• Eta klaseak kendu egin dira jQuery-ren eta .hiddenmetodoekin gatazkan zeudelako. Horren ordez, saiatu atributua txandakatzen edo erabili lerroko estiloak eta ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• Klase guztiak .hidden-kendu dira, izena aldatu zaien inprimatzeko utilitateak izan ezik.
  • v3-tik kendu da:.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 alpha-tik kendu da:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Inprimatzeko utilitateak jada ez dira .hidden-edo -rekin hasten .visible-, baizik eta -rekin .d-print-.
  • Izen zaharrak: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Klase berriak: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Klase esplizituak erabili beharrean .visible-*, elementu bat ikusgai bihurtzen duzu pantailaren tamaina horretan ezkutatuta. .d-*-noneKlase bat klase batekin konbina dezakezu .d-*-blockelementu bat pantaila-tamainen tarte jakin batean soilik .d-none.d-md-block.d-xl-noneerakusteko (adibidez, elementua gailu ertain eta handietan bakarrik erakusten du).

Kontuan izan v4-ko sareko eten puntuetan egindako aldaketek esan nahi dutela eten puntu bat handiagoa izan beharko duzula emaitza berdinak lortzeko. Erabilgarritasun-klase sentikor berriak ez dira elementu baten ikusgarritasuna bista-tamainen ondoko sorta bakar gisa adierazi ezin den kasu ez hain ohikoak hartzen saiatzen; horren ordez, CSS pertsonalizatua erabili beharko duzu kasu horietan.