Migrimi në v4

Bootstrap 4 është një rishkrim i madh i të gjithë projektit. Ndryshimet më të dukshme janë përmbledhur më poshtë, të ndjekura nga ndryshime më specifike në komponentët përkatës.

Ndryshime të qëndrueshme

Duke kaluar nga Beta 3 në versionin tonë të qëndrueshëm v4.0, nuk ka ndryshime të thyera, por ka disa ndryshime të dukshme.

Shtypje

• Rregulloi shërbimet e printimit të prishur. Më parë, përdorimi i një .d-print-*klase do të anulonte papritur çdo .d-*klasë tjetër. Tani, ato përputhen me shërbimet tona të tjera të ekranit dhe zbatohen vetëm për atë media ( @media print).

• Zgjeroi shërbimet e disponueshme të ekranit të printimit për t'iu përshtatur shërbimeve të tjera. Beta 3 dhe më të vjetër kishte vetëm block, inline-block, inline, dhe none. V4 i qëndrueshëm u shtua flex, inline-flex, table, table-rowdhe table-cell.

• Rregulloi paraqitjen e pamjes paraprake të printimit nëpër shfletues me stile të reja printimi që specifikojnë @page size.

Ndryshimet Beta 3

Ndërsa Beta 2 pa pjesën më të madhe të ndryshimeve tona kryesore gjatë fazës beta, por ne ende kemi disa që duheshin adresuar në versionin Beta 3. Këto ndryshime zbatohen nëse po përditësoni në Beta 3 nga Beta 2 ose ndonjë version më i vjetër i Bootstrap.

Të ndryshme

• $thumbnail-transitionU hoq ndryshorja e papërdorur . Ne nuk po kalonim asgjë, kështu që ishte thjesht kod shtesë.
• Paketa npm nuk përfshin më skedarë përveç skedarëve tanë burimor dhe dist; nëse jeni mbështetur në to dhe po ekzekutoni skriptet tona përmes node_modulesdosjes, duhet të përshtatni rrjedhën tuaj të punës.

Format

• Rishkruan kutitë e kontrollit të personalizuar dhe të paracaktuar dhe radiot. Tani, të dyja kanë strukturë të përputhshme HTML (e jashtme <div>me vëllanë ose vëllanë <input>dhe <label>) dhe të njëjtat stile paraqitjeje (parazgjedhje e grumbulluar, në linjë me klasën e modifikuesit). Kjo na lejon të stilojmë etiketën bazuar në gjendjen e hyrjes, duke thjeshtuar mbështetjen për disabledatributin (që më parë kërkonte një klasë prind) dhe duke mbështetur më mirë vërtetimin e formularit tonë.

  Si pjesë e kësaj, ne kemi ndryshuar CSS për menaxhimin e shumëfishta background-imagenë kutitë e kontrollit të formularit të personalizuar dhe radiot. Më parë, elementi i hequr tani .custom-control-indicatorkishte ngjyrën e sfondit, gradientin dhe ikonën SVG. Përshtatja e gradientit të sfondit nënkuptonte zëvendësimin e të gjithë atyre sa herë që duhej të ndryshonit vetëm një. Tani, ne kemi .custom-control-label::beforepër mbushjen dhe gradientin dhe .custom-control-label::aftertrajton ikonën.

  Për të bërë një kontroll të personalizuar në linjë, shtoni .custom-control-inline.

• Zgjedhësi i përditësuar për grupet e butonave të bazuar në hyrje. Në vend të [data-toggle="buttons"] { }stilit dhe sjelljes, ne përdorim dataatributin vetëm për sjelljet JS dhe mbështetemi në një .btn-group-toggleklasë të re për stilimin.

• U hoq .col-form-legendnë favor të një përmirësimi pak .col-form-label. Në këtë mënyrë .col-form-label-smdhe .col-form-label-lgmund të përdoret në <legend>elemente me lehtësi.

• Hyrjet e skedarëve të personalizuar morën një ndryshim në $custom-file-textvariablin e tyre Sass. Nuk është më një hartë e mbivendosur Sass dhe tani fuqizon vetëm një varg - Browsebutoni pasi ai tani është i vetmi pseudoelement i krijuar nga Sass-i ynë. Teksti Choose filetani vjen nga .custom-file-label.

