Միգրացիա դեպի v4

Bootstrap 4-ը ամբողջ նախագծի հիմնական վերաշարադրումն է: Ամենաուշագրավ փոփոխություններն ամփոփված են ստորև, որին հաջորդում են համապատասխան բաղադրիչների ավելի կոնկրետ փոփոխությունները:

Կայուն փոփոխություններ

Բետա 3-ից անցնելով մեր կայուն v4.x թողարկմանը, բեկումնային փոփոխություններ չկան, բայց կան որոշ նկատելի փոփոխություններ:

Տպագրություն

• Ուղղվել է կոտրված տպագրության կոմունալ ծառայություններ: Նախկինում .d-print-*դասի օգտագործումը անսպասելիորեն կչեղարկի ցանկացած այլ .d-*դաս: Այժմ դրանք համընկնում են ցուցադրման այլ օգտակար ծրագրերի հետ և կիրառվում են միայն այդ լրատվամիջոցների վրա ( @media print):

• Ընդլայնված տպագիր ցուցադրման կոմունալ ծրագրերը՝ այլ կոմունալ ծառայություններին համապատասխանելու համար: Բետա 3 և ավելի հին տարբերակն ուներ միայն block, inline-block, inlineև none: Կայուն v4 ավելացվել է flex, inline-flex, table, table-row, և table-cell.

• Հաստատվել է տպագրության նախադիտումը բրաուզերների մեջ՝ տպագրության նոր ոճերով, որոնք նշում են @page size.

Բետա 3 փոփոխություններ

Թեև Beta 2-ը տեսավ մեր բեկումնային փոփոխությունների մեծ մասը բետա փուլում, բայց մենք դեռևս ունենք մի քանիսը, որոնք պետք է լուծվեին Beta 3 թողարկումում: Այս փոփոխությունները կիրառվում են, եթե դուք թարմացնում եք Beta 3-ը Beta 2-ից կամ Bootstrap-ի որևէ հին տարբերակից:

Տարբեր

• Հեռացվել է չօգտագործված $thumbnail-transitionփոփոխականը: Մենք ոչինչ չէինք փոխում, ուստի դա պարզապես լրացուցիչ կոդ էր:
• npm փաթեթն այլևս չի ներառում որևէ այլ ֆայլ, բացի մեր աղբյուրից և հեռավոր ֆայլերից. եթե դուք ապավինում եք դրանց վրա և գործարկում էիք մեր սկրիպտները node_modulesթղթապանակի միջոցով, դուք պետք է հարմարեցնեք ձեր աշխատանքային հոսքը:

Ձևաթղթեր

