Kutamira kune v4

Bootstrap 4 ndeyekunyorazve kukuru kweprojekti yese. Shanduko dzinonyanya kukosha dzakapfupikiswa pazasi, dzichiteverwa neshanduko dzakanyanya kune zvakakosha zvikamu.

Shanduko dzakatsiga

Kufamba kubva kuBeta 3 kuenda kune yedu yakagadzika v4.0 kuburitswa, hapana kutyora shanduko, asi kune dzimwe shanduko dzinozivikanwa.

Kudhinda

• Yakagadziriswa yakaputsika print utilities. Pakutanga, kushandisa .d-print-*kirasi kwaizokunda zvisingatarisirwi chero imwe .d-*kirasi. Ikozvino, ivo vanofananidza nezvimwe zvedu zvekuratidzira zvinoshandiswa uye zvinongoshanda kune iyo midhiya ( @media print).

• Yakawedzera dhinda yekuratidza zvishandiso kuti ienderane nezvimwe zvinoshandiswa. Beta 3 uye vakuru vaingove ne block,,,, inline-blockuye . Yakagadzikana v4 yakawedzerwa , , , , uye .inlinenoneflexinline-flextabletable-rowtable-cell

• Fixed print preview inopa mukati mebrowser nemataera matsva anotsanangura @page size.

Beta 3 inoshanduka

Nepo Beta 2 yakaona kuwanda kwekuchinja kwedu panguva yebeta, asi tichine mashoma aifanira kugadziriswa mukuburitswa kweBeta 3. Idzi shanduko dzinoshanda kana iwe uchigadziridza kuBeta 3 kubva kuBeta 2 kana chero yekare vhezheni yeBootstrap.

Miscellaneous

• Yakabvisa vhezheni isina $thumbnail-transitionkushandiswa. Hatina chataishandura, saka yaingova kodhi yekuwedzera.
• Iyo npm package haichasanganisi chero mafaera kunze kwedu kwakabva uye dist mafaera; kana iwe waivimba navo uye uchimhanyisa zvinyorwa zvedu kuburikidza node_modulesneforodha, unofanirwa kugadzirisa mafambiro ako.

Mafomu

