Selitev na v4
Bootstrap 4 je velika prenova celotnega projekta. Najopaznejše spremembe so povzete spodaj, sledijo pa jim natančnejše spremembe ustreznih komponent.
Pri prehodu iz Beta 3 v našo stabilno izdajo v4.0 ni nobenih prelomnih sprememb, je pa nekaj opaznih sprememb.
-
Odpravljeni okvarjeni pripomočki za tiskanje. Prej je uporaba
.d-print-*
razreda nepričakovano preglasila kateri koli drug.d-*
razred. Zdaj se ujemajo z našimi drugimi prikazovalnimi pripomočki in veljajo samo za ta medij (@media print
). -
Razširjeni razpoložljivi pripomočki za prikaz tiskanja, da se ujemajo z drugimi pripomočki. Beta 3 in starejše so imele samo
block
,inline-block
,inline
innone
. Stable v4 dodanoflex
,inline-flex
,table
,table-row
intable-cell
. -
Popravljeno upodabljanje predogleda tiskanja v brskalnikih z novimi slogi tiskanja, ki določajo
@page
size
.
Medtem ko je Beta 2 doživela večino naših prelomnih sprememb med fazo beta, imamo še vedno nekaj, ki jih je treba obravnavati v izdaji Beta 3. Te spremembe veljajo, če posodabljate na Beta 3 iz Beta 2 ali katere koli starejše različice Bootstrapa.
- Odstranjena neuporabljena
$thumbnail-transition
spremenljivka. Ničesar nismo spreminjali, tako da je bila samo dodatna koda. - Paket npm ne vključuje več nobenih datotek razen naših izvornih in dist datotek; če ste se zanašali nanje in izvajali naše skripte prek
node_modules
mape, bi morali prilagoditi svoj potek dela.
-
Na novo smo napisali tako prilagojena kot privzeta potrditvena polja in radijske postaje. Zdaj imata oba ujemajočo se strukturo HTML (zunanji
<div>
s sorodnikom<input>
in<label>
) in enake sloge postavitve (zložen privzeto, v vrstici z razredom modifikatorja). To nam omogoča oblikovanje oznake glede na stanje vnosa, poenostavitev podpore zadisabled
atribut (ki je prej zahteval nadrejeni razred) in boljšo podporo našemu preverjanju obrazca.Kot del tega smo spremenili CSS za upravljanje več
background-image
s na potrditvenih poljih obrazca po meri in radijskih postajah. Prej je imel zdaj odstranjeni.custom-control-indicator
element barvo ozadja, preliv in ikono SVG. Prilagajanje preliva ozadja je pomenilo zamenjavo vseh vsakič, ko ste morali spremeniti samo enega. Zdaj imamo.custom-control-label::before
polnilo in preliv ter.custom-control-label::after
ročaji ikone.Če želite narediti preverjanje po meri v vrstici, dodajte
.custom-control-inline
. -
Posodobljen izbirnik za skupine gumbov, ki temeljijo na vnosu. Namesto
[data-toggle="buttons"] { }
za slog in vedenje uporabljamodata
atribut samo za vedenje JS in se zanašamo na nov.btn-group-toggle
razred za stil. -
Odstranjeno
.col-form-legend
v korist nekoliko izboljšanega.col-form-label
. Na ta način.col-form-label-sm
in.col-form-label-lg
se lahko z lahkoto uporablja na<legend>
elementih. -
Vnosi datotek po meri so prejeli spremembo
$custom-file-text
spremenljivke Sass. To ni več ugnezdeni zemljevid Sass in zdaj napaja samo en niz –Browse
gumb, saj je to zdaj edini psevdoelement, ustvarjen iz našega Sass. BesediloChoose file
zdaj izvira iz.custom-file-label
.
-
Dodatki za skupine vnosov so zdaj specifični glede na njihovo umestitev glede na vnos. Izpustili smo
.input-group-addon
in.input-group-btn
za dva nova razreda.input-group-prepend
in.input-group-append
. Zdaj morate izrecno uporabiti dodajanje ali prednastavitev, kar poenostavlja velik del našega CSS-ja. Znotraj dodajanja ali dodajanja postavite svoje gumbe tako, kot bi obstajali kjer koli drugje, vendar ovijte besedilo v.input-group-text
. -
Slogi preverjanja veljavnosti so zdaj podprti, kot tudi več vnosov (čeprav lahko potrdite le en vnos na skupino).
-
Razredi velikosti morajo biti na nadrejenih
.input-group
in ne na posameznih elementih obrazca.
Medtem ko smo v različici beta, si prizadevamo, da ne bi bilo nobenih prelomnih sprememb. Vendar pa stvari ne gredo vedno po načrtih. Spodaj so najpomembnejše spremembe, ki jih morate upoštevati pri prehodu z Beta 1 na Beta 2.
- Odstranjena
$badge-color
spremenljivka in njena uporaba na.badge
. Uporabimo funkcijo barvnega kontrasta, da izberemo acolor
na podlagibackground-color
, zato je spremenljivka nepotrebna. grayscale()
Funkcija je bila preimenovana v,gray()
da bi se izognili prekinitvi spora z izvornimgrayscale
filtrom CSS.- Preimenovano
.table-inverse
,.thead-inverse
, in.thead-default
v.*-dark
in.*-light
, ki ustreza našim barvnim shemam, ki se uporabljajo drugje. - Odzivne tabele zdaj ustvarjajo razrede za vsako prelomno točko mreže. To se razlikuje od Beta 1, saj je datoteka, ki
.table-responsive
jo uporabljate, bolj podobna.table-responsive-md
. Zdaj lahko uporabite.table-responsive
ali.table-responsive-{sm,md,lg,xl}
po potrebi. - Opuščena podpora za Bower kot upravitelja paketov je bila opuščena za alternative (npr. Yarn ali npm). Za podrobnosti glejte bower/bower#2298 .
- Bootstrap še vedno zahteva jQuery 1.9.1 ali novejšo različico, vendar vam svetujemo, da uporabite različico 3.x, saj so podprti brskalniki v3.x tisti, ki jih Bootstrap podpira, poleg tega pa ima v3.x nekaj varnostnih popravkov.
- Odstranjen neuporabljen
.form-control-label
razred. Če ste uporabili ta razred, je bil dvojnik.col-form-label
razreda, ki je navpično centriral a<label>
s svojim povezanim vnosom v horizontalnih postavitvah obrazcev. - Spremenjen je
color-yiq
iz mešanice, ki je vključevalacolor
lastnost, v funkcijo, ki vrne vrednost, kar vam omogoča, da jo uporabite za katero koli lastnost CSS. Na primer, namestocolor-yiq(#000)
, bi napisalicolor: color-yiq(#000);
.
- Uvedena nova
pointer-events
uporaba na načinih. Zunanji.modal-dialog
prehaja skozi dogodke zpointer-events: none
za obdelavo klikov po meri (kar omogoča samo poslušanje.modal-backdrop
morebitnih klikov), nato pa se z njim izogne.modal-content
dejanskemupointer-events: auto
.
Tukaj so pomembni predmeti vstopnic, na katere boste želeli biti pozorni pri prehodu z različice 3 na različico 4.
- Opuščena podpora za IE8, IE9 in iOS 6. v4 je zdaj samo IE10+ in iOS 7+. Za spletna mesta, ki potrebujejo karkoli od tega, uporabite v3.
- Dodana uradna podpora za brskalnik in spletni pogled Android v5.0 Lollipop. Prejšnje različice brskalnika Android in WebView ostajajo le neuradno podprte.
- Flexbox je privzeto omogočen. Na splošno to pomeni odmik od lebdečih in več v naših komponentah.
- Preklop z Less na Sass za naše izvorne datoteke CSS.
- Preklopili smo iz
px
narem
kot našo primarno enoto CSS, čeprav se slikovne pike še vedno uporabljajo za medijske poizvedbe in vedenje mreže, saj velikost tipa ne vpliva na vidna okna naprave. - Globalna velikost pisave se je povečala z
14px
na16px
. - Prenovljeni nivoji omrežja za dodajanje pete možnosti (naslavljanje manjših naprav na
576px
in pod) in odstranjeni-xs
priponi iz teh razredov. Primer:.col-6.col-sm-4.col-md-3
. - Zamenjana ločena izbirna tema z nastavljivimi možnostmi prek spremenljivk SCSS (npr.
$enable-gradients: true
). - Gradbeni sistem je bil prenovljen za uporabo niza skriptov npm namesto Grunta. Oglejte si
package.json
vse skripte ali našo datoteko readme za potrebe lokalnega razvoja. - Neodzivna uporaba Bootstrapa ni več podprta.
- Opustili smo spletni Customizer v korist obsežnejše namestitvene dokumentacije in prilagojenih gradenj.
- Dodanih je na desetine novih uporabnih razredov za običajne pare lastnost-vrednost CSS in bližnjice za razmik med robom/oblazinjenjem.
- Premaknjeno v flexbox.
- Dodana podpora za flexbox v mešanicah mreže in vnaprej določenih razredih.
- Kot del flexboxa je vključena podpora za razrede navpične in vodoravne poravnave.
- Posodobljena imena razredov mreže in nova stopnja mreže.
- Spodaj je dodan nov
sm
nivo mreže768px
za bolj razdrobljen nadzor. Zdaj imamoxs
,sm
,md
,lg
, inxl
. To tudi pomeni, da je bila vsaka stopnja dvignjena za eno raven (torej.col-md-6
v v3 je zdaj.col-lg-6
v v4). xs
mrežni razredi so bili spremenjeni tako, da ne potrebujejo pripona za natančnejšo predstavo, da začnejo uporabljati sloge primin-width: 0
in ne pri nastavljeni vrednosti pikslov. Namesto.col-xs-6
, zdaj je.col-6
. Vse druge ravni mreže zahtevajo infiks (npr.sm
).
- Spodaj je dodan nov
- Posodobljene velikosti mreže, miksini in spremenljivke.
- Mrežni žlebovi imajo zdaj zemljevid Sass, tako da lahko določite specifične širine žlebov na vsaki prelomni točki.
- Posodobljeni omrežni mešalniki za uporabo
make-col-ready
pripravljalnega mešalnika in amake-col
za nastavitevflex
inmax-width
za velikost posameznega stolpca. - Spremenjene so prelomne točke medijskih poizvedb omrežnega sistema in širine vsebnika, da se upošteva nova omrežna stopnja in zagotovi, da so stolpci enakomerno deljivi z
12
največjo širino. - Prelomne točke mreže in širine vsebnika se zdaj obravnavajo prek zemljevidov Sass (
$grid-breakpoints
in$container-max-widths
) namesto peščice ločenih spremenljivk. Te v@screen-*
celoti nadomestijo spremenljivke in vam omogočajo, da v celoti prilagodite mrežne nivoje. - Spremenila so se tudi medijska poizvedovanja. Namesto ponavljanja naših deklaracij medijske poizvedbe z vsakokrat isto vrednostjo, imamo zdaj
@include media-breakpoint-up/down/only
. Zdaj lahko namesto pisanja@media (min-width: @screen-sm-min) { ... }
pišete@include media-breakpoint-up(sm) { ... }
.
- Izpuščene plošče, sličice in vrtine za novo vseobsegajočo komponento, kartice .
- Izpuščena je pisava ikone Glyphicons. Če potrebujete ikone, so nekatere možnosti:
- navzgornja različica Glyphicons
- Oktikoni
- Pisava Awesome
- Oglejte si stran Razširi za seznam alternativ. Imate dodatne predloge? Odprite vprašanje ali PR.
- Odstranjen je vtičnik Affix jQuery.
position: sticky
Namesto tega priporočamo uporabo . Oglejte si vnos HTML5 Prosim za podrobnosti in posebna priporočila za polifill. Eden od predlogov je uporaba@supports
pravila za njegovo izvajanje (npr.@supports (position: sticky) { ... }
)/- Če ste uporabljali Affix za uporabo dodatnih, ne
position
-slogov, polifili morda ne bodo podpirali vašega primera uporabe. Ena možnost za takšno uporabo je knjižnica ScrollPos-Styler tretje osebe .
- Opustili smo komponento pozivnika , saj so bili v bistvu nekoliko prilagojeni gumbi.
- Skoraj vse komponente so bile preoblikovane za uporabo več neugnezdenih izbirnikov razredov namesto preveč specifičnih podrejenih izbirnikov.
Ta seznam poudarja ključne spremembe po komponentah med v3.xx in v4.0.0.
Novost v Bootstrap 4 je Reboot , nova tabela slogov, ki nadgrajuje Normalize z našimi nekoliko samozavestnimi slogi ponastavitve. Izbirniki, ki se pojavljajo v tej datoteki, uporabljajo samo elemente – tukaj ni razredov. To izolira naše sloge ponastavitve od naših slogov komponent za bolj modularen pristop. Nekatere najpomembnejše ponastavitve, ki jih to vključuje, so box-sizing: border-box
sprememba, premik z em
na rem
enote na številnih elementih, slogi povezav in številne ponastavitve elementov obrazca.
.text-
Vse pripomočke premaknil v_utilities.scss
datoteko.- Izpuščen
.page-header
, saj je razen obrobe vse njegove sloge mogoče uporabiti prek pripomočkov. .dl-horizontal
je bil opuščen. Namesto tega uporabite.row
on<dl>
in uporabite razrede stolpcev mreže (ali miksine) na njegovih<dt>
in podrejenih elementih<dd>
.- Oblikovanje po meri
<blockquote>
se je preselilo v razrede.blockquote
– in.blockquote-reverse
modifikator. .list-inline
zdaj zahteva, da se za postavke njegovega podrejenega seznama uporabi nov.list-inline-item
razred.
- Preimenovan
.img-responsive
v.img-fluid
. - Preimenovano
.img-rounded
v.rounded
- Preimenovano
.img-circle
v.rounded-circle
- Skoraj vsi primerki
>
izbirnika so bili odstranjeni, kar pomeni, da bodo ugnezdene tabele zdaj samodejno podedovale sloge od svojih staršev. To močno poenostavi naše izbirnike in morebitne prilagoditve. - Odzivne tabele ne potrebujejo več ovojnega elementa. Namesto tega preprosto postavite
.table-responsive
desno na<table>
. - Zaradi doslednosti preimenovan
.table-condensed
v ..table-sm
- Dodana nova
.table-inverse
možnost. - Dodani modifikatorji glave tabele:
.thead-default
in.thead-inverse
. - Kontekstualni razredi so bili preimenovani tako, da imajo
.table-
predpono -. Zato.active
,.success
,.warning
,.danger
in.info
do.table-active
,.table-success
,.table-warning
,.table-danger
in.table-info
.
- Premaknjeni element se ponastavi v
_reboot.scss
datoteko. - Preimenovan
.control-label
v.col-form-label
. - Preimenovan
.input-lg
in.input-sm
v oz.form-control-lg
..form-control-sm
- Opustil
.form-group-*
predavanja zaradi preprostosti. Namesto tega zdaj uporabite.form-control-*
razrede. - Izpuščen
.help-block
in nadomeščen z.form-text
besedilom pomoči na ravni bloka. Za besedilo pomoči v vrstici in druge prilagodljive možnosti uporabite razrede pripomočkov, kot je.text-muted
. - Spuščeno
.radio-inline
in.checkbox-inline
. - Konsolidirano
.checkbox
in.radio
v.form-check
različne.form-check-*
razrede. - Horizontalne oblike prenovljene:
- Opustil je
.form-horizontal
razredne zahteve. .form-group
ne uporablja več slogov iz.row
via mixina, zato.row
je zdaj potreben za horizontalne mrežne postavitve (npr.<div class="form-group row">
).- Dodan nov
.col-form-label
razred navpično centriranim oznakam s.form-control
s. - Dodano novo
.form-row
za kompaktne postavitve obrazcev z mrežnimi razredi (zamenjajte svoje.row
za.form-row
in pojdite).
- Opustil je
- Dodana podpora za obrazce po meri (za potrditvena polja, radijske postaje, izbire in vnose datotek).
.has-error
Razredi ,.has-warning
, in zamenjani.has-success
s preverjanjem obrazca HTML5 prek CSS:invalid
in:valid
psevdorazredov.- Preimenovan
.form-control-static
v.form-control-plaintext
.
- Preimenovan
.btn-default
v.btn-secondary
. .btn-xs
Razred je popolnoma opustil, saj je.btn-sm
sorazmerno veliko manjši od v3.- Funkcija gumba za spremljanje stanja
button.js
vtičnika jQuery je bila opuščena. To vključuje metode$().button(string)
in .$().button('reset')
Priporočamo, da namesto tega uporabite majhen košček JavaScripta po meri, ki bo imel prednost, da se bo obnašal točno tako, kot želite.- Upoštevajte, da so bile druge funkcije vtičnika (potrditvena polja gumbov, radijski gumbi, gumbi z enim preklopom) ohranjene v različici 4.
- Spremenite gumbe
[disabled]
v , če jih:disabled
podpira IE9+:disabled
. Vendarfieldset[disabled]
je še vedno potreben, ker so izvorni onemogočeni nabori polj še vedno hrošči v IE11 .
- Preoblikovana komponenta s flexboxom.
- odstranjeno
.btn-group-justified
_ Kot zamenjavo lahko uporabite<div class="btn-group d-flex" role="group"></div>
kot ovoj okoli elementov z.w-100
. - Zaradi
.btn-group-xs
odstranitve.btn-xs
. - Odstranjen eksplicitni razmik med skupinami gumbov v orodnih vrsticah gumbov; zdaj uporabite pripomočke za marže.
- Izboljšana dokumentacija za uporabo z drugimi komponentami.
- Preklop z nadrejenih izbirnikov na posamezne razrede za vse komponente, modifikatorje itd.
- Poenostavljeni slogi spustnih menijev, ki ne bodo več dobavljeni s puščicami, obrnjenimi navzgor ali navzdol, pritrjenimi na spustni meni.
- Spustne menije lahko sestavite s
<div>
s ali<ul>
s zdaj. - Obnovljeni spustni slogi in oznake za zagotavljanje enostavne, vgrajene podpore za
<a>
in<button>
zasnovane spustne elemente. - Preimenovan
.divider
v.dropdown-divider
. - Spustni elementi zdaj zahtevajo
.dropdown-item
. - Spustni preklopi ne zahtevajo več eksplicitnega
<span class="caret"></span>
; to je zdaj na voljo samodejno prek CSS::after
na.dropdown-toggle
.
- Dodana nova
576px
prelomna točka mreže kotsm
, kar pomeni, da je zdaj skupno pet stopenj (xs
,sm
,md
,lg
inxl
). - Razredi odzivnih modifikatorjev mreže so bili preimenovani iz
.col-{breakpoint}-{modifier}-{size}
v.{modifier}-{breakpoint}-{size}
za preprostejše razrede mreže. - Izpuščeni razredi modifikatorjev potiskanja in vlečenja za nove razrede, ki jih poganja
order
flexbox. Na primer, namesto.col-8.push-4
in.col-4.pull-8
bi uporabili.col-8.order-2
in.col-4.order-1
. - Dodani razredi pripomočkov flexbox za mrežni sistem in komponente.
- Preoblikovana komponenta s flexboxom.
- Zamenjano
a.list-group-item
z eksplicitnim razredom.list-group-item-action
za oblikovanje različic povezav in gumbov elementov skupine seznamov. - Dodan
.list-group-flush
razred za uporabo s karticami.
- Preoblikovana komponenta s flexboxom.
- Glede na premik v flexbox je poravnava ikon za opustitev v glavi verjetno pokvarjena, ker ne uporabljamo več lebdečih elementov. Lebdeča vsebina je na prvem mestu, vendar s flexboxom ni več tako. Posodobite ikone za opustitev, da bodo prišle za modalnimi naslovi, da popravite.
- Možnost
remote
(ki se lahko uporablja za samodejno nalaganje in vstavljanje zunanje vsebine v modal) in ustrezenloaded.bs.modal
dogodek sta bila odstranjena. Namesto tega priporočamo uporabo predlog na strani odjemalca ali ogrodje za vezavo podatkov ali pa sami pokličete jQuery.load .
- Preoblikovana komponenta s flexboxom.
- Izpuščeni so bili skoraj vsi
>
izbirniki zaradi enostavnejšega oblikovanja prek negnezdenih razredov. - Namesto izbirnikov, specifičnih za HTML, kot
.nav > li > a
je , uporabljamo ločene razrede za.nav
s,.nav-item
s in.nav-link
s. To naredi vaš HTML bolj prilagodljiv, hkrati pa prinaša večjo razširljivost.
Navbar je bil v celoti prepisan v flexboxu z izboljšano podporo za poravnavo, odzivnost in prilagajanje.
- Odzivna vedenja vrstice za krmarjenje se zdaj uporabljajo za
.navbar
razred prek zahtevanega,.navbar-expand-{breakpoint}
kjer izberete, kje strniti vrstico za krmarjenje. Prej je bila to manj spremenljiva sprememba in je zahtevala ponovno prevajanje. .navbar-default
je zdaj.navbar-light
, čeprav.navbar-dark
ostaja enak. Eden od teh je obvezen v vsaki vrstici za krmarjenje. Vendar pa ti razredi ne postavljajo večbackground-color
s; namesto tega v bistvu samo vplivajocolor
.- Navbars zdaj zahtevajo nekakšno deklaracijo ozadja. Izbirajte med našimi pripomočki za ozadje (
.bg-*
) ali nastavite svojega z zgornjimi razredi light/inverse za noro prilagajanje . - Glede na sloge flexbox lahko navbars zdaj uporablja pripomočke flexbox za enostavne možnosti poravnave.
.navbar-toggle
je zdaj.navbar-toggler
in ima različne sloge in notranjo oznako (nič več treh<span>
s).- Popolnoma opustil
.navbar-form
razred. Ni več potrebno; namesto tega.form-inline
po potrebi samo uporabite in uporabite pripomočke za marže. - Navbars ne vključuje več
margin-bottom
aliborder-radius
privzeto. Po potrebi uporabite pripomočke. - Vsi primeri z vrsticami za krmarjenje so bili posodobljeni, da vključujejo nove oznake.
- Preoblikovana komponenta s flexboxom.
- Eksplicitni razredi (
.page-item
,.page-link
) so zdaj potrebni za potomce.pagination
s - Komponento smo popolnoma opustili,
.pager
saj je bila komaj kaj več kot prilagojeni orisni gumbi.
- Eksplicitni razred,
.breadcrumb-item
, je zdaj potreben za potomce.breadcrumb
s
- Preimenovano
.label
v.badge
za razlikovanje od<label>
elementa. - Komponento smo izpustili,
.badge
ker je bila skoraj enaka nalepkam. Namesto tega uporabite.badge-pill
modifikator skupaj s komponento oznake za ta zaobljen videz. - Značke niso več samodejno prikazane v skupinah seznamov in drugih komponentah. Za to so zdaj potrebni razredi uporabnosti.
.badge-default
je bil opuščen in.badge-secondary
dodan, da se ujema z razredi modifikatorjev komponent, ki se uporabljajo drugje.
Popolnoma opuščeno zaradi nove komponente kartice.
.panel
do.card
, zdaj zgrajen s flexboxom..panel-default
odstranjen in brez zamenjave..panel-group
odstranjen in brez zamenjave..card-group
ni nadomestek, je drugačen..panel-heading
do.card-header
.panel-title
do.card-title
. Odvisno od želenega videza boste morda želeli uporabiti tudi elemente naslovov ali razrede (npr.<h3>
,.h3
) ali krepke elemente ali razrede (npr.<strong>
,<b>
,.font-weight-bold
). Upoštevajte, da.card-title
ima, čeprav ima podobno ime, drugačen videz kot.panel-title
..panel-body
do.card-body
.panel-footer
do.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, in.panel-danger
so bili opuščeni za.bg-
,.text-
, in.border
pripomočke, ustvarjene iz našega$theme-colors
zemljevida Sass.
- Kontekstualni
.progress-bar-*
razredi so bili zamenjani s.bg-*
pripomočki. Na primer,class="progress-bar progress-bar-danger"
postaneclass="progress-bar bg-danger"
. - Zamenjano
.active
za animirane vrstice napredka z.progress-bar-animated
.
- Celotna komponenta je bila prenovljena za poenostavitev oblikovanja in stila. Imamo manj stilov, ki jih lahko preglasite, nove indikatorje in nove ikone.
- Vsi CSS so bili razgnezdeni in preimenovani, kar zagotavlja, da ima vsak razred predpono
.carousel-
.- Za elemente vrtiljaka so
.next
,.prev
,.left
in.right
zdaj.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
in.carousel-item-right
. .item
je tudi zdaj.carousel-item
.- Za kontrolnike prejšnji/naslednji sta
.carousel-control.right
in.carousel-control.left
sta zdaj.carousel-control-next
in.carousel-control-prev
, kar pomeni, da ne potrebujeta več določenega osnovnega razreda.
- Za elemente vrtiljaka so
- Odstranjeni so bili vsi odzivni slogi, pri čemer so bili odloženi pripomočki (npr. prikaz napisov na določenih pogledih) in slogi po meri po potrebi.
- Odstranjene preglasitve slik za slike v elementih vrtiljaka, odloženo pripomočkom.
- Prilagojen primer vrtiljaka, da vključuje nove oznake in sloge.
- Odstranjena podpora za stilizirane ugnezdene tabele. Vsi slogi tabel so zdaj podedovani v različici 4 za preprostejše izbirnike.
- Dodana različica inverzne tabele.
- Prikaz, skrito in drugo:
- Pripomočki za prikaz so postali odzivni (npr.
.d-none
ind-{sm,md,lg,xl}-none
). - Opustili smo večino
.hidden-*
pripomočkov za nove pripomočke za zaslone . Na primer, namesto.hidden-sm-up
uporabite.d-sm-none
. Pripomočke je preimenoval v.hidden-print
shemo poimenovanja pripomočkov za prikaz. Več informacij v razdelku Odzivni pripomočki na tej strani. - Dodani
.float-{sm,md,lg,xl}-{left,right,none}
razredi za odzivne lebdeče in odstranjeni.pull-left
in.pull-right
ker so odveč za.float-left
in.float-right
.
- Pripomočki za prikaz so postali odzivni (npr.
- Tip:
- Dodane odzivne različice našim razredom za poravnavo besedila
.text-{sm,md,lg,xl}-{left,center,right}
.
- Dodane odzivne različice našim razredom za poravnavo besedila
- Poravnava in razmik:
- Dodani so novi odzivni pripomočki za robove in oblazinjenje za vse strani ter navpične in vodoravne stenografije.
- Dodan boatload pripomočkov flexbox .
- Odpadlo
.center-block
za nov.mx-auto
razred.
- Clearfix posodobljen tako, da opusti podporo za starejše različice brskalnika.
Miksini predpone prodajalca Bootstrap 3 , ki so bili opuščeni v različici 3.2.0, so bili odstranjeni v Bootstrap 4. Ker uporabljamo Autoprefixer , niso več potrebni.
Odstranjeni so naslednji miksini: animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, , rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
, translate3d
,user-select
Tudi naša dokumentacija je bila nadgrajena na vseh področjih. Tukaj je nizko:
- Še vedno uporabljamo Jekyll, vendar imamo v mešanici vtičnike:
bugify.rb
se uporablja za učinkovito izpisovanje vnosov na naši strani z napakami brskalnika .example.rb
je razcep po meri privzetegahighlight.rb
vtičnika, ki omogoča lažje ravnanje s primeri kode.callout.rb
je podoben razcep po meri tega, vendar zasnovan za naše posebne oblačke dokumentov.markdown-block.rb
se uporablja za upodabljanje izrezkov Markdown znotraj elementov HTML, kot so tabele.- jekyll-toc se uporablja za ustvarjanje našega kazala.
- Vsa vsebina dokumentov je bila prepisana v Markdown (namesto HTML) za lažje urejanje.
- Strani so bile reorganizirane za preprostejšo vsebino in bolj dostopno hierarhijo.
- Z običajnega CSS smo prešli na SCSS, da bi v celoti izkoristili spremenljivke Bootstrapa, mixine in drugo.
Vse @screen-
spremenljivke so bile odstranjene v različici 4.0.0. Namesto tega uporabite miksine media-breakpoint-up()
, media-breakpoint-down()
, ali Sass ali zemljevid Sass.media-breakpoint-only()
$grid-breakpoints
Naši odzivni razredi pripomočkov so bili večinoma odstranjeni v korist eksplicitnih display
pripomočkov.
- Razredi
.hidden
in.show
so bili odstranjeni, ker so bili v nasprotju z metodami jQuery$(...).hide()
in .$(...).show()
Namesto tega poskusite preklopiti[hidden]
atribut ali uporabiti vstavljene sloge, kot stastyle="display: none;"
instyle="display: block;"
. - Vsi
.hidden-
razredi so bili odstranjeni, razen pripomočkov za tiskanje, ki so bili preimenovani.- Odstranjeno iz v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- Odstranjeno iz v4 alfa:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Odstranjeno iz v3:
- Pripomočki za tiskanje se ne začnejo več z
.hidden-
ali.visible-
, ampak z.d-print-
.- Stara imena:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Novi razredi:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Stara imena:
Namesto uporabe eksplicitnih .visible-*
razredov naredite element viden tako, da ga preprosto ne skrijete pri tej velikosti zaslona. En razred lahko združite .d-*-none
z enim .d-*-block
razredom, da prikažete element samo v danem intervalu velikosti zaslona (npr. .d-none.d-md-block.d-xl-none
prikaže element samo na srednjih in velikih napravah).
Upoštevajte, da spremembe prelomnih točk mreže v različici 4 pomenijo, da boste morali za doseganje enakih rezultatov povečati eno prelomno točko. Novi odzivni uporabniški razredi ne poskušajo prilagoditi manj običajnih primerov, ko vidnosti elementa ni mogoče izraziti kot en sam sosednji obseg velikosti vidnega polja; namesto tega boste morali v takih primerih uporabiti CSS po meri.