• Վերագրել է ինչպես սովորական, այնպես էլ լռելյայն վանդակները և ռադիոները: Այժմ երկուսն էլ ունեն համապատասխան HTML կառուցվածք (արտաքին <div>եղբոր և եղբոր հետ <input>և <label>) և դասավորության նույն ոճերը (դասավոր լռելյայն, համահունչ ձևափոխիչի դասի հետ): Սա թույլ է տալիս մեզ ոճավորել պիտակը` հիմնվելով մուտքագրման վիճակի վրա, պարզեցնելով disabledհատկանիշի աջակցությունը (նախկինում պահանջվում էր մայր դաս) և ավելի լավ աջակցելով մեր ձևի վավերացմանը:

  Որպես դրա մի մաս, մենք փոխել ենք CSS- background-imageը հատուկ ձևի վանդակների և ռադիոկայանների վրա բազմաթիվ s կառավարելու համար: Նախկինում այժմ հեռացված .custom-control-indicatorտարրն ուներ ֆոնի գույնը, գրադիենտը և SVG պատկերակը: Ֆոնային գրադիենտի հարմարեցումը նշանակում էր փոխարինել այդ բոլորը ամեն անգամ, երբ անհրաժեշտ էր փոխել միայն մեկը: Այժմ մենք ունենք .custom-control-label::beforeլրացման և գրադիենտի համար և .custom-control-label::afterկարգավորում ենք պատկերակը:

  Անհատական ​​ստուգում ներկառուցելու համար ավելացրեք .custom-control-inline:

• Թարմացված ընտրիչը մուտքագրման վրա հիմնված կոճակների խմբերի համար: Ոճի և վարքագծի փոխարեն [data-toggle="buttons"] { }մենք օգտագործում ենք dataհատկանիշը միայն JS վարքագծի համար և ապավինում ենք նոր .btn-group-toggleդասի ոճավորման համար:

• Հեռացվել .col-form-legendէ մի փոքր բարելավվածի օգտին .col-form-label: Այս կերպ .col-form-label-smև .col-form-label-lgհեշտությամբ կարող է օգտագործվել <legend>տարրերի վրա:

• Պատվերով ֆայլերի մուտքագրումները փոփոխություն են ստացել իրենց $custom-file-textSass փոփոխականում: Այն այլևս տեղադրված Sass քարտեզ չէ և այժմ աշխատում է միայն մեկ լարով. Browseկոճակը, քանի որ դա այժմ մեր Sass-ից ստեղծված միակ կեղծ տարրն է: Տեքստն Choose fileայժմ գալիս է .custom-file-label.

Մուտքային խմբեր

• Ներածման խմբի հավելումներն այժմ հատուկ են իրենց տեղադրմանը՝ ներածման համեմատ: Մենք հրաժարվել ենք .input-group-addonև .input-group-btnերկու նոր դասերի համար, .input-group-prependև .input-group-append. Այժմ դուք պետք է բացահայտորեն օգտագործեք հավելված կամ նախադրյալ՝ պարզեցնելով մեր CSS-ի մեծ մասը: Հավելվածի կամ նախադրյալի մեջ տեղադրեք ձեր կոճակները այնպես, ինչպես դրանք գոյություն կունենային ցանկացած այլ վայրում, բայց փաթեթավորեք տեքստը .input-group-text:

• Այժմ աջակցվում են վավերացման ոճերը, ինչպես նաև մի քանի մուտքեր (չնայած յուրաքանչյուր խմբի համար կարող եք հաստատել միայն մեկ մուտք):

• Չափերի դասերը պետք է լինեն ծնողի վրա, .input-groupայլ ոչ թե առանձին ձևի տարրերի վրա:

Բետա 2 փոփոխություններ

Բետա տարբերակում մենք նպատակ ունենք ոչ մի բեկումնային փոփոխություն չունենալ: Այնուամենայնիվ, ամեն ինչ միշտ չէ, որ ծրագրվածի պես է ընթանում: Ստորև բերված են բեկումնային փոփոխությունները, որոնք պետք է հաշվի առնել Բետա 1-ից Բետա 2 տեղափոխելիս:

Կոտրում

• Հեռացվել $badge-colorէ փոփոխականը և դրա օգտագործումը .badge. colorՄենք օգտագործում ենք գունային հակադրության ֆունկցիա՝ ի հիման վրա ընտրելու համար background-color, ուստի փոփոխականն ավելորդ է:
• grayscale()Գործառույթը վերանվանվել է CSS-ի բնիկ ֆիլտրի gray()հետ կոնֆլիկտից խուսափելու համար:grayscale
• Վերանվանվել է .table-inverse, .thead-inverse, և .thead-defaultդեպի .*-darkև .*-light, որը համապատասխանում է այլուր օգտագործվող մեր գունային սխեմաներին:
• Արձագանքող աղյուսակներն այժմ ստեղծում են դասեր յուրաքանչյուր ցանցի բեկման կետի համար: Սա ընդմիջում է Բետա 1-ից, քանի որ այն, ինչ .table-responsiveդուք օգտագործում եք, ավելի շատ նման է .table-responsive-md. Այժմ կարող եք օգտագործել .table-responsiveկամ .table-responsive-{sm,md,lg,xl}ըստ անհրաժեշտության:
• Bower-ի աջակցությունը դադարեցվել է, քանի որ փաթեթի կառավարիչը հնացել է այլընտրանքների համար (օրինակ՝ Yarn կամ npm): Մանրամասների համար տե՛ս bower/bower#2298 :
• Bootstrap-ը դեռ պահանջում է jQuery 1.9.1 կամ ավելի բարձր տարբերակ, սակայն ձեզ խորհուրդ է տրվում օգտագործել 3.x տարբերակը, քանի որ v3.x-ի աջակցվող բրաուզերներն այն բրաուզերներն են, որոնք աջակցում է Bootstrap-ին, գումարած v3.x-ն ունի անվտանգության որոշ ուղղումներ:
• Հեռացվեց չօգտագործված .form-control-labelդասը: Եթե ​​դուք իսկապես օգտվել եք այս դասից, դա դասի կրկնօրինակն է, .col-form-labelորը ուղղահայաց կենտրոնացրել է a- <label>ն իր հետ կապված մուտքագրման հորիզոնական ձևավորման դասավորություններում:
• Փոխել color-yiqէ mixin-ից, որը ներառում է colorհատկությունը ֆունկցիայի, որը վերադարձնում է արժեք, որը թույլ է տալիս օգտագործել այն ցանկացած CSS հատկության համար: Օրինակ, փոխարենը color-yiq(#000)դուք կգրեիք color: color-yiq(#000);.

Առանձնահատկություններ

• pointer-eventsՄոդալների վրա նոր կիրառություն է մտցվել: Արտաքինն .modal-dialogանցնում է իրադարձությունների միջով pointer-events: noneհատուկ սեղմումների մշակման համար (հնարավորություն է տալիս պարզապես լսել ցանկացած կտտոցով), և այնուհետև հակադարձում է .modal-backdropայն իրականում ..modal-contentpointer-events: auto

Ամփոփում

Ահա տոմսերի այն մեծ տարրերը, որոնց մասին դուք կցանկանայիք տեղյակ լինել v3-ից v4 տեղափոխելիս:

Բրաուզերի աջակցություն

• Անջատվեց IE8, IE9 և iOS 6-ի աջակցությունը: v4-ն այժմ միայն IE10+ և iOS 7+ է: Դրանցից որևէ մեկի կարիք ունեցող կայքերի համար օգտագործեք v3.
• Ավելացվեց պաշտոնական աջակցություն Android v5.0 Lollipop-ի զննարկչի և WebView-ի համար: Android բրաուզերի և WebView-ի նախկին տարբերակները մնում են միայն ոչ պաշտոնական աջակցություն:

Համաշխարհային փոփոխություններ

• Flexbox-ը լռելյայն միացված է: Ընդհանուր առմամբ, դա նշանակում է հեռանալ լողացողներից և ավելին մեր բաղադրիչներից:
• Անցում Less- ից Sass- ի մեր աղբյուրի CSS ֆայլերի համար:
• Անցվել pxէ remորպես մեր հիմնական CSS միավոր, թեև պիքսելները դեռ օգտագործվում են մեդիա հարցումների և ցանցի վարքագծի համար, քանի որ սարքի տեսադաշտերը չեն ազդում տիպի չափից:
• Համաշխարհային տառատեսակի չափն ավելացել է 14pxմինչև 16px.
• Բարելավեց ցանցի մակարդակները՝ հինգերորդ տարբերակ ավելացնելու համար (ավելացնելով փոքր սարքերին 576pxև ներքևում) և հեռացրեց -xsներդիրը այդ դասերից: Օրինակ՝ .col-6.col-sm-4.col-md-3.
• Առանձին ընտրովի թեման փոխարինվեց SCSS փոփոխականների միջոցով կարգավորելի ընտրանքներով (օրինակ՝ $enable-gradients: true):
• Կառուցել համակարգը հիմնանորոգվել է՝ Grunt-ի փոխարեն npm սկրիպտների շարք օգտագործելու համար: Տեսեք package.jsonբոլոր սցենարները կամ մեր ծրագրի readme-ը տեղական զարգացման կարիքների համար:
• Bootstrap-ի չպատասխանող օգտագործումն այլևս չի աջակցվում:
• Հրաժարվեց առցանց Customizer-ը՝ հօգուտ ավելի ընդարձակ կարգավորման փաստաթղթերի և հարմարեցված կառուցումների:
• Ավելացվել են տասնյակ նոր օգտակար դասեր ՝ ընդհանուր CSS գույք-արժեք զույգերի և լուսանցքի/լցման միջակայքի դյուրանցումների համար:

Ցանցային համակարգ

• Տեղափոխվել է flexbox։
  • Ավելացվեց flexbox-ի աջակցությունը grid mixins-ում և նախապես սահմանված դասերում:
  • Որպես flexbox-ի մի մաս, ներառված է ուղղահայաց և հորիզոնական հավասարեցման դասերի աջակցություն:
• Թարմացված ցանցի դասերի անունները և ցանցի նոր մակարդակը:
  • Ներքևում ավելացվել է smցանցի նոր մակարդակ 768px՝ ավելի մանրակրկիտ վերահսկողության համար: Մենք այժմ ունենք xs, sm, md, lgեւ xl. Սա նաև նշանակում է, որ յուրաքանչյուր մակարդակ բարձրացել է մեկ մակարդակով (այսպես .col-md-6, v3-ում այժմ .col-lg-6գտնվում է v4-ում):
  • xsՑանցային դասերը փոփոխվել են այնպես, որ չպահանջվի, որ ներդիրը ավելի ճշգրիտ ներկայացնի, որ նրանք սկսում են ոճեր կիրառել min-width: 0և ոչ թե սահմանված պիքսելային արժեքով: Փոխարենը .col-xs-6, հիմա է .col-6: Ցանցի մյուս բոլոր մակարդակները պահանջում են ներդիր (օրինակ՝ sm):
• Թարմացված ցանցի չափերը, խառնուրդները և փոփոխականները:
  • Ցանցային հեղեղատարներն այժմ ունեն Sass քարտեզ, որպեսզի կարողանաք նշել հեղեղատարի որոշակի լայնություններ յուրաքանչյուր բեկման կետում:
  • Թարմացված ցանցային խառնուրդներ՝ օգտագործելու make-col-readyնախապատրաստական ​​միքսին և ա ՝ սյունակների անհատական ​​չափերը և չափերը make-colսահմանելու համար:flexmax-width
  • Ցանցային համակարգի մեդիայի հարցումների ընդմիջման կետերը և բեռնարկղերի լայնությունները փոխվել են՝ հաշվի առնելու ցանցի նոր մակարդակը և ապահովելու, որ սյունակները հավասարապես բաժանվում են 12իրենց առավելագույն լայնությամբ:
  • Ցանցի անջատման կետերը և բեռնարկղերի լայնություններն այժմ մշակվում են Sass քարտեզների ( $grid-breakpointsև $container-max-widths) միջոցով՝ մի քանի առանձին փոփոխականների փոխարեն: Դրանք ամբողջությամբ փոխարինում են @screen-*փոփոխականներին և թույլ են տալիս լիովին հարմարեցնել ցանցի մակարդակները:
  • Փոխվել են նաև լրատվամիջոցների հարցումները։ Մեր լրատվամիջոցների հարցումների հայտարարությունները ամեն անգամ նույն արժեքով կրկնելու փոխարեն, մենք այժմ ունենք @include media-breakpoint-up/down/only. Այժմ, գրելու փոխարեն @media (min-width: @screen-sm-min) { ... }, կարող եք գրել @include media-breakpoint-up(sm) { ... }:

Բաղադրիչներ

• Անցված վահանակներ, մանրապատկերներ և հորեր նոր համապարփակ բաղադրիչի՝ քարտերի համար:
• Անջատվեց Glyphicons պատկերակի տառատեսակը: Եթե ​​Ձեզ անհրաժեշտ են սրբապատկերներ, որոշ տարբերակներ են.
  • Glyphicons- ի վերին հոսքի տարբերակը
  • Օկտիկոններ
  • Տառատեսակը Awesome
  • Այլընտրանքների ցանկի համար տե՛ս Ընդլայնել էջը : Լրացուցիչ առաջարկներ ունե՞ք: Խնդրում եմ բացեք թողարկում կամ PR:
• Անցել է Affix jQuery փլագինը։
  • position: stickyՓոխարենը խորհուրդ ենք տալիս օգտագործել : Տե՛ս HTML5 Խնդրում ենք մուտքագրումը մանրամասների և կոնկրետ պոլիլրացման առաջարկությունների համար: Առաջարկներից մեկն այն իրականացնելու համար օգտագործել @supportsկանոնն է (օրինակ՝ @supports (position: sticky) { ... })
  • Եթե ​​դուք օգտագործում էիք Affix-ը լրացուցիչ, ոչ positionոճեր կիրառելու համար, ապա պոլիֆիլները կարող են չաջակցել ձեր օգտագործման դեպքին: Նման օգտագործման տարբերակներից մեկը երրորդ կողմի ScrollPos-Styler գրադարանն է:
• Անջատվեց փեյջերի բաղադրիչը , քանի որ այն ըստ էության մի փոքր հարմարեցված կոճակներ էր:
• Վերափոխել է գրեթե բոլոր բաղադրիչները , որպեսզի օգտագործեն ավելի շատ չներկայացված դասի ընտրիչներ՝ չափազանց հատուկ երեխաների ընտրիչների փոխարեն:

Ըստ բաղադրիչի

Այս ցանկը ընդգծում է հիմնական փոփոխություններն ըստ բաղադրիչի v3.xx-ի և v4.0.0-ի միջև:

Վերագործարկեք

Bootstrap 4-ի համար նորություն է Reboot- ը, նոր ոճաթերթ, որը հիմնված է Normalize-ի վրա՝ մեր սեփական փոքր-ինչ կարծիքներով վերակայման ոճերով: Այս ֆայլում հայտնվող ընտրիչները օգտագործում են միայն տարրեր. այստեղ դասեր չկան: Սա մեկուսացնում է մեր վերակայման ոճերը մեր բաղադրիչի ոճերից՝ ավելի մոդուլային մոտեցման համար: Սա ներառում է ամենակարևոր զրոյացումներից մի քանիսը` box-sizing: border-boxփոփոխությունը, շատ տարրերի միավորներից անցնելը em, remկապի ոճերը և շատ ձևի տարրերի վերակայումները:

