Source

Migrasyon nan v4

Bootstrap 4 se yon gwo reekri nan tout pwojè a. Chanjman ki pi remakab yo rezime anba a, ki te swiv pa chanjman pi espesifik nan eleman ki enpòtan.

Chanjman ki estab

Deplase soti nan Beta 3 nan lage v4.0 ki estab nou an, pa gen okenn chanjman kraze, men gen kèk chanjman remakab.

Enpresyon

  • Fiks sèvis piblik kase enprime. Anvan sa, lè l sèvi avèk yon .d-print-*klas t ap anile nenpòt lòt .d-*klas san atann. Koulye a, yo matche ak lòt sèvis piblik ekspozisyon nou yo epi yo aplike sèlman nan medya sa a ( @media print).

  • Elaji sèvis piblik ekspozisyon enprime ki disponib pou matche ak lòt sèvis piblik. Beta 3 ak pi gran sèlman te gen block, inline-block, inline, ak none. Stable v4 te ajoute flex, inline-flex, table, table-row, ak table-cell.

  • Te fikse rann aperçu enprime atravè navigatè ak nouvo estil enprime ki espesifye @page size.

Beta 3 chanjman

Pandan ke Beta 2 te wè gwo chanjman nou yo pandan faz beta a, men nou toujou gen kèk ki te bezwen adrese nan lage Beta 3 la. Chanjman sa yo aplike si w ap mete ajou nan Beta 3 soti nan Beta 2 oswa nenpòt ki ansyen vèsyon Bootstrap.

Divès

  • Retire $thumbnail-transitionvaryab ki pa itilize a. Nou pa t 'tranzisyon anyen, kidonk li te jis kòd siplemantè.
  • Pake npm a pa gen okenn lòt fichye ki pa gen fichye sous ak dist nou an ankò; si ou te konte sou yo epi yo te kouri scripts nou yo atravè node_moduleskatab la, ou ta dwe adapte workflow ou.

Fòm

  • Reekri tou de kaz ak radyo koutim ak default. Koulye a, tou de gen estrikti HTML matche (ekstèn <div>ak frè ak sè <input>ak <label>) ak menm estil layout yo (anpille default, aliye ak klas modifye). Sa a pèmèt nou style etikèt la ki baze sou eta opinyon an, senplifye sipò pou disabledatribi a (devan mande pou yon klas paran) ak pi byen sipòte validasyon fòm nou an.

    Kòm yon pati nan sa a, nou te chanje CSS la pou jere plizyè background-images sou kazye fòm koutim ak radyo. Anvan sa, .custom-control-indicatoreleman yo retire kounye a te gen koulè background, gradyan, ak icon SVG. Pèsonalize gradyan background nan te vle di ranplase tout sa yo chak fwa ou te bezwen chanje yon sèl. Koulye a, nou gen .custom-control-label::beforepou ranpli ak gradyan ak .custom-control-label::aftermanch icon la.

    Pou fè yon chèk koutim nan liy, ajoute .custom-control-inline.

  • Mizajou seleksyon an pou gwoup bouton ki baze sou opinyon. Olye [data-toggle="buttons"] { }pou style ak konpòtman, nou itilize dataatribi a jis pou konpòtman JS epi konte sou yon nouvo .btn-group-toggleklas pou manier.

  • Retire .col-form-legendan favè yon ti kras amelyore .col-form-label. Fason sa a .col-form-label-smepi .col-form-label-lgyo ka itilize sou <legend>eleman ak fasilite.

  • Antre dosye Custom te resevwa yon chanjman nan $custom-file-textvaryab Sass yo. Li pa yon kat jeyografik Sass enbrike ankò e kounye a, sèlman pouvwa yon fisèl- Browsebouton an kòm sa a se kounye a sèlman pseudo-eleman ki te pwodwi nan Sass nou an. Tèks Choose filela kounye a soti nan .custom-file-label.

Antre gwoup yo

  • Addons gwoup Antre yo kounye a se espesifik nan plasman yo relatif nan yon opinyon. Nou te tonbe .input-group-addonak .input-group-btnpou de nouvo klas, .input-group-prependak .input-group-append. Ou dwe klèman itilize yon anèks oswa yon apò kounye a, senplifye anpil nan CSS nou an. Nan yon anèks oswa apwofondi, mete bouton ou yo jan yo ta egziste nenpòt lòt kote, men vlope tèks nan .input-group-text.

  • Estil validation yo kounye a sipòte, menm jan ak plizyè antre (menm si ou ka sèlman valide yon sèl opinyon pou chak gwoup).

  • Gwosè klas yo dwe sou paran an .input-groupepi yo pa eleman fòm endividyèl yo.

