in English

v4 ga ko'chirilmoqda

Bootstrap 4 butun loyihani qayta yozishdir. Eng e'tiborga molik o'zgarishlar quyida umumlashtiriladi, so'ngra tegishli komponentlarga aniqroq o'zgarishlar kiritiladi.

Barqaror o'zgarishlar

Beta 3 dan barqaror v4.x versiyasiga o'tayotganda, hech qanday keskin o'zgarishlar yo'q, lekin ba'zi sezilarli o'zgarishlar mavjud.

Chop etish

  • Ruxsat etilgan buzilgan bosma yordam dasturlari. Ilgari, sinfdan foydalanish .d-print-*boshqa har qanday sinfni kutilmaganda bekor qiladi .d-*. Endi ular boshqa displey yordam dasturlarimizga mos keladi va faqat o'sha media uchun amal qiladi ( @media print).

  • Boshqa yordamchi dasturlarga mos keladigan kengaytirilgan bosma displey yordam dasturlari. Beta 3 va undan yuqori versiyalarda faqat block, inline-block, inlineva none. Barqaror v4 qo'shildi flex, inline-flex, table, table-rowva table-cell.

  • Belgilangan yangi chop etish uslublari bilan brauzerlar bo'ylab chop etishni oldindan ko'rishni aniqladi @page size.

Beta 3 o'zgarishlar

Beta 2 beta-bosqichda bizning tanaffus o'zgarishlarimizning asosiy qismini ko'rgan bo'lsa-da, lekin bizda hali ham Beta 3 versiyasida hal qilinishi kerak bo'lgan bir nechta narsa bor. Agar siz Beta 2 yoki Bootstrap’ning eski versiyasidan Beta 3-ga yangilanayotgan bo‘lsangiz, bu o‘zgarishlar amal qiladi.

Turli xil

  • $thumbnail-transitionFoydalanilmayotgan o'zgaruvchi olib tashlandi . Biz hech narsani o'tkazmadik, shuning uchun bu shunchaki qo'shimcha kod edi.
  • npm paketi endi bizning manba va dist fayllardan boshqa fayllarni o'z ichiga olmaydi; Agar siz ularga tayangan bo'lsangiz va skriptlarimizni node_modulespapka orqali ishlatayotgan bo'lsangiz, ish jarayoningizni moslashtirishingiz kerak.

Shakllar

  • Maxsus va standart tasdiqlash qutilari va radiolarni qayta yozing. Endi ikkalasi ham mos HTML tuzilishiga ega (tashqi <div>birodar <input>va <label>) va bir xil tartib uslublari (stacked sukut, modifikator sinfi bilan inline). Bu bizga kirish holatiga qarab yorliqni uslublash imkonini beradi, atributni qo‘llab-quvvatlashni soddalashtiradi disabled(ilgari ota-ona sinfini talab qilgan) va shaklni tekshirishni yaxshiroq qo‘llab-quvvatlaydi.

    Buning bir qismi sifatida biz background-imagemaxsus shakl belgilash katakchalari va radiolarda bir nechta s-ni boshqarish uchun CSS-ni o'zgartirdik. Ilgari, endi olib tashlangan .custom-control-indicatorelement fon rangi, gradient va SVG belgisiga ega edi. Fon gradientini sozlash har safar bittasini o'zgartirish kerak bo'lganda hammasini almashtirishni anglatadi. Endi bizda .custom-control-label::beforeto'ldirish va gradient va .custom-control-label::afterpiktogramma bilan ishlov berish mavjud.

    Inline maxsus tekshirishni qo'shish uchun .custom-control-inline.

  • Kirishga asoslangan tugma guruhlari uchun yangilangan selektor. [data-toggle="buttons"] { }Uslub va xatti-harakatlar o'rniga , biz atributdan faqat JS xatti-harakatlari uchun foydalanamiz va uslublar uchun yangi sinfga datatayanamiz ..btn-group-toggle

  • .col-form-legendBir oz yaxshilangan foydasiga olib tashlandi .col-form-label. Shu tarzda .col-form-label-smva elementlarda osonlik bilan .col-form-label-lgishlatilishi mumkin .<legend>

  • Maxsus fayl kiritishlari $custom-file-textSass oʻzgaruvchisiga oʻzgartirish kiritdi. Bu endi ichki o'rnatilgan Sass xaritasi emas va endi faqat bitta satrni quvvatlantiradi - bu Browsetugma endi bizning Sassdan yaratilgan yagona psevdoelement. Matn Choose fileendi dan keladi ..custom-file-label