Տպագրություն

• Բոլոր .text-կոմունալ ծառայությունները տեղափոխվեցին _utilities.scssֆայլ:
• Անջատվեց .page-header, քանի որ դրա ոճերը կարող են կիրառվել կոմունալ ծառայությունների միջոցով:
• .dl-horizontalհանվել է. Փոխարենը, օգտագործեք .rowև <dl>օգտագործեք ցանցի սյունակների դասեր (կամ միքսներ) իր <dt>և <dd>երեխաների վրա:
• Վերանախագծված բլոկչակերտները՝ տեղափոխելով իրենց ոճերը <blockquote>տարրից մեկ դասի, .blockquote. Հրաժարվել .blockquote-reverseէ տեքստային կոմունալ ծառայությունների փոփոխիչը:
• .list-inlineայժմ պահանջում է, որ իր երեխաների ցուցակի տարրերը նոր .list-inline-itemդասը կիրառեն իրենց համար:

Պատկերներ

• Վերանվանվել .img-responsiveէ .img-fluid.
• Վերանվանվել .img-roundedէ.rounded
• Վերանվանվել .img-circleէ.rounded-circle

Սեղաններ

• Ընտրիչի գրեթե բոլոր օրինակները >հեռացվել են, ինչը նշանակում է, որ տեղադրված աղյուսակներն այժմ ինքնաբերաբար կժառանգեն ոճերը իրենց ծնողներից: Սա մեծապես պարզեցնում է մեր ընտրիչները և հնարավոր հարմարեցումները:
• Վերանվանվել .table-condensedէ .table-smհետևողականության համար:
• Ավելացրել է նոր .table-inverseտարբերակ։
• Ավելացվել են աղյուսակի վերնագրի փոփոխիչներ՝ .thead-defaultև .thead-inverse.
• Վերանվանվել են համատեքստային դասերը՝ ունենալով .table--նախածանց: Հետևաբար .active, .success, և դեպի , , և . .warning_ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

