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.

Mga matatag na pagbabago

Ang paglipat mula sa Beta 3 patungo sa aming stable v4.x release, walang mga paglabag na pagbabago, ngunit may ilang kapansin-pansing pagbabago.

Pagpi-print

• 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, at none. Idinagdag ang stable v4 flex, inline-flex, table, table-row, at table-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.

Mga pagbabago sa Beta 3

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.

Miscellaneous

• Inalis ang hindi nagamit na $thumbnail-transitionvariable. 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_modulesfolder, dapat mong iakma ang iyong daloy ng trabaho.

Mga porma

• 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 sa disabledattribute (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-images sa custom na form na mga checkbox at radyo. Dati, ang inalis na .custom-control-indicatorelemento 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::beforepara sa fill at gradient at .custom-control-label::afterpinangangasiwaan 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 ang datakatangian para lang sa mga pag-uugali ng JS at umaasa sa isang bagong .btn-group-toggleklase para sa pag-istilo.

• Inalis .col-form-legendsa pabor ng isang bahagyang pinabuting .col-form-label. Sa ganitong paraan .col-form-label-smat .col-form-label-lgmaaaring magamit sa <legend>mga elemento nang madali.

• Nakatanggap ang mga custom na file input ng pagbabago sa kanilang $custom-file-textSass variable. Hindi na ito isang nested na mapa ng Sass at ngayon ay nagpapagana na lamang ng isang string—ang Browsebutton dahil iyon na ngayon ang tanging pseudo-element na nabuo mula sa aming Sass. Ang Choose fileteksto ngayon ay nagmula sa .custom-file-label.

Mga pangkat ng input

• 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-addonat .input-group-btnpara sa dalawang bagong klase, .input-group-prependat .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-groupat hindi ang mga indibidwal na elemento ng form.

Mga pagbabago sa Beta 2

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.

Nasira

• Inalis $badge-colorang variable at ang paggamit nito sa .badge. Gumagamit kami ng color contrast function para pumili ng colorbase sa background-color, kaya hindi kailangan ang variable.
• Pinalitan ang pangalan ng grayscale()function upang gray()maiwasang masira ang salungatan sa CSS native na grayscalefilter.
• Pinalitan ng pangalan .table-inverse, .thead-inverse, at .thead-defaultsa .*-darkat .*-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-responsiveiyong ginagamit ay mas katulad ng .table-responsive-md. Maaari mo na ngayong gamitin .table-responsiveo .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-labelklase. Kung ginamit mo ang klase na ito, ito ay duplicate ng .col-form-labelklase na patayo na nakasentro sa isang <label>kasama nito ang nauugnay na input sa pahalang na mga layout ng form.
• Binago ang color-yiqmula sa mixin na kasama ang colorproperty sa isang function na nagbabalik ng value, na nagbibigay-daan sa iyong gamitin ito para sa anumang CSS property. Halimbawa, sa halip na color-yiq(#000), isusulat mo ang color: color-yiq(#000);.

Mga highlight

• Ipinakilala ang bagong pointer-eventspaggamit sa mga modal. Ang panlabas ay .modal-dialogdumadaan sa mga kaganapan na may pointer-events: nonepara sa custom na paghawak ng pag-click (na ginagawang posible na makinig lamang sa .modal-backdroppara sa anumang mga pag-click), at pagkatapos ay kinokontra ito para sa aktwal na .modal-contentmay pointer-events: auto.

Buod

Narito ang malalaking ticket item na gusto mong malaman kapag lumipat mula sa v3 hanggang v4.

Suporta sa browser

• 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.

Mga pandaigdigang pagbabago

• 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 pxsa rembilang 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 14pxsa 16px.
• Binago ang mga tier ng grid upang magdagdag ng ikalimang opsyon (pag-address ng mas maliliit na device sa 576pxat ibaba) at inalis ang -xsinfix 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.jsonang 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.

Grid system

• 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 smgrid tier sa ibaba 768pxpara sa higit pang butil na kontrol. Mayroon na tayong xs, sm, md, lg, at xl. Nangangahulugan din ito na ang bawat tier ay na-bumped up ng isang antas (kaya .col-md-6sa v3 ay .col-lg-6nasa v4 na ngayon).
  • xsAng mga klase ng grid ay binago upang hindi mangailangan ng infix na mas tumpak na kumatawan na nagsisimula silang maglapat ng mga estilo sa min-width: 0at 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).
• 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-readyprep mixin at isang make-colpara itakda ang flexat max-widthpara 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 12sa 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-breakpointsat $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 bahagi

• 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: stickysa halip. Tingnan ang HTML5 Please entry para sa mga detalye at partikular na rekomendasyon sa polyfill. Ang isang mungkahi ay gumamit @supportsng panuntunan para sa pagpapatupad nito (hal, @supports (position: sticky) { ... })
  • Kung gumagamit ka ng Affix para maglapat ng mga karagdagang hindi positionistilo, 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.
• 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.

Sa pamamagitan ng sangkap

Hina-highlight ng listahang ito ang mga pangunahing pagbabago ayon sa bahagi sa pagitan ng v3.xx at v4.0.0.

I-reboot

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-boxpagbabago, paglipat mula emsa mga remunit sa maraming elemento, mga istilo ng link, at maraming pag-reset ng elemento ng form.

Typography

• Inilipat ang lahat .text-ng mga utility sa _utilities.scssfile.
• Nahulog .page-headerdahil ang mga istilo nito ay maaaring ilapat sa pamamagitan ng mga utility.
• .dl-horizontalay nalaglag. Sa halip, gamitin at gamitin .rowang <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-reversemodifier para sa mga text utilities.
• .list-inlinekailangan ngayon na ang mga item sa listahan ng mga anak nito ay may bagong .list-inline-itemklase na inilapat sa kanila.

Mga imahe

• Pinalitan ng pangalan .img-responsivesa .img-fluid.
• Pinalitan ng pangalan .img-roundedsa.rounded
• Pinalitan ng pangalan .img-circlesa.rounded-circle

Mga mesa

• 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-condensedsa .table-smpara sa pagkakapare-pareho.
• Nagdagdag ng bagong .table-inverseopsyon.
• Nagdagdag ng mga modifier ng header ng talahanayan: .thead-defaultat .thead-inverse.
• Pinalitan ang pangalan ng mga klase sa konteksto upang magkaroon ng .table--prefix. Samakatuwid .active, .success, .warning, .dangerat .infosa .table-active, .table-success, .table-warning, .table-dangerat .table-info.

Mga porma

• Nire-reset ang inilipat na elemento sa _reboot.scssfile.
• Pinalitan ng pangalan .control-labelsa .col-form-label.
• Pinalitan ang pangalan .input-lgat .input-smsa .form-control-lgat .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-blockat pinalitan ito .form-textng 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-inlineat .checkbox-inline.
• Pinagsama -sama .checkboxat .radiosa .form-checkiba't ibang .form-check-*klase.
• Na-overhaul ang mga pahalang na anyo:
  • Ibinaba ang .form-horizontalkinakailangan sa klase.
  • .form-grouphindi na nalalapat ang mga istilo mula sa .rowvia mixin, kaya .rowkinakailangan na ngayon para sa mga horizontal grid layout (hal., <div class="form-group row">).
  • Nagdagdag ng bagong .col-form-labelklase sa patayong gitnang mga label na may .form-controls.
  • Nagdagdag ng bago .form-rowpara sa mga compact na layout ng form na may mga klase ng grid (swap your .rowfor a .form-rowand go).
• 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-successmga klase ng HTML5 form validation sa pamamagitan ng CSS :invalidat :validpseudo-classes.
• Pinalitan ng pangalan .form-control-staticsa .form-control-plaintext.

Mga Pindutan

• Pinalitan ng pangalan .btn-defaultsa .btn-secondary.
• Buong bumagsak ang .btn-xsklase bilang .btn-smproporsyonal na mas maliit kaysa sa v3's.
• Ang tampok na stateful na button ng button.jsjQuery 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 :disabledbilang sinusuportahan ng IE9+ :disabled. Gayunpaman fieldset[disabled]ay kinakailangan pa rin dahil ang mga native disabled na fieldset ay may buggy pa rin sa IE11 .

Grupo ng pindutan

• 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-xsklase 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.

Mga dropdown

• 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 .dividersa .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 ::aftersa .dropdown-toggle.

Grid system

• Nagdagdag ng bagong 576pxgrid breakpoint bilang sm, ibig sabihin mayroon na ngayong limang kabuuang tier ( xs, sm, md, lg, at xl).
• 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-4at .col-4.pull-8, gagamit ka ng .col-8.order-2at .col-4.order-1.
• Nagdagdag ng flexbox utility classes para sa grid system at mga bahagi.

Maglista ng mga pangkat

• Isulat muli ang bahagi gamit ang flexbox.
• Pinalitan ng a.list-group-itemisang 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-flushng klase para gamitin sa mga card.

Modal

• 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 remoteopsyon (na maaaring magamit upang awtomatikong mag-load at mag-inject ng panlabas na nilalaman sa isang modal) at ang kaukulang loaded.bs.modalkaganapan 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.

Navs

• 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 .navs, .nav-items, at .nav-links. Ginagawa nitong mas flexible ang iyong HTML habang dinadala ang pinataas na extensibility.

Navbar

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 .navbarklase 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-defaultay ngayon .navbar-light, bagaman .navbar-darknananatiling pareho. Ang isa sa mga ito ay kinakailangan sa bawat navbar. Gayunpaman, ang mga klase na ito ay hindi na nagtatakda ng background-colors; sa halip sila ay mahalagang nakakaapekto lamang color.
• 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-toggleay ngayon .navbar-togglerat may iba't ibang istilo at panloob na markup (wala nang tatlong <span>s).
• Buong bumagsak sa .navbar-formklase. Hindi na ito kailangan; sa halip, gamitin .form-inlineat ilapat lamang ang mga margin utility kung kinakailangan.
• Ang mga Navbar ay hindi na kasama margin-bottomo bilang border-radiusdefault. Gumamit ng mga utility kung kinakailangan.
• Ang lahat ng mga halimbawa na nagtatampok ng mga navbar ay na-update upang magsama ng bagong markup.

Pagbilang ng pahina

• Isulat muli ang bahagi gamit ang flexbox.
• Ang mga tahasang klase ( .page-item, .page-link) ay kinakailangan na ngayon sa mga inapo ng .paginations
• Ibinaba nang .pagerbuo ang bahagi dahil ito ay higit pa sa mga na-customize na pindutan ng outline.

Mga mumo ng tinapay

• Ang isang tahasang klase, .breadcrumb-item, ay kinakailangan na ngayon sa mga inapo ni .breadcrumbs

Mga label at badge

• Pinagsama -sama .labelat .badgei-disambiguate mula sa <label>elemento at pasimplehin ang mga kaugnay na bahagi.
• Idinagdag .badge-pillbilang 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-defaultay ibinaba at .badge-secondaryidinagdag upang tumugma sa mga bahagi ng modifier na klase na ginagamit sa ibang lugar.

Mga panel, thumbnail, at balon

Nahulog nang buo para sa bagong bahagi ng card.

Mga panel

• .panelsa .card, na ngayon ay binuo gamit ang flexbox.
• .panel-defaulttinanggal at walang kapalit.
• .panel-grouptinanggal at walang kapalit. .card-groupay hindi kapalit, ito ay iba.
• .panel-headingsa.card-header
• .panel-titlesa .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-bodysa.card-body
• .panel-footersa.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, at .panel-dangerna-drop para sa .bg-, .text-, at mga .borderutility na nabuo mula sa aming $theme-colorsmapa ng Sass.

Pag-unlad

• Pinalitan ang mga .progress-bar-*klase sa konteksto ng mga .bg-*utility. Halimbawa, class="progress-bar progress-bar-danger"nagiging class="progress-bar bg-danger".
• Pinalitan .activepara sa mga animated na progress bar na may .progress-bar-animated.

Carousel

• 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 .rightngayon ay .carousel-item-next, .carousel-item-prev, .carousel-item-left, at .carousel-item-right.
  • .itemay ngayon din .carousel-item.
  • Para sa mga nauna/susunod na kontrol, .carousel-control.rightat .carousel-control.leftngayon .carousel-control-nextat .carousel-control-prev, ibig sabihin, hindi na sila nangangailangan ng partikular na base class.
• 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.

Mga mesa

• 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.

Mga utility

• Display, nakatago, at higit pa:
  • Ginawang tumutugon ang mga kagamitan sa pagpapakita (hal., .d-noneat d-{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-printutility 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-leftat .pull-rightdahil kalabisan ang mga ito sa .float-leftat .float-right.
• Uri:
  • Nagdagdag ng mga tumutugong variation sa aming mga klase sa pag-align ng text .text-{sm,md,lg,xl}-{left,center,right}.
• 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-blockpara sa bagong .mx-autoklase.
• Na-update ang Clearfix upang ihinto ang suporta para sa mga mas lumang bersyon ng browser.

Vendor prefix mixins

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

Dokumentasyon

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.rbay ginagamit upang mahusay na ilista ang mga entry sa aming pahina ng mga bug sa browser .
  • example.rbay isang custom na tinidor ng default na highlight.rbplugin, na nagbibigay-daan para sa mas madaling paghawak ng halimbawa-code.
  • callout.rbay 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.

Mga tumutugon na kagamitan

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-breakpointsSass map.

Ang aming tumutugon na mga klase ng utility ay higit na inalis pabor sa tahasang mga displayutility.

• Ang .hiddenat .showmga 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 ng style="display: none;"at style="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
• 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

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-*-noneklase sa isang .d-*-blockklase upang magpakita lamang ng isang elemento sa isang partikular na pagitan ng mga laki ng screen (hal. .d-none.d-md-block.d-xl-noneipinapakita 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.