Grupet hyrëse

• Shtesat e grupit të hyrjes tani janë specifike për vendosjen e tyre në lidhje me një hyrje. Ne kemi lënë .input-group-addondhe .input-group-btnpër dy klasa të reja, .input-group-prependdhe .input-group-append. Ju duhet të përdorni në mënyrë eksplicite një shtojcë ose një prepend tani, duke thjeshtuar pjesën më të madhe të CSS-së tonë. Brenda një shtojce ose prependi, vendosni butonat tuaj siç do të ekzistonin diku tjetër, por mbështillni tekstin në .input-group-text.

• Stilet e vlefshmërisë tani mbështeten, siç janë të dhëna të shumta (megjithëse mund të vërtetoni vetëm një hyrje për grup).

• Klasat e përmasave duhet të jenë në .input-groupelementet e formës mëmë dhe jo individuale.

Ndryshimet Beta 2

Ndërsa në beta, ne synojmë të mos kemi ndryshime të thyera. Megjithatë, gjërat nuk shkojnë gjithmonë siç është planifikuar. Më poshtë janë ndryshimet kryesore që duhen mbajtur parasysh kur lëvizni nga Beta 1 në Beta 2.

Thyerje

• U hoq $badge-colorndryshorja dhe përdorimi i saj në .badge. Ne përdorim një funksion kontrasti ngjyrash për të zgjedhur një colorbazuar në background-color, kështu që ndryshorja është e panevojshme.
• grayscale()Funksioni u riemërua në gray()për të shmangur prishjen e konfliktit me grayscalefiltrin vendas CSS.
• Riemërtuar .table-inverse, .thead-inverse, dhe .thead-defaultnë .*-darkdhe .*-light, duke u përshtatur me skemat tona të ngjyrave të përdorura diku tjetër.
• Tabelat e përgjegjshme tani gjenerojnë klasa për çdo pikë ndërprerjeje të rrjetit. Kjo shkëputet nga Beta 1 në atë që .table-responsiveju keni përdorur është më shumë si .table-responsive-md. Tani mund të përdorni .table-responsiveose .table-responsive-{sm,md,lg,xl}sipas nevojës.
• Mbështetja e Bower u hoq pasi menaxheri i paketave është zhvlerësuar për alternativa (p.sh., Yarn ose npm). Shih bower/bower#2298 për detaje.
• Bootstrap kërkon ende jQuery 1.9.1 ose më të lartë, por ju këshillojmë të përdorni versionin 3.x pasi shfletuesit e mbështetur të v3.x janë ata që mbështet Bootstrap plus v3.x ka disa rregullime sigurie.
• .form-control-labelU hoq klasa e papërdorur . Nëse e keni përdorur këtë klasë, ajo ishte dublikatë e .col-form-labelklasës që përqendronte vertikalisht a <label>-në me hyrjen e lidhur me të në paraqitjet e formës horizontale.
• Ndryshoi color-yiqnga një mixin që përfshin veçorinë colornë një funksion që kthen një vlerë, duke ju lejuar ta përdorni atë për çdo pronë CSS. Për shembull, në vend të color-yiq(#000), ju do të shkruani color: color-yiq(#000);.

Pikat kryesore

• Prezantoi pointer-eventspërdorim të ri në modalet. Pjesa e jashtme .modal-dialogkalon nëpër ngjarje me pointer-events: nonepërpunimin e klikimeve të personalizuara (duke bërë të mundur që thjesht të dëgjohet .modal-backdroppër çdo klikim), dhe më pas e kundërvepron atë për atë aktuale .modal-contentme pointer-events: auto.

Përmbledhje

Këtu janë artikujt e mëdhenj të biletave që do të dëshironi të keni parasysh kur kaloni nga v3 në v4.

Mbështetja e shfletuesit

• U hoq mbështetja për IE8, IE9 dhe iOS 6. V4 tani është vetëm IE10+ dhe iOS 7+. Për faqet që kanë nevojë për njërën prej tyre, përdorni v3.
• U shtua mbështetje zyrtare për shfletuesin dhe WebView të Android v5.0 Lollipop. Versionet e mëparshme të shfletuesit Android dhe WebView mbeten të mbështetura jozyrtarisht.

Ndryshimet globale

• Flexbox është aktivizuar si parazgjedhje. Në përgjithësi, kjo do të thotë një largim nga floats dhe më shumë nëpër komponentët tanë.
• Kaloi nga Less në Sass për skedarët tanë burim CSS.
• Kaloi nga pxnë remsi njësia jonë kryesore CSS, megjithëse pikselët përdoren ende për pyetjet e medias dhe sjelljen e rrjetit pasi portat e pamjes së pajisjes nuk ndikohen nga madhësia e llojit.
• Madhësia globale e shkronjave u rrit nga 14pxnë 16px.
• Rinovoi nivelet e rrjetit për të shtuar një opsion të pestë (duke adresuar pajisjet më të vogla në 576pxdhe poshtë) dhe hoqi -xsinfiksin nga ato klasa. Shembull: .col-6.col-sm-4.col-md-3.
• Zëvendësoi temën e veçantë opsionale me opsione të konfigurueshme nëpërmjet variablave SCSS (p.sh., $enable-gradients: true).
• Ndërtimi i sistemit është riparuar për të përdorur një seri skriptesh npm në vend të Grunt. Shihni package.jsonpër të gjitha skriptet, ose projektin tonë readme për nevojat e zhvillimit lokal.
• Përdorimi jo reagues i Bootstrap nuk mbështetet më.
• Ka hequr dorë nga Customizer online në favor të dokumentacionit më të gjerë të konfigurimit dhe ndërtimeve të personalizuara.
• U shtuan dhjetëra klasa të reja të shërbimeve për çiftet e zakonshme të vlerës së pronës CSS dhe shkurtoret e ndarjes margjinale/mbushëse.

Sistemi i rrjetit

• U zhvendos në flexbox.
  • Mbështetje e shtuar për flexbox në përzierjet e rrjetit dhe klasat e paracaktuara.
  • Si pjesë e flexbox, përfshin mbështetje për klasat e shtrirjes vertikale dhe horizontale.
• Emrat e klasave të rrjetit të përditësuar dhe një nivel i ri i rrjetit.
  • Shtuar një smnivel të ri të rrjetit më poshtë 768pxpër kontroll më të grimcuar. Tani kemi xs, sm, md, lgdhe xl. Kjo do të thotë gjithashtu se çdo nivel është ngritur në një nivel (kështu që .col-md-6në v3 tani është .col-lg-6në v4).
  • xsKlasat e rrjetit janë modifikuar për të mos kërkuar që infiksi të përfaqësojë më saktë se ato fillojnë të aplikojnë stile në min-width: 0dhe jo një vlerë të caktuar pixel. Në vend të .col-xs-6, është tani .col-6. Të gjitha nivelet e tjera të rrjetit kërkojnë infiksin (p.sh., sm).
• Përditësuar madhësitë e rrjetit, përzierjet dhe variablat.
  • Ulluqet e rrjetës tani kanë një hartë Sass, në mënyrë që të mund të specifikoni gjerësi specifike të ulluqeve në çdo pikë ndërprerjeje.
  • Përzierjet e rrjetit të përditësuar për të përdorur një përzierje make-col-readypërgatitore dhe a make-colpër të vendosur madhësinë e kolonës flexdhe për madhësinë individuale.max-width
  • Ndryshoi pikat e ndërprerjes së pyetjeve të mediave të sistemit të rrjetit dhe gjerësinë e kontejnerëve për të llogaritur nivelin e ri të rrjetit dhe për të siguruar që kolonat të jenë të ndara në mënyrë të barabartë me 12gjerësinë e tyre maksimale.
  • Pikat e ndërprerjes së rrjetit dhe gjerësia e kontejnerëve tani trajtohen nëpërmjet hartave Sass ( $grid-breakpointsdhe $container-max-widths) në vend të një numri të vogël variablash të veçantë. Këto zëvendësojnë @screen-*plotësisht variablat dhe ju lejojnë të personalizoni plotësisht nivelet e rrjetit.
  • Pyetjet në media kanë ndryshuar gjithashtu. Në vend që të përsërisim deklaratat tona të pyetjeve në media me të njëjtën vlerë çdo herë, tani kemi @include media-breakpoint-up/down/only. Tani, në vend që të shkruani @media (min-width: @screen-sm-min) { ... }, mund të shkruani @include media-breakpoint-up(sm) { ... }.

Komponentët

• Panelet, miniaturat dhe puset e hedhura për një komponent të ri gjithëpërfshirës, ​​kartat .
• U hoq fonti i ikonës Glyphicons. Nëse keni nevojë për ikona, disa opsione janë:
  • versioni në rrjedhën e sipërme të Glyphicons
  • Oktikonet
  • Fonti i mrekullueshëm
  • Shikoni faqen Zgjero për një listë alternativash. Keni sugjerime shtesë? Ju lutemi hapni një çështje ose PR.
• U hoq shtojca Affix jQuery.
  • Ne rekomandojmë përdorimin position: stickynë vend të tyre. Shikoni hyrjen HTML5 Ju lutemi për detaje dhe rekomandime specifike të polifillimit. Një sugjerim është përdorimi i një @supportsrregulli për zbatimin e tij (p.sh., @supports (position: sticky) { ... })/
  • Nëse po përdorni Affix për të aplikuar stile shtesë, jo- positionstile, polifillet mund të mos mbështesin rastin tuaj të përdorimit. Një opsion për përdorime të tilla është biblioteka e palës së tretë ScrollPos-Styler .
• U hoq komponenti pager pasi në thelb ishin butona paksa të personalizuar.
• Rifaktoroi pothuajse të gjithë komponentët për të përdorur më shumë përzgjedhës të klasave të pavendosura në vend të përzgjedhësve tepër specifikë për fëmijë.

Sipas komponentit

Kjo listë thekson ndryshimet kryesore sipas komponentëve midis v3.xx dhe v4.0.0.

Rindizni

E re për Bootstrap 4 është Reboot , një fletë stili e re që bazohet në Normalize me stilet tona të rivendosjes disi të mendimit. Përzgjedhësit që shfaqen në këtë skedar përdorin vetëm elementë - këtu nuk ka klasa. Kjo izolon stilet tona të rivendosjes nga stilet tona përbërëse për një qasje më modulare. Disa nga rivendosjet më të rëndësishme që përfshin ky janë box-sizing: border-boxndryshimi, kalimi nga emnë remnjësi në shumë elementë, stilet e lidhjeve dhe shumë rivendosje të elementeve të formës.

Tipografia

• Zhvendosën të gjitha .text-shërbimet në _utilities.scssskedar.
• U hoq .page-headerpasi stilet e tij mund të aplikohen nëpërmjet shërbimeve.
• .dl-horizontalështë rrëzuar. .rowNë vend të kësaj, përdorni <dl>dhe përdorni klasat e kolonave të rrjetit (ose miksat) në saj <dt>dhe <dd>fëmijët.
• Blloqe të ridizajnuara, duke lëvizur stilet e tyre nga <blockquote>elementi në një klasë të vetme, .blockquote. U hoq .blockquote-reversemodifikuesi për shërbimet e tekstit.
• .list-inlinetani kërkon që artikujt e listës së fëmijëve të tij të kenë .list-inline-itemklasën e re të aplikuar për ta.

Imazhet

• Riemërtuar .img-responsivenë .img-fluid.
• Riemërtuar .img-roundednë.rounded
• Riemërtuar .img-circlenë.rounded-circle

Tabelat

• Pothuajse të gjitha rastet e >përzgjedhësit janë hequr, që do të thotë se tabelat e mbivendosura tani do të trashëgojnë automatikisht stilet nga prindërit e tyre. Kjo thjeshton shumë përzgjedhësit tanë dhe personalizimet e mundshme.
• Riemëruar .table-condensednë .table-smpër qëndrueshmëri.
• U shtua një .table-inverseopsion i ri.
• U shtuan modifikuesit e kokës së tabelës: .thead-defaultdhe .thead-inverse.
• Klasat kontekstuale u riemëruan për të pasur një .table-parashtesë -. Prandaj .active, .success, .warning, .dangerdhe .infopër .table-active, .table-success, .table-warning, .table-dangerdhe .table-info.

Format

• Elementi i zhvendosur rivendoset në _reboot.scssskedar.
• Riemërtuar .control-labelnë .col-form-label.
• Riemëruar .input-lgdhe .input-smpër .form-control-lgdhe .form-control-sm, respektivisht.
• I hoqi .form-group-*orët mësimore për hir të thjeshtësisë. Përdorni .form-control-*klasat në vend të kësaj tani.
• U hoq .help-blockdhe u zëvendësua me .form-texttekstin e ndihmës në nivel blloku. Për tekstin e ndihmës në linjë dhe opsione të tjera fleksibël, përdorni klasat e shërbimeve si .text-muted.
• U rrëzua .radio-inlinedhe .checkbox-inline.
• Të konsoliduara .checkboxdhe .radionë klasa .form-checktë ndryshme ..form-check-*
• Format horizontale të rishikuara:
  • U hoq nga .form-horizontalkërkesa e klasës.
  • .form-groupnuk aplikon më stile nga .rowvia mixin, kështu .rowqë tani kërkohet për paraqitjet horizontale të rrjetës (p.sh., <div class="form-group row">).
  • U shtua një .col-form-labelklasë e re në etiketat në qendër vertikalisht me .form-controls.
  • U shtua e re .form-rowpër paraqitjet kompakte të formave me klasat e rrjetit (ndërroni .rowme një .form-rowdhe shkoni).
• Mbështetje e shtuar e formularëve të personalizuar (për kutitë e kontrollit, radiot, përzgjedhjet dhe hyrjet e skedarëve).
• Zëvendësuar .has-error, .has-warning, dhe .has-successklasa me vërtetimin e formularit HTML5 nëpërmjet CSS :invaliddhe :validpseudo-klasave.
• Riemërtuar .form-control-staticnë .form-control-plaintext.

Butonat

• Riemërtuar .btn-defaultnë .btn-secondary.
• E hoqi .btn-xsplotësisht klasën pasi .btn-smështë proporcionalisht shumë më e vogël se ajo e v3.
• Funksioni i butonit të gjendjes së button.jsshtojcës jQuery është hequr. Kjo përfshin $().button(string)dhe $().button('reset')metodat. Ne ju këshillojmë të përdorni një pjesë të vogël JavaScript të personalizuar në vend të kësaj, e cila do të ketë përfitimin e sjelljes pikërisht ashtu siç dëshironi.
  • Vini re se veçoritë e tjera të shtojcës (kutitë e kontrollit të butonave, radiot e butonave, butonat me një ndryshim) janë ruajtur në v4.
• Ndrysho butonat [disabled]në :disabledsiç mbështet IE9+ :disabled. Megjithatë fieldset[disabled], është ende e nevojshme sepse grupet e fushave me aftësi të kufizuara vendase janë ende me probleme në IE11 .

Grupi i butonave

• Rishkrua komponentin me flexbox.
• U hoq .btn-group-justified. Si zëvendësim mund të përdorni <div class="btn-group d-flex" role="group"></div>si mbështjellës rreth elementeve me .w-100.
• U hoq nga .btn-group-xsklasa tërësisht duke pasur parasysh heqjen e .btn-xs.
• U hoq hapësirat e qarta midis grupeve të butonave në shiritat e veglave të butonave; përdorni shërbimet e marzhit tani.
• Dokumentacion i përmirësuar për përdorim me komponentë të tjerë.

Dropdowns

• Kaloi nga përzgjedhësit prindër në klasat singulare për të gjithë komponentët, modifikuesit, etj.
• Stilet e thjeshtuara me zbritje për të mos transportuar më me shigjeta me drejtim lart ose poshtë të bashkangjitur në menynë rënëse.
• Dropdowns mund të ndërtohen me <div>s ose <ul>s tani.
• Stilet dhe shënimi i rindërtuar me zbritje për të ofruar mbështetje të thjeshtë dhe të integruar për artikujt me listë të bazuar <a>dhe të <button>bazuar.
• Riemërtuar .dividernë .dropdown-divider.
• Artikujt në dropdown tani kërkojnë .dropdown-item.
• Ndryshimet në dropdown nuk kërkojnë më një të qartë <span class="caret"></span>; kjo tani ofrohet automatikisht nëpërmjet CSS-ve ::afternë .dropdown-toggle.

Sistemi i rrjetit

• U shtua një pikë e re 576pxe ndarjes së rrjetit si sm, që do të thotë se tani ka pesë nivele gjithsej ( xs, sm, md, lg, dhe xl).
• Riemërtoi klasat e modifikuesve të rrjetit të përgjegjshëm nga .col-{breakpoint}-{modifier}-{size}në .{modifier}-{breakpoint}-{size}për klasa më të thjeshta të rrjetit.
• U hodhën klasat e modifikuesve të shtytjes dhe tërheqjes për klasat e reja me fuqi flexbox order. Për shembull, në vend të .col-8.push-4dhe .col-4.pull-8, do të përdorni .col-8.order-2dhe .col-4.order-1.
• U shtuan klasat e shërbimeve flexbox për sistemin dhe komponentët e rrjetit.

Listoni grupet

• Rishkrua komponentin me flexbox.
• Zëvendësuar a.list-group-itemme një klasë eksplicite, .list-group-item-action, për versionet e stilimit të lidhjeve dhe butonave të artikujve të grupit të listës.
• Klasa e shtuar .list-group-flushpër përdorim me karta.

Modal

• Rishkrua komponentin me flexbox.
• Duke pasur parasysh lëvizjen në flexbox, rreshtimi i ikonave të heqjes dorë në kokë ka të ngjarë të prishet pasi nuk po përdorim më float. Përmbajtja e lundruar vjen e para, por me flexbox nuk është më kështu. Përditësoni ikonat tuaja të heqjes që do të vijnë pas titujve modalë për t'u rregulluar.
• Opsioni remote(i cili mund të përdoret për të ngarkuar dhe injektuar automatikisht përmbajtje të jashtme në një modal) dhe loaded.bs.modalngjarja përkatëse u hoqën. Në vend të kësaj, ne rekomandojmë përdorimin e shabllonit nga ana e klientit ose një kornizë të lidhjes së të dhënave ose të telefononi vetë jQuery.load .

Navs

• Rishkrua komponentin me flexbox.
• U hodhën pothuajse të gjithë >përzgjedhësit për stilim më të thjeshtë nëpërmjet klasave të pavendosura.
• Në vend të përzgjedhësve specifikë HTML si .nav > li > a, ne përdorim klasa të veçanta për .navs, .nav-items dhe .nav-links. Kjo e bën HTML-në tuaj më fleksibël, ndërkohë që sjell zgjerim të shtuar.

Navbar

Shiriti navigues është rishkruar tërësisht në flexbox me mbështetje të përmirësuar për shtrirjen, reagimin dhe personalizimin.

• Sjelljet e përgjegjshme të shiritit të navigimit tani aplikohen në .navbarklasë nëpërmjet të kërkuarit .navbar-expand-{breakpoint} , ku ju zgjidhni se ku të mbuloni shiritin e navigimit. Më parë ky ishte një modifikim i më pak ndryshore dhe kërkonte ripërpilim.
• .navbar-defaultështë tani .navbar-light, megjithëse .navbar-darkmbetet i njëjtë. Një nga këto kërkohet në çdo shirit navigimi. Megjithatë, këto klasa nuk vendosin më background-colors; në vend të kësaj ato në thelb vetëm ndikojnë color.
• Shiritat e navigimit tani kërkojnë një lloj deklarate të sfondit. Zgjidhni nga shërbimet tona të sfondit ( .bg-*) ose caktoni tuajin me klasat e lehta/të kundërta të mësipërme për personalizim të çmendur .
• Duke pasur parasysh stilet flexbox, shiritat e navigimit tani mund të përdorin shërbimet e flexbox për opsione të thjeshta të shtrirjes.
• .navbar-toggleështë tani .navbar-togglerdhe ka stile të ndryshme dhe shënim të brendshëm (jo më shumë tre <span>s).
• E hoqi .navbar-formfare klase. Nuk është më e nevojshme; në vend të kësaj, thjesht përdorni .form-inlinedhe aplikoni shërbimet e marzhit sipas nevojës.
• Shiritat e navigimit nuk përfshijnë më margin-bottomose border-radiussi parazgjedhje. Përdorni shërbimet komunale sipas nevojës.
• Të gjithë shembujt që paraqesin shirita navigimi janë përditësuar për të përfshirë shënimin e ri.

Faqezim

• Rishkrua komponentin me flexbox.
• Klasat eksplicite ( .page-item, .page-link) tani kërkohen për pasardhësit e .paginations
• Komponenti u hoq .pagertërësisht pasi ishte pak më shumë se butonat e konturit të personalizuar.

Therrime buke

• .breadcrumb-itemTani kërkohet një klasë eksplicite, , për pasardhësit e .breadcrumbs

Etiketat dhe distinktivët

• Konsoliduar .labeldhe .badgepër të zbërthyer nga <label>elementi dhe për të thjeshtuar komponentët e lidhur.
• Shtuar .badge-pillsi modifikues për pamjen e rrumbullakosur të "pilulës".
• Distinktivët nuk qarkullojnë më automatikisht në grupet e listave dhe komponentët e tjerë. Tani kërkohen klasa të shërbimeve për këtë.
• .badge-defaultështë hequr dhe është .badge-secondaryshtuar për të përputhur klasat e modifikuesve të komponentëve të përdorura diku tjetër.

Panele, miniaturë dhe puse

U hoq tërësisht për komponentin e ri të kartës.

Panele

• .panelnë .card, tani e ndërtuar me flexbox.
• .panel-defaulthequr dhe pa zëvendësim.
• .panel-grouphequr dhe pa zëvendësim. .card-groupnuk eshte zevendesim, eshte ndryshe.
• .panel-headingte.card-header
• .panel-titlete .card-title. Në varësi të pamjes së dëshiruar, mund të dëshironi të përdorni edhe elementë ose klasa të titullit (p.sh. <h3>, .h3) ose elementë ose klasa të theksuara (p.sh. <strong>, <b>, .font-weight-bold). Vini re se .card-title, ndërsa emërtohet në mënyrë të ngjashme, prodhon një pamje të ndryshme nga .panel-title.
• .panel-bodyte.card-body
• .panel-footerte.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, dhe .panel-dangerjanë hequr për .bg-, .text-, dhe .bordershërbimet e krijuara nga $theme-colorsharta jonë Sass.

Përparim

• .progress-bar-*Klasat kontekstuale u zëvendësuan me .bg-*shërbime. Për shembull, class="progress-bar progress-bar-danger"bëhet class="progress-bar bg-danger".
• Zëvendësohet .activepër shiritat e progresit të animuar me .progress-bar-animated.

Karuseli

• Riparoi të gjithë komponentin për të thjeshtuar dizajnin dhe stilin. Ne kemi më pak stile për të anashkaluar, tregues të rinj dhe ikona të reja.
• E gjithë CSS është un-vendosur dhe riemërtuar, duke siguruar që secila klasë të jetë e prefiksuar me .carousel-.
  • Për artikujt karusel, .next, .prev, .left, dhe .rightjanë tani .carousel-item-next, .carousel-item-prev, .carousel-item-left, dhe .carousel-item-right.
  • .itemështë gjithashtu tani .carousel-item.
  • Për kontrollet e mëparshme/të ardhshme, .carousel-control.rightdhe .carousel-control.leftjanë tani .carousel-control-nextdhe .carousel-control-prev, që do të thotë se nuk kërkojnë më një klasë bazë specifike.
• U hoqën të gjitha stilet reaguese, duke iu shtyrë programeve (p.sh. shfaqja e titrave në porta të caktuara të shikimit) dhe stilet e personalizuara sipas nevojës.
• Shfuqizimi i imazhit të hequr për imazhet në artikujt e karuselit, duke u shtyrë te shërbimet.
• Përshtati shembullin Carousel për të përfshirë shënimin dhe stilet e reja.

Tabelat

• U hoq mbështetja për tabelat e vendosura me stil. Të gjitha stilet e tabelave tani janë trashëguar në v4 për përzgjedhës më të thjeshtë.
• Varianti i tabelës së kundërt u shtua.

Shërbimet komunale

• Shfaq, të fshehura dhe më shumë:
  • Shërbimet e ekranit i bënë të përgjegjshme (p.sh. .d-nonedhe d-{sm,md,lg,xl}-none).
  • U hoqi pjesa më e madhe e .hidden-*shërbimeve për shërbimet e reja të ekranit . Për shembull, në vend të .hidden-sm-up, përdorni .d-sm-none. U riemërtoi .hidden-printshërbimet për të përdorur skemën e emërtimit të programit të ekranit. Më shumë informacion nën seksionin e shërbimeve të përgjegjshme të kësaj faqeje.
  • Klasa të shtuara .float-{sm,md,lg,xl}-{left,right,none}për notat reaguese dhe të hequra .pull-leftdhe .pull-rightmeqenëse ato janë të tepërta për .float-leftdhe .float-right.
• Lloji:
  • Shtuar variacione të përgjegjshme në klasat tona të shtrirjes së tekstit .text-{sm,md,lg,xl}-{left,center,right}.
• Shtrirja dhe hapësira:
  • U shtuan programe të reja reaguese për margjina dhe mbushje për të gjitha anët, plus stenografi vertikale dhe horizontale.
  • U shtua ngarkesa me varkë e shërbimeve të flexbox .
  • U largua .center-blockpër .mx-autoklasën e re.
• Clearfix u përditësua për të hequr mbështetjen për versionet më të vjetra të shfletuesit.

Përzierjet e prefiksit të shitësit

Përzierjet e prefiksave të shitësit të Bootstrap 3 , të cilat u zhvlerësuan në v3.2.0, janë hequr në Bootstrap 4. Meqenëse përdorim Autoprefixer , ato nuk janë më të nevojshme.

U hoqën përzierjet e mëposhtme : 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_ _ _ _ _scaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dokumentacioni

Dokumentacioni ynë mori një përmirësim në të gjithë bordin gjithashtu. Këtu është niveli i ulët:

• Ne jemi ende duke përdorur Jekyll, por kemi shtojca në përzierje:
  • bugify.rbpërdoret për të renditur në mënyrë efikase hyrjet në faqen tonë të gabimeve të shfletuesit .
  • example.rbështë një fork i personalizuar i highlight.rbshtojcës së paracaktuar, duke lejuar trajtimin më të lehtë të kodit të shembullit.
  • callout.rbështë një pirun i ngjashëm i personalizuar i kësaj, por i krijuar për thirrjet tona speciale të dokumenteve.
  • jekyll-toc përdoret për të gjeneruar tabelën tonë të përmbajtjes.
• E gjithë përmbajtja e dokumenteve është rishkruar në Markdown (në vend të HTML) për modifikim më të lehtë.
• Faqet janë riorganizuar për përmbajtje më të thjeshtë dhe një hierarki më të arritshme.
• Ne kaluam nga CSS e rregullt në SCSS për të përfituar plotësisht nga variablat, miksat dhe më shumë të Bootstrap.

Shërbimet e përgjegjshme

Të gjitha @screen-variablat janë hequr në v4.0.0. Përdorni përzierjet media-breakpoint-up(), media-breakpoint-down(), ose media-breakpoint-only()Sass ose $grid-breakpointshartën Sass.

Klasat tona të përgjegjshme të shërbimeve janë hequr kryesisht në favor të displayshërbimeve të qarta.

• Klasat .hiddendhe .showjanë hequr sepse bien ndesh me jQuery $(...).hide()dhe $(...).show()metodat. Në vend të kësaj, provoni të ndryshoni [hidden]atributin ose përdorni stile inline si style="display: none;"dhe style="display: block;".
• Të gjitha .hidden-klasat janë hequr, me përjashtim të shërbimeve të printimit që janë riemërtuar.
  • U hoq nga 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
  • Hequr nga v4 alfa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Shërbimet e printimit nuk fillojnë më me .hidden-ose .visible-, por me .d-print-.
  • Emrat e vjetër: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Klasat e reja: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Në vend që të përdorni klasa të qarta .visible-*, ju e bëni një element të dukshëm thjesht duke mos e fshehur atë në atë madhësi ekrani. Ju mund të kombinoni një .d-*-noneklasë me një .d-*-blockklasë për të shfaqur një element vetëm në një interval të caktuar të madhësive të ekranit (p.sh. .d-none.d-md-block.d-xl-nonetregon elementin vetëm në pajisje të mesme dhe të mëdha).

Vini re se ndryshimet në pikat e ndërprerjes së rrjetit në v4 do të thotë që do t'ju duhet të shkoni një pikë më të madhe për të arritur të njëjtat rezultate. Klasat e reja të shërbimeve reaguese nuk përpiqen të akomodojnë raste më pak të zakonshme ku dukshmëria e një elementi nuk mund të shprehet si një gamë e vetme e afërt e madhësive të portave të shikimit; në vend të kësaj do t'ju duhet të përdorni CSS të personalizuar në raste të tilla.