Ձևաթղթեր

• Տեղափոխված տարրը վերակայվում է _reboot.scssֆայլին:
• Վերանվանվել .control-labelէ .col-form-label.
• Համապատասխանաբար վերանվանվել է .input-lgև .input-smդեպի .form-control-lgև .form-control-sm։
• Դասերը թողել .form-group-*են պարզության համար: .form-control-*Փոխարենը հիմա օգտագործեք դասերը:
• Հեռացվեց .help-blockև այն փոխարինվեց .form-textբլոկի մակարդակի օգնության տեքստով: Ներկառուցված օգնության տեքստի և այլ ճկուն տարբերակների համար օգտագործեք օգտակար դասեր, ինչպիսիք են .text-muted.
• իջել .radio-inlineև .checkbox-inline.
• Համախմբված .checkboxև տարբեր դասերի .radioմեջ :.form-check.form-check-*
• Հորիզոնական ձևերը վերանայված են.
  • Հրաժարվեց .form-horizontalդասի պահանջից:
  • .form-groupայլևս չի կիրառում .rowvia mixin-ի ոճերը, ուստի .rowայժմ պահանջվում է հորիզոնական ցանցի դասավորությունների համար (օրինակ՝ <div class="form-group row">):
  • Ավելացվեց նոր .col-form-labelդաս s-ով ուղղահայաց կենտրոնացված պիտակներին .form-control:
  • Ավելացվեց նոր .form-rowկոմպակտ ձևերի դասավորության համար ցանցային դասերի հետ (փոխանակեք ձեր .rowa-ով .form-rowև գնացեք):