• Nyora patsva mabhokisi ekutarisa uye ekare uye maredhiyo. Ikozvino, ese ari maviri ane inofananidzwa HTML chimiro (yekunze <div>nemunun'una <input>uye <label>) uye akafanana masitaera masitaera (akaturikidzana default, inline nemodhifi kirasi). Izvi zvinotitendera kuti titarise iyo label zvichienderana nemamiriro ekuisa, kurerutsa rutsigiro disabledrwehunhu (yaimboda kirasi yevabereki) uye zvirinani kutsigira fomu redu rekusimbisa.

  Sechikamu cheizvi, takashandura iyo CSS yekubata akawanda background-images pane tsika fomu cheki mabhokisi nemaredhiyo. Pakutanga, .custom-control-indicatorchinhu chabviswa ikozvino chaive neruvara rwekumashure, gradient, uye SVG icon. Kugadzirisa iyo yekumashure gradient kwaireva kutsiva ese aya pese pawaida kuchinja imwe chete. Iye zvino, isu tine .custom-control-label::beforeyekuzadza uye gradient uye .custom-control-label::afterinobata iyo icon.

  Kuti uite cheki cheki mukati, wedzera .custom-control-inline.

• Sarudzo yakagadziridzwa yezvikwata zvemabhatani. Panzvimbo [data-toggle="buttons"] { }pemaitiro nemafambiro, isu tinoshandisa datahunhu chete kune JS maitiro uye tinovimba .btn-group-togglenekirasi nyowani yekutaera.

• Yakabviswa .col-form-legendichifarira yakavandudzwa zvishoma .col-form-label. Iyi nzira .col-form-label-smuye .col-form-label-lginogona kushandiswa pazvinhu <legend>zviri nyore.

• Tsika faira mamepu akagamuchira shanduko kune yavo $custom-file-textSass kusiyanisa. Haisisiri mepu yeSass yakagara uye ikozvino inongopa tambo imwe chete- Browsebhatani sezvo ndiyo chete pseudo-element yakagadzirwa kubva kuSass yedu. Chinyorwa Choose filezvino chabva ku .custom-file-label.

Input groups

• Input group addons vava chaivo pakuiswa kwavo maererano nekuisa. Isu tadonha .input-group-addonuye .input-group-btnkune maviri makirasi matsva, .input-group-prependuye .input-group-append. Iwe unofanirwa kunyatso shandisa append kana prepend ikozvino, kurerutsa yakawanda yeCSS yedu. Mukati me append kana prepend, isa mabhatani ako sezvaangave aripo kumwe kunhu, asi peta mavara mu .input-group-text.

• Zvitaera zvekusimbisa zvave kutsigirwa, sezvakaita akawanda mapindiro (kunyangwe uchikwanisa kugonesa imwe chete yekupinda paboka).

• Sizing makirasi anofanirwa kunge ari pamubereki .input-groupuye kwete chimiro chemunhu.

Beta 2 inoshanduka

Tichiri mubeta, tinovavarira kusatyora shanduko. Zvisinei, zvinhu hazviiti nguva dzose sezvazvakarongwa. Pazasi pane shanduko dzinotyora dzekufunga kana uchifamba kubva kuBeta 1 kuenda kuBeta 2.

Kupwanya

• Yakabviswa $badge-colormusiyano uye kushandiswa kwayo pa .badge. Isu tinoshandisa ruvara rwekusiyanisa basa kusarudza colorzvichienderana neiyo background-color, saka shanduko haina basa.
• Rakapihwa zita rekuti grayscale()kudzivirira gray()kutyora kusawirirana neCSS yemuno grayscalesefa.
• Yakatumidzwazve .table-inverse, .thead-inverse, uye .thead-defaultku .*-darkuye .*-light, inoenderana nemavara edu emavara anoshandiswa kumwewo.
• Matafura anopindura zvino anogadzira makirasi kune yega yega grid breakpoint. Izvi zvinotyora kubva kuBeta 1 pakuti iyo .table-responsiveyawave uchishandisa yakafanana .table-responsive-md. Iwe unogona ikozvino kushandisa .table-responsivekana .table-responsive-{sm,md,lg,xl}sezvinodiwa.
• Yakadonhedzwa Bower tsigiro sepakeji maneja akaregwa kune dzimwe nzira (semuenzaniso, Yarn kana npm). Ona bower/bower#2298 yeruzivo .
• Bootstrap ichiri kuda jQuery 1.9.1 kana kupfuura, asi unorayirwa kushandisa shanduro 3.x sezvo v3.x inotsigirwa nemabhurawuza ari iwo anotsigira Bootstrap plus v3.x ine zvimwe zvigadziriso zvekuchengetedza.
• Yakabviswa .form-control-labelkirasi isina kushandiswa. Kana iwe wakashandisa kirasi iyi, yaive yakapetwa .col-form-labelyekirasi iyo yakamira pakati nepakati <label>neiyo inosanganisirwa yekupinda mumarongerwo emafomu akachinjika.
• Yakashandura iyo color-yiqkubva mumixin yaisanganisira chivakwa colorkuita basa rinodzosa kukosha, zvichikubvumidza kuti uishandise kune chero CSS pfuma. Semuenzaniso, pane kuti color-yiq(#000), iwe unonyora color: color-yiq(#000);.

Pfungwa huru

• Yakaunza kushandiswa kutsva pointer-eventspa modals. Iyo yekunze .modal-dialoginopfuura nemuzviitiko zvine pointer-events: nonetsika yekudzvanya kubata (zvichiita kuti zvikwanisike kungoteerera pane .modal-backdropchero kudzvanya), uye zvino kupesana nazvo kune chaiyo .modal-contentne pointer-events: auto.

Summary

Hezvino zvinhu zvihombe zvetikiti zvauchazoda kuziva kana uchifamba kubva kuv3 kuenda kuv4.

Browser rutsigiro

• Yakadonhedza IE8, IE9, uye iOS 6 rutsigiro. v4 ikozvino inongova IE10+ uye iOS 7+. Kune masaiti anoda imwe yeaya, shandisa v3.
• Yakawedzerwa pamutemo rutsigiro rweAndroid v5.0 Lollipop's Browser uye WebView. Ekare mavhezheni eiyo Android Browser uye WebView anoramba achingotsigirwa zvisiri pamutemo.

Kuchinja kwenyika

• Flexbox inogoneswa nekusarudzika. Kazhinji izvi zvinoreva kusuduruka kubva kune zvinoyangarara uye nezvimwe muzvikamu zvedu.
• Yakachinja kubva paPass kuenda kuSass kune yedu source CSS mafaera.
• Yakachinjika kubva pxkune remyedu yekutanga CSS unit, kunyange mapikseli achiri kushandiswa kumibvunzo midhiya uye maitiro egidhi sezvo mudziyo wekuona zviteshi haukanganiswe nemhando yemhando.
• Saizi yepasi rose yakawedzera kubva 14pxpa 16px.
• Yakagadziridzwa gidhi tiers kuti uwedzere yechishanu sarudzo (kutarisana nemidziyo midiki kuzasi 576pxuye pazasi) uye kubvisa iyo -xsinfix kubva kumakirasi iwayo. Muenzaniso .col-6.col-sm-4.col-md-3:.
• Yakatsiva iyo yakasarudzika sarudzo dingindira nezvinogadziriswa sarudzo kuburikidza neSCSS zvinosiyana (semuenzaniso, $enable-gradients: true).
• Vaka sisitimu yakadzokororwa kuti ushandise akatevedzana npm zvinyorwa pachinzvimbo cheGrunt. Ona package.jsonzvinyorwa zvese, kana purojekiti yedu kuverenga kune zvinodiwa munharaunda.
• Kusadaira kushandiswa kweBootstrap hakuchatsigirwi.
• Yakadonhedza online Customizer ichifarira mamwe akawedzera kuseta zvinyorwa uye akagadziridzwa anovaka.
• Yakawedzera gumi nemaviri emakirasi matsva ekushandisa kune akajairwa CSS pfuma-value peya uye margin/padding spacing mapfupi.

Grid system

• Yakaendeswa kune flexbox.
  • Yakawedzera rutsigiro rweflexbox mune grid musanganiswa uye makirasi akafanotsanangurwa.
  • Sechikamu cheflexbox, yaisanganisira rutsigiro rwemakirasi akatwasuka uye akachinjika ekumisikidza.
• Yakagadziridzwa makirasi egidhi mazita uye itsva grid tier.
  • Yakawedzera gidhi nyowani smpazasi 768pxkune mamwe granular control. Iye zvino tine xs, sm, md, lg, uye xl. Izvi zvinoreva zvakare kuti tier yega yega yakakwidzwa nhanho imwe (saka .col-md-6muv3 yave .col-lg-6muv4).
  • xsmakirasi egidhi akagadziridzwa kuti asade iyo infix kuti inyatso kumiririra kuti vanotanga kushandisa masitaera min-width: 0uye kwete seti pixel kukosha. Pane kudaro .col-xs-6, ikozvino .col-6. Mamwe ese mamwe magidhi tiers anoda iyo infix (semuenzaniso, sm).
• Yakagadziridzwa gidhi saizi, musanganiswa, uye akasiyana.
  • Grid gutters ikozvino ine mepu yeSass kuitira kuti iwe ugone kudoma chaiwo upamhi hwegutter pane imwe neimwe breakpoint.
  • Yakagadziridzwa grid musanganiswa kushandisa make-col-readyprep musanganiswa uye a kuseta make-coliyo flexuye max-widthkune yega column saizi.
  • Yakachinjwa grid system midhiya yemubvunzo mabreakpoints uye upamhi hwechigadziko kuverengera kune itsva grid tier uye ive nechokwadi chekuti makoramu anopatsanurika zvakaenzana 12nehupamhi hwawo.
  • Grid breakpoints uye upamhi hwemudziyo hwave kubatwa kuburikidza neSass mepu ( $grid-breakpointsuye $container-max-widths) panzvimbo pezvishoma zvakasiyana zvakasiyana. Izvi zvinotsiva @screen-*zvinosiyana zvachose uye zvinokutendera kuti ugadzirise zvizere grid tiers.
  • Media queries yachinjawo. Pane kuti tidzokorore zviziviso zvedu zvemivhunzo nevezvenhau nehukoshi hwakafanana nguva yega yega, isu tava ne @include media-breakpoint-up/down/only. Iye zvino, pane kunyora @media (min-width: @screen-sm-min) { ... }, unogona kunyora @include media-breakpoint-up(sm) { ... }.

Zvikamu

• Mapaneru akadonhedzwa, zvigunwe, uye matsime echinhu chitsva chinosanganisa zvese, makadhi .
• Yakadonhedza iyo Glyphicons icon font. Kana iwe uchida zvidhori, dzimwe sarudzo ndeidzi:
  • iyo yekumusoro vhezheni yeGlyphicons
  • Octicons
  • Font Awesome
  • Ona peji rekuwedzera kune runyoro rwedzimwe nzira. Une mamwe mazano here? Ndokumbira uvhure nyaya kana PR.
• Yakadonhedza iyo Affix jQuery plugin.
  • Tinokurudzira kushandisa position: stickypachinzvimbo. Ona iyo HTML5 Ndokumbira unyore kuti uwane ruzivo uye chaiwo polyfill kurudziro. Imwe zano nderekushandisa @supportsmutemo pakuushandisa (semuenzaniso, @supports (position: sticky) { ... })/
  • Dai wanga uchishandisa Affix kuisa yekuwedzera, positionisiri- masitayera, iyo polyfills inogona kusatsigira yako yekushandisa kesi. Imwe sarudzo yekushandiswa kwakadaro ndeyechitatu-bato ScrollPos-Styler raibhurari.
• Yakadonhedza chikamu chepager sezvo chaive mabhatani akagadziridzwa zvishoma.
• Yakagadziridza dzinenge zvikamu zvese kuti ishandise mamwe makirasi asina-nested ekusarudza pane kunyanya-chaiwo vana vanosarudza.

Nechikamu

Rondedzero iyi inoburitsa shanduko huru nechikamu pakati pev3.xx nev4.0.0.

Reboot

Nyowani kuBootstrap 4 ndiyo Reboot , shizha idzva rinovaka paNormalize nevedu vane mafungiro ekugadziridza zvitaera. Vanosarudza vari mufaira iri vanongoshandisa zvinhu-hapana makirasi pano. Izvi zvinoparadzanisa masitaera edu ekugadzirisa kubva kune yedu chikamu masitaera kune imwe modular maitiro. Mamwe akanyanya kukosha kuseta izvi zvinosanganisira box-sizing: border-boxshanduko, kufamba kubva emkune remmayuniti pane akawanda zvinhu, yekubatanidza masitaera, uye akawanda mafomu element reset.

Typography

• Akafambisa zvese .text-zvinoshandiswa _utilities.scsskufaira.
• Yakadonhedzwa .page-headerse, padivi pemuganho, ese masitayipi ayo anogona kuiswa kuburikidza nezvishandiso.
• .dl-horizontalyakadonha. Pane kudaro, shandisa .rowuye <dl>shandisa grid column makirasi (kana musanganiswa) pairi <dt>nevana <dd>.
• Tsika <blockquote>dhizaini yatamira kumakirasi- .blockquoteuye iyo .blockquote-reversemodifier.
• .list-inlinezvino inoda kuti vana vayo vanyore zvinhu vave .list-inline-itemnekirasi itsva inoshandiswa kwavari.

Images

• Yakapihwa zita .img-responsiverekuti .img-fluid.
• Yakapihwa zita .img-roundedrekuti.rounded
• Yakapihwa zita .img-circlerekuti.rounded-circle

Matafura

• Anenge ese mameseji >emusarudzo abviswa, zvichireva kuti matafura akaiswa matafura zvino achangogara nhaka zvitaera kubva kuvabereki vavo. Izvi zvinorerutsa zvikuru vatinosarudzira uye vanogona kugadzirisa.
• Matafura anopindura haachadi chinhu chekuputira. Pane kudaro, ingoisa .table-responsivekurudyi pa <table>.
• Yakapihwa zita .table-condensedrekuti .table-smkuenderana.
• Yakawedzera sarudzo itsva .table-inverse.
• Yakawedzerwa tafura yemusoro modifiers: .thead-defaultuye .thead-inverse.
• Akapihwa mazita emakirasi emamiriro ezvinhu kuti ave ne .table--prefix. Saka .active, .success, uye ku , , uye . .warning_ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

Mafomu

• Yakafambiswa element reset _reboot.scsskufaira.
• Yakapihwa zita .control-labelrekuti .col-form-label.
• Yakatumidzwa .input-lguye .input-smku .form-control-lguye .form-control-sm, zvichiteerana.
• Makirasi akadonha .form-group-*nekuda kwekureruka. Shandisa .form-control-*makirasi pane ikozvino.
• Yakadonhedza .help-blockuye yakaitsiva neiyo .form-textblock-level yerubatsiro mavara. Kuti uwane mameseji erubatsiro emukati uye dzimwe sarudzo dzinochinjika, shandisa makirasi ekushandisa senge .text-muted.
• Yakadonha .radio-inlineuye .checkbox-inline.
• Consolidated .checkboxuye .radiokupinda .form-checkuye akasiyana .form-check-*makirasi.
• Horizontal mafomu akagadziridzwa:
  • Yakadonhedza .form-horizontalzvinodiwa nekirasi.
  • .form-grouphaichashandisi masitaera kubva .rowkuMixin, saka .rowikozvino inodiwa kune yakachinjika grid marongero (semuenzaniso, <div class="form-group row">).
  • Yakawedzera .col-form-labelkirasi nyowani kune vertically pakati mavara ane .form-controls.
  • Yakawedzerwa nyowani .form-rowkune compact fomu marongero neiyo grid makirasi (chinjana yako .rowkuti .form-rowuende).
• Yakawedzerwa mafomu ekutsigira mafomu (yecheki mabhokisi, maredhiyo, anosarudza, uye mafaira ekuisa).
• Yakatsiviwa .has-error, .has-warning, uye .has-successmakirasi ane HTML5 fomu yekusimbisa kuburikidza neCSS's :invaliduye :validpseudo-makirasi.
• Yakapihwa zita .form-control-staticrekuti .form-control-plaintext.

Mabhatani

• Yakapihwa zita .btn-defaultrekuti .btn-secondary.
• Yakadonhedza .btn-xskirasi zvachose sezvo .btn-smiri diki zvakanyanya pane v3's.
• Iyo bhatani inomiririra chimiro button.jschejQuery plugin yakadonhedzwa. Izvi zvinosanganisira nzira $().button(string)uye $().button('reset')nzira. Isu tinopa zano kushandisa chidiki chidiki chetsika JavaScript pachinzvimbo, icho chinova nemubairo wekuzvibata chaizvo sezvaunoda.
  • Ziva kuti mamwe maficha eplugin (mabhatani echeki mabhokisi, mabhatani maredhiyo, mabhatani ega-toggle) akachengetwa muv4.
• Shandura mabhatani' [disabled]kuti :disabledave IE9+ inotsigira :disabled. Zvisineyi fieldset[disabled]zvichiri kudikanwa nekuti nharaunda dzakaremara dzakaremara dzichiri buggy muIE11 .

Bhatani boka

• Nyorazve chikamu neflexbox.
• Kubviswa .btn-group-justified. Sekutsiva iwe unogona kushandisa <div class="btn-group d-flex" role="group"></div>sechiputiriso chakatenderedza zvinhu zvine .w-100.
• Vakadonha .btn-group-xskirasi zvachose vapiwa kubvisa .btn-xs.
• Yakabvisa kupatsanura kwakajeka pakati pemapoka emabhatani mumabhatani eturusi; shandisa margin utilities izvozvi.
• Zvinyorwa zvakavandudzwa zvekushandisa nezvimwe zvikamu.

Dropdowns

• Yakachinjika kubva kuvasarudzo yevabereki kuenda kune imwe chete makirasi ezvese zvikamu, modhifita, nezvimwe.
• Zvitaera zvakarerutswa zvekudonhedza kuti zvirege kutakura nemiseve inokwira kana pasi yakanamirwa kumenyu yekudonhedza.
• Dropdowns inogona kuvakwa ne <div>s kana <ul>s izvozvi.
• Vakazve kudonhedza masitayipi uye markup kuti ipe nyore, yakavakirwa-mukati tsigiro <a>uye <button>yakavakirwa kudonhedza zvinhu.
• Yakapihwa zita .dividerrekuti .dropdown-divider.
• Zvinhu zvekudonhedza zvino zvinoda .dropdown-item.
• Dropdown toggles haichada chakajeka <span class="caret"></span>; izvi zvino zvinopihwa otomatiki kuburikidza neCSS's ::afterpa .dropdown-toggle.

Grid system

• Yakawedzera 576pxgrid breakpoint nyowani se sm, zvichireva kuti pave nezvikamu zvishanu zvakazara ( xs, sm, md, lg, uye xl).
• Yakapa zita remakirasi egidhi anopindura kubva .col-{breakpoint}-{modifier}-{size}kune .{modifier}-{breakpoint}-{size}ari nyore makirasi egidhi.
• Yakadonhedza push uye dhonza modifier makirasi emakirasi matsva eflexbox-powered order. Semuenzaniso, pachinzvimbo chekuti .col-8.push-4uye .col-4.pull-8, iwe ungashandisa .col-8.order-2uye .col-4.order-1.
• Yakawedzera flexbox utility makirasi egridi system uye zvikamu.

Nyora mapoka

• Nyorazve chikamu neflexbox.
• Yakatsiviwa a.list-group-itemnekirasi yakajeka, .list-group-item-action, yemaitiro ekubatanidza uye mabhatani ezvinyorwa zveboka zvinhu.
• Yakawedzerwa .list-group-flushkirasi yekushandisa nemakadhi.

Modal

• Nyorazve chikamu neflexbox.
• Tichipihwa mafambiro kune flexbox, kurongeka kwezvidhori zvekudzinga mumusoro kungangotyoka sezvo isu tisisiri kushandisa zvinoyangarara. Zvemukati zvakayangarara zvinouya pekutanga, asi neflexbox hazvisisirizvo. Gadziridza zvidhori zvako zvekudzinga kuti zviuye mushure me modal mazita ekugadzirisa.
• Sarudzo remote(iyo yaigona kushandiswa kurongedza otomatiki uye jekiseni zvekunze zvemukati mune modal) uye loaded.bs.modalchiitiko chinoenderana chakabviswa. Isu tinokurudzira pachinzvimbo chekushandisa client-side templating kana data binding framework, kana kufonera jQuery.load iwe pachako.

Navs

• Nyorazve chikamu neflexbox.
• Yakadonhedza dzinenge dzese >sarudzo dzekuita nyore nyore kuburikidza nemakirasi asina-nested.
• Panzvimbo pevanosarudza HTML-chaiyo senge .nav > li > a, tinoshandisa makirasi akasiyana e .navs, .nav-items, uye .nav-links. Izvi zvinoita kuti HTML yako iwedzere kushanduka paunenge uchiunza kuwedzera kuwedzera.

Navbar

Iyo navbar yakanyorwa zvachose muflexbox nerutsigiro rwakavandudzwa rwekugadzirisa, kupindura, uye kugadzirisa.

• Inoteerera navbar maitiro ave kushandiswa .navbarkukirasi kuburikidza neinodiwa kwaunosarudza .navbar-expand-{breakpoint} kwaunoputsira navbar. Pakutanga uku kwaive kuchinjika kwakaderera uye kwaida kudzoreredza.
• .navbar-defaultikozvino .navbar-light, kunyange zvakadaro .navbar-dark. Imwe yeiyi inodiwa pane imwe neimwe navbar. Zvisinei, makirasi aya haachagadziri background-colors; asi zvinongobata chete color.
• Navbar ikozvino inoda kuziviswa kwekumashure kweimwe mhando. Sarudza kubva kune yedu yekumashure zvishandiso ( .bg-*) kana kuseta yako neyakajeka/yakapesana makirasi ari pamusoro pekuita mad customization .
• Zvichipihwa flexbox masitaera, navbars ikozvino inogona kushandisa flexbox zvishandiso kune nyore kurongeka sarudzo.
• .navbar-toggleikozvino .navbar-toggleruye ine masitaera akasiyana uye yemukati mamaki (hapana matatu <span>s).
• Ndakasiya .navbar-formkirasi zvachose. Hazvichadiwi; pachinzvimbo, ingoshandisa .form-inlineuye shandisa margin utilities sezvinodiwa.
• Navbars haichasanganisire margin-bottomkana border-radiusnekusingaperi. Shandisa zvishandiso sezvinodiwa.
• Yese mienzaniso ine navbar yakagadziridzwa kuti ibatanidze nyowani markup.

Pagination

• Nyorazve chikamu neflexbox.
• Makirasi akajeka ( .page-item, .page-link) ave kudiwa pavazukuru .paginationves
• Yakadonhedza .pagerchikamu zvachose sezvo chaive chishoma kudarika mabhatani erondedzero.

Zvimedu zvechingwa

• Kirasi yakajeka .breadcrumb-item,,,,,,,,,,,,,,,,,,,,,.breadcrumb

Mapepa nemabheji

• Yakapihwa zita .labelrekuti .badgekusanzwisisa kubva <label>muchinhu.
• Yakadonhedza .badgechikamu ichi sezvo chaive chakada kufanana nemalebula. Shandisa iyo .badge-pillmodifier pamwe chete neiyo label component pachinzvimbo chekutarisa kwakatenderedzwa.
• Mabheji haachafambiswa otomatiki mumapoka ezvinyorwa uye zvimwe zvikamu. Utility makirasi ikozvino anodiwa kune izvozvo.
• .badge-defaultyakadonhedzwa uye .badge-secondaryyawedzerwa kuenderana nechikamu chekugadzirisa makirasi anoshandiswa kumwewo.

Panel, thumbnails, uye matsime

Yakadonhedzwa zvachose kune chikamu chitsva chekadhi.

Panels

• .panelku .card, ikozvino yakavakwa ne flexbox.
• .panel-defaultkubviswa uye hapana chinotsiva.
• .panel-groupkubviswa uye hapana chinotsiva. .card-grouphaisi yokutsiva, yakasiyana.
• .panel-headingku.card-header
• .panel-titleku .card-title. Zvichienderana nechitarisiko chaunoda, iwe unogona zvakare kuda kushandisa zvinyorwa zvemusoro kana makirasi (eg <h3>, .h3) kana ma bold elements kana makirasi (eg <strong>, <b>, .font-weight-bold). Ziva kuti .card-title, kunyangwe yakatumidzwa zvakafanana, inogadzira chitarisiko chakasiyana pane .panel-title.
• .panel-bodyku.card-body
• .panel-footerku.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, uye .panel-dangerzvakadonhedzwa zve .bg-, .text-, uye .borderzvishandiso zvinogadzirwa kubva $theme-colorskuSass mepu yedu.

Kufambira mberi

• Akatsiviwa .progress-bar-*makirasi emamiriro ezvinhu nekushandisa .bg-*. Somuenzaniso, class="progress-bar progress-bar-danger"inova class="progress-bar bg-danger".
• Yakatsiviwa nemabhawa .activeekufambira mberi ane .progress-bar-animated.

Carousel

• Yakakwenenzvera chikamu chose kuti chirerutsa dhizaini uye masitaera. Isu tine mashoma masitaera ekuti iwe uwedzere, zviratidzo zvitsva, uye zvidhori zvitsva.
• Yese CSS haina-nested uye kupihwa zita, kuve nechokwadi chekuti kirasi yega yega yakamisikidzwa ne .carousel-.
  • Zvecarousel zvinhu, .next, .prev, .left, uye .rightikozvino .carousel-item-next, .carousel-item-prev, .carousel-item-left, uye .carousel-item-right.
  • .itemzvakare ikozvino .carousel-item.
  • Zveprev/zvinotevera zvidzoreso, .carousel-control.rightuye .carousel-control.leftzvava zvino .carousel-control-nextuye .carousel-control-prev, zvichireva kuti havachada imwe base base class.
• Yakabvisa masitaera ese anoteerera, achimiririra kune zvinoshandiswa (semuenzaniso, kuratidza zvinyorwa pane mamwe maratidziro) uye masitaira echivanhu sezvinodiwa.
• Yakabviswa mifananidzo inodarika yemifananidzo iri mu carousel zvinhu, ichidzoreredzwa kune zvishandiso.
• Tweaked muenzaniso weCarousel kuti ubatanidze iyo nyowani markup uye masitaera.

Matafura

• Yakabviswa rutsigiro rwematayera nested table. Ese masitayera etafura ave kugarwa nhaka muv4 kune vakareruka vanosarudza.
• Yakawedzerwa inverse tafura musiyano.

Utilities

• Ratidza, zvakavanzika, nezvimwe:
  • Yakagadzirwa kuratidza zvishandiso zvinoteerera (semuenzaniso, .d-noneuye d-{sm,md,lg,xl}-none).
  • Yakadonhedza huwandu .hidden-*hwezvishandiso zvezvishandiso zvitsva zvekuratidzira . Somuenzaniso, pane .hidden-sm-up, shandisa .d-sm-none. Akatumidza zita .hidden-printrekushandisa kushandisa ratidziro yekushandisa zita chirongwa. Ruzivo rwakawanda pasi peChikamu chinopindura chezvishandiso chepeji rino.
  • Akawedzera .float-{sm,md,lg,xl}-{left,right,none}makirasi eanopindura anoyangarara uye akabviswa .pull-leftuye .pull-rightsezvo asingachashandi .float-leftuye .float-right.
• Type:
  • Yakawedzera mhinduro dzakasiyana kumakirasi edu ekugadzirisa zvinyorwa .text-{sm,md,lg,xl}-{left,center,right}.
• Kurongeka uye nzvimbo:
  • Yakawedzera mitsva inopindura margin uye padding zvishandiso zvemativi ese, pamwe neakatwasuka uye akachinjika shorthands.
  • Yakawedzera chikepe cheflexbox utilities .
  • Akadonhedzwa kukirasi .center-blockitsva ..mx-auto
• Clearfix yakagadziridzwa kudonhedza rutsigiro kune ekare browser shanduro.

Vendor prefix mixins

Bootstrap 3's mutengesi prefix mixins, iyo yakaderedzwa muv3.2.0, yakabviswa muBootstrap 4. Sezvo isu tichishandisa Autoprefixer , ivo havachadiwi.

Yakabvisa misanganiswa inotevera : animation,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Zvinyorwa

Mapepa edu akagamuchira kuvandudzwa mukati mebhodhi zvakare. Heino yakaderera pasi:

• Tichiri kushandisa Jekyll, asi isu tine mapulagi mumusanganiswa:
  • bugify.rbinoshandiswa kunyatso kunyora zvinyorwa pane yedu browser bugs peji.
  • example.rbiforogo yetsika yeiyo default highlight.rbplugin, ichibvumira kuti ive nyore muenzaniso-kodhi kubata.
  • callout.rbiforogo yakafanana yetsika iyoyo, asi yakagadzirirwa edu akakosha madocs callouts.
  • markdown-block.rbinoshandiswa kupa Markdown snippets mukati meHTML zvinhu sematafura.
  • jekyll-toc inoshandiswa kugadzira tafura yedu yezviri mukati.
• Zvese zvinyorwa zvemukati zvakanyorwa patsva muMarkdown (panzvimbo yeHTML) kuti zvive nyore kugadzirisa.
• Mapeji akarongwa patsva kuitira zviri nyore zvemukati uye hutungamiriri hunotaurika.
• Isu takatama kubva kuCSS yakajairwa kuenda kuSCSS kutora mukana wakazara weBootstrap's variables, musanganiswa, nezvimwe.

Zvinoteerera zvinoshandiswa

Zvose @screen-zvakasiyana-siyana zvakabviswa mu v4.0.0. Shandisa iyo media-breakpoint-up(), media-breakpoint-down(), kana media-breakpoint-only()Sass musanganiswa kana $grid-breakpointsmepu yeSass panzvimbo.

Makirasi edu anopindura ekushandisa akabviswa zvakanyanya nekuda kwekushandisa zvakajeka display.

• Iwo .hiddenuye .showmakirasi akabviswa nekuti aipesana nejQuery's $(...).hide()uye $(...).show()nzira. Pane kudaro, edza kushandura [hidden]hunhu kana kushandisa inline masitaera se style="display: none;"uye style="display: block;".
• Makirasi ese .hidden-abviswa, kunze kwezvishandiso zvekudhinda zvakapihwa zita.
  • Yakabviswa pav3:.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
  • Yakabviswa kubva kuv4 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
• Dhinda zvinoshandiswa hazvichatangi ne .hidden-kana .visible-, asi ne .d-print-.
  • Mazita ekare : .visible-print-block,,,,.visible-print-inline.visible-print-inline-block.hidden-print
  • Zvidzidzo zvitsva .d-print-block: .d-print-inline,,,,.d-print-inline-block.d-print-none

Panzvimbo pekushandisa .visible-*makirasi akajeka, unoita kuti chinhu chionekwe nekungorega kuchivanza pahukuru hwescreen. Iwe unogona kusanganisa .d-*-nonekirasi imwe .d-*-blocknekirasi imwe chete kuratidza chinhu pane yakapihwa nguva yesaizi yechidzitiro (semuenzaniso .d-none.d-md-block.d-xl-noneinoratidza chinhu pamidziyo yepakati uye yakakura).

Ziva kuti shanduko kune grid breakpoints muv4 zvinoreva kuti iwe uchafanirwa kuenda imwe breakpoint yakakura kuti uwane mibairo mimwechete. Iwo makirasi matsva anopindura ekushandisa haaedze kugashira zviitiko zvisinganyanyi kunyanyozivikanwa apo kuoneka kwechinhu hakugone kuratidzwa sechinhu chimwe chete chinobatika chehukuru hwenzvimbo yekuona; iwe uchazoda kushandisa tsika CSS mumamiriro ezvinhu akadaro.