Kirish guruhlari

  • Kirish guruhi qoʻshimchalari endi kirishga nisbatan ularning joylashuviga xosdir. Biz ikkita yangi darsni tashladik .input-group-addonva . Siz CSS-ning ko'p qismini soddalashtirib, hozir qo'shimcha yoki old qo'shimchadan aniq foydalanishingiz kerak. Qo'shish yoki old qo'shish ichida tugmalaringizni boshqa joyda mavjud bo'lganidek joylashtiring, lekin matnni ichiga o'rang ..input-group-btn.input-group-prepend.input-group-append.input-group-text

  • Tasdiqlash uslublari endi bir nechta kirishlar kabi qo'llab-quvvatlanadi (garchi har bir guruh uchun faqat bitta kirishni tasdiqlashingiz mumkin).

  • O'lchov sinflari .input-groupalohida shakl elementlarida emas, balki ota-onada bo'lishi kerak.

Beta 2 o'zgarishlar

Beta-versiyasida biz hech qanday o'zgarishlarga duch kelmaslikni maqsad qilganmiz. Biroq, ishlar har doim ham rejalashtirilganidek ketavermaydi. Quyida Beta 1 dan Beta 2 ga o'tishda yodda tutish kerak bo'lgan jiddiy o'zgarishlar keltirilgan.

Buzilish

  • O'chirilgan $badge-coloro'zgaruvchi va undan foydalanish .badge. colorga asoslangan rangni tanlash uchun biz rang kontrasti funksiyasidan foydalanamiz background-color, shuning uchun o'zgaruvchi kerak emas.
  • CSS mahalliy filtri bilan ziddiyatni buzmaslik grayscale()uchun funksiya qayta nomlandi.gray()grayscale
  • Boshqa joylarda qoʻllanilgan rang sxemalarimizga mos ravishda .table-inverse, .thead-inverse, va .thead-defaultga .*-darkva deb oʻzgartirildi ..*-light
  • Javob beruvchi jadvallar endi har bir panjara to'xtash nuqtasi uchun sinflarni yaratadi. Bu Beta 1-dan ajralib turadi, chunki .table-responsivesiz foydalanayotganingiz ko'proq shunga o'xshash .table-responsive-md. Siz hozir .table-responsiveyoki .table-responsive-{sm,md,lg,xl}kerak bo'lganda foydalanishingiz mumkin.
  • Paket menejeri muqobil variantlar (masalan, Yarn yoki npm) uchun eskirganligi sababli Bower qo'llab-quvvatlashi to'xtatildi. Tafsilotlar uchun bower/bower # 2298 ga qarang.
  • Bootstrap hali ham jQuery 1.9.1 yoki undan yuqori versiyasini talab qiladi, ammo v3.x brauzerlari Bootstrap tomonidan qo‘llab-quvvatlanadigan brauzerlar bo‘lgani uchun 3.x versiyasidan foydalanish tavsiya etiladi, shuningdek, v3.x da ba’zi xavfsizlik tuzatishlari mavjud.
  • Ishlatilmagan .form-control-labelsinf o'chirildi. Agar siz ushbu sinfdan foydalangan bo'lsangiz, u gorizontal shakl maketlarida u bilan bog'liq kirish bilan .col-form-labelvertikal markazlashtirilgan sinfning dublikati edi.<label>
  • color-yiqXususiyatni o'z ichiga olgan aralashdan qiymatni qaytaruvchi funktsiyaga o'zgartirildi color, bu sizga uni istalgan CSS xususiyati uchun ishlatish imkonini beradi. Masalan, o'rniga color-yiq(#000)siz yozasiz color: color-yiq(#000);.

Eng muhimlar

  • pointer-eventsModallarda yangi foydalanish kiritildi. Tashqi sichqonchani maxsus bosish .modal-dialogbilan ishlov berish uchun hodisalar orqali o'tadi pointer-events: none(har qanday bosish uchun shunchaki tinglash imkonini beradi .modal-backdrop), so'ngra haqiqiy .modal-contentbilan unga qarshi turadi pointer-events: auto.

Xulosa

Bu erda v3 dan v4 ga o'tishda bilishni xohlaydigan katta chiptalar mavjud.

Brauzerni qo'llab-quvvatlash

  • IE8, IE9 va iOS 6 qo'llab-quvvatlashi to'xtatildi. v4 endi faqat IE10+ va iOS 7+. Ulardan biriga kerak bo'lgan saytlar uchun v3 dan foydalaning.
  • Android v5.0 Lollipop brauzeri va WebView uchun rasmiy yordam qo‘shildi. Android brauzeri va WebViewning oldingi versiyalari faqat norasmiy ravishda qo'llab-quvvatlanadi.