• Ավելացվեց հատուկ ձևերի աջակցություն (վանդակների, ռադիոների, ընտրողների և ֆայլերի մուտքագրման համար):
• Փոխարինվել .has-errorէ , .has-warning, և .has-successդասերը HTML5 ձևի վավերացումով CSS-ների :invalidև :validկեղծ դասերի միջոցով:
• Վերանվանվել .form-control-staticէ .form-control-plaintext.

Կոճակներ

• Վերանվանվել .btn-defaultէ .btn-secondary.
• Դասընթացը .btn-xsամբողջությամբ հեռացվեց, քանի .btn-smոր համամասնորեն շատ ավելի փոքր է, քան v3-ը:
• jQuery plugin- ի պետական ​​կոճակի գործառույթը button.jsհանվել է: Սա ներառում է $().button(string)և $().button('reset')մեթոդները: Մենք խորհուրդ ենք տալիս փոխարենը օգտագործել հատուկ JavaScript-ի մի փոքր մասը, որը կբերի ձեզ ճիշտ այնպես, ինչպես ուզում եք:
  • Նկատի ունեցեք, որ plugin-ի մյուս հատկանիշները (կոճակների վանդակներ, կոճակների ռադիոկայաններ, մեկ անջատիչ կոճակներ) պահպանվել են v4-ում:
• Փոխեք կոճակները [disabled]՝ :disabledորպես IE9+ աջակցում :disabled: Այնուամենայնիվ fieldset[disabled], դեռևս անհրաժեշտ է, քանի որ բնիկ հաշմանդամ դաշտերի հավաքածուները դեռևս սխալ են IE11-ում :

Կոճակների խումբ

• Վերաշարադրել բաղադրիչը flexbox-ով:
• Հեռացվել է .btn-group-justified. Որպես փոխարինում, դուք կարող եք օգտագործել <div class="btn-group d-flex" role="group"></div>որպես տարրերի շուրջը փաթաթել .w-100.
• Դասընթացը .btn-group-xsամբողջությամբ հեռացվեց՝ հաշվի առնելով .btn-xs.
• Կոճակների գործիքների տողերում կոճակների խմբերի միջև բացահայտ տարածությունը հեռացվեց; օգտագործեք մարժա կոմունալ ծառայությունները հիմա:
• Բարելավված փաստաթղթեր այլ բաղադրիչների հետ օգտագործման համար:

Բացվող պատուհաններ

