Lumilipat sa v4
Ang Bootstrap 4 ay isang pangunahing muling pagsulat ng buong proyekto. Ang pinaka-kapansin-pansing mga pagbabago ay ibinubuod sa ibaba, na sinusundan ng mas tiyak na mga pagbabago sa mga nauugnay na bahagi.
Ang paglipat mula sa Beta 3 patungo sa aming stable v4.0 release, walang mga paglabag na pagbabago, ngunit may ilang kapansin-pansing pagbabago.
-
Inayos ang mga sirang kagamitan sa pag-print. Dati, ang paggamit ng isang
.d-print-*
klase ay hindi inaasahang magpapawalang-bisa sa anumang iba pang.d-*
klase. Ngayon, tumutugma ang mga ito sa aming iba pang mga kagamitan sa pagpapakita at nalalapat lamang sa media na iyon (@media print
). -
Pinalawak na magagamit na mga kagamitan sa pag-print ng display upang tumugma sa iba pang mga kagamitan. Ang Beta 3 at mas matanda ay mayroon lamang
block
,inline-block
,inline
, atnone
. Idinagdag ang stable v4flex
,inline-flex
,table
,table-row
, attable-cell
. -
Inayos ang pag-render ng preview ng pag-print sa mga browser na may mga bagong istilo ng pag-print na tumutukoy sa
@page
size
.
Bagama't nakita ng Beta 2 ang karamihan sa aming mga paglabag sa panahon ng beta phase, ngunit mayroon pa rin kaming ilan na kailangang tugunan sa paglabas ng Beta 3. Nalalapat ang mga pagbabagong ito kung nag-a-update ka sa Beta 3 mula sa Beta 2 o anumang mas lumang bersyon ng Bootstrap.
- Inalis ang hindi nagamit na
$thumbnail-transition
variable. Hindi kami naglilipat ng anuman, kaya dagdag na code lang ito. - Ang npm package ay hindi na kasama ang anumang mga file maliban sa aming source at dist file; kung umasa ka sa mga ito at pinapatakbo mo ang aming mga script sa pamamagitan ng
node_modules
folder, dapat mong iakma ang iyong daloy ng trabaho.
-
Muling isinulat ang parehong custom at default na mga checkbox at radyo. Ngayon, parehong may tumutugmang HTML na istraktura (panlabas na
<div>
may kapatid<input>
at<label>
) at ang parehong mga estilo ng layout (stacked default, inline sa modifier class). Nagbibigay-daan ito sa amin na i-istilo ang label batay sa estado ng input, pinapasimple ang suporta para sadisabled
attribute (dating nangangailangan ng parent class) at mas mahusay na sumusuporta sa aming form validation.Bilang bahagi nito, binago namin ang CSS para sa pamamahala ng maramihang
background-image
s sa custom na form na mga checkbox at radyo. Dati, ang inalis na.custom-control-indicator
elemento ay may kulay ng background, gradient, at icon ng SVG. Nangangahulugan ang pag-customize ng gradient ng background na palitan ang lahat ng iyon sa tuwing kailangan mong baguhin ang isa lang. Ngayon, mayroon kaming.custom-control-label::before
para sa fill at gradient at.custom-control-label::after
pinangangasiwaan ang icon.Para gumawa ng custom na check inline, idagdag ang
.custom-control-inline
. -
Na-update na tagapili para sa mga pangkat ng button na nakabatay sa input. Sa halip na
[data-toggle="buttons"] { }
para sa estilo at pag-uugali, ginagamit namin angdata
katangian para lang sa mga pag-uugali ng JS at umaasa sa isang bagong.btn-group-toggle
klase para sa pag-istilo. -
Inalis
.col-form-legend
sa pabor ng isang bahagyang pinabuting.col-form-label
. Sa ganitong paraan.col-form-label-sm
at.col-form-label-lg
maaaring magamit sa<legend>
mga elemento nang madali. -
Nakatanggap ang mga custom na file input ng pagbabago sa kanilang
$custom-file-text
Sass variable. Hindi na ito isang nested na mapa ng Sass at ngayon ay nagpapagana na lamang ng isang string—angBrowse
button dahil iyon na ngayon ang tanging pseudo-element na nabuo mula sa aming Sass. AngChoose file
teksto ngayon ay nagmula sa.custom-file-label
.
-
Ang mga addon ng pangkat ng input ay partikular na ngayon sa kanilang pagkakalagay na may kaugnayan sa isang input. Bumaba na kami
.input-group-addon
at.input-group-btn
para sa dalawang bagong klase,.input-group-prepend
at.input-group-append
. Dapat kang tahasang gumamit ng append o prepend ngayon, na pinapasimple ang karamihan sa aming CSS. Sa loob ng isang append o prepend, ilagay ang iyong mga button tulad ng pag-iral ng mga ito kahit saan pa, ngunit balutin ang text sa.input-group-text
. -
Sinusuportahan na ngayon ang mga istilo ng pagpapatunay, gayundin ang maramihang mga input (bagama't maaari mo lamang i-validate ang isang input bawat pangkat).
-
Ang mga klase sa pagpapalaki ay dapat nasa magulang
.input-group
at hindi ang mga indibidwal na elemento ng form.
Habang nasa beta, nilalayon naming magkaroon ng walang mga paglabag na pagbabago. Gayunpaman, ang mga bagay ay hindi palaging napupunta ayon sa plano. Nasa ibaba ang mga pangunahing pagbabago na dapat tandaan kapag lumipat mula sa Beta 1 hanggang Beta 2.
- Inalis
$badge-color
ang variable at ang paggamit nito sa.badge
. Gumagamit kami ng color contrast function para pumili ngcolor
base sabackground-color
, kaya hindi kailangan ang variable. - Pinalitan ang pangalan ng
grayscale()
function upanggray()
maiwasang masira ang salungatan sa CSS native nagrayscale
filter. - Pinalitan ng pangalan
.table-inverse
,.thead-inverse
, at.thead-default
sa.*-dark
at.*-light
, tumutugma sa aming mga scheme ng kulay na ginamit sa ibang lugar. - Ang mga tumutugon na talahanayan ay bumubuo na ngayon ng mga klase para sa bawat grid breakpoint. Ito ay humiwalay sa Beta 1 dahil ang
.table-responsive
iyong ginagamit ay mas katulad ng.table-responsive-md
. Maaari mo na ngayong gamitin.table-responsive
o.table-responsive-{sm,md,lg,xl}
kung kinakailangan. - Inalis ang suporta sa Bower dahil ang manager ng package ay hindi na ginagamit para sa mga alternatibo (hal., Yarn o npm). Tingnan ang bower/bower#2298 para sa mga detalye.
- Nangangailangan pa rin ang Bootstrap ng jQuery 1.9.1 o mas mataas, ngunit pinapayuhan kang gumamit ng bersyon 3.x dahil ang mga sinusuportahang browser ng v3.x ay ang mga sinusuportahan ng Bootstrap at ang v3.x ay may ilang mga pag-aayos sa seguridad.
- Inalis ang hindi nagamit na
.form-control-label
klase. Kung ginamit mo ang klase na ito, ito ay duplicate ng.col-form-label
klase na patayo na nakasentro sa isang<label>
kasama nito ang nauugnay na input sa pahalang na mga layout ng form. - Binago ang
color-yiq
mula sa mixin na kasama angcolor
property sa isang function na nagbabalik ng value, na nagbibigay-daan sa iyong gamitin ito para sa anumang CSS property. Halimbawa, sa halip nacolor-yiq(#000)
, isusulat mo angcolor: color-yiq(#000);
.
- Ipinakilala ang bagong
pointer-events
paggamit sa mga modal. Ang panlabas ay.modal-dialog
dumadaan sa mga kaganapan na maypointer-events: none
para sa custom na paghawak ng pag-click (na ginagawang posible na makinig lamang sa.modal-backdrop
para sa anumang mga pag-click), at pagkatapos ay kinokontra ito para sa aktwal na.modal-content
maypointer-events: auto
.
Narito ang malalaking ticket item na gusto mong malaman kapag lumipat mula sa v3 hanggang v4.
- Inalis ang suporta sa IE8, IE9, at iOS 6. IE10+ at iOS 7+ na lang ang v4. Para sa mga site na nangangailangan ng alinman sa mga iyon, gamitin ang v3.
- Nagdagdag ng opisyal na suporta para sa Browser at WebView ng Android v5.0 Lollipop. Ang mga naunang bersyon ng Android Browser at WebView ay nananatiling hindi opisyal na suportado.
- Ang Flexbox ay pinagana bilang default. Sa pangkalahatan, nangangahulugan ito ng paglayo sa mga float at higit pa sa aming mga bahagi.
- Lumipat mula Less sa Sass para sa aming source CSS file.
- Lumipat mula
px
sarem
bilang aming pangunahing unit ng CSS, bagama't ginagamit pa rin ang mga pixel para sa mga query sa media at gawi ng grid dahil hindi naaapektuhan ng laki ng uri ang mga viewport ng device. - Ang laki ng font sa buong mundo ay tumaas mula
14px
sa16px
. - Binago ang mga tier ng grid upang magdagdag ng ikalimang opsyon (pag-address ng mas maliliit na device sa
576px
at ibaba) at inalis ang-xs
infix mula sa mga klaseng iyon. Halimbawa:.col-6.col-sm-4.col-md-3
. - Pinalitan ang hiwalay na opsyonal na tema ng mga opsyon na maaaring i-configure sa pamamagitan ng mga variable ng SCSS (hal.,
$enable-gradients: true
). - In-overhaul ang build system para gumamit ng serye ng mga npm script sa halip na Grunt. Tingnan
package.json
ang lahat ng mga script, o ang aming project readme para sa mga lokal na pangangailangan sa pag-unlad. - Hindi na sinusuportahan ang hindi tumutugon na paggamit ng Bootstrap.
- Inalis ang online na Customizer pabor sa mas malawak na dokumentasyon sa pag-setup at mga customized na build.
- Nagdagdag ng dose-dosenang mga bagong klase ng utility para sa mga karaniwang CSS property-value pairs at margin/padding spacing shortcut.
- Inilipat sa flexbox.
- Nagdagdag ng suporta para sa flexbox sa grid mixins at mga paunang natukoy na klase.
- Bilang bahagi ng flexbox, kasama ang suporta para sa vertical at horizontal alignment classes.
- Na-update na mga pangalan ng klase ng grid at isang bagong tier ng grid.
- Nagdagdag ng bagong
sm
grid tier sa ibaba768px
para sa higit pang butil na kontrol. Mayroon na tayongxs
,sm
,md
,lg
, atxl
. Nangangahulugan din ito na ang bawat tier ay na-bumped up ng isang antas (kaya.col-md-6
sa v3 ay.col-lg-6
nasa v4 na ngayon). xs
Ang mga klase ng grid ay binago upang hindi mangailangan ng infix na mas tumpak na kumatawan na nagsisimula silang maglapat ng mga estilo samin-width: 0
at hindi isang set na halaga ng pixel. Sa halip na.col-xs-6
, ito ay ngayon.col-6
. Ang lahat ng iba pang mga grid tier ay nangangailangan ng infix (hal,sm
).
- Nagdagdag ng bagong
- Mga na-update na laki ng grid, mixin, at variable.
- Ang mga grid gutters ay mayroon na ngayong Sass map para matukoy mo ang mga partikular na lapad ng gutter sa bawat breakpoint.
- Na-update na grid mixin para gumamit ng
make-col-ready
prep mixin at isangmake-col
para itakda angflex
atmax-width
para sa indibidwal na sukat ng column. - Binago ang mga breakpoint ng query sa media ng grid system at lapad ng lalagyan upang isaalang-alang ang bagong grid tier at matiyak na ang mga column ay pantay na mahahati
12
sa kanilang max na lapad. - Ang mga breakpoint ng grid at lapad ng lalagyan ay pinangangasiwaan na ngayon sa pamamagitan ng mga mapa ng Sass (
$grid-breakpoints
at$container-max-widths
) sa halip na ilang hiwalay na variable. Ang mga ito ay ganap na pinapalitan ang mga@screen-*
variable at nagbibigay-daan sa iyong ganap na i-customize ang mga grid tier. - Nagbago din ang mga query sa media. Sa halip na ulitin ang aming mga deklarasyon ng query sa media na may parehong halaga sa bawat pagkakataon, mayroon na kaming
@include media-breakpoint-up/down/only
. Ngayon, sa halip na magsulat@media (min-width: @screen-sm-min) { ... }
, maaari kang magsulat@include media-breakpoint-up(sm) { ... }
.
- Mga nalaglag na panel, thumbnail, at balon para sa isang bagong sumasaklaw na bahagi, mga card .
- Inalis ang font ng icon ng Glyphicons. Kung kailangan mo ng mga icon, ang ilang mga opsyon ay:
- ang upstream na bersyon ng Glyphicons
- Octicons
- Galing ng Font
- Tingnan ang pahina ng Extend para sa isang listahan ng mga alternatibo. May mga karagdagang mungkahi? Mangyaring magbukas ng isyu o PR.
- Inalis ang plugin ng Affix jQuery.
- Inirerekomenda namin ang paggamit
position: sticky
sa halip. Tingnan ang HTML5 Please entry para sa mga detalye at partikular na rekomendasyon sa polyfill. Ang isang mungkahi ay gumamit@supports
ng panuntunan para sa pagpapatupad nito (hal,@supports (position: sticky) { ... }
)/ - Kung gumagamit ka ng Affix para maglapat ng mga karagdagang hindi
position
istilo, maaaring hindi sinusuportahan ng mga polyfill ang iyong use case. Ang isang opsyon para sa mga naturang paggamit ay ang third-party na ScrollPos-Styler library.
- Inirerekomenda namin ang paggamit
- Ibinaba ang bahagi ng pager dahil ito ay bahagyang na-customize na mga pindutan.
- Ni- refactor ang halos lahat ng mga bahagi upang gumamit ng higit pang hindi naka-nest na mga selector ng klase sa halip na mga sobrang partikular na pampili ng mga bata.
Hina-highlight ng listahang ito ang mga pangunahing pagbabago ayon sa bahagi sa pagitan ng v3.xx at v4.0.0.
Bago sa Bootstrap 4 ay ang Reboot , isang bagong stylesheet na binuo sa Normalize gamit ang sarili naming medyo may opinyon na mga istilo ng pag-reset. Ang mga tagapili na lumalabas sa file na ito ay gumagamit lamang ng mga elemento—walang mga klase dito. Inihihiwalay nito ang aming mga istilo ng pag-reset mula sa aming mga istilo ng bahagi para sa isang mas modular na diskarte. Ang ilan sa pinakamahalagang pag-reset na kinabibilangan nito ay ang box-sizing: border-box
pagbabago, paglipat mula em
sa mga rem
unit sa maraming elemento, mga istilo ng link, at maraming pag-reset ng elemento ng form.
- Inilipat ang lahat
.text-
ng mga utility sa_utilities.scss
file. - Nahulog
.page-header
dahil ang mga istilo nito ay maaaring ilapat sa pamamagitan ng mga utility. .dl-horizontal
ay nalaglag. Sa halip, gamitin at gamitin.row
ang<dl>
mga grid column classes (o mixins) sa mga ito<dt>
at sa mga<dd>
bata.- Muling idisenyo ang mga blockquotes, na inililipat ang kanilang mga istilo mula sa
<blockquote>
elemento patungo sa isang klase,.blockquote
. Inalis ang.blockquote-reverse
modifier para sa mga text utilities. .list-inline
kailangan ngayon na ang mga item sa listahan ng mga anak nito ay may bagong.list-inline-item
klase na inilapat sa kanila.
- Pinalitan ng pangalan
.img-responsive
sa.img-fluid
. - Pinalitan ng pangalan
.img-rounded
sa.rounded
- Pinalitan ng pangalan
.img-circle
sa.rounded-circle
- Halos lahat ng instance ng
>
selector ay inalis na, ibig sabihin, ang mga nested table ay awtomatikong magmamana ng mga istilo mula sa kanilang mga magulang. Lubos nitong pinapasimple ang aming mga tagapili at potensyal na pagpapasadya. - Pinalitan ng pangalan
.table-condensed
sa.table-sm
para sa pagkakapare-pareho. - Nagdagdag ng bagong
.table-inverse
opsyon. - Nagdagdag ng mga modifier ng header ng talahanayan:
.thead-default
at.thead-inverse
. - Pinalitan ang pangalan ng mga klase sa konteksto upang magkaroon ng
.table-
-prefix. Samakatuwid.active
,.success
,.warning
,.danger
at.info
sa.table-active
,.table-success
,.table-warning
,.table-danger
at.table-info
.
- Nire-reset ang inilipat na elemento sa
_reboot.scss
file. - Pinalitan ng pangalan
.control-label
sa.col-form-label
. - Pinalitan ang pangalan
.input-lg
at.input-sm
sa.form-control-lg
at.form-control-sm
, ayon sa pagkakabanggit. - Nag- drop
.form-group-*
ng mga klase para sa kapakanan ng pagiging simple. Gamitin.form-control-*
na lang ang mga klase ngayon. - Inalis
.help-block
at pinalitan ito.form-text
ng para sa block-level na text ng tulong. Para sa inline na text ng tulong at iba pang mga flexible na opsyon, gumamit ng mga utility class tulad ng.text-muted
. - Nahulog
.radio-inline
at.checkbox-inline
. - Pinagsama -sama
.checkbox
at.radio
sa.form-check
iba't ibang.form-check-*
klase. - Na-overhaul ang mga pahalang na anyo:
- Ibinaba ang
.form-horizontal
kinakailangan sa klase. .form-group
hindi na nalalapat ang mga istilo mula sa.row
via mixin, kaya.row
kinakailangan na ngayon para sa mga horizontal grid layout (hal.,<div class="form-group row">
).- Nagdagdag ng bagong
.col-form-label
klase sa patayong gitnang mga label na may.form-control
s. - Nagdagdag ng bago
.form-row
para sa mga compact na layout ng form na may mga klase ng grid (swap your.row
for a.form-row
and go).
- Ibinaba ang
- Nagdagdag ng suporta sa mga custom na form (para sa mga checkbox, radyo, pinili, at mga input ng file).
- Pinalitan ang
.has-error
,.has-warning
, at.has-success
mga klase ng HTML5 form validation sa pamamagitan ng CSS:invalid
at:valid
pseudo-classes. - Pinalitan ng pangalan
.form-control-static
sa.form-control-plaintext
.
- Pinalitan ng pangalan
.btn-default
sa.btn-secondary
. - Buong bumagsak ang
.btn-xs
klase bilang.btn-sm
proporsyonal na mas maliit kaysa sa v3's. - Ang tampok na stateful na button ng
button.js
jQuery plugin ay ibinagsak. Kabilang dito ang$().button(string)
at mga$().button('reset')
pamamaraan. Pinapayuhan namin na gumamit na lang ng kaunting custom na JavaScript, na magkakaroon ng pakinabang ng pagkilos nang eksakto sa paraang gusto mo.- Tandaan na ang iba pang mga feature ng plugin (mga checkbox ng button, radio button, single-toggle button) ay napanatili sa v4.
- Baguhin ang mga button
[disabled]
sa:disabled
bilang sinusuportahan ng IE9+:disabled
. Gayunpamanfieldset[disabled]
ay kinakailangan pa rin dahil ang mga native disabled na fieldset ay may buggy pa rin sa IE11 .
- Isulat muli ang bahagi gamit ang flexbox.
- Inalis
.btn-group-justified
. Bilang isang kapalit na maaari mong gamitin<div class="btn-group d-flex" role="group"></div>
bilang isang wrapper sa paligid ng mga elemento na may.w-100
. - Ibinaba ang
.btn-group-xs
klase na ganap na ibinigay na pag-alis ng.btn-xs
. - Inalis ang tahasang espasyo sa pagitan ng mga pangkat ng button sa mga toolbar ng button; gamitin ang margin utilities ngayon.
- Pinahusay na dokumentasyon para sa paggamit sa iba pang mga bahagi.
- Lumipat mula sa mga parent selector patungo sa mga singular na klase para sa lahat ng bahagi, modifier, atbp.
- Mga pinasimpleng istilo ng dropdown upang hindi na maipadala na may naka-attach na pataas o pababang mga arrow sa dropdown na menu.
- Maaaring buuin ang mga dropdown gamit ang
<div>
s o<ul>
s ngayon. - Muling itinayong mga istilo ng dropdown at markup upang magbigay ng madali, built-in na suporta para sa
<a>
at<button>
batay sa mga dropdown na item. - Pinalitan ng pangalan
.divider
sa.dropdown-divider
. - Ang mga dropdown na item ay nangangailangan na ngayon ng
.dropdown-item
. - Ang mga dropdown toggle ay hindi na nangangailangan ng tahasang
<span class="caret"></span>
; awtomatiko na itong ibinibigay sa pamamagitan ng CSS::after
sa.dropdown-toggle
.
- Nagdagdag ng bagong
576px
grid breakpoint bilangsm
, ibig sabihin mayroon na ngayong limang kabuuang tier (xs
,sm
,md
,lg
, atxl
). - Pinalitan ang pangalan ng tumutugon na mga klase ng modifier ng grid mula
.col-{breakpoint}-{modifier}-{size}
sa.{modifier}-{breakpoint}-{size}
para sa mas simpleng mga klase ng grid. - Nag-drop ng mga klase ng push and pull modifier para sa mga bagong klaseng pinapagana ng flexbox
order
. Halimbawa, sa halip na.col-8.push-4
at.col-4.pull-8
, gagamit ka ng.col-8.order-2
at.col-4.order-1
. - Nagdagdag ng flexbox utility classes para sa grid system at mga bahagi.
- Isulat muli ang bahagi gamit ang flexbox.
- Pinalitan ng
a.list-group-item
isang tahasang klase,.list-group-item-action
, para sa pag-istilo ng link at mga bersyon ng button ng mga item sa pangkat ng listahan. - Nagdagdag
.list-group-flush
ng klase para gamitin sa mga card.
- Isulat muli ang bahagi gamit ang flexbox.
- Dahil sa paglipat sa flexbox, malamang na masira ang pagkakahanay ng mga icon sa pag-dismiss sa header dahil hindi na kami gumagamit ng mga float. Nauuna ang lumulutang na nilalaman, ngunit may flexbox na hindi na iyon ang kaso. I-update ang iyong mga icon sa pag-dismiss na darating pagkatapos ng mga pamagat ng modal upang ayusin.
- Ang
remote
opsyon (na maaaring magamit upang awtomatikong mag-load at mag-inject ng panlabas na nilalaman sa isang modal) at ang kaukulangloaded.bs.modal
kaganapan ay inalis. Inirerekomenda namin sa halip ang paggamit ng client-side templating o isang data binding framework, o pagtawag sa jQuery.load sa iyong sarili.
- Isulat muli ang bahagi gamit ang flexbox.
- Ibinaba ang halos lahat
>
ng mga tagapili para sa mas simpleng pag-istilo sa pamamagitan ng mga hindi naka-nest na klase. - Sa halip na mga tagapili na partikular sa HTML tulad ng
.nav > li > a
, gumagamit kami ng magkakahiwalay na klase para sa.nav
s,.nav-item
s, at.nav-link
s. Ginagawa nitong mas flexible ang iyong HTML habang dinadala ang pinataas na extensibility.
Ang navbar ay ganap na muling isinulat sa flexbox na may pinahusay na suporta para sa pagkakahanay, pagtugon, at pagpapasadya.
- Ang mga tumutugon na gawi sa navbar ay inilalapat na ngayon sa
.navbar
klase sa pamamagitan ng kinakailangan.navbar-expand-{breakpoint}
kung saan pipiliin mo kung saan i-collapse ang navbar. Dati ito ay isang Mas kaunting variable na pagbabago at kinakailangang muling pag-compile. .navbar-default
ay ngayon.navbar-light
, bagaman.navbar-dark
nananatiling pareho. Ang isa sa mga ito ay kinakailangan sa bawat navbar. Gayunpaman, ang mga klase na ito ay hindi na nagtatakda ngbackground-color
s; sa halip sila ay mahalagang nakakaapekto lamangcolor
.- Ang mga Navbar ay nangangailangan na ngayon ng isang deklarasyon sa background ng ilang uri. Pumili mula sa aming mga utility sa background (
.bg-*
) o itakda ang iyong sarili gamit ang mga light/inverse na klase sa itaas para sa mad customization . - Dahil sa mga istilo ng flexbox, magagamit na ngayon ng mga navbar ang mga utility ng flexbox para sa madaling mga opsyon sa pag-align.
.navbar-toggle
ay ngayon.navbar-toggler
at may iba't ibang istilo at panloob na markup (wala nang tatlo<span>
s).- Buong bumagsak sa
.navbar-form
klase. Hindi na ito kailangan; sa halip, gamitin.form-inline
at ilapat lamang ang mga margin utility kung kinakailangan. - Ang mga Navbar ay hindi na kasama
margin-bottom
o bilangborder-radius
default. Gumamit ng mga utility kung kinakailangan. - Ang lahat ng mga halimbawa na nagtatampok ng mga navbar ay na-update upang magsama ng bagong markup.
- Isulat muli ang bahagi gamit ang flexbox.
- Ang mga tahasang klase (
.page-item
,.page-link
) ay kinakailangan na ngayon sa mga inapo ng.pagination
s - Ibinaba nang
.pager
buo ang bahagi dahil ito ay higit pa sa mga na-customize na pindutan ng outline.
- Ang isang tahasang klase,
.breadcrumb-item
, ay kinakailangan na ngayon sa mga inapo ni.breadcrumb
s
- Pinagsama -sama
.label
at.badge
i-disambiguate mula sa<label>
elemento at pasimplehin ang mga kaugnay na bahagi. - Idinagdag
.badge-pill
bilang modifier para sa rounded "pill" look. - Ang mga badge ay hindi na awtomatikong lumulutang sa mga pangkat ng listahan at iba pang mga bahagi. Kinakailangan na ngayon ang mga klase ng utility para diyan.
.badge-default
ay ibinaba at.badge-secondary
idinagdag upang tumugma sa mga bahagi ng modifier na klase na ginagamit sa ibang lugar.
Nahulog nang buo para sa bagong bahagi ng card.
.panel
sa.card
, na ngayon ay binuo gamit ang flexbox..panel-default
tinanggal at walang kapalit..panel-group
tinanggal at walang kapalit..card-group
ay hindi kapalit, ito ay iba..panel-heading
sa.card-header
.panel-title
sa.card-title
. Depende sa nais na hitsura, maaari mo ring gamitin ang mga elemento ng heading o mga klase (hal<h3>
,.h3
) o mga naka-bold na elemento o klase (hal<strong>
,<b>
,.font-weight-bold
). Tandaan na ang.card-title
, habang may katulad na pangalan, ay gumagawa ng ibang hitsura kaysa sa.panel-title
..panel-body
sa.card-body
.panel-footer
sa.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, at.panel-danger
na-drop para sa.bg-
,.text-
, at mga.border
utility na nabuo mula sa aming$theme-colors
mapa ng Sass.
- Pinalitan ang mga
.progress-bar-*
klase sa konteksto ng mga.bg-*
utility. Halimbawa,class="progress-bar progress-bar-danger"
nagigingclass="progress-bar bg-danger"
. - Pinalitan
.active
para sa mga animated na progress bar na may.progress-bar-animated
.
- Ino-overhaul ang buong bahagi para gawing simple ang disenyo at pag-istilo. Mayroon kaming mas kaunting mga istilo para sa iyo na i-override, mga bagong indicator, at mga bagong icon.
- Ang lahat ng CSS ay inalis sa pugad at pinalitan ng pangalan, na tinitiyak na ang bawat klase ay may prefix na
.carousel-
.- Para sa mga carousel item,
.next
,.prev
,.left
, at.right
ngayon ay.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, at.carousel-item-right
. .item
ay ngayon din.carousel-item
.- Para sa mga nauna/susunod na kontrol,
.carousel-control.right
at.carousel-control.left
ngayon.carousel-control-next
at.carousel-control-prev
, ibig sabihin, hindi na sila nangangailangan ng partikular na base class.
- Para sa mga carousel item,
- Inalis ang lahat ng tumutugon na istilo, pagpapaliban sa mga utility (hal., pagpapakita ng mga caption sa ilang viewport) at mga custom na istilo kung kinakailangan.
- Inalis ang mga override ng larawan para sa mga larawan sa mga carousel item, na nagpapaliban sa mga utility.
- Inayos ang halimbawa ng Carousel para isama ang bagong markup at mga istilo.
- Inalis ang suporta para sa mga naka-istilong nested na talahanayan. Ang lahat ng mga istilo ng talahanayan ay minana na ngayon sa v4 para sa mga mas simpleng tagapili.
- Nagdagdag ng variant ng inverse table.
- Display, nakatago, at higit pa:
- Ginawang tumutugon ang mga kagamitan sa pagpapakita (hal.,
.d-none
atd-{sm,md,lg,xl}-none
). - Ibinaba ang karamihan ng mga
.hidden-*
utility para sa mga bagong display utility . Halimbawa, sa halip na.hidden-sm-up
, gamitin ang.d-sm-none
. Pinalitan ang pangalan ng mga.hidden-print
utility upang magamit ang scheme ng pagpapangalan ng utility ng display. Higit pang impormasyon sa ilalim ng seksyong Mga tumutugon na utility ng page na ito. - Nagdagdag
.float-{sm,md,lg,xl}-{left,right,none}
ng mga klase para sa mga tumutugon na float at inalis.pull-left
at.pull-right
dahil kalabisan ang mga ito sa.float-left
at.float-right
.
- Ginawang tumutugon ang mga kagamitan sa pagpapakita (hal.,
- Uri:
- Nagdagdag ng mga tumutugong variation sa aming mga klase sa pag-align ng text
.text-{sm,md,lg,xl}-{left,center,right}
.
- Nagdagdag ng mga tumutugong variation sa aming mga klase sa pag-align ng text
- Alignment at spacing:
- Nagdagdag ng bagong tumutugon na margin at mga kagamitan sa padding para sa lahat ng panig, kasama ang mga vertical at pahalang na shorthand.
- Nagdagdag ng boatload ng flexbox utilities .
- Bumaba
.center-block
para sa bagong.mx-auto
klase.
- Na-update ang Clearfix upang ihinto ang suporta para sa mga mas lumang bersyon ng browser.
Ang mga mixin ng prefix ng vendor ng Bootstrap 3 , na hindi na ginagamit sa v3.2.0, ay inalis sa Bootstrap 4. Dahil ginagamit namin ang Autoprefixer , hindi na kailangan ang mga ito.
Inalis ang mga sumusunod na mix: 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
Nakatanggap din ang aming dokumentasyon ng pag-upgrade sa buong board. Narito ang mababang pababa:
- Ginagamit pa rin namin ang Jekyll, ngunit mayroon kaming mga plugin sa halo:
bugify.rb
ay ginagamit upang mahusay na ilista ang mga entry sa aming pahina ng mga bug sa browser .example.rb
ay isang custom na tinidor ng default nahighlight.rb
plugin, na nagbibigay-daan para sa mas madaling paghawak ng halimbawa-code.callout.rb
ay isang katulad na custom na tinidor niyan, ngunit idinisenyo para sa aming mga espesyal na doc callout.- jekyll-toc ay ginagamit upang bumuo ng aming talaan ng mga nilalaman.
- Ang lahat ng nilalaman ng doc ay muling isinulat sa Markdown (sa halip na HTML) para sa mas madaling pag-edit.
- Ang mga pahina ay muling inayos para sa mas simpleng nilalaman at isang mas madaling lapitan na hierarchy.
- Lumipat kami mula sa regular na CSS patungo sa SCSS upang lubos na mapakinabangan ang mga variable, mixin, at higit pa ng Bootstrap.
Ang lahat @screen-
ng mga variable ay inalis sa v4.0.0. Gamitin na lang ang media-breakpoint-up()
, media-breakpoint-down()
, o media-breakpoint-only()
Sass mixin o ang $grid-breakpoints
Sass map.
Ang aming tumutugon na mga klase ng utility ay higit na inalis pabor sa tahasang mga display
utility.
- Ang
.hidden
at.show
mga klase ay inalis dahil sumasalungat sila sa jQuery's$(...).hide()
at mga$(...).show()
pamamaraan. Sa halip, subukang i-toggle ang[hidden]
attribute o gumamit ng mga inline na istilo tulad ngstyle="display: none;"
atstyle="display: block;"
. - Ang lahat
.hidden-
ng mga klase ay tinanggal, maliban sa mga kagamitan sa pag-print na pinalitan ng pangalan.- Inalis mula sa 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
- Inalis mula sa 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
- Inalis mula sa v3:
- Ang mga kagamitan sa pag-print ay hindi na nagsisimula sa
.hidden-
o.visible-
, ngunit sa.d-print-
.- Mga lumang pangalan:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Mga bagong klase:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Mga lumang pangalan:
Sa halip na gumamit ng mga tahasang .visible-*
klase, gagawin mong nakikita ang isang elemento sa pamamagitan lamang ng hindi pagtatago nito sa laki ng screen na iyon. Maaari mong pagsamahin ang isang .d-*-none
klase sa isang .d-*-block
klase upang magpakita lamang ng isang elemento sa isang partikular na pagitan ng mga laki ng screen (hal. .d-none.d-md-block.d-xl-none
ipinapakita lamang ang elemento sa medium at malalaking device).
Tandaan na ang mga pagbabago sa mga grid breakpoint sa v4 ay nangangahulugan na kailangan mong pumunta ng isang breakpoint na mas malaki upang makamit ang parehong mga resulta. Ang bagong tumutugon na mga klase ng utility ay hindi nagtatangkang tumanggap ng hindi gaanong karaniwang mga kaso kung saan ang visibility ng isang elemento ay hindi maipahayag bilang isang magkadikit na hanay ng mga laki ng viewport; sa halip ay kakailanganin mong gumamit ng custom na CSS sa mga ganitong pagkakataon.