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.x bertsio egonkorrara igaroz, ez dago aldaketarik apurtzerik, baina aldaketa nabarmenak daude.
Inprimaketa
-
Hautsitako inprimatzeko utilitateak konpondu ditu. 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
,inline
etanone
. V4 egonkorra gehitu daflex
,inline-flex
,table
,table-row
etatable-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 Beta 2-tik edo Bootstrap-en edozein bertsio zaharretik Beta 3ra eguneratzen ari bazara aplikatzen dira.
Denetarikoa
- Erabili gabeko
$thumbnail-transition
aldagaia 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_modules
karpetaren bidez gure scriptak exekutatzen ari bazenuen, zure lan-fluxua egokitu beharko zenuke.
Formak
-
Berridatzi kontrol-lauki eta irrati pertsonalizatuak eta lehenetsiak. Orain, biek bat datoz HTML egitura (kanpokoa
<div>
anaiarekin<input>
eta<label>
) eta diseinu-estilo berdinak (pilatuta lehenetsia, modifikatzaile klasearekin lerroan). Horri esker, etiketa sarreraren egoeran oinarritutako estiloa jar dezakegu,disabled
atributuaren euskarria sinplifikatuz (lehen klase guraso bat behar zuen) eta gure inprimakien baliozkotzea hobeto lagunduz.Horren baitan, CSS aldatu dugu
background-image
inprimaki pertsonalizatuen kontrol-laukietan eta irratietan hainbat s kudeatzeko. Aurretik, orain kendutako.custom-control-indicator
elementuak 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::before
betegarria eta gradientea dugu eta.custom-control-label::after
ikonoa 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 klasedata
berri batean oinarritzen gara..btn-group-toggle
-
Kendu
.col-form-legend
apur bat hobetu baten alde.col-form-label
. Horrela.col-form-label-sm
eta.col-form-label-lg
erraz erabil daiteke<legend>
elementuetan. -
Fitxategi pertsonalizatuen sarrerak aldaketa bat jaso dute
$custom-file-text
Sass aldagaian. Jada ez da habiaraturiko Sass mapa bat eta orain kate bakarra aktibatzen du;Browse
botoia hori baita gure Sass-etik sortutako sasi-elementu bakarra. TestuaChoose file
orain.custom-file-label
.
Sarrera-taldeak
-
Sarrera-taldeen gehigarriak orain sarrera bati dagokion kokapenaren espezifikoak dira. Jaitsi dugu
.input-group-addon
eta.input-group-btn
bi klase berri,.input-group-prepend
eta.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-group
eta 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
- Kendu
$badge-color
zen aldagaia eta haren erabilera.badge
. Kolore-kontraste-funtzio bat erabiltzen dugucolor
oinarrian oinarritutako bat hautatzekobackground-color
, beraz, aldagaia ez da beharrezkoa. - Funtzioari izena aldatu
grayscale()
zaio CSS jatorrizko iragazkiarekingray()
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-responsive
erabiltzen ari zarena.table-responsive-md
. Orain erabil dezakezu.table-responsive
edo.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-label
klasea kendu da. Klase hau erabili bazenuen, inprimaki horizontaleko diseinuetan.col-form-label
a bertikalki zentratzen zuen klasearen bikoiztua zen .<label>
color-yiq
Propietatea barne hartzen zuen nahasketa batetik balio bat itzultzen duen funtzio batera aldatucolor
da, edozein CSS propietatetarako erabiltzeko aukera emanez. Adibidez, -ren ordezcolor-yiq(#000)
, idatziko zenukecolor: color-yiq(#000);
.
Nabarmenak
- Erabilera berria sartu
pointer-events
da modaletan. Kanpokoak.modal-dialog
gertaerak zeharkatzen ditupointer-events: none
klik pertsonalizatuak kudeatzeko (klik entzuteko aukera ematen du.modal-backdrop
), eta, ondoren, benetakoarekin kontraesatzen.modal-content
dupointer-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-ren 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.
px
Gure CSS unitate nagusira izatetik aldatu darem
, nahiz eta pixelak oraindik ere erabiltzen diren multimedia-kontsultetarako eta sareko portaeretarako, gailuen ikuspuntuek ez baitute motaren tamainak eragiten.- Letra-tamaina globala handitu zenetik
14px
izatera16px
. - Sare-mailak berritu dira bosgarren aukera bat gehitzeko (gailu txikiagoei zuzenduta
576px
eta behean) eta-xs
klase 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.json
gidoi 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.
sm
Behean sare-maila berri bat gehitu768px
da kontrol zehatzagoa izateko. Orainxs
,sm
,md
,lg
etaxl
. Horrek esan nahi du maila bakoitza maila bat igo dela (beraz.col-md-6
, v3-.col-lg-6
n orain v4-n dago).xs
sareta-klaseak aldatu egin dira, infixak ez dezan behar zehatzago adierazteko estiloak aplikatzen hasten direlamin-width: 0
eta ez ezarritako pixel-balio batean. 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-ready
prestatzeko nahasketa bat erabiltzeko eta zutabe indibidualaren tamainamake-col
ezartzeko .flex
max-width
- Sare-sistemako multimedia-kontsulten eten-puntuak eta edukiontzien zabalerak aldatu dira sare-maila berria kontuan hartzeko eta zutabeak berdinki zatitzen direla ziurtatzeko
12
gehienezko zabaleran. $grid-breakpoints
Sarearen eten-puntuak eta edukiontzien zabalerak Sass mapen bidez ( eta ) kudeatzen dira orain$container-max-widths
aldagai 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 berarekin 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: sticky
Horren ordez erabiltzea gomendatzen dugu . Ikusi HTML5 Mesedez sarrera xehetasunak eta polyfill gomendio zehatzetarako. Iradokizun bat@supports
ezartzeko arau bat erabiltzea da (adibidez,@supports (position: sticky) { ... }
)- Erabiltzen bazenu Affix
position
estiloak 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-box
aldaketa, elementu askoren unitateetatik igarotzea, esteka-estiloak eta inprimaki-elementu asko berrezartzea dira em
.rem
Tipografia
.text-
Utilitate guztiak_utilities.scss
fitxategira eraman ditu.- Jaregin
.page-header
egin da bere estiloak utilitateen bidez aplika daitezkeelako. .dl-horizontal
jaitsi egin da. Horren ordez, erabili.row
on<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-reverse
Testu-erabilgarrientzako modifikatzailea kendu du..list-inline
orain bere seme-alaben zerrendako elementuek.list-inline-item
klase berria aplikatuta izan behar dute.
Irudiak
- Izena aldatu
.img-responsive
zaio.img-fluid
. - Izena aldatu
.img-rounded
zaio.rounded
- Izena aldatu
.img-circle
zaio.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-condensed
zaio.table-sm
. - Aukera berri bat gehitu da
.table-inverse
. - Taularen goiburuko aldatzaileak gehitu dira:
.thead-default
eta.thead-inverse
. - Testuinguruko klaseei izena aldatu zaie
.table-
-aurrizkia izan dezaten. Horregatik.active
,.success
,.warning
,.danger
eta.info
,.table-active
,.table-success
, eta ..table-warning
_.table-danger
.table-info
Formak
- Mugitutako elementua
_reboot.scss
fitxategira berrezartzen da. - Izena aldatu
.control-label
zaio.col-form-label
. - Izena aldatu
.input-lg
eta.input-sm
to.form-control-lg
eta.form-control-sm
, hurrenez hurren. - Klaseak
.form-group-*
utzi ditu sinpletasunaren mesedetan. Erabili.form-control-*
klaseak orain. - Jaregin
.help-block
eta ordezkatu zuen.form-text
bloke-mailako laguntza-testua. Sareko laguntza-testua eta beste aukera malgu batzuk lortzeko, erabili erabilgarritasun klaseak bezalakoak.text-muted
. - Jaitsi
.radio-inline
eta.checkbox-inline
. - Kontsolidatu
.checkbox
eta.radio
barne.form-check
eta hainbat.form-check-*
klase. - Inprimaki horizontalak berritu dira:
- Klaseko
.form-horizontal
eskakizuna kendu du. .form-group
Jada ez ditu.row
via mixin-eko estiloak aplikatzen, beraz,.row
orain beharrezkoa da sare horizontaleko diseinuetarako (adibidez,<div class="form-group row">
).- Klase berria gehitu da s
.col-form-label
-dun etiketak bertikalki erdiratzeko.form-control
. - Inprimaki trinkoen diseinuetarako berria gehitu
.form-row
da sareta-klaseekin (aldatu zure.row
a.form-row
eta joan).
- Klaseko
- Inprimaki pertsonalizatuen laguntza gehitu da (kontrol-laukietarako, irratietarako, hautapenetarako eta fitxategien sarrerarako).
.has-error
,.has-warning
, eta.has-success
klaseak HTML5 inprimakiak baliozkotzeko CSS:invalid
eta:valid
sasi-klaseen bidez ordezkatu dira.- Izena aldatu
.form-control-static
zaio.form-control-plaintext
.
Botoiak
- Izena aldatu
.btn-default
zaio.btn-secondary
. .btn-xs
Klasea erabat jaitsi.btn-sm
da proportzionalki v3-a baino askoz txikiagoa baita.- jQuery pluginaren egoera-botoien funtzioa kendu egin da .
button.js
Honek$().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
:disabled
fieldset[disabled]
Botoi taldea
- Osagaia berriro idatzi 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-xs
erabat 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
.divider
zaio.dropdown-divider
. - Goitibeherako elementuek orain behar dute
.dropdown-item
. - Goitibeherako txandakatzeek ez dute gehiago behar esplizitu bat
<span class="caret"></span>
; hau orain automatikoki ematen da CSS-en::after
bidez.dropdown-toggle
.
Sare sistema
576px
Sarearen eten-puntu berri bat gehitu dasm
, hau da, orain guztira bost maila daude (xs
,sm
,md
,lg
etaxl
).- 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
order
klase berrietarako. Adibidez, etaren ordez,.col-8.push-4
eta erabiliko.col-4.pull-8
zenuke ..col-8.order-2
.col-4.order-1
- Flexbox erabilgarritasun-klaseak gehitu dira sare-sistema eta osagaietarako.
Taldeak zerrenda
- Osagaia berriro idatzi flexbox-ekin.
a.list-group-item
Klase esplizitu batekin ordezkatu.list-group-item-action
da, zerrenda-taldeen elementuen estekaren eta botoien bertsioak diseinatzeko.- Kartekin
.list-group-flush
erabiltzeko klasea gehitu da.
Modala
- Osagaia berriro idatzi flexbox-ekin.
- Flexboxera mugitu dela ikusita, goiburuko baztertzeko ikonoen lerrokatzea hautsita egongo da jada flotagailuak erabiltzen ari ez garelako. 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 dagokionloaded.bs.modal
gertaera kendu ziren. Horren ordez, bezeroaren aldeko txantiloiak edo datuak lotzeko esparru bat erabiltzea edo jQuery.load zeuk deitzea gomendatzen dugu.
Nabigazioak
- Osagaia berriro idatzi 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.nav
s,.nav-item
s eta.nav-link
s. Horrek zure HTML malguagoa egiten du, hedagarritasun handiagoarekin batera.
Nabigazio barra
Nabigazio-barra guztiz berridatzi da flexbox-en, lerrokatze, erantzun eta pertsonalizaziorako laguntza hobetuarekin.
.navbar
Nabigazio-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-default
orain da.navbar-light
, nahiz.navbar-dark
eta berdin jarraitzen duen. Horietako bat beharrezkoa da nabigazio-barra bakoitzean. Hala ere, klase hauek jada ez dutebackground-color
s ezartzen; horren ordez, funtsean, soilik eragiten dutecolor
.- 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-toggle
orain da.navbar-toggler
eta estilo eta barneko marka desberdinak ditu (ez dira hiru<span>
s gehiago).- Klasea
.navbar-form
erabat utzi zuen. Jada ez da beharrezkoa; horren ordez, erabili.form-inline
eta aplikatu marjina-utilitateak behar den moduan. - Nabigazio-barrek jada ez dute sartzen
margin-bottom
edoborder-radius
lehenespenez. Erabili utilitateak behar den moduan. - Nabigazio-barrak dituzten adibide guztiak eguneratu dira marka berriak sartzeko.
Paginazioa
- Osagaia berriro idatzi flexbox-ekin.
- Klase esplizituak (
.page-item
,.page-link
) behar dira orain.pagination
s -ren ondorengoetan - Osagaia erabat jaitsi
.pager
zen, eskema-botoi pertsonalizatuak baino ez zirelako.
Ogi birrindua
- Klase esplizitua, , beharrezkoa da orain s
.breadcrumb-item
-ren ondorengoei.breadcrumb
Etiketak eta txapak
- Finkatu
.label
eta elementutik.badge
desanbiguatzeko<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-default
kendu eta.badge-secondary
gehitu da beste nonbait erabilitako osagaien modifikatzaile klaseekin bat etortzeko.
Panelak, miniaturak eta putzuak
Txartelaren osagai berrirako erabat jaitsi da.
Panelak
.panel
to.card
, orain flexbox-ekin eraikia..panel-default
kendu eta ordeztu gabe..panel-group
kendu eta ordeztu gabe..card-group
ez da ordezkoa, ezberdina da..panel-heading
to.card-header
.panel-title
to.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-body
to.card-body
.panel-footer
to.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, eta gure Sass mapatik sortutako , , eta utilitateetarako.panel-danger
kendu dira..bg-
.text-
.border
$theme-colors
Aurrerapena
- Testuinguruko
.progress-bar-*
klaseak.bg-*
utilitateekin ordezkatu ditu. Esaterako,class="progress-bar progress-bar-danger"
bihurtzen daclass="progress-bar bg-danger"
. .active
Aurrerapen-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.right
orain.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, eta.carousel-item-right
. .item
orain ere bada.carousel-item
.- Aurreko/hurrengo kontroletarako,
.carousel-control.right
eta.carousel-control.left
orain.carousel-control-next
eta.carousel-control-prev
, hau da, jada ez dute oinarrizko klase zehatzik behar.
- Karruselaren elementuetarako,
- Estilo sentikor guztiak kendu ditu, utilitateetara (adibidez, zenbait ikustaitan epigrafeak erakustea) eta estilo pertsonalizatuak behar bezala atzeratuz.
- Karruseleko 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-none
etad-{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-left
eta kendu.pull-right
dira eta.float-left
eta.float-right
.
- Bistaratzeko utilitateak erantzuteko egin ditu (adibidez,
- Mota:
- Gure testu-lerrokatze-klaseei erantzunezko aldaerak gehitu dizkiegu
.text-{sm,md,lg,xl}-{left,center,right}
.
- Gure testu-lerrokatze-klaseei erantzunezko aldaerak gehitu dizkiegu
- 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-block
berrirako jaitsi da..mx-auto
- Clearfix eguneratu da arakatzaile zaharren bertsioetarako laguntza kentzeko.
Saltzaileen aurrizkiaren nahasketak
Bootstrap 3-ren saltzaileen aurrizkien 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-function
transition-transform
translate
translate3d
user-select
Dokumentazioa
Gure dokumentazioak maila guztietan ere berritze bat jaso zuen. Hona hemen behea:
- Oraindik Jekyll erabiltzen ari gara, baina pluginak ditugu nahasketan:
bugify.rb
gure arakatzailearen akatsen orrian sarrerak modu eraginkorrean zerrendatzeko erabiltzen da .example.rb
plugin lehenetsiaren sardexka pertsonalizatua da,highlight.rb
adibide-kodeen kudeaketa errazteko aukera ematen duena.callout.rb
horren 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.
- Orriak 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-breakpoints
Sass mapa.
display
Gure responsive erabilgarritasun-klaseak neurri handi batean kendu egin dira utilitate esplizituen alde .
- Eta klaseak kendu egin dira jQuery-ren eta
.hidden
metodoekin 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.- v3tik 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
- v3tik kendu da:
- 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
- Izen zaharrak:
Klase esplizituak erabili beharrean .visible-*
, elementu bat ikusgai bihurtzen duzu pantailaren tamaina horretan ezkutatuta. .d-*-none
Klase bat klase batekin konbina dezakezu .d-*-block
elementu bat pantaila-tamainen tarte jakin batean soilik .d-none.d-md-block.d-xl-none
erakusteko (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 erreaktibo berriak ez dira elementu baten ikusgarritasuna bista-tamainen ondoko sorta bakar gisa adierazi ezin diren kasu ez hain ohikoak hartzen saiatzen; horren ordez, CSS pertsonalizatua erabili beharko duzu kasu horietan.