• Բոլոր բաղադրիչների, փոփոխիչների և այլնի համար հիմնական ընտրիչներից անցում կատարվեց եզակի դասերի:
• Պարզեցված բացվող ոճեր, որոնք այլևս չեն առաքվում բացվող ընտրացանկին կցված դեպի վեր կամ վար ուղղված սլաքներով:
• Այժմ բացվող պատուհանները կարող են ստեղծվել <div>s-ով կամ <ul>s-ով:
• Վերակառուցված բացվող ոճերը և նշագրումը` հեշտ, ներկառուցված աջակցություն տրամադրելու <a>և <button>հիմնված բացվող տարրերի համար:
• Վերանվանվել .dividerէ .dropdown-divider.
• Բացվող տարրերն այժմ պահանջում են .dropdown-item:
• Բացվող անջատիչները այլևս չեն պահանջում բացահայտ <span class="caret"></span>. սա այժմ ավտոմատ կերպով տրամադրվում է CSS-ի ::afterմիջոցով .dropdown-toggle:

Ցանցային համակարգ

• Ավելացվեց 576pxցանցի նոր բեկման կետ որպես sm, ինչը նշանակում է, որ այժմ կան հինգ ընդհանուր մակարդակ ( xs, sm, md, lg, և xl):
• Վերանվանվել է արձագանքող ցանցի մոդիֆիկատորների դասերը՝ .col-{breakpoint}-{modifier}-{size}ավելի .{modifier}-{breakpoint}-{size}պարզ ցանցային դասերի համար:
• Flexbox-ով աշխատող նոր դասերի համար իջել են push and pull մոդիֆիկատորների orderդասերը: Օրինակ, .col-8.push-4և -ի փոխարեն .col-4.pull-8դուք կօգտագործեիք .col-8.order-2և .col-4.order-1.
• Ավելացվել են flexbox-ի օգտակար դասեր ցանցային համակարգի և բաղադրիչների համար:

Թվարկեք խմբերը

• Վերաշարադրել բաղադրիչը flexbox-ով:
• Փոխարինվել a.list-group-itemէ բացահայտ դասով, .list-group-item-action, ցանկի խմբային տարրերի հղման և կոճակների տարբերակների համար:
• Ավելացվեց .list-group-flushդաս՝ քարտերով օգտագործելու համար:

Մոդալ

• Վերաշարադրել բաղադրիչը flexbox-ով:
• Հաշվի առնելով flexbox-ին անցնելը, վերնագրում մերժման պատկերակների հավասարեցումը, ամենայն հավանականությամբ, կոտրված է, քանի որ մենք այլևս չենք օգտագործում floats: Լողացող բովանդակությունը առաջին տեղում է, բայց flexbox-ի դեպքում դա այլևս այդպես չէ: Թարմացրեք ձեր մերժման պատկերակները, որպեսզի դրանք ուղղվեն մոդալ վերնագրերից հետո:
• Ընտրանքը remote(որը կարող էր օգտագործվել ավտոմատ կերպով բեռնելու և արտաքին բովանդակությունը մոդալի մեջ ներարկելու համար) և համապատասխան loaded.bs.modalիրադարձությունը հեռացվեցին: Փոխարենը խորհուրդ ենք տալիս օգտագործել հաճախորդի կողմի ձևանմուշը կամ տվյալների պարտադիր շրջանակը կամ ինքներդ զանգահարել jQuery.load :

Navs

• Վերաշարադրել բաղադրիչը flexbox-ով:
• Գրեթե բոլոր >ընտրիչները հանվել են ավելի պարզ ոճավորման համար՝ չներդիր դասերի միջոցով:
• HTML-ին հատուկ ընտրիչների փոխարեն, օրինակ .nav > li > a, մենք օգտագործում ենք առանձին դասեր .navs, .nav-items և .nav-links-ի համար: Սա ձեր HTML-ն ավելի ճկուն է դարձնում՝ միաժամանակ ավելացնելով ընդարձակելիությունը:

Navbar

Navbar-ն ամբողջությամբ վերաշարադրվել է flexbox-ում` բարելավված աջակցությամբ հավասարեցման, արձագանքման և հարմարեցման համար:

• Արձագանքող նավագոտու վարքագիծն այժմ կիրառվում է .navbarդասի վրա՝ անհրաժեշտության .navbar-expand-{breakpoint} միջոցով, որտեղ դուք ընտրում եք, թե որտեղ պետք է փլուզել navbar-ը: Նախկինում սա Less փոփոխականի փոփոխություն էր և պահանջում էր վերակոմպիլյացիա:
• .navbar-defaultայժմ է .navbar-light, թեև .navbar-darkմնում է նույնը: Դրանցից մեկը պահանջվում է յուրաքանչյուր navbar-ում: Այնուամենայնիվ, այս դասերը այլեւս չեն սահմանում background-colors; փոխարենը դրանք ըստ էության միայն ազդում են color:
• Navbars-ն այժմ պահանջում է որոշակի ֆոնային հայտարարություն: Ընտրեք մեր ֆոնային կոմունալ ծառայություններից ( .bg-*) կամ սահմանեք ձեր սեփականը վերը նշված թեթև/հակադարձ դասերով ՝ խելագար հարմարեցման համար :
• Հաշվի առնելով flexbox ոճերը, navbars-ն այժմ կարող է օգտագործել flexbox-ի կոմունալ ծառայությունները հեշտ հավասարեցման տարբերակների համար:
• .navbar-toggleայժմ է .navbar-togglerև ունի տարբեր ոճեր և ներքին նշում (ոչ ավելի, երեք <span>վ):
• Դասընթացը .navbar-formամբողջությամբ թողեց: Դա այլևս անհրաժեշտ չէ. փոխարենը, պարզապես .form-inlineանհրաժեշտության դեպքում օգտագործեք և կիրառեք մարժան կոմունալ ծառայություններ:
• Navbars-ն այլևս չի ներառում margin-bottomկամ border-radiusլռելյայն: Անհրաժեշտության դեպքում օգտագործեք կոմունալ ծառայություններ:
• Navbars պարունակող բոլոր օրինակները թարմացվել են՝ ներառելու նոր նշում:

Էջավորում

• Վերաշարադրել բաղադրիչը flexbox-ով:
• Բացահայտ դասեր ( .page-item, .page-link) այժմ պահանջվում են .paginations-ի հետնորդների վրա
• Բաղադրիչն ամբողջությամբ հանվեց, .pagerքանի որ այն ավելին էր, քան հարմարեցված ուրվագծային կոճակները:

Հացի փշրանքներ