Beta 2 chanjman

Pandan ke nou nan beta, nou vize pa gen okenn chanjman kraze. Sepandan, bagay yo pa toujou ale jan yo te planifye. Anba a se chanjman sa yo pou w sonje lè w ap deplase soti nan Beta 1 a Beta 2.

Kraze

  • Retire $badge-colorvaryab ak itilizasyon li sou .badge. Nou itilize yon fonksyon kontras koulè pou chwazi yon colorki baze sou background-color, kidonk varyab la pa nesesè.
  • Chanje non grayscale()fonksyon pou gray()evite kraze konfli ak grayscalefiltè natif natal CSS la.
  • Chanje non .table-inverse, .thead-inverse, ak .thead-defaultak .*-dark, .*-lightmatche koulè nou yo itilize yon lòt kote.
  • Tablo ki reponn kounye a jenere klas pou chak pwen kadriyaj. Sa a kraze ak Beta 1 nan ke .table-responsiveou te itilize a se plis tankou .table-responsive-md. Ou kapab kounye a itilize .table-responsiveoswa .table-responsive-{sm,md,lg,xl}jan sa nesesè.
  • Depoze sipò Bower kòm manadjè pakè a te depreche pou altènativ (egzanp, Fil oswa npm). Gade bower/bower#2298 pou plis detay.
  • Bootstrap toujou mande pou jQuery 1.9.1 oswa pi wo, men w ap konseye w sèvi ak vèsyon 3.x paske navigatè ki sipòte v3.x yo se sa yo Bootstrap sipòte plis v3.x gen kèk fikse sekirite.
  • Retire klas ki pa itilize .form-control-labela. Si ou te fè sèvi ak klas sa a, li te kopi .col-form-labelklas la ki vètikal santre yon <label>ak opinyon ki asosye li a nan fòm orizontal layouts.
  • Chanje color-yiqsoti nan yon mixin ki enkli colorpwopriyete a nan yon fonksyon ki retounen yon valè, ki pèmèt ou sèvi ak li pou nenpòt pwopriyete CSS. Pa egzanp, olye de color-yiq(#000), ou ta ekri color: color-yiq(#000);.

Pwen esansyèl

  • Entwodwi nouvo pointer-eventsitilizasyon sou modal yo. Eksteryè .modal-dialoga pase nan evènman ak pointer-events: nonepou manyen klike sou koutim (ki fè li posib jis koute sou la .modal-backdroppou nenpòt klik), ak Lè sa a, debat li pou aktyèl la .modal-contentak pointer-events: auto.

Rezime

Men atik gwo tikè ou pral vle konnen lè w ap deplase soti nan v3 a v4.

Sipò navigatè

  • Depoze sipò IE8, IE9, ak iOS 6. v4 se kounye a sèlman IE10+ ak iOS 7+. Pou sit ki bezwen youn nan sa yo, sèvi ak v3.
  • Te ajoute sipò ofisyèl pou navigatè Android v5.0 Lollipop ak WebView. Vèsyon pi bonè nan navigatè a Android ak WebView rete sèlman ofisyèlman sipòte.

Chanjman mondyal yo

  • Flexbox aktive pa default. An jeneral, sa vle di yon mouvman lwen flote ak plis ankò atravè konpozan nou yo.
  • Chanje soti nan mwens nan Sass pou dosye sous CSS nou yo.
  • Chanje soti pxnan remkòm inite CSS prensipal nou an, menm si piksèl yo toujou itilize pou demann medya ak konpòtman kadriyaj kòm pòtay aparèy yo pa afekte pa gwosè kalite.
  • Gwosè font mondyal ogmante de 14pxa 16px.
  • Ranmase nivo gri yo pou ajoute yon senkyèm opsyon (adrese aparèy ki pi piti nan 576pxak anba a) epi retire -xsenfiks la nan klas sa yo. Egzanp: .col-6.col-sm-4.col-md-3.
  • Ranplase tèm opsyonèl apa a ak opsyon configurable atravè varyab SCSS (egzanp, $enable-gradients: true).
  • Bati sistèm ekzamine yo sèvi ak yon seri de scripts npm olye pou yo Grunt. Gade package.jsonpou tout scripts, oswa lis pwojè nou an pou bezwen devlopman lokal yo.
  • Itilizasyon Bootstrap ki pa reponn ankò pa sipòte.
  • Depoze Customizer sou entènèt la an favè plis dokiman konfigirasyon ak bati Customized.
  • Te ajoute plizyè douzèn nouvo klas sèvis piblik pou pè pwopriyete-valè CSS komen ak rakoursi espas maj/padding.

Sistèm griyaj

  • Deplase nan flexbox.
    • Te ajoute sipò pou flexbox nan mixin gri yo ak klas predefini.
    • Kòm yon pati nan flexbox, enkli sipò pou klas aliyman vètikal ak orizontal.
  • Mete ajou non klas gri yo ak yon nouvo nivo kadriyaj.
    • Te ajoute yon nouvo smnivo gri anba a 768pxpou plis kontwòl granulaire. Kounye a nou gen xs, sm, md, lg, ak xl. Sa vle di tou chak nivo te monte yon nivo (se konsa, .col-md-6nan v3 se kounye a .col-lg-6nan v4).
    • xsklas kadriyaj yo te modifye pou yo pa mande pou enfiks la reprezante pi byen ke yo kòmanse aplike estil nan min-width: 0epi yo pa yon valè pixel mete. Olye de .col-xs-6, se kounye a .col-6. Tout lòt nivo kadriyaj mande pou enfiks la (egzanp, sm).
  • Mete ajou gwosè kadriyaj, mixin, ak varyab.
    • Grid goutyè kounye a gen yon kat Sass pou ou ka presize lajè goutyè espesifik nan chak pwen rupture.
    • Mizajou mixin kadriyaj pou itilize yon make-col-readymixin preparasyon ak yon make-colpou mete flexak max-widthpou gwosè kolòn endividyèl yo.
    • Chanje pwen rupture rechèch medya sistèm kadriyaj ak lajè veso a pou konsidere nouvo nivo kadriyaj epi asire kolòn yo divizib egalman pa 12nan lajè maksimòm yo.
    • Pwen kadriyaj kadriyaj ak lajè veso yo kounye a okipe atravè kat Sass ( $grid-breakpointsak $container-max-widths) olye de yon ti ponyen varyab separe. Sa yo ranplase @screen-*varyab yo antyèman epi pèmèt ou konplètman Customize nivo kadriyaj yo.
    • Rekèt medya yo tou chanje. Olye pou nou repete deklarasyon demann medya nou yo ak menm valè a chak fwa, kounye a nou gen @include media-breakpoint-up/down/only. Koulye a, olye pou yo ekri @media (min-width: @screen-sm-min) { ... }, ou ka ekri @include media-breakpoint-up(sm) { ... }.

Eleman

  • Depoze panno, miniatures, ak pwi pou yon nouvo eleman tout antye, kat .
  • Depoze font la icon Glyphicons. Si w bezwen ikon, gen kèk opsyon:
  • Depoze plugin jQuery Affix la.
    • Nou rekòmande pou itilize position: stickypito. Gade HTML5 Tanpri antre pou detay ak rekòmandasyon polyfill espesifik. Yon sijesyon se sèvi ak yon @supportsrèg pou aplike li (egzanp, @supports (position: sticky) { ... })/
    • Si w t ap itilize Affix pou aplike lòt positionestil, polyfills yo ta ka pa sipòte ka itilizasyon w la. Youn nan opsyon pou itilizasyon sa yo se bibliyotèk twazyèm pati ScrollPos-Styler .
  • Depoze eleman pager la kòm li te esansyèlman yon ti kras Customized bouton.
  • Refactorize prèske tout eleman yo pou yo itilize plis seleksyon klas ki pa nich olye pou yo seleksyon timoun ki twò espesifik.

Pa eleman

Lis sa a mete aksan sou chanjman kle pa eleman ant v3.xx ak v4.0.0.

Rdemare

Nouvo nan Bootstrap 4 se Redemaraj la , yon nouvo stylesheet ki baze sou Nòmalize ak pwòp estil reset yon ti jan opinyon pa nou. Selektè ki parèt nan fichye sa a sèlman itilize eleman—pa gen okenn klas isit la. Sa a izole estil reset nou yo soti nan estil eleman nou yo pou yon apwòch plis modilè. Kèk nan réinitialisations ki pi enpòtan sa gen ladann se box-sizing: border-boxchanjman an, k ap deplase soti emnan reminite sou anpil eleman, estil lyen, ak anpil reset eleman fòm.

Tipografi

  • Deplase tout .text-sèvis piblik yo nan _utilities.scssdosye a.
  • Depoze .page-headerkòm estil li yo ka aplike atravè sèvis piblik.
  • .dl-horizontalte tonbe. Olye de sa, sèvi ak .rowsou <dl>epi sèvi ak klas kolòn kadriyaj (oswa mixins) sou li yo <dt>ak <dd>timoun yo.
  • Redesigned blockquotes, k ap deplase estil yo soti nan <blockquote>eleman nan yon klas sèl .blockquote,. Depoze .blockquote-reversemodifye pou sèvis piblik tèks yo.
  • .list-inlinekounye a egzije pou atik lis pitit li yo gen nouvo .list-inline-itemklas la aplike pou yo.

Imaj

  • Chanje non .img-responsivean .img-fluid.
  • Chanje non .img-roundedan.rounded
  • Chanje non .img-circlean.rounded-circle

Tablo

  • Prèske tout ka >seleksyon an yo te retire, sa vle di tab enbrike pral kounye a otomatikman eritye estil nan men paran yo. Sa a anpil senplifye seleksyon nou yo ak pèsonalizasyon potansyèl yo.
  • Chanje non .table-condensedan .table-smpou konsistans.
  • Te ajoute yon nouvo .table-inverseopsyon.
  • Te ajoute modifikatè header tab: .thead-defaultak .thead-inverse.
  • Chanje non klas kontèks yo pou yo gen yon .table--prefiks. Pakonsekan .active, .success, .warning, .dangerak .infopou .table-active, .table-success, .table-warning, .table-dangerak .table-info.

Fòm

  • Deplase eleman reset nan _reboot.scssdosye a.
  • Chanje non .control-labelan .col-form-label.
  • Chanje non .input-lgak .input-smpou .form-control-lgak .form-control-sm, respektivman.
  • Kite .form-group-*klas yo pou senplisite la. Sèvi ak .form-control-*klas olye kounye a.
  • Depoze .help-blockepi ranplase li ak .form-textpou tèks èd nan nivo blòk. Pou tèks èd aliy ak lòt opsyon fleksib, sèvi ak klas sèvis piblik tankou .text-muted.
  • Depoze .radio-inlineak .checkbox-inline.
  • Konsolide .checkboxak .radionan .form-checkak divès .form-check-*klas yo.
  • Fòm orizontal ekzamine:
    • Depoze .form-horizontalegzijans klas la.
    • .form-grouppa aplike estil ankò nan .rowvia mixin, kidonk .rowli nesesè kounye a pou layout griy orizontal (egzanp, <div class="form-group row">).
    • Te ajoute nouvo .col-form-labelklas nan vètikal sant etikèt ak .form-controls.
    • Te ajoute nouvo .form-rowpou fòm kontra enfòmèl ant ak klas yo kadriyaj (chanje ou .rowpou yon .form-rowepi ale).
  • Te ajoute sipò fòm koutim (pou kaz, radyo, seleksyon, ak antre dosye).
  • Ranplase .has-error, .has-warning, ak .has-successklas ak validation fòm HTML5 atravè CSS :invalidak :validpseudo-klas.
  • Chanje non .form-control-statican .form-control-plaintext.

Bouton

  • Chanje non .btn-defaultan .btn-secondary.
  • Depoze .btn-xsklas la antyèman kòm .btn-smpwopòsyonèl anpil pi piti pase v3 la.
  • Karakteristik bouton etale Plugin jQuery a button.jste abandone. Sa gen ladann $().button(string)ak $().button('reset')metòd. Nou konseye w sèvi ak yon ti kras nan JavaScript koutim olye, ki pral gen benefis nan konpòte egzakteman jan ou vle li.
    • Remake byen ke lòt karakteristik yo nan Plugin la (kazye bouton, radyo bouton, bouton sèl-toggle) yo te konsève nan v4.
  • Chanje bouton [disabled]yo :disabledkòm IE9 + sipòte :disabled. Sepandan fieldset[disabled]se toujou nesesè paske natif natal fieldsets andikape yo toujou bug nan IE11 .

Gwoup bouton

  • Reekri eleman ak flexbox.
  • Retire .btn-group-justified. Kòm yon ranplasman ou ka itilize <div class="btn-group d-flex" role="group"></div>kòm yon anbalaj alantou eleman ak .w-100.
  • Depoze .btn-group-xsklas la antyèman bay retire nan .btn-xs.
  • Retire espas eksplisit ant gwoup bouton yo nan ba zouti; sèvi ak sèvis piblik Marge kounye a.
  • Dokimantasyon amelyore pou itilize ak lòt konpozan.
  • Chanje soti nan seleksyon paran yo nan klas sengilye pou tout eleman, modifye, elatriye.
  • Styles deroulan senplifye pou pa voye ak flèch anlè oswa anba ki tache ak meni dewoulman an ankò.
  • Dropdowns yo ka bati ak <div>s oswa <ul>s kounye a.
  • Estil dropdown rebati ak maketing pou bay sipò fasil, entegre <a>ak <button>atik dropdown ki baze sou.
  • Chanje non .divideran .dropdown-divider.
  • Atik Dropdown kounye a mande pou .dropdown-item.
  • Dropdown baskil pa mande pou yon eksplisit <span class="caret"></span>ankò; sa a se kounye a bay otomatikman atravè CSS a ::aftersou .dropdown-toggle.

Sistèm griyaj

  • Te ajoute yon nouvo 576pxpwen kadriyaj kòm sm, sa vle di kounye a gen senk nivo total ( xs, sm, md, lg, ak xl).
  • Chanje non klas modifikatè griy ki reponn a soti .col-{breakpoint}-{modifier}-{size}nan .{modifier}-{breakpoint}-{size}pou klas griy ki pi senp yo.
  • Yo te abandone klas modifye pouse ak rale pou nouvo klas ki mache ak flexbox orderyo. Pou egzanp, olye pou yo .col-8.push-4ak .col-4.pull-8, ou ta itilize .col-8.order-2ak .col-4.order-1.
  • Te ajoute klas sèvis piblik flexbox pou sistèm kadriyaj ak konpozan.

Lis gwoup yo

  • Reekri eleman ak flexbox.
  • Ranplase a.list-group-itemak yon klas eksplisit, .list-group-item-action, pou style lyen ak bouton vèsyon atik gwoup lis yo.
  • Te ajoute .list-group-flushklas pou itilize ak kat.
  • Reekri eleman ak flexbox.
  • Etandone deplase nan flexbox, aliyman nan ikon ranvwaye nan header la gen anpil chans kase paske nou pa ap itilize flote ankò. Kontni flote vini an premye, men ak flexbox sa a pa ka a ankò. Mete ajou ikon ranvwaye ou yo ap vini apre tit modal yo ranje.
  • Opsyon remotean (ki ta ka itilize otomatikman chaje ak enjekte kontni ekstèn nan yon modal) ak evènman ki koresponn lan loaded.bs.modalyo te retire. Nou rekòmande olye pou itilize modèl bò kliyan oswa yon fondasyon done obligatwa, oswa rele jQuery.load tèt ou.
  • Reekri eleman ak flexbox.
  • Depoze prèske tout >seleksyon yo pou fason ki pi senp atravè klas ki pa nich yo.
  • Olye de seleksyon HTML espesifik tankou .nav > li > a, nou itilize klas separe pou .navs, .nav-items, ak .nav-links. Sa fè HTML ou pi fleksib pandan y ap pote ekstansibilite ogmante.

Navbar la te konplètman reekri nan flexbox ak sipò amelyore pou aliyman, repons, ak personnalisation.

  • Konpòtman repons navbar yo kounye a aplike nan .navbarklas la atravè obligatwa .navbar-expand-{breakpoint} a kote ou chwazi ki kote pou efondre navbar la. Précédemment, sa a se te yon modifikasyon mwens varyab epi li te mande pou rekonpile.
  • .navbar-defaultse kounye a .navbar-light, menm si .navbar-darkrete menm jan an. Youn nan sa yo obligatwa sou chak navbar. Sepandan, klas sa yo pa mete background-colors ankò; olye de sa yo esansyèlman sèlman afekte color.
  • Navbars kounye a mande pou yon deklarasyon background nan kèk kalite. Chwazi nan sèvis piblik nou yo ( .bg-*) oswa mete pwòp ou a ak klas limyè / envès pi wo a pou personnalisation fou .
  • Bay estil flexbox, navbars kapab kounye a itilize sèvis piblik flexbox pou opsyon aliyman fasil.
  • .navbar-togglese kounye a .navbar-togglerepi li gen diferan estil ak maketing enteryè (pa gen plis twa <span>s).
  • Depoze .navbar-formklas la nèt. Li pa nesesè ankò; olye de sa, jis itilize .form-inlineepi aplike sèvis piblik Marge jan sa nesesè.
  • Navbars pa gen ladan ankò margin-bottomoswa border-radiuspa default. Sèvi ak sèvis piblik jan sa nesesè.
  • Tout egzanp ki genyen navbar yo te mete ajou pou genyen nouvo mak.

Papyaj

  • Reekri eleman ak flexbox.
  • Kounye a yo mande klas eksplisit ( .page-item, .page-link) sou desandan .paginations
  • Depoze .pagereleman an antyèman kòm li te ti kras plis pase bouton deskripsyon Customized.
  • Yon klas eksplisit, .breadcrumb-item, se kounye a obligatwa sou desandan yo nan .breadcrumbs

Etikèt ak badj

  • Konsolide .labelak .badgedisambiguate nan <label>eleman nan ak senplifye eleman ki gen rapò.
  • Te ajoute .badge-pillkòm modifye pou gade "grenn" awondi.
  • Badj yo pa flote otomatikman nan gwoup lis ak lòt konpozan. Kounye a, klas itilite yo mande pou sa.
  • .badge-defaultyo te abandone epi .badge-secondaryajoute pou matche ak klas modifye eleman yo itilize yon lòt kote.

Panno, miniatures, ak pwi

Depoze antyèman pou nouvo eleman kat la.

Panno yo

  • .panelto .card, kounye a bati ak flexbox.
  • .panel-defaultretire epi pa gen okenn ranplasman.
  • .panel-groupretire epi pa gen okenn ranplasman. .card-groupse pa yon ranplasman, li diferan.
  • .panel-headingpou.card-header
  • .panel-titlepou .card-title. Tou depan de gade ou vle a, ou ka vle tou itilize eleman tit oswa klas (egzanp <h3>, .h3) oswa eleman oswa klas fonse (egzanp <strong>, <b>, .font-weight-bold). Remake byen ke .card-title, pandan y ap nonmen menm jan an, pwodui yon gade diferan pase .panel-title.
  • .panel-bodypou.card-body
  • .panel-footerpou.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, epi .panel-dangeryo te abandone pou .bg-, .text-, ak .bordersèvis piblik ki te pwodwi nan $theme-colorskat Sass nou an.

Pwogrè

  • Ranplase klas kontèks .progress-bar-*yo ak .bg-*sèvis piblik yo. Pou egzanp, class="progress-bar progress-bar-danger"vin class="progress-bar bg-danger".
  • Ranplase .activepou ba pwogrè anime ak .progress-bar-animated.
  • Ekzamine tout eleman an pou senplifye konsepsyon ak manier. Nou gen mwens estil pou ou pase sou kontwòl, nouvo endikatè, ak nouvo ikon.
  • Tout CSS yo te dekole epi yo te chanje non, pou asire chak klas yo gen prefiks ak .carousel-.
    • Pou atik Carousel, .next, .prev, .left, ak .rightkounye a .carousel-item-next, .carousel-item-prev, .carousel-item-left, ak .carousel-item-right.
    • .itemse kounye a tou .carousel-item.
    • Pou kontwòl prev / pwochen, .carousel-control.rightepi .carousel-control.leftyo kounye a .carousel-control-nextak .carousel-control-prev, sa vle di yo pa bezwen yon klas de baz espesifik ankò.
  • Retire tout style ki reponn, ranvwaye ak sèvis piblik (egzanp, montre tit sou sèten pòtay) ak estil koutim jan sa nesesè.
  • Retire ranvwa imaj pou imaj nan atik Carousel, ranvwaye ak sèvis piblik.
  • Tweaked egzanp Carousel la pou mete nouvo mak ak estil yo.

Tablo

  • Retire sipò pou estile tab enbrike. Tout estil tab yo eritye kounye a nan v4 pou seleksyon ki pi senp yo.
  • Te ajoute varyant tab envès.

Itilite yo

  • Montre, kache, ak plis ankò:
    • Te fè sèvis piblik ekspozisyon yo reponn (egzanp, .d-noneak d-{sm,md,lg,xl}-none).
    • Depoze gwo .hidden-*sèvis piblik pou nouvo sèvis piblik ekspozisyon . Pa egzanp, olye de .hidden-sm-up, sèvi ak .d-sm-none. Chanje non .hidden-printsèvis piblik yo pou itilize konplo nonmen sèvis piblik ekspozisyon an. Plis enfòmasyon anba seksyon sèvis piblik Responsive nan paj sa a.
    • Te ajoute .float-{sm,md,lg,xl}-{left,right,none}klas pou flote ki reponn epi yo retire .pull-lefte .pull-rightdepi yo ap redondants .float-leftak .float-right.
  • Kalite:
    • Te ajoute varyasyon reponn nan klas aliyman tèks nou yo .text-{sm,md,lg,xl}-{left,center,right}.
  • Aliyman ak espas:
  • Clearfix mete ajou pou abandone sipò pou ansyen vèsyon navigatè yo.

Prefiks vandè mixins

Mixin prefiks machann Bootstrap 3 a , ki te demode nan v3.2.0, yo te retire nan Bootstrap 4. Depi nou itilize Autoprefixer , yo pa nesesè ankò.

Retire mixin sa yo : 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,translatetranslate3duser-select

Dokimantasyon

Dokiman nou yo te resevwa yon amelyorasyon atravè tout tablo a tou. Men anba a:

  • Nou toujou ap itilize Jekyll, men nou gen grefon nan melanj la:
    • bugify.rbyo itilize pou lis antre yo nan paj bug navigatè nou an.
    • example.rbse yon fouchèt koutim nan highlight.rbplugin default la, ki pèmèt pou pi fasil manyen egzanp-kòd.
    • callout.rbse yon fouchèt koutim menm jan an nan sa, men ki fèt pou apèl espesyal docs nou yo.
    • yo itilize jekyll-toc pou jenere tab la.
  • Tout kontni dokiman yo te reekri nan Markdown (olye de HTML) pou pi fasil koreksyon.
  • Paj yo te reòganize pou kontni pi senp ak yon yerachi ki pi apwoche.
  • Nou te deplase soti nan CSS regilye nan SCSS pou pwofite anpil avantaj de varyab Bootstrap yo, mixins, ak plis ankò.

Itilite ki reponn

Tout @screen-varyab yo te retire nan v4.0.0. Sèvi ak media-breakpoint-up(), media-breakpoint-down(), oswa media-breakpoint-only()Sass mixins oswa $grid-breakpointskat Sass la pito.

Yo te retire anpil klas sèvis piblik yo an favè displaysèvis piblik klè.

  • Yo te retire klas yo ak yo paske yo te konfli ak jQuery .hiddenak metòd yo. Olye de sa, eseye aktive atribi a oswa itilize estil inline tankou ak ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Tout .hidden-klas yo te retire, eksepte pou sèvis piblik enprime yo ki te chanje non yo.
    • Retire nan 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
    • Retire nan 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
  • Enprime sèvis piblik yo pa kòmanse ak .hidden-oswa .visible-, men ak .d-print-.
    • Ansyen non: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nouvo klas: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Olye ke w sèvi ak .visible-*klas eksplisit, ou fè yon eleman vizib pa tou senpleman pa kache li nan gwosè ekran sa a. Ou ka konbine yon .d-*-noneklas ak yon .d-*-blockklas pou montre yon eleman sèlman sou yon entèval bay gwosè ekran (egzanp .d-none.d-md-block.d-xl-nonemontre eleman nan sèlman sou aparèy mwayen ak gwo).

Remake byen ke chanjman ki fèt nan pwen rupture kadriyaj yo nan v4 vle di ke w ap bezwen ale yon pwen rupture pi gwo pou reyalize menm rezilta yo. Nouvo klas sèvis piblik ki reponn yo pa eseye akomode ka mwens komen kote vizibilite yon eleman pa ka eksprime kòm yon sèl seri vwazinaj vwazinaj; ou pral pito bezwen sèvi ak CSS koutim nan ka sa yo.