Source

Panag-migrate iti v4

Ti Bootstrap 4 ket maysa a kangrunaan a panagsurat manen ti intero a proyekto. Dagiti kaaduan a naipangpangruna a panagbalbaliw ket nagupgop iti baba, a sarunuen babaen dagiti ad-adu nga espesipiko a panagbalbaliw kadagiti mainaig a paset.

Natalged dagiti panagbalbaliw

Iti panagakar manipud iti Beta 3 aginggana iti natalinaay a v4.x a pannakairuarmi, awan dagiti agrupsa a panagbalbaliw, ngem adda dagiti sumagmamano a nakadkadlaw a panagbalbaliw.

Panagimprenta

  • Natarimaan dagiti nadadael a utilidad ti panagimprenta. Dati, ti panangusar iti .d-print-*klase ket di ninamnama a mangbalbaliw iti aniaman a sabali .d-*a klase. Ita, agpapadada kadagiti dadduma a display utilities-tayo ken agaplikar laeng iti dayta a media ( @media print).

  • Napalawa dagiti magun-od a utilidad ti display ti panagimaldit tapno maipada kadagiti dadduma a utilidad. Beta 3 ken natataengan laeng ti addaan iti block, inline-block, inline, ken none. Stable v4 nainayon flexti , inline-flex, table, table-row, ken table-cell.

  • Natarimaan ti panagiparang ti preview ti panagimaldit iti ballasiw dagiti browser nga addaan kadagiti baro nga estilo ti panagimaldit a mangikeddeng ti @page size.

Beta 3 ti panagbalbaliw

Bayat a ti Beta 2 ket nakitana ti kaaduan kadagiti panagburakmi a panagbalbaliw bayat ti beta a paset, ngem addaankami pay laeng kadagiti sumagmamano a kasapulan a maiturong iti Beta 3 a pannakairuar. Dagitoy a panagbalbaliw ket agaplikar no ag-update-ka iti Beta 3 manipud iti Beta 2 wenno aniaman a daan a bersion ti Bootstrap.

Surok

  • Inikkat ti saan a nausar $thumbnail-transitiona variable. Awan ti transition-mi, isu nga extra code laeng dayta.
  • Ti pakete ti npm ket saanen a mangiraman kadagiti ania man a papeles malaksid kadagiti taudan ken dist a papelestayo; no nagpannurayka kadakuada ken patarayem idi dagiti iskripmi babaen ti node_modulesfolder, rumbeng nga ibagaymo ti panagayus ti trabahom.

Dagiti Pormas

  • Insurat manen agpadpada dagiti kostumbre ken default a kahon ti tsek ken radio. Ita, agpada nga addaan iti agpapada nga estruktura ti HTML (ruar <div>nga addaan iti kabsat <input>ken <label>) ken agpapada nga estilo ti layout (naurnong a default, inline nga addaan iti klase ti mangbalbaliw). Daytoy ket mangipalubos kadakami nga estilo ti etiketa a naibatay iti kasasaad ti input, a mangpasimple ti suporta para iti disabledattribute (dati a kasapulan ti nagannak a klase) ken nasaysayaat a mangsuporta ti panangipaneknek ti pormami.

    Kas paset daytoy, binaliwanmi ti CSS para iti panangituray kadagiti adu nga background-images kadagiti kahon ti tsek ti kostumbre a porma ken dagiti radio. Iti napalabas, ti naikkat itan nga .custom-control-indicatorelemento ket addaan iti kolor ti likudan, gradient, ken ikono ti SVG. Ti panangpasayaat iti background gradient kaipapananna ti panangsukat amin kadagita tunggal kasapulam a baliwan ti maysa laeng. Ita, addaantayo .custom-control-label::beforepara iti punno ken gradient ken .custom-control-label::aftermangasikaso iti icon.

    Tapno makaaramid ti kostumbre a tseke iti inline, inayon ti .custom-control-inline.

  • Napabaro a selector para kadagiti grupo ti buton a naibatay iti input. Imbes a [data-toggle="buttons"] { }para iti estilo ken kababalin, usarenmi ti dataattribute para laeng kadagiti kababalin ti JS ken agpannuraykami iti baro a .btn-group-toggleklase para iti estilo.

  • Naikkat .col-form-legenda pabor iti medio napasayaat .col-form-label. Daytoy a wagas .col-form-label-smken .col-form-label-lgmabalin nga usaren kadagiti <legend>elemento a nalaka.

  • Dagiti kostumbre a panagserrek ti papeles ket nakaawat ti panagbalbaliw iti $custom-file-textSass a variableda. Saanen a naikabil a mapa ti Sass ken ita ket mangpaandar laeng iti maysa a kuerdas—ti Browsebuton ta dayta itan ti kakaisuna a pseudo-element a napataud manipud iti Sass-tayo. Ti Choose fileteksto ket naggapu itan iti .custom-file-label.

Dagiti grupo ti input

  • Dagiti addon ti grupo ti input ket espesipiko itan iti pannakaikabilda a relatibo iti maysa nga input. Nag-drop kami .input-group-addonken .input-group-btnpara iti dua a baro a klase, .input-group-prependken .input-group-append. Masapul a nalawag nga usarem ti append wenno prepend ita, a mangpasimple iti kaaduan a CSS-tayo. Iti uneg ti append wenno prepend, ikabilmo dagiti butonmo kas adda koma iti sadinoman, ngem baluten ti teksto iti .input-group-text.

  • Dagiti estilo ti panangipaneknek ket nasuportaran itan, a kas dagiti adu nga input (nupay mabalinmo laeng a balidoen ti maysa nga input iti tunggal maysa a grupo).

  • Dagiti klase ti panagdakkel ket masapul nga adda iti nagannak .input-groupken saan a kadagiti indibidual nga elemento ti porma.

Beta 2 ti panagbalbaliw

Bayat nga addakami iti beta, panggepmi nga awan ti breaking changes. Nupay kasta, saan a kanayon a mapasamak dagiti bambanag kas iti naiplano. Iti baba ket dagiti breaking changes a laglagipen no umakar manipud iti Beta 1 agingga iti Beta 2.

Panagburak

  • Naikkat $badge-colorti variable ken ti panagusar daytoy iti .badge. Usarenmi ti maysa a panagandar ti panagdumaduma ti kolor tapno agpili ti maysa a colornaibatay iti background-color, isu a ti variable ket saan a kasapulan.
  • Nabaliwan ti nagan grayscale()ti function to gray()tapno maliklikan ti pannakaburak ti panagsusuppiat iti katutubo a grayscalepagsala ti CSS.
  • Nabaliwan ti naganna .table-inverseiti , .thead-inverse, ken .thead-defaultiti .*-darkken .*-light, a maitunos kadagiti eskema ti kolortayo a nausar iti sabali a lugar.
  • Dagiti sungbat a lamisaan ket mangpataud itan kadagiti klase para iti tunggal maysa a grid breakpoint. Daytoy ket agsina manipud iti Beta 1 iti dayta ti .table-responsiveus-usarenmo ket ad-adda a kasla .table-responsive-md. Mabalinmo itan nga usaren .table-responsivewenno .table-responsive-{sm,md,lg,xl}no kasapulan.
  • Naibaba ti suporta ti Bower a kas ti manager ti pakete ket naikkaten para kadagiti alternatibo (kas pagarigan, Yarn wenno npm). Kitaen ti bower/bower#2298 para kadagiti detalye.
  • Kasapulan pay laeng ti Bootstrap ti jQuery 1.9.1 wenno nangatngato, ngem maibalakad kenka nga agusar iti bersion 3.x yantangay dagiti suportado a browser ti v3.x ket isuda ti suportaran ti Bootstrap plus ti v3.x ket addaan iti sumagmamano a pannakatarimaan ti seguridad.
  • Inikkat ti di nausar .form-control-labela klase. No inusarmo daytoy a klase, daytoy ket duplikado ti .col-form-labelklase a bertikal a nangisentro ti a nga <label>addaan iti nainaig nga input kadagiti horisontal a layout ti porma.
  • Nabaliwan ti color-yiqmanipud iti mixin a nangiraman ti colortagikua iti maysa a panagandar a mangisubli ti pateg, a mangipalubos kenka nga agusar iti daytoy para iti ania man a tagikua ti CSS. Kas pagarigan, imbes a color-yiq(#000), agsuratka koma iti color: color-yiq(#000);.

Dagiti Tampok

  • Naiyam-ammo ti baro a pointer-eventspanagusar kadagiti modal. Ti akinruar .modal-dialogket lumasat kadagiti pasamak nga addaan pointer-events: nonepara iti kostumbre a panagtengngel ti panagpidut (a mangaramid a posible a basta dumngeg iti .modal-backdroppara iti ania man a panagpidut), ken kalpasanna ket mangkontra iti daytoy para iti aktual .modal-contentnga addaan pointer-events: auto.

Dagup

Adda ditoy dagiti dadakkel a banag ti tiket a kayatmo a maammuan no umakarka manipud iti v3 agingga iti v4.

Suporta ti browser

  • Naibaba ti suporta ti IE8, IE9, ken iOS 6. v4 ket IE10+ ken iOS 7+ laeng itan. Para kadagiti site a kasapulan ti asinoman kadagita, usaren ti v3.
  • Nainayon ti opisial a suporta para iti Browser ken WebView ti Android v5.0 Lollipop. Dagiti immun-una a bersion ti Android Browser ken WebView ket agtalinaed laeng a saan nga opisial a nasuportaran.

Sangalubongan a panagbalbaliw

  • Ti Flexbox ket napalubosan babaen ti default. Iti sapasap daytoy ket kayatna a sawen ti panagadayo manipud kadagiti float ken ad-adu pay iti ballasiw dagiti pasettayo.
  • Nabaliwan manipud iti Basbassit agingga iti Sass para kadagiti taudan a CSS a filemi.
  • Nabaliwan manipud pxiti aginggana a remkas ti kangrunaan a yunitmi ti CSS, urayno dagiti pixel ket maus-usar pay laeng para kadagiti panagsaludsod ti media ken ti kababalin ti grid a kas dagiti panagkita ti alikamen ket saan a maapektaran babaen ti kadakkel ti tipo.
  • Immadu ti sangalubongan a kadakkel ti letra manipud 14pxagingga iti 16px.
  • Napabaro dagiti grid tier tapno manginayon ti maikalima a pagpilian (a mangtaming kadagiti babbabassit nga alikamen iti 576pxken iti baba) ken inikkat ti -xsinfix manipud kadagita a klase. Kas pagarigan: .col-6.col-sm-4.col-md-3.
  • Nasukatan ti naisina nga opsional a tema kadagiti maikonfigura a pagpilian babaen dagiti SCSS a variable (kas pagarigan, $enable-gradients: true).
  • Natarimaan ti sistema ti panagbangon tapno agusar ti serye dagiti npm nga iskrip imbes a ti Grunt. Kitaen package.jsonpara kadagiti amin nga iskrip, wenno ti proyektomi a readme para kadagiti kasapulan ti lokal a panagdur-as.
  • Saanen a masuportaran ti saan a makasungbat a panagusar ti Bootstrap.
  • Inbaba ti online Customizer a pabor iti ad-adu a nasaknap a dokumentasion ti panagisaad ken dagiti napasadaan a panagbangon.
  • Nainayon dagiti pinulpullo a baro a klase ti utilidad para kadagiti gagangay a paris ti sanikua-pateg ti CSS ken dagiti ab-ababa a dalan ti panagsisina ti margin/padding.

Sistema ti grid

  • Nayakar iti flexbox.
    • Nainayon ti suporta para iti flexbox kadagiti grid mixins ken dagiti nasakbay a naikeddeng a klase.
    • Kas paset ti flexbox, nairaman ti suporta para kadagiti bertikal ken horizontal a klase ti panagtunos.
  • Napabaro dagiti nagan ti klase ti grid ken baro a grid tier.
    • Nainayon ti baro a smgrid tier iti baba 768pxpara iti ad-adu a granular a panangkontrol. Addaantayon itan iti xs, sm, md, lg, ken xl. Kayatna pay a sawen a tunggal tier ket nabumped up iti maysa a lebel (isu .col-md-6nga iti v3 ket adda itan .col-lg-6iti v4).
    • xsdagiti klase ti grid ket nabaliwan tapno saan a kasapulan ti infix nga ad-adda nga umiso a mangibagi a mangrugida a mangyaplikar kadagiti estilo iti min-width: 0ken saan a naikeddeng a pateg ti pixel. Imbes a .col-xs-6, itan ti .col-6. Amin a dadduma pay a grid tier ket agkasapulan ti infix (kas pagarigan, sm).
  • Napabaro dagiti kadakkel ti grid, mixin, ken dagiti variable.
    • Dagiti grid gutters ket addaan itan iti mapa ti Sass tapno mabalinmo nga ikeddeng dagiti espesipiko a kalawa ti gutter iti tunggal maysa a breakpoint.
    • Napabaro a grid mixins tapno mausar ti make-col-readyprep mixin ken a make-coltapno mangikeddeng ti flexken max-widthpara iti indibidual a panagdakkel ti adigi.
    • Nabaliwan dagiti breakpoint ti panagsaludsod ti media ti sistema ti grid ken dagiti kalawa ti pagkargaan tapno mangibaga ti baro a grid tier ken masigurado a dagiti adigi ket agpapada a mabingbingay babaen 12iti max a kalawada.
    • Dagiti puntos ti panagburak ti grid ken dagiti kalawa ti pagkargaan ket natengngel itan babaen dagiti mapa ti Sass ( $grid-breakpointsken $container-max-widths) imbes a ti sumagmamano a nagsisina a variable. Dagitoy ket mangsukat kadagiti @screen-*variable nga interamente ken mangipalubos kenka a naan-anay a mangpasayaat kadagiti grid tier.
    • Nagbaliw metten dagiti saludsod ti media. Imbes nga uliten dagiti deklarasiontayo iti panagsaludsod ti media nga addaan iti isu met laeng a pateg iti tunggal gundaway, addaantayo itan iti @include media-breakpoint-up/down/only. Ita, imbes nga agsuratka @media (min-width: @screen-sm-min) { ... }, mabalinmon ti agsurat iti @include media-breakpoint-up(sm) { ... }.

Dagiti paset

  • Naitapuak dagiti panel, thumbnail, ken bubon para iti baro a paset a mangsaklaw iti amin, dagiti kard .
  • Naibaba ti Glyphicons icon font. No kasapulam dagiti icon, dadduma a pagpilian ket:
  • Naibaba ti plugin ti Affix jQuery.
    • Irekomendarmi ti panangusar position: stickyketdi. Kitaen ti HTML5 Pangngaasi a panagserrek para kadagiti detalye ken dagiti espesipiko a rekomendasion ti polyfill. Maysa a singasing ket ti panangusar iti @supportspagannurotan a mangipatungpal iti dayta (kas pagarigan, @supports (position: sticky) { ... })/ .
    • No agus-usar ka idi ti Affix tapno mangyaplikar kadagiti kanayonan, saan positionnga estilo, dagiti polyfill ket mabalin a saan a mangsuporta ti kaso ti panagusarmo. Maysa a pagpilian para kadagiti kasta nga usar ket ti maikatlo a partido a biblioteka ti ScrollPos-Styler .
  • Naibaba ti paset ti pager ta dayta ket nasken a medio napasadaan a buton.
  • Na-refactor ti gangani amin a paset tapno agusar kadagiti ad-adu a saan a na-nested a mangpili ti klase imbes a dagiti nalabes nga espesipiko nga ubbing a mangpili.

Babaen ti paset

Daytoy a listaan ​​ket mangitag-ay kadagiti kangrunaan a panagbalbaliw babaen ti paset iti nagbaetan ti v3.xx ken v4.0.0.

I-reboot nga i-reboot

Baro iti Bootstrap 4 ket ti Reboot , ti baro nga stylesheet a mangbangon iti Normalize nga addaan kadagiti bukodtayo a medyo opinionated nga estilo ti panag-reset. Dagiti agpili nga agparang iti daytoy a papeles ket agus-usar laeng kadagiti elemento—awan dagiti klase ditoy. Daytoy ket mangisina kadagiti estilo ti panag-resetmi manipud kadagiti estilo ti pasetmi para iti ad-adu a modular a pamay-an. Sumagmamano kadagiti kapapatgan a panag-reset a mairaman daytoy ket ti box-sizing: border-boxpanagbalbaliw, nga umakar manipud emkadagiti remyunit kadagiti adu nga elemento, dagiti estilo ti silpo, ken adu a panag-reset ti elemento ti porma.

Tipograpia

  • Inyakar amin .text-a utilidad iti _utilities.scssfile.
  • Naibaba .page-headera kas dagiti estilona ket mabalin nga iyaplikar babaen dagiti utilidad.
  • .dl-horizontalti naibaba. Imbes ketdi, usaren .rowti on <dl>ken usaren dagiti klase ti grid column (wenno mixins) iti its <dt>ken <dd>children.
  • Nadisenio manen dagiti blockquote, nga iyakar dagiti estiloda manipud iti <blockquote>elemento iti maymaysa a klase, .blockquote. Naibaba ti .blockquote-reversemodifier para kadagiti utilidad ti teksto.
  • .list-inlineita kalikagumanna a dagiti annakna ket mangilista kadagiti banag ket addaan iti baro a .list-inline-itemklase a mayaplikar kadakuada.

Dagiti Ladawan

  • Nabaliwan ti naganna .img-responsiveiti .img-fluid.
  • Nabaliwan .img-roundedti naganna.rounded
  • Nabaliwan .img-circleti naganna.rounded-circle

Dagiti Lamisaan

  • Dandani amin nga instansia ti >agpili ket naikkaten, a ti kayatna a sawen ket dagiti naisanglad a lamisaan ket automatiko itan a mangtawid kadagiti estilo manipud kadagiti nagannakda. Daytoy ti mangpasimple unay kadagiti agpilitayo ken dagiti mabalin a panagpasayaat.
  • Nabaliwan .table-condensedti naganna .table-smpara iti kinaurnos.
  • Nainayon ti baro a .table-inversepagpilian.
  • Nainayon dagiti mangbalbaliw ti ulo ti lamisaan: .thead-defaultken .thead-inverse.
  • Nabaliwan ti nagan dagiti klase ti konteksto tapno addaan iti .table--prefix. Gapuna .active, .success, .warning, .dangerken .infoiti .table-active, .table-success, .table-warning, .table-dangerken .table-info.

Dagiti Pormas

  • Ti nayakar nga elemento ket ag-reset iti _reboot.scssfile.
  • Nabaliwan ti naganna .control-labeliti .col-form-label.
  • Nabaliwan ti naganna .input-lgken .input-smto .form-control-lgken .form-control-sm, agpada.
  • Naikkat .form-group-*dagiti klase gapu iti kinasimple. Usaren .form-control-*ketdi dagiti klase ita.
  • Naibaba .help-blockken sinukatan daytoy iti .form-textpara iti block-level a teksto ti tulong. Para iti teksto ti tulong iti inline ken dagiti dadduma pay a nalaka a maibagay a pagpilian, agusar kadagiti klase ti utilidad a kas ti .text-muted.
  • Natinnag .radio-inlineken .checkbox-inline.
  • Napagtitipon .checkboxken .radiointo .form-checkken dagiti nadumaduma a .form-check-*klase.
  • Na-overhaul dagiti horizontal a porma:
    • Inbaba ti .form-horizontalrequirement ti klase.
    • .form-groupsaanen nga iyaplikar dagiti estilo manipud iti .rowvia mixin, isu .rowa kasapulan itan para kadagiti horisontal a layout ti grid (kas pagarigan, <div class="form-group row">).
    • Nainayon ti baro .col-form-labela klase kadagiti bertikal a sentro nga etiketa nga addaan iti .form-controls.
    • Nainayon ti baro .form-rowpara kadagiti kompakto a layout ti porma kadagiti klase ti grid (isukatmo ti .rowpara iti a .form-rowken mapan).
  • Nainayon ti suporta dagiti kostumbre a porma (para kadagiti kahon ti tsek, radio, napili, ken dagiti input ti file).
  • Nasukatan .has-errorti , .has-warning, ken .has-successdagiti klase iti HTML5 a panangipaneknek ti porma babaen dagiti CSS's :invalidken :validpseudo-classes.
  • Nabaliwan ti naganna .form-control-staticiti .form-control-plaintext.

Dagiti Buton

  • Nabaliwan ti naganna .btn-defaultiti .btn-secondary.
  • Inbaba ti .btn-xsklase nga interamente kas .btn-smproporsional a basbassit nga amang ngem ti v3's.
  • Ti estado a buton a tampok ti button.jsjQuery a plugin ket naibaba. Karaman ditoy ti $().button(string)ken dagiti $().button('reset')pamay-an. Balakadanmi ti panangusar iti bassit a paset ti kostumbre a JavaScript imbes a dayta, nga addaanto iti pagimbagan nga eksakto ti panagtignay a kas iti kayatmo.
    • Imutektekanyo a dagiti dadduma pay a tampok ti plugin (dagiti kahon ti tsek ti buton, dagiti radio ti buton, dagiti single-toggle a buton) ket napagtalinaed iti v4.
  • Baliwan dagiti buton' [disabled]iti :disabledkas suportaran ti IE9+ :disabled. Nupay kasta fieldset[disabled]ket kasapulan pay laeng gapu ta dagiti katutubo a baldado a fieldset ket buggy pay laeng iti IE11 .

Grupo ti buton

  • Insurat manen ti component babaen ti flexbox.
  • Naikkat .btn-group-justifiedti . Kas kasukat mabalinmo nga usaren <div class="btn-group d-flex" role="group"></div>a kas maysa a balkot iti aglawlaw dagiti elemento nga addaan iti .w-100.
  • Inbaba ti .btn-group-xsklase nga interamente a naited ti pannakaikkat ti .btn-xs.
  • Naikkat ti nalawag nga espasyo iti nagbaetan dagiti grupo ti buton kadagiti toolbar ti buton; usaren dagiti margin utilities ita.
  • Napasayaat ti dokumentasion a mausar kadagiti dadduma a paset.
  • Nabaliwan manipud kadagiti nagannak a mangpili kadagiti agmaymaysa a klase para kadagiti amin a paset, dagiti mangbalbaliw, kdpy.
  • Napasimple dagiti estilo ti dropdown tapno saanen a maipatulod nga addaan kadagiti agpangato wenno agpababa a pana a naikapet iti dropdown menu.
  • Mabalin a maibangon dagiti dropdown babaen ti <div>s wenno <ul>s ita.
  • Naibangon manen dagiti estilo ti dropdown ken markup tapno mangipaay ti nalaka, naibangon a suporta para <a>ken <button>naibatay kadagiti dropdown a banag.
  • Nabaliwan ti naganna .divideriti .dropdown-divider.
  • Dagiti dropdown a banag ket kasapulan itan ti .dropdown-item.
  • Dagiti dropdown toggles ket saanen a kasapulan ti nalawag <span class="caret"></span>; daytoy ket naited itan nga automatiko babaen dagiti CSS's ::afteron .dropdown-toggle.

Sistema ti grid

  • Nainayon ti baro a 576pxgrid breakpoint kas sm, kayatna a sawen nga adda itan lima a dagup a tier ( xs, sm, md, lg, ken xl).
  • Nabaliwan ti nagan dagiti klase ti mangbalbaliw ti grid a sumungbat manipud iti .col-{breakpoint}-{modifier}-{size}aginggana .{modifier}-{breakpoint}-{size}para kadagiti nasimsimple a klase ti grid.
  • Naibaba dagiti klase ti push ken pull modifier para kadagiti baro a klase a paandaren ti flexbox order. Kas pagarigan, imbes nga .col-8.push-4ken .col-4.pull-8, usarem koma ti .col-8.order-2ken .col-4.order-1.
  • Nainayon dagiti klase ti utilidad ti flexbox para iti sistema ti grid ken dagiti paset.

Ilista dagiti grupo

  • Insurat manen ti component babaen ti flexbox.
  • Nasukatan a.list-group-itemiti nalawag a klase, .list-group-item-action, para iti estilo a silpo ken dagiti bersion ti buton dagiti banag ti grupo ti listaan.
  • Nainayon ti .list-group-flushklase a mausar kadagiti kard.
  • Insurat manen ti component babaen ti flexbox.
  • No maited ti panagakar iti flexbox, ti panagtunos dagiti ikono ti panangilaksid iti ulo ket mabalin a nadadael gapu ta saanmi nga agus-usar kadagiti float. Umuna ti floated content, ngem iti flexbox ket saanen a kasta. I-update dagiti dismiss icons mo nga umay kalpasan dagiti modal titles tapno matarimaan.
  • Ti remotepagpilian (a mabalin a mausar nga automatiko a mangikarga ken mangi-inject ti akinruar a linaon iti maysa a modal) ken ti maitunos a loaded.bs.modalpasamak ket naikkat. Irekomendarmi ketdi ti panagusar ti plantilia ti sikigan ti kliyente wenno ti maysa a balangkas ti panagtengngel ti datos, wenno ti panagayab ti jQuery.load a mismo.
  • Insurat manen ti component babaen ti flexbox.
  • Naibaba ti dandani amin a >selector para iti nasimsimple nga estilo babaen kadagiti un-nested a klase.
  • Imbes a dagiti HTML-espesipiko a mangpili a kas .nav > li > ati , agus-usarkami kadagiti agsina a klase para iti .navs, .nav-items, ken .nav-links. Daytoy ket mangaramid ti HTML-mo nga ad-adda a nalaka a maibagay bayat nga iyegna ti ad-adu a panagpalawa.

Ti navbar ket interamente a naisurat manen iti flexbox nga addaan iti napasayaat a suporta para iti panagtunos, panagsungbat, ken panagpasayaat.

  • Dagiti makasungbat a kababalin ti navbar ket maipakat itan iti .navbarklase babaen ti kasapulan .navbar-expand-{breakpoint} a sadiay ket piliem no sadino ti pangi-collapse ti navbar. Iti napalabas daytoy ket maysa idi a Less variable modification ken kasapulan ti recompiling.
  • .navbar-defaultis now .navbar-light, nupay .navbar-darkagtalinaed a kasta. Maysa kadagitoy ti kasapulan iti tunggal navbar. Nupay kasta, dagitoy a klase ket saanen nga ikeddeng background-colorti s; imbes ketdi kangrunaanna nga apektaranda laeng ti color.
  • Dagiti Navbar ket agkasapulan itan ti maysa a deklarasion ti likudan ti sumagmamano a kita. Pilien manipud kadagiti utilidadmi iti likudan ( .bg-*) wenno ikeddeng ti bukodmo nga addaan kadagiti lawag/baliktad a klase iti ngato para iti nauyong a panagpasayaat .
  • No maited dagiti estilo ti flexbox, dagiti navbar ket mabalinda itan nga usaren dagiti utilidad ti flexbox para kadagiti nalaka a pagpilian ti panagtunos.
  • .navbar-toggleket ita .navbar-togglerken addaan iti nadumaduma nga estilo ken inner markup (awan ti tallo nga <span>s).
  • Inbaba nga .navbar-forminteramente ti klase. Saanen a kasapulan dayta; imbes ketdi, usaren .form-inlineken iyaplikar laeng dagiti margin utilities no kasapulan.
  • Saanen nga iraman dagiti navbar margin-bottomwenno border-radiusbabaen ti default. Usaren dagiti utilidad no kasapulan.
  • Amin a pagarigan a mangitampok kadagiti navbar ket na-update tapno mairaman ti baro a marka.

Panagpagina

  • Insurat manen ti component babaen ti flexbox.
  • Dagiti nalawag a klase ( .page-item, .page-link) ket kasapulan itan kadagiti kaputotan ni .paginations
  • In-drop ti .pagercomponent nga interamente ta bassit laeng ti napasadaan a outline buttons.
  • Ti nalawag a klase, .breadcrumb-item, ket kasapulan itan kadagiti kaputotan ni .breadcrumbs

Dagiti etiketa ken badge

  • Napagtitipon .labelken .badgetapno ma-disambiguate manipud iti <label>elemento ken mapasimple dagiti mainaig a paset.
  • Nainayon .badge-pillkas modifier para iti nagtimbukel a “pildoras” a langa.
  • Saanen nga automatiko a maitaytayab dagiti badge kadagiti grupo ti listaan ​​ken dadduma pay a paset. Masapul itan dagiti klase ti utilidad para iti dayta.
  • .badge-defaultket naibaba ken .badge-secondarynainayon tapno maipada kadagiti klase ti mangbalbaliw ti paset a naus-usar iti sabali a lugar.

Panel, thumbnail, ken bubon

Naibaba nga interamente para iti baro a paset ti kard.

Dagiti Panel

  • .panelto .card, naibangon itan babaen ti flexbox.
  • .panel-defaultnaikkat ken awan ti kasukatna.
  • .panel-groupnaikkat ken awan ti kasukatna. .card-groupsaan a kasukat, naiduma dayta.
  • .panel-headingtapno.card-header
  • .panel-titlenga .card-title. Depende iti kayat a langa, mabalinmo pay nga usaren dagiti elemento wenno klase ti paulo (kas pagarigan <h3>, .h3) wenno dagiti nalukmeg nga elemento wenno klase (kas pagarigan <strong>, <b>, .font-weight-bold). Paliiwenyo a ti .card-title, nupay umasping ti naganna, mangpataud iti naiduma a langa ngem iti .panel-title.
  • .panel-bodytapno.card-body
  • .panel-footertapno.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ken .panel-dangernaibaba para iti .bg-, .text-, ken .borderdagiti utilidad a napataud manipud iti $theme-colorsmapami iti Sass.

Pagannayasan

  • Nasukatan dagiti .progress-bar-*klase ti konteksto kadagiti .bg-*utilidad. Kas pagarigan, class="progress-bar progress-bar-danger"agbalin a class="progress-bar bg-danger".
  • Nasukatan .activepara kadagiti animated progress bar iti .progress-bar-animated.
  • Na-overhaul ti intero a paset tapno mapasimple ti disenio ken estilo. Basbassit dagiti estilomi a mabalinmo nga i-override, baro nga indikador, ken baro nga ikono.
  • Amin a CSS ket saan a na-un-nested ken nabaliwan ti naganna, a mangsigurado a tunggal maysa a klase ket naidasig iti .carousel-.
    • Para kadagiti banag a carousel, .next, .prev, .left, ken .rightket ita .carousel-item-next, .carousel-item-prev, .carousel-item-left, ken .carousel-item-right.
    • .itemket met ita .carousel-item.
    • Para kadagiti prev/next a kontrol, .carousel-control.rightken .carousel-control.leftket itan .carousel-control-nextken .carousel-control-prev, kayatna a sawen a saandan a kasapulan ti espesipiko a batayan a klase.
  • Naikkat amin a makasungbat nga estilo, a mangitantan kadagiti utilidad (kas pagarigan, mangipakita kadagiti kapsion kadagiti sumagmamano a viewport) ken dagiti kostumbre nga estilo no kasapulan.
  • Naikkat dagiti panangibabawi ti ladawan para kadagiti ladawan kadagiti banag ti carousel, a mangitantan kadagiti utilidad.
  • Na-tweak ti pagarigan ti Carousel tapno mairaman ti baro a markup ken dagiti estilo.

Dagiti Lamisaan

  • Naikkat ti suporta para kadagiti estilo a naisanglad a lamisaan. Amin nga estilo ti lamisaan ket natawid itan iti v4 para kadagiti nasimsimple a agpili.
  • Nainayon ti baliktad a lamisaan a variant.

Dagiti Utilities

  • Ipakita, nailemmeng, ken dadduma pay:
    • Naaramid dagiti utilidad ti display a makasungbat (kas pagarigan, .d-noneken d-{sm,md,lg,xl}-none).
    • Naibaba ti kaaduan a .hidden-*utilidad para kadagiti baro a display utilities . Kas pagarigan, imbes nga .hidden-sm-up, usaren ti .d-sm-none. Nabaliwan ti nagan dagiti .hidden-printutilidad tapno mausar ti eskema ti panagnagan ti utilidad ti display. Ad-adu pay nga impormasion iti baba ti Responsive utilities a paset daytoy a panid.
    • Nainayon .float-{sm,md,lg,xl}-{left,right,none}dagiti klase para kadagiti responsive floats ken naikkat .pull-leftken .pull-rightgapu ta redundant dagitoy iti .float-leftken .float-right.
  • Tipo:
    • Nainayon dagiti makasungbat a panagduduma kadagiti klasemi ti panagtunos ti teksto .text-{sm,md,lg,xl}-{left,center,right}.
  • Panagtunos ken panagsisina:
  • Na-update ti Clearfix tapno maibaba ti suporta para kadagiti daan a bersion ti browser.

Dagiti mixins ti prefix ti aglaklako

Dagiti vendor prefix mixins ti Bootstrap 3 , a saanen a maus-usar idi v3.2.0, ket naikkaten iti Bootstrap 4. Gapu ta agus- usarkami iti Autoprefixer , saanen a kasapulan dagitoy.

Naikkat dagiti sumaganad a mixin : 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-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dokumentasion

Nakaawat ti dokumentasionmi iti upgrade iti intero a board met laeng. Ania ti low down:

  • Us-usarenmi pay laeng ti Jekyll, ngem addaankami kadagiti plugin iti mix:
    • bugify.rbket maus-usar tapno episiente a mailista dagiti entry iti panidmi a bugs ti browser .
    • example.rbket maysa a kostumbre a tinidor ti default a highlight.rbplugin, a mangipalubos ti nalaklaka a panagtengngel ti pagarigan-kodigo.
    • callout.rbket maysa nga umasping a kostumbre a tinidor dayta, ngem nadisenio para kadagiti espesial a docs callout-tayo.
    • jekyll-toc ti mausar a mangpataud iti table of contents-tayo.
  • Amin a linaon ti docs ket naisurat manen iti Markdown (imbes a HTML) para iti nalaklaka a panag-edit.
  • Naurnos manen dagiti panid para iti nasimsimple a linaon ken ad-adda a maasitgan a hirarkia.
  • Immakarkami manipud iti regular a CSS agingga iti SCSS tapno naan-anay a magundawayan dagiti variable, mixins, ken dadduma pay ti Bootstrap.

Dagiti makasungbat a utilidad

Amin @screen-a variable ket naikkaten iti v4.0.0. Usaren ketdi dagiti media-breakpoint-up(), media-breakpoint-down(), wenno media-breakpoint-only()Sass mixins wenno ti $grid-breakpointsmapa ti Sass.

Dagiti makasungbat a klasemi ti utilidad ket kaaduan a naikkat a pabor kadagiti nalawag a displayutilidad.

  • Ti .hiddenken .showdagiti klase ket naikkat gapu ta dagitoy ket nagsusuppiat kadagiti jQuery's $(...).hide()ken dagiti $(...).show()pamay-an. Imbes ketdi, padasem nga i-toggle ti [hidden]attribute wenno agusar kadagiti estilo ti inline a kas style="display: none;"ken style="display: block;".
  • Amin .hidden-a klase ket naikkaten, malaksid kadagiti utilidad ti panagimaldit a nabaliwan ti nagan.
    • Naikkat manipud iti 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
    • Naikkat manipud kadagiti 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
  • Dagiti utilidad ti panagimprenta ket saanen a mangrugi iti .hidden-wenno .visible-, ngem babaen ti .d-print-.
    • Dagiti daan a nagan: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Baro a klase: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Imbes nga agusarka kadagiti nalawag a .visible-*klase, pagbalinem a makita ti maysa nga elemento babaen ti basta saanmo nga ilemmeng iti dayta a kadakkel ti iskrin. Mabalinmo a pagtitiponen ti maysa a .d-*-noneklase iti maysa a .d-*-blockklase tapno maipakita laeng ti elemento iti naited nga aggigiddan dagiti kadakkel ti iskrin (kas pagarigan .d-none.d-md-block.d-xl-none, ipakitana laeng ti elemento kadagiti kalalainganna ken dadakkel nga alikamen).

Imutektekanyo a dagiti panagbalbaliw kadagiti grid breakpoint iti v4 ket kayatna a sawen a kasapulam ti mapan iti maysa a breakpoint a dakdakkel tapno magun-od dagiti isu met laeng a resulta. Dagiti baro a sumungbat a klase ti utilidad ket dida padasen a mangpadagus kadagiti saan unay a gagangay a kaso a ti pannakakita ti maysa nga elemento ket saan a maiyebkas a kas ti maymaysa nga agsasaruno a sakop dagiti kadakkel ti viewport; kasapulam ketdi ti agusar ti kostumbre a CSS kadagiti kasta a kaso.