• Բացահայտ դաս, .breadcrumb-item, այժմ պահանջվում է .breadcrumbs-ի ժառանգների վրա

Պիտակներ և կրծքանշաններ

• Համախմբված .labelև տարրից .badgeտարբերվելու <label>և հարակից բաղադրիչները պարզեցնելու համար:
• Ավելացվել .badge-pillէ որպես մոդիֆիկատոր կլորացված «հաբի» տեսքի համար:
• Նշանակներն այլևս ավտոմատ կերպով չեն տեղադրվում ցուցակի խմբերում և այլ բաղադրիչներում: Դրա համար այժմ անհրաժեշտ են կոմունալ ծառայությունների դասեր:
• .badge-defaultհեռացվել և .badge-secondaryավելացվել է այլուր օգտագործվող բաղադրիչի մոդիֆիկատորների դասերին համապատասխանելու համար:

Վահանակներ, մանրապատկերներ և հորեր

Ամբողջովին հեռացվել է նոր քարտի բաղադրիչի համար:

Վահանակներ

• .panelդեպի .card, այժմ կառուցված է flexbox-ով:
• .panel-defaultհեռացվել է և փոխարինում չկա:
• .panel-groupհեռացվել է և փոխարինում չկա: .card-groupփոխարինող չէ, այլ է։
• .panel-headingդեպի.card-header
• .panel-titleդեպի .card-title. Կախված ցանկալի տեսքից, դուք կարող եք նաև օգտագործել վերնագրի տարրեր կամ դասեր (օրինակ <h3>, .h3) կամ թավ տարրեր կամ դասեր (օրինակ <strong>, <b>, , .font-weight-bold): Նկատի ունեցեք, որ .card-title, չնայած նույն անվանումը, արտադրում է այլ տեսք, քան .panel-title.
• .panel-bodyդեպի.card-body
• .panel-footerդեպի.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, և .panel-dangerհեռացվել են .bg-, .text-և .borderկոմունալ ծառայություններից, որոնք ստեղծվել են մեր $theme-colorsSass քարտեզից:

Առաջընթաց

• Համատեքստային .progress-bar-*դասերը փոխարինվեցին .bg-*կոմունալ ծառայություններով: Օրինակ, class="progress-bar progress-bar-danger"դառնում է class="progress-bar bg-danger".
• .activeԱնիմացիոն առաջընթացի գծերի համար փոխարինվել է .progress-bar-animated.

Կարուսել

• Կապիտալ վերանորոգվել է ամբողջ բաղադրիչը՝ դիզայնը և ոճը պարզեցնելու համար: Մենք ունենք ավելի քիչ ոճեր, որոնք կարող եք փոխել, նոր ցուցիչներ և նոր պատկերակներ:
• Բոլոր CSS-ները հանվել են և վերանվանվել՝ ապահովելով յուրաքանչյուր դասի նախածանցով .carousel-:
  • Կարուսելի իրերի համար, .next, .prev, .leftև .rightայժմ են .carousel-item-next, .carousel-item-prev, .carousel-item-leftև .carousel-item-right:
  • .itemէ նաև հիմա .carousel-item։
  • Նախորդ/հաջորդ հսկիչների համար .carousel-control.rightև .carousel-control.leftայժմ .carousel-control-nextև են .carousel-control-prev, ինչը նշանակում է, որ դրանք այլևս չեն պահանջում հատուկ բազային դաս:
• Հեռացրել է բոլոր արձագանքող ոճերը՝ հետաձգելով կոմունալ ծրագրերը (օրինակ՝ ենթագրերի ցուցադրումը որոշ դիտակետերում) և ըստ անհրաժեշտության հատուկ ոճերի:
• Հեռացված պատկերը փոխարինում է կարուսելի տարրերի պատկերների համար՝ հետաձգելով կոմունալ ծառայությունները:
• Կարուսելի օրինակը շտկեց՝ ներառելով նոր նշագրումը և ոճերը:

Սեղաններ

• Հեռացվել է ոճավորված ներդիր աղյուսակների աջակցությունը: Սեղանի բոլոր ոճերն այժմ ժառանգված են v4-ում՝ ավելի պարզ ընտրիչների համար:
• Ավելացվեց հակադարձ աղյուսակի տարբերակը:

Կոմունալ ծառայություններ

• Ցուցադրել, թաքնված և ավելին.
  • Ցուցադրման կոմունալ ծառայությունները դարձրել են արձագանքող (օրինակ, .d-noneև d-{sm,md,lg,xl}-none):
  • Հրաժարվել է .hidden-*նոր ցուցադրվող կոմունալ ծառայությունների մեծ մասը : Օրինակ՝ փոխարենը .hidden-sm-upօգտագործեք .d-sm-none. Վերանվանել է .hidden-printկոմունալ ծառայությունները՝ օգտագործելու ցուցադրման օգտակար ծրագրերի անվանման սխեման: Լրացուցիչ տեղեկություններ այս էջի Պատասխանատու կոմունալ ծառայություններ բաժնում:
  • Ավելացվեցին .float-{sm,md,lg,xl}-{left,right,none}դասեր պատասխանատու լողացողների համար և հեռացվեցին .pull-left, և .pull-rightքանի որ դրանք ավելորդ են .float-leftև .float-right.