Global o'zgarishlar

  • Flexbox sukut bo'yicha yoqilgan. Umuman olganda, bu bizning komponentlarimiz bo'ylab floatlardan uzoqlashishni anglatadi.
  • Bizning manba CSS fayllarimiz uchun Less'dan Sass'ga o'tkazildi .
  • Bizning asosiy CSS birligimizga o'tdik px, remlekin piksellar hali ham media so'rovlari va tarmoq harakati uchun ishlatiladi, chunki qurilma ko'rish oynalari tur hajmiga ta'sir qilmaydi.
  • Global shrift o'lchami dan 14pxga oshdi 16px.
  • Beshinchi variantni qo'shish (pastki va pastdagi kichikroq qurilmalarga murojaat qilish) uchun panjara sathlari yangilandi va ushbu sinflardan infiks 576pxolib tashlandi . -xsMisol: .col-6.col-sm-4.col-md-3.
  • Alohida ixtiyoriy mavzuni SCSS o'zgaruvchilari orqali sozlanishi mumkin bo'lgan variantlar bilan almashtirildi (masalan, $enable-gradients: true).
  • Grunt o'rniga bir qator npm skriptlaridan foydalanish uchun tizim qayta tiklandi. package.jsonBarcha skriptlarni yoki mahalliy rivojlanish ehtiyojlari uchun bizning loyihamizni o'qing .
  • Bootstrap-dan javobsiz foydalanish endi qo'llab-quvvatlanmaydi.
  • Kengroq o'rnatish hujjatlari va moslashtirilgan tuzilmalar foydasiga onlayn Customizerdan voz kechdi.
  • Umumiy CSS xossa-qiymat juftliklari va chekka/to‘ldirish oralig‘i yorliqlari uchun o‘nlab yangi yordamchi dastur sinflari qo‘shildi.

Grid tizimi

  • Flexbox-ga ko'chirildi.
    • Grid aralashmalari va oldindan belgilangan sinflarda flexbox uchun qo'shimcha yordam.
    • Flexbox-ning bir qismi sifatida vertikal va gorizontal tekislash sinflarini qo'llab-quvvatlashni o'z ichiga oladi.
  • Yangilangan grid sinf nomlari va yangi panjara darajasi.
    • Batafsilroq nazorat qilish uchun quyida yangi smpanjara darajasi qo'shildi. 768pxEndi bizda xs, sm, md, lgva xl. Bu shuningdek, har bir daraja bir darajaga ko'tarilganligini anglatadi (shuning .col-md-6uchun v3 da endi .col-lg-6v4 da).
    • xsmin-width: 0grid sinflari o'zgartirildi, chunki ular o'rnatilgan piksel qiymatida emas, balki uslublarni qo'llashni boshlashlarini aniqroq ifodalash uchun infixni talab qilmaydi . Buning o'rniga, .col-xs-6hozir .col-6. Boshqa barcha panjara sathlari infixni talab qiladi (masalan, sm).
  • Yangilangan panjara o'lchamlari, miksinlar va o'zgaruvchilar.
    • Endi panjara oluklarida Sass xaritasi mavjud, shuning uchun siz har bir to'xtash nuqtasida ma'lum truba kengligini belgilashingiz mumkin.
    • make-col-readyTayyor mikserdan foydalanish uchun yangilangan panjara aralashmalari va alohida ustun o'lchamlarini make-colo'rnatish uchun a.flexmax-width
    • Yangi tarmoq darajasini hisobga olish va ustunlar 12maksimal kengligida teng boʻlinishini taʼminlash uchun tarmoq tizimi media soʻrovlarining toʻxtash nuqtalari va konteyner kengligi oʻzgartirildi.
    • To'r to'xtash nuqtalari va konteyner kengligi endi bir nechta alohida o'zgaruvchilar o'rniga Sass xaritalari ( $grid-breakpointsva ) orqali boshqariladi. $container-max-widthsBular @screen-*o'zgaruvchilarni to'liq almashtiradi va tarmoq sathlarini to'liq sozlash imkonini beradi.
    • Media so'rovlari ham o'zgardi. Ommaviy axborot vositalari so'rovlarini har safar bir xil qiymat bilan takrorlash o'rniga, endi bizda mavjud @include media-breakpoint-up/down/only. Endi yozish o'rniga yozishingiz @media (min-width: @screen-sm-min) { ... }mumkin @include media-breakpoint-up(sm) { ... }.

Komponentlar

  • Yangi hamma narsani qamrab oluvchi komponent kartalar uchun panellar, eskizlar va quduqlar tushirildi .
  • Glyphicons belgisi shrifti tushirildi. Agar sizga piktogramma kerak bo'lsa, ba'zi variantlar:
  • Affix jQuery plaginini o'chirib tashladi.
    • position: stickyBuning o'rniga foydalanishni tavsiya etamiz . Tafsilotlar va maxsus polifill tavsiyalari uchun HTML5 Iltimos yozuviga qarang . Takliflardan biri @supportsuni amalga oshirish uchun qoidadan foydalanishdir (masalan, @supports (position: sticky) { ... })
    • Agar siz qo'shimcha uslublar bo'lmagan qo'shimchalarni qo'llash positionuchun Affix dan foydalanayotgan bo'lsangiz, ko'p to'ldirishlar sizning foydalanish holatingizni qo'llab-quvvatlamasligi mumkin. Bunday foydalanish uchun variantlardan biri uchinchi tomon ScrollPos-Styler kutubxonasi.
  • Peyjer komponenti tushirildi, chunki u biroz moslashtirilgan tugmalar edi.
  • Haddan tashqari maxsus bolalar selektorlari o'rniga ko'proq o'rnatilmagan sinf selektorlaridan foydalanish uchun deyarli barcha komponentlar qayta tiklandi.

Komponent bo'yicha

Bu roʻyxat v3.xx va v4.0.0 oʻrtasidagi komponentlar boʻyicha asosiy oʻzgarishlarni taʼkidlaydi.

Qayta ishga tushirish

Bootstrap 4 uchun yangi narsa bu Reboot , yangi uslublar jadvali bo'lib, u o'zimizning biroz o'ylangan qayta o'rnatish uslublari bilan Normalize asosida qurilgan. Ushbu faylda paydo bo'ladigan selektorlar faqat elementlardan foydalanadi - bu erda sinflar yo'q. Bu modulliroq yondashuv uchun bizning qayta o'rnatish uslublarimizni komponent uslublarimizdan ajratib turadi. Bu o'z ichiga olgan eng muhim qayta o'rnatishlardan ba'zilari - box-sizing: border-boxo'zgartirish, ko'plab elementlarda birliklardan birliklarga o'tish , emhavola remuslublari va ko'plab shakl elementlarini qayta tiklash.

Tipografiya

  • Barcha .text-yordamchi dasturlar _utilities.scssfaylga ko'chirildi.
  • Utilitlar .page-headerorqali qo'llanilishi mumkinligi sababli tushirildi.
  • .dl-horizontaltushirilgan. Buning o'rniga, uning va bolalarda panjara ustunlari sinflaridan (yoki miksinlardan) foydalaning va foydalaning .row.<dl><dt><dd>
  • Qayta ishlab chiqilgan blok tirnoqlari, ularning uslublarini <blockquote>elementdan bitta sinfga o'tkazish, .blockquote. .blockquote-reverseMatn yordam dasturlari uchun modifikator tushirildi .
  • .list-inlineendi uning bolalar ro'yxati elementlariga yangi .list-inline-itemsinf qo'llanilishini talab qiladi.

Tasvirlar

  • .img-responsivega o'zgartirildi .img-fluid.
  • .img-roundedga oʻzgartirildi.rounded
  • .img-circlega oʻzgartirildi.rounded-circle

Jadvallar

  • Selektorning deyarli barcha nusxalari >olib tashlandi, ya'ni ichki o'rnatilgan jadvallar endi avtomatik ravishda ota-onalaridan uslublarni meros qilib oladi. Bu bizning selektorlarimiz va potentsial sozlashlarimizni sezilarli darajada soddalashtiradi.
  • Muvofiqlik .table-condenseduchun nomi o'zgartirildi .table-sm.
  • Yangi .table-inversevariant qo'shildi.
  • Jadval sarlavhasi modifikatorlari qo'shildi: .thead-defaultva .thead-inverse.
  • .table--prefiksga ega bo'lish uchun kontekstli sinflar nomi o'zgartirildi. Demak .active, .success, .warning, .dangerva .infoga .table-active, .table-success, .table-warningva .table-dangerga .table-info.

Shakllar

  • Ko'chirilgan element _reboot.scssfaylga tiklanadi.
  • .control-labelga o'zgartirildi .col-form-label.
  • O'zgartirilgan .input-lgva mos ravishda va .input-smuchun ..form-control-lg.form-control-sm
  • Oddiylik .form-group-*uchun darslarni to'xtatdi. .form-control-*Hozir o'rniga sinflardan foydalaning .
  • Blok darajasidagi yordam matni uchun tushirildi .help-blockva o'rniga qo'yildi. .form-textInline yordam matni va boshqa moslashuvchan variantlar uchun, kabi yordamchi dasturlar sinflaridan foydalaning .text-muted.
  • Yiqildi .radio-inlineva .checkbox-inline.
  • Konsolidatsiyalangan .checkboxva .radioturli sinflarga .form-check..form-check-*
  • Gorizontal shakllar kapital ta'mirlandi:
    • Sinf .form-horizontaltalabini bekor qildi.
    • .form-groupendi .rowvia mixin uslublarini qo'llamaydi, shuning .rowuchun endi gorizontal panjara tartiblari uchun talab qilinadi (masalan, <div class="form-group row">).
    • .col-form-labelYorliqlarni s bilan vertikal markazlashtirish uchun yangi sinf qo‘shildi .form-control.
    • .form-rowGrid sinflari bilan ixcham shakl maketlari uchun yangi qo'shildi (o'zingizni .rowa ga almashtiring .form-rowva o'ting).
  • Maxsus shakllarni qo'llab-quvvatlash qo'shildi (tasdiqlash qutilari, radiolar, tanlash va fayl kiritish uchun).
  • .has-error, .has-warningva sinflari CSS va pseudo-sinflar .has-successorqali HTML5 shakl tekshiruvi bilan almashtirildi .:invalid:valid
  • .form-control-staticga o'zgartirildi .form-control-plaintext.

Tugmalar

  • .btn-defaultga o'zgartirildi .btn-secondary.
  • .btn-xsSinfni butunlay tashlab yubordi, chunki .btn-smproportsional ravishda v3 dan ancha kichik.
  • jQuery plaginining holat tugmasi funksiyasi button.jsolib tashlandi. Bunga $().button(string)va $().button('reset')usullari kiradi. Buning o'rniga ozgina maxsus JavaScript-dan foydalanishni maslahat beramiz, bu esa o'zingiz xohlagan tarzda harakat qilishning afzalliklariga ega.
    • Plaginning boshqa xususiyatlari (tugmalarni belgilash katakchalari, radio tugmachalari, bitta o'tish tugmalari) v4 da saqlanib qolganligini unutmang.
  • Tugmalarni IE9+ qo'llab-quvvatlaydigan [disabled]qilib o'zgartiring . Biroq , hali ham zarur, chunki mahalliy o'chirilgan maydonlar to'plami hali ham IE11 da noto'g'ri .:disabled:disabledfieldset[disabled]

Tugmalar guruhi

  • Flexbox bilan komponentni qayta yozing.
  • O'chirildi .btn-group-justified. O'rnini bosuvchi <div class="btn-group d-flex" role="group"></div>elementlarni o'rash sifatida ishlatishingiz mumkin .w-100.
  • .btn-group-xsbutunlay olib tashlash berilgan sinf tashlab .btn-xs.
  • Tugma asboblar panelidagi tugma guruhlari orasidagi aniq intervallar olib tashlandi; hozir marja yordam dasturidan foydalaning.
  • Boshqa komponentlar bilan foydalanish uchun yaxshilangan hujjatlar.
  • Barcha komponentlar, modifikatorlar va boshqalar uchun ota-selektorlardan yagona sinflarga o'tkazildi.
  • Ochiladigan menyuga yuqoriga yoki pastga qaragan strelkalar biriktirilmagani uchun soddalashtirilgan ochiladigan uslublar.
  • <div>Ochiladigan menyular hozir s yoki s bilan tuzilishi mumkin <ul>.
  • Ochiladigan elementlarni oson, ichki o'rnatilgan qo'llab-quvvatlash uchun ochiladigan uslublar va belgilar qayta <a>tiklandi <button>.
  • .dividerga o'zgartirildi .dropdown-divider.
  • Ochiladigan elementlar endi talab qilinadi .dropdown-item.
  • Ochiladigan tugmalar endi aniq talab qilmaydi <span class="caret"></span>; Bu endi CSS-lar orqali avtomatik ravishda taqdim ::afteretiladi .dropdown-toggle.

Grid tizimi

  • , deb yangi 576pxpanjara toʻxtash nuqtasi qoʻshildi sm, yaʼni endi jami besh daraja ( xs, sm, md, lgva xl) mavjud.
  • Oddiyroq grid sinflari uchun .col-{breakpoint}-{modifier}-{size}javob beruvchi grid modifikatorlari sinflari nomi o‘zgartirildi ..{modifier}-{breakpoint}-{size}
  • Flexbox-ga asoslangan yangi sinflar uchun surish va tortish modifikatorlari sinflari o'chirildi order. Masalan, .col-8.push-4va o'rniga .col-4.pull-8siz .col-8.order-2va dan foydalanasiz .col-4.order-1.
  • Grid tizimi va komponentlar uchun flexbox yordam sinflari qo'shildi.

Guruhlarni ro'yxatga olish

  • Flexbox bilan komponentni qayta yozing.
  • Roʻyxat guruhi elementlarining havola va tugma versiyalarini uslublash a.list-group-itemuchun aniq sinf bilan almashtirildi ..list-group-item-action
  • Kartalar bilan foydalanish uchun qo'shilgan .list-group-flushsinf.
  • Flexbox bilan komponentni qayta yozing.
  • Flexbox-ga o'tishni hisobga olsak, sarlavhadagi o'chirish piktogrammalarining tekislanishi buzilgan bo'lishi mumkin, chunki biz endi floatlardan foydalanmayapmiz. Floed kontent birinchi o'rinda turadi, lekin flexbox bilan endi bunday emas. Tuzatish uchun modal sarlavhalardan keyin keladigan yopilish piktogrammalaringizni yangilang.
  • Variant ( remotetashqi tarkibni avtomatik ravishda yuklash va modalga kiritish uchun ishlatilishi mumkin) va tegishli loaded.bs.modalhodisa olib tashlandi. Buning o'rniga mijoz tomoni shablonini yoki ma'lumotlarni bog'lash tizimidan foydalanishni yoki jQuery.load ga o'zingiz qo'ng'iroq qilishni tavsiya etamiz.
  • Flexbox bilan komponentni qayta yozing.
  • >Ichki o'rnatilmagan sinflar orqali oddiyroq uslublash uchun deyarli barcha selektorlar tashlandi.
  • kabi HTML-ga xos selektorlar o'rniga biz s, s va s .nav > li > auchun alohida sinflardan foydalanamiz . Bu sizning HTML-ni yanada moslashuvchan qiladi va kengaytirilishini oshiradi..nav.nav-item.nav-link

Navbar tekislash, sezgirlik va moslashtirish uchun yaxshilangan qo'llab-quvvatlash bilan flexbox-da butunlay qayta yozilgan.

  • Navbarning sezgir xatti-harakatlari endi navbarni qaerga yopishni tanlashingiz kerak.navbar bo'lgan joy orqali sinfga qo'llaniladi. Ilgari bu kamroq o'zgaruvchan modifikatsiya edi va qayta kompilyatsiya qilishni talab qildi. .navbar-expand-{breakpoint}
  • .navbar-defaulthozir .navbar-lightbo'lsa-da .navbar-dark, bir xil bo'lib qolmoqda. Har bir navbarda ulardan biri talab qilinadi. Biroq, bu sinflar endi background-colors o'rnatmaydi; Buning o'rniga ular faqat ta'sir qiladi color.
  • Navbarlar endi fon deklaratsiyasini talab qiladi. Bizning fon yordam dasturlarimizdan tanlang ( ) yoki aqldan ozish uchun.bg-* yuqoridagi yorug'lik/teskari sinflar bilan o'zingiznikini o'rnating .
  • Flexbox uslublarini hisobga olgan holda, navbarlar endi hizalanishni osonlashtirish uchun flexbox yordam dasturlaridan foydalanishi mumkin.
  • .navbar-togglehozir .navbar-togglerva turli uslublar va ichki belgilarga ega (ko'pi bilan uchta <span>s).
  • Darsni .navbar-formbutunlay tark etdi. Bu endi kerak emas; Buning o'rniga, .form-inlinekerak bo'lganda margin yordam dasturlarini ishlating va qo'llang.
  • Navbarlar endi o'z ichiga olmaydi margin-bottomyoki border-radiussukut bo'yicha. Zarur bo'lganda yordamchi dasturlardan foydalaning.
  • Navbarlarni o'z ichiga olgan barcha misollar yangi belgilarni o'z ichiga olgan holda yangilandi.

Sahifalar

  • Flexbox bilan komponentni qayta yozing.
  • Endi s ning avlodlarida aniq sinflar ( .page-item, ) talab qilinadi.page-link.pagination
  • Komponentni butunlay tashlab qo'ydi, .pagerchunki u moslashtirilgan kontur tugmalaridan biroz ko'proq edi.
  • Endi s .breadcrumb-itemning avlodlarida aniq sinf, , talab qilinadi.breadcrumb

Yorliqlar va nishonlar

  • Konsolidatsiyalangan .labelva elementdan .badgeajratish <label>va tegishli komponentlarni soddalashtirish.
  • .badge-pillYumaloq "hap" ko'rinishi uchun modifikator sifatida qo'shilgan .
  • Roʻyxat guruhlari va boshqa komponentlarda nishonlar endi avtomatik ravishda oʻrnatilmaydi. Buning uchun endi utility sinflari talab qilinadi.
  • .badge-defaultolib tashlangan va .badge-secondaryboshqa joylarda ishlatiladigan komponent o'zgartiruvchi sinflarga mos kelish uchun qo'shilgan.

Panellar, eskizlar va quduqlar

Yangi karta komponenti uchun butunlay tushib ketdi.

Panellar

  • .panelga .card, endi flexbox bilan qurilgan.
  • .panel-defaultolib tashlandi va almashtirilmaydi.
  • .panel-groupolib tashlandi va almashtirilmaydi. .card-groupalmashtirish emas, balki boshqacha.
  • .panel-headinguchun.card-header
  • .panel-titlega .card-title. Istalgan ko'rinishga qarab siz sarlavha elementlari yoki sinflari (masalan <h3>, , .h3) yoki qalin elementlar yoki sinflardan (masalan <strong>, <b>, , .font-weight-bold) foydalanishni ham xohlashingiz mumkin. E'tibor bering, .card-title, xuddi shunday nomlangan bo'lsa-da, dan boshqacha ko'rinish hosil qiladi .panel-title.
  • .panel-bodyuchun.card-body
  • .panel-footeruchun.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, va , .panel-dangeruchun olib tashlandi va Sass xaritamizdan yaratilgan yordamchi dasturlar ..bg-.text-.border$theme-colors

Taraqqiyot

  • Kontekstli .progress-bar-*sinflar .bg-*yordamchi dasturlar bilan almashtirildi. Masalan, class="progress-bar progress-bar-danger"bo'ladi class="progress-bar bg-danger".
  • .activeAnimatsiyalangan taraqqiyot satrlari bilan almashtirildi .progress-bar-animated.
  • Dizayn va uslubni soddalashtirish uchun butun komponent qayta tiklandi. Bizda bekor qilish uchun kamroq uslublar, yangi ko'rsatkichlar va yangi piktogramma mavjud.
  • Barcha CSS-lar o'chirildi va nomi o'zgartirildi, har bir sinfga prefiks qo'shilishi ta'minlandi .carousel-.
    • Karusel elementlari uchun , .next, .prev, .leftva .righthozir .carousel-item-next, .carousel-item-prev, .carousel-item-left, va .carousel-item-right.
    • .itemhozir ham .carousel-item.
    • Oldingi/keyingi boshqaruv elementlari uchun .carousel-control.rightva .carousel-control.lefthozir .carousel-control-nextva .carousel-control-prev, ya'ni ular endi ma'lum bir asosiy sinfni talab qilmaydi.
  • Barcha sezgir uslublar olib tashlandi, yordamchi dasturlar (masalan, ma'lum ko'rish oynalarida taglavhalarni ko'rsatish) va kerak bo'lganda moslashtirilgan uslublarni kechiktirdi.
  • Karusel elementlaridagi tasvirlar uchun o'chirilgan tasvirni bekor qilish, utilitalardan keyin.
  • Yangi belgilar va uslublarni kiritish uchun Carousel misolini o'zgartirdi.

Jadvallar

  • Uslubli ichki jadvallar uchun yordam olib tashlandi. Barcha jadval uslublari endi oddiy selektorlar uchun v4 da meros qilib olingan.
  • Teskari jadval varianti qo'shildi.

Utilitalar

  • Displey, yashirin va boshqalar:
    • Displey yordam dasturlarini sezgir qilib qo'ydi (masalan, .d-noneva d-{sm,md,lg,xl}-none).
    • .hidden-*Yangi displey yordam dasturlari uchun yordamchi dasturlarning asosiy qismi tushirildi . Masalan, o'rniga dan .hidden-sm-upfoydalaning .d-sm-none. Displey .hidden-printyordam dasturini nomlash sxemasidan foydalanish uchun yordamchi dasturlar nomi o'zgartirildi. Qo'shimcha ma'lumotni ushbu sahifaning " Responsive utilities " bo'limida topishingiz mumkin.
    • .float-{sm,md,lg,xl}-{left,right,none}Ta'sirchan suzuvchilar uchun sinflar qo'shildi va o'chirildi .pull-left, .pull-rightchunki ular .float-leftva uchun ortiqcha .float-right.
  • Turi:
    • Matnni hizalash sinflarimizga sezgir o'zgarishlar qo'shildi .text-{sm,md,lg,xl}-{left,center,right}.
  • Hizalama va masofa:
  • Clearfix brauzerning eski versiyalarini qo'llab-quvvatlashni to'xtatish uchun yangilandi.

Sotuvchi prefiksi aralashmasi

v3.2.0 da eskirgan Bootstrap 3 sotuvchisi prefiksi miksinlari Bootstrap 4 da olib tashlandi. Biz Autoprefixer dan foydalanayotganimiz uchun ular endi kerak emas.

Quyidagi aralashmalar olib tashlandi: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, , opacity, , , perspective, , perspective-origin, , , rotate, , rotateX, , rotateY, , scale, , scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Hujjatlar

Hujjatlarimiz ham keng ko'lamda yangilandi. Mana pastroq:

  • Biz hali ham Jekyll-dan foydalanmoqdamiz, ammo bizda plaginlar mavjud:
    • bugify.rbbrauzer xatolar sahifamizdagi yozuvlarni samarali ro'yxatga olish uchun ishlatiladi .
    • example.rbstandart highlight.rbplaginning maxsus vilkasi bo'lib, misol-kod bilan ishlashni osonlashtiradi.
    • callout.rbshunga o'xshash maxsus vilka, lekin bizning maxsus hujjatlar ko'rsatmalarimiz uchun mo'ljallangan.
    • jekyll-toc bizning tarkibimizni yaratish uchun ishlatiladi.
  • Oson tahrirlash uchun barcha hujjatlar mazmuni Markdown-da (HTML o'rniga) qayta yozilgan.
  • Sahifalar soddaroq tarkib va ​​qulayroq ierarxiya uchun qayta tashkil etildi.
  • Bootstrap oʻzgaruvchilari, miksinlari va boshqalardan toʻliq foydalanish uchun oddiy CSS-dan SCSS-ga oʻtdik.

Javob beruvchi yordamchi dasturlar

Barcha @screen-o'zgaruvchilar v4.0.0 da o'chirildi. Buning oʻrniga media-breakpoint-up(), media-breakpoint-down(), yoki media-breakpoint-only()Sass mikslari yoki $grid-breakpointsSass xaritasidan foydalaning.

Bizning sezgir yordamchi dasturlarimiz asosan aniq yordamchi dasturlar foydasiga olib tashlandi display.

  • va sinflari jQuery .hiddenva usullarga zid bo'lgani uchun olib .showtashlandi . Buning o'rniga, atributni almashtirib ko'ring yoki va kabi inline uslublaridan foydalaning .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Nomi o'zgartirilgan chop etish yordam dasturlari bundan mustasno, barcha .hidden-sinflar olib tashlandi.
    • v3 dan olib tashlandi:.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 alfa versiyasidan olib tashlandi:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Chop etish uchun yordamchi dasturlar endi .hidden-yoki .visible-bilan emas, balki bilan boshlanadi .d-print-.
    • Eski ismlar: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Yangi sinflar: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Aniq sinflarni ishlatish o'rniga .visible-*, siz elementni ekran o'lchamida yashirmasdan ko'rinadigan qilib qo'yasiz. Elementni faqat ma'lum bir ekran o'lchamlari oralig'ida ko'rsatish uchun bitta sinfni bitta .d-*-nonesinf bilan birlashtira olasiz (masalan , elementni faqat o'rta va katta qurilmalarda ko'rsatadi)..d-*-block.d-none.d-md-block.d-xl-none

Esda tutingki, v4 da grid to'xtash nuqtalariga kiritilgan o'zgartirishlar bir xil natijalarga erishish uchun bir to'xtash nuqtasiga kattaroq o'tish kerakligini anglatadi. Yangi sezgir yordamchi dastur sinflari elementning ko'rinishini ko'rish oynasi o'lchamlarining bir-biriga ulashgan diapazoni sifatida ifodalab bo'lmaydigan kamroq tarqalgan holatlarni joylashtirishga harakat qilmaydi; Buning o'rniga siz bunday hollarda maxsus CSS dan foydalanishingiz kerak bo'ladi.