• Տիպ:
  • Տեքստի հավասարեցման մեր դասերին ավելացվել են արձագանքող տատանումներ .text-{sm,md,lg,xl}-{left,center,right}:
• Հավասարեցում և տարածություն.
  • Ավելացվեց նոր արձագանքող լուսանցք և ներդիր բոլոր կողմերի համար, ինչպես նաև ուղղահայաց և հորիզոնական սղագրություններ:
  • Ավելացվեց flexbox կոմունալ ծառայությունների բեռնվածություն :
  • Ազատվել .center-blockէ նոր .mx-autoդասի համար:
• Clearfix-ը թարմացվել է՝ զննարկչի հին տարբերակների համար աջակցությունը դադարեցնելու համար:

Վաճառողի նախածանցի խառնուրդներ

Bootstrap 3-ի մատակարարի նախածանցային խառնուրդները, որոնք հնացած էին v3.2.0-ում, հեռացվել են Bootstrap 4-ում: Քանի որ մենք օգտագործում ենք Autoprefixer , դրանք այլևս անհրաժեշտ չեն:

Հեռացրել են հետևյալ միքսները ՝ animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Փաստաթղթեր

Մեր փաստաթղթերը նույնպես արդիականացվեցին ամբողջ խորհրդի կողմից: Ահա ցածր մակարդակը.

• Մենք դեռ օգտագործում ենք Jekyll-ը, բայց խառնուրդում ունենք պլագիններ.
  • bugify.rbօգտագործվում է մեր բրաուզերի սխալների էջի գրառումները արդյունավետ կերպով ցուցակագրելու համար:
  • example.rbլռելյայն highlight.rbպլագինի մաքսային պատառաքաղ է, որը թույլ է տալիս ավելի հեշտ օգտագործել օրինակ-կոդերը:
  • callout.rbՍա նմանատիպ հատուկ պատառաքաղ է, բայց նախատեսված է մեր հատուկ փաստաթղթերի համար:
  • jekyll-toc- ն օգտագործվում է մեր բովանդակության աղյուսակը ստեղծելու համար:
• Փաստաթղթերի ամբողջ բովանդակությունը վերաշարադրվել է Markdown-ում (HTML-ի փոխարեն)՝ ավելի հեշտ խմբագրման համար:
• Էջերը վերակազմավորվել են ավելի պարզ բովանդակության և ավելի մատչելի հիերարխիայի համար:
• Մենք սովորական CSS-ից տեղափոխվեցինք SCSS՝ ամբողջությամբ օգտվելու Bootstrap-ի փոփոխականներից, միքսներից և այլն:

Պատասխանատու կոմունալ ծառայություններ

Բոլոր @screen-փոփոխականները հեռացվել են v4.0.0-ում: Փոխարենը օգտագործեք media-breakpoint-up(), media-breakpoint-down(), կամ media-breakpoint-only()Sass խառնուրդները կամ $grid-breakpointsSass քարտեզը:

Մեր արձագանքող օգտակար դասերը հիմնականում հեռացվել են՝ հօգուտ բացահայտ displayկոմունալ ծառայությունների:

• .hiddenand .showդասերը հեռացվել են, քանի որ դրանք հակասում էին jQuery-ի և $(...).hide()մեթոդներին $(...).show(): Փոխարենը, փորձեք փոխարկել [hidden]հատկանիշը կամ օգտագործել ներկառուցված ոճեր, ինչպիսիք են style="display: none;"և style="display: block;".
• Բոլոր .hidden-դասերը հեռացվել են, բացառությամբ տպագրության կոմունալ ծրագրերի, որոնք վերանվանվել են:
  • Հեռացված է 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
  • Հեռացված է v4 ալֆաներից..hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Տպել կոմունալ ծառայություններն այլևս չեն սկսվում .hidden-կամ -ով .visible-, այլ .d-print-.
  • Հին անուններ՝ .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Նոր դասեր՝ .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Բացահայտ դասեր օգտագործելու փոխարեն .visible-*դուք տարրը տեսանելի եք դարձնում՝ պարզապես չթաքցնելով այն էկրանի այդ չափի մեջ: Դուք կարող եք միավորել մեկ .d-*-noneդասը մեկ դասի հետ .d-*-block՝ տարրը ցուցադրելու միայն էկրանի չափսերի որոշակի միջակայքում (օրինակ .d-none.d-md-block.d-xl-none՝ ցուցադրում է տարրը միայն միջին և մեծ սարքերում):

Նկատի ունեցեք, որ v4-ում ցանցի ճեղքման կետերի փոփոխությունները նշանակում են, որ դուք պետք է մեկ անգամ ավելի մեծ գնաք՝ նույն արդյունքներին հասնելու համար: Նոր արձագանքող օգտակար դասերը չեն փորձում տեղավորել ավելի քիչ տարածված դեպքեր, երբ տարրի տեսանելիությունը չի կարող արտահայտվել որպես տեսադաշտի չափերի մեկ հարակից տիրույթ. փոխարենը ձեզ հարկավոր կլինի օգտագործել հատուկ CSS նման դեպքերում: