Source

Hijira zuwa v4

Bootstrap 4 shine babban sake rubutawa gabaɗayan aikin. An taƙaita manyan canje-canjen da aka fi sani a ƙasa, tare da ƙarin takamaiman canje-canje ga abubuwan da suka dace.

Canje-canje masu tsayayye

Motsawa daga Beta 3 zuwa barga v4.0 sakinmu, babu canje-canje masu karyawa, amma akwai wasu manyan canje-canje.

Bugawa

  • Kafaffen kayan aikin buga bugu. A baya can, yin amfani da .d-print-*aji ba zato ba tsammani zai ƙetare kowane .d-*aji. Yanzu, sun dace da sauran kayan aikin mu na nuni kuma suna aiki ne kawai ga waccan kafofin watsa labarai ( @media print).

  • Faɗaɗɗen kayan aikin nunin bugu don dacewa da sauran abubuwan amfani. Beta 3 zuwa sama sun sami block, inline-block, inline, da none. Stable v4 ƙara flex, inline-flex, table, table-row, da table-cell.

  • Kafaffen samfotin bugu yana nunawa a cikin masu bincike tare da sabbin nau'ikan bugu waɗanda ke ƙayyade @page size.

Beta 3 yana canzawa

Yayin da Beta 2 ya ga mafi yawan sauye-sauyen ɓarkewar mu yayin lokacin beta, amma har yanzu muna da ƴan kaɗan waɗanda ke buƙatar magance su a cikin sakin Beta 3. Waɗannan canje-canjen suna aiki idan kuna ɗaukaka zuwa Beta 3 daga Beta 2 ko kowane tsohuwar sigar Bootstrap.

Daban-daban

  • An cire $thumbnail-transitioncanjin da ba a yi amfani da shi ba. Ba mu canza wani abu ba, don haka karin lamba ne kawai.
  • Kunshin npm baya haɗa da kowane fayiloli banda tushen mu da fayilolin dist; idan kun dogara da su kuma kuna gudanar da rubutun mu ta node_modulesbabban fayil, ya kamata ku daidaita aikinku.

Siffofin

  • Sake rubuta duka al'ada da tsoffin akwatunan rajistan shiga da rediyo. Yanzu, duka biyun suna da tsarin HTML madaidaici (na waje <div>tare da ɗan'uwa <input>da <label>) da kuma salon shimfidawa iri ɗaya (tsararrun tsoho, layi tare da aji mai gyara). Wannan yana ba mu damar tsara alamar ta dogara da yanayin shigarwar, sauƙaƙe tallafi don disabledsifa (a da yana buƙatar aji na iyaye) da mafi kyawun goyan bayan ingantaccen sigar mu.

    A matsayin ɓangare na wannan, mun canza CSS don sarrafa background-images da yawa akan akwatunan rajistan tsari na al'ada da rediyo. A baya can, ɓangaren da aka cire yanzu .custom-control-indicatoryana da launi na bango, gradient, da alamar SVG. Keɓance gradient na bango yana nufin maye gurbin duk waɗannan duk lokacin da kuke buƙatar canza guda ɗaya kawai. Yanzu, muna da .custom-control-label::beforedon cikawa da gradient kuma muna .custom-control-label::aftersarrafa gunkin.

    Don yin rajistan layi na al'ada, ƙara .custom-control-inline.

  • Zaɓin da aka sabunta don ƙungiyoyin maɓalli na tushen shigarwa. Maimakon [data-toggle="buttons"] { }salo da hali, muna amfani da datasifa don halayen JS kawai kuma muna dogara da sabon .btn-group-toggleaji don salo.

  • An cire .col-form-legenda cikin ni'imar inganta dan kadan .col-form-label. Wannan hanyar .col-form-label-smkuma .col-form-label-lgana iya amfani dashi akan <legend>abubuwa cikin sauƙi.

  • Abubuwan shigar da fayil na al'ada sun sami canji zuwa canjin $custom-file-textSass ɗin su. Ba taswirar Sass ce mai gida ba kuma a yanzu tana iko da kirtani ɗaya kawai - Browsemaɓallin kamar yadda yanzu shine kawai sinadari mai ƙima da aka samar daga Sass ɗin mu. Rubutun Choose fileyanzu ya fito daga .custom-file-label.

Ƙungiyoyin shigarwa

  • Addons na rukunin shigar yanzu sun keɓanta da wurin sanya su dangane da shigarwar. Mun sauke .input-group-addonkuma .input-group-btndon sababbin azuzuwan biyu, .input-group-prependda .input-group-append. Dole ne ku yi amfani da append ko riga-kafi a bayyane yanzu, tare da sauƙaƙa yawancin CSS ɗin mu. A cikin abin ƙara ko riga-kafi, sanya maɓallan ku kamar yadda zasu wanzu a ko'ina, amma kunsa rubutu a cikin .input-group-text.

  • Salon tabbatarwa yanzu ana tallafawa, kamar yadda ake samun bayanai da yawa (kodayake za ku iya inganta shigarwa ɗaya kawai a kowace ƙungiya).

  • Dole ne azuzuwan girman su kasance akan iyaye .input-groupba nau'ikan nau'ikan nau'ikan nau'ikan nau'ikan iri ɗaya ba.

Beta 2 yana canzawa

Yayin da muke cikin beta, muna da nufin samun sauye-sauye masu karye. Koyaya, abubuwa ba koyaushe suke tafiya kamar yadda aka tsara ba. A ƙasa akwai canje-canjen da za a ɗauka a hankali yayin ƙaura daga Beta 1 zuwa Beta 2.

Karyewa

  • Cire $badge-colorm da kuma amfani da shi akan .badge. Muna amfani da aikin bambancin launi don zaɓar colordangane da background-color, don haka mai canzawa ba dole ba ne.
  • Sake sunan grayscale()aikin don gujewa karya rikici tare da tacewar gray()CSS .grayscale
  • Sake suna .table-inverse, .thead-inverse, da .thead-defaultzuwa .*-darkda .*-light, wanda ya dace da tsarin launi ɗin mu da aka yi amfani da shi a wani wuri.
  • Tebur masu amsawa yanzu suna haifar da azuzuwan ga kowane madaidaicin grid. Wannan ya karye daga Beta 1 a cikin abin da .table-responsivekuke amfani da shi ya fi kama da .table-responsive-md. Za ka iya yanzu amfani .table-responsiveko .table-responsive-{sm,md,lg,xl}yadda ake bukata.
  • Goyan bayan Bower da aka jefar kamar yadda aka soke manajan kunshin don madadin (misali, Yarn ko npm). Duba Bower/Bower#2298 don cikakkun bayanai.
  • Bootstrap har yanzu yana buƙatar jQuery 1.9.1 ko sama da haka, amma ana ba ku shawarar amfani da sigar 3.x tunda masu binciken v3.x suna tallafawa Bootstrap tare da v3.x yana da wasu gyare-gyaren tsaro.
  • An cire .form-control-labelaji mara amfani. Idan kun yi amfani da wannan ajin, kwafi ne na .col-form-labelajin wanda ke tsaye a tsakiya <label>tare da abin da ke da alaƙa da shi a cikin shimfidar tsari na kwance.
  • Canza color-yiqdaga mahaɗin da ya haɗa da colorkayan zuwa aikin da ke dawo da ƙima, yana ba ku damar amfani da ita don kowace kadarar CSS. Misali, maimakon color-yiq(#000), zaku rubuta color: color-yiq(#000);.

Karin bayanai

  • An ƙaddamar da sabon pointer-eventsamfani akan modal. Na waje .modal-dialogyana wucewa ta abubuwan da suka faru tare pointer-events: noneda dannawa na al'ada (yana ba da damar sauraron kawai .modal-backdropdon kowane dannawa), sa'an nan kuma ya ƙi shi don ainihin .modal-contenttare da pointer-events: auto.

Takaitawa

Anan akwai manyan abubuwan tikitin da zaku so ku sani lokacin ƙaura daga v3 zuwa v4.

Tallafin mai lilo

  • An sauke tallafin IE8, IE9, da iOS 6. v4 yanzu shine kawai IE10+ da iOS 7+. Don shafukan da ke buƙatar ɗayan waɗannan, yi amfani da v3.
  • Ƙara goyan bayan hukuma don Android v5.0 Lollipop's Browser da WebView. Sigar farko na Android Browser da WebView suna kasancewa kawai ba bisa ka'ida ba.

Canje-canje na duniya

  • An kunna Flexbox ta tsohuwa. Gabaɗaya wannan yana nufin ƙaura daga yawo da ƙari a cikin abubuwan da muka haɗa.
  • Canja daga Ƙananan zuwa Sass don fayilolin CSS na tushen mu.
  • An canza shi daga pxzuwa remmatsayin rukunin CSS ɗin mu na farko, kodayake har yanzu ana amfani da pixels don tambayoyin kafofin watsa labarai da halayen grid kamar yadda girman nau'in bai shafi wuraren kallon na'urar ba.
  • Girman font na duniya ya ƙaru daga 14pxzuwa 16px.
  • An sabunta matakan grid don ƙara zaɓi na biyar (yana magana da ƙananan na'urori a 576pxda ƙasa) da kuma cire -xsinfix daga waɗannan azuzuwan. Misali .col-6.col-sm-4.col-md-3:.
  • Maye gurbin keɓan jigon zaɓi na zaɓi tare da zaɓuɓɓuka masu daidaitawa ta masu canjin SCSS (misali, $enable-gradients: true).
  • Gina tsarin da aka sabunta don amfani da jerin rubutun npm maimakon Grunt. Dubi package.jsonduk rubutun, ko karatun aikin mu don buƙatun ci gaban gida.
  • Ba a iya amfani da Bootstrap mara amsawa.
  • An jefar da Mai Haɓakawa kan layi don ƙarin fa'idar saiti mai fa'ida da gine-gine na musamman.
  • Ƙara sabbin azuzuwan masu amfani don nau'i-nau'i na ƙimar kadarorin CSS gama gari da gajerun hanyoyin tazarar tazara.

Tsarin Grid

  • An matsa zuwa flexbox.
    • Ƙara tallafi don flexbox a cikin grid mixins da darussa da aka riga aka ayyana.
    • A matsayin wani ɓangare na flexbox, an haɗa da tallafi don azuzuwan daidaitawa a tsaye da a kwance.
  • Sunayen ajin grid da aka sabunta da sabon matakin grid.
    • An ƙara sabon smmatakin grid a ƙasa 768pxdon ƙarin iko mai girma. Yanzu muna da xs, sm, md, lgda xl. Wannan kuma yana nufin kowane matakin ya tashi sama da matakin ɗaya (don haka .col-md-6a cikin v3 yanzu yana .col-lg-6cikin v4).
    • xsAn canza azuzuwan grid don kada a buƙaci infix don ƙarin wakilcin daidai cewa sun fara amfani da salo a min-width: 0kuma ba saita ƙimar pixel ba. Maimakon .col-xs-6, yanzu .col-6. Duk sauran matakan grid suna buƙatar infix (misali, sm).
  • Sabunta girman grid, mixins, da masu canji.
    • Gutters grid yanzu suna da taswirar Sass don haka zaku iya tantance takamaiman faɗuwar gutter a kowane wurin karya.
    • Abubuwan haɗin grid da aka sabunta don amfani da make-col-readymahaɗin prep da kuma make-coldon saita da flexkuma max-widthdon girman shafi ɗaya.
    • Canja tsarin grid na kafofin watsa labarai na neman karyewa da faɗin kwantena don lissafin sabon matakin grid da tabbatar da ginshiƙai suna rarraba daidai gwargwado ta 12iyakar girman girman su.
    • Yanzu ana sarrafa wuraren karya grid da faɗin kwantena ta taswirar Sass ( $grid-breakpointsda $container-max-widths) maimakon ɗimbin ɗimbin masu canji. Waɗannan suna maye gurbin masu @screen-*canji gabaɗaya kuma suna ba ku damar keɓance matakan grid gabaɗaya.
    • Tambayoyin kafofin watsa labarai kuma sun canza. Maimakon maimaita sanarwar tambayar kafofin watsa labarai da ƙimar iri ɗaya kowane lokaci, yanzu muna da @include media-breakpoint-up/down/only. Yanzu, maimakon rubuta @media (min-width: @screen-sm-min) { ... }, za ku iya rubuta @include media-breakpoint-up(sm) { ... }.

Abubuwan da aka gyara

  • Fale-falen fale-falen, babban hoto, da rijiyoyi don sabon abin da ya ƙunshi duka, katunan .
  • An jefar da font ɗin Glyphicons. Idan kuna buƙatar gumaka, wasu zaɓuɓɓuka sune:
  • An sauke Affix jQuery plugin.
    • Muna ba da shawarar yin amfani da position: stickymaimakon. Dubi HTML5 Shiga don cikakkun bayanai da takamaiman shawarwarin cikawa. Shawara ɗaya ita ce a yi amfani da @supportsƙa'ida don aiwatar da ita (misali, @supports (position: sticky) { ... })/
    • Idan kuna amfani da Affix don amfani da ƙarin, nau'ikan da ba positionsu da kyau, polyfills ɗin bazai goyi bayan shari'ar amfanin ku ba. Ɗayan zaɓi don irin wannan amfani shine ɗakin karatu na ScrollPos-Styler na ɓangare na uku .
  • An jefar da bangaren pager saboda ainihin maɓallan da aka keɓance shi.
  • An sake fasalin kusan duk abubuwan da aka gyara don amfani da ƙarin masu zaɓen ajin da ba a saka su ba maimakon ƙayyadaddun zaɓaɓɓun yara.

Ta bangaren

Wannan jeri yana nuna maɓalli na canje-canje ta hanyar sashi tsakanin v3.xx da v4.0.0.

Sake yi

Sabon zuwa Bootstrap 4 shine Sake yi, sabon salo wanda ke ginawa akan Normalize tare da namu ɗan ra'ayi sake saitin salo. Masu zaɓin da ke bayyana a cikin wannan fayil ɗin suna amfani da abubuwa kawai-babu azuzuwan nan. Wannan ya keɓance salon sake saitin mu daga tsarin sassan mu don ingantaccen tsari. Wasu mahimman sake saiti waɗanda wannan ya haɗa shine box-sizing: border-boxcanji, motsawa daga emzuwa remraka'a akan abubuwa da yawa, salon haɗin kai, da sake saitin sassa da yawa.

Rubutun rubutu

  • An matsar da duk .text-abubuwan amfani zuwa _utilities.scssfayil ɗin.
  • Sauke .page-headerkamar yadda za a iya amfani da salon sa ta hanyar kayan aiki.
  • .dl-horizontalan jefar da shi. Madadin haka, yi amfani .rowda <dl>azuzuwan ginshiƙan grid (ko mixins) akan sa <dt>da <dd>yara.
  • Abubuwan da aka sake tsarawa, suna motsa salon su daga <blockquote>kashi zuwa aji ɗaya, .blockquote. An jefar da mai .blockquote-reversegyara don kayan aikin rubutu.
  • .list-inlineYanzu yana buƙatar 'ya'yanta su jera abubuwa su sami sabon .list-inline-itemaji a yi amfani da su.

Hotuna

  • An canza suna .img-responsivezuwa .img-fluid.
  • An canza suna .img-roundedzuwa.rounded
  • An canza suna .img-circlezuwa.rounded-circle

Tables

  • Kusan duk abubuwan da aka >zaɓa na an cire su, ma'ana tebur na gida yanzu za su gaji salo daga iyayensu ta atomatik. Wannan yana sauƙaƙa da masu zaɓenmu da yuwuwar gyare-gyare.
  • An canza suna .table-condensedzuwa .table-smdon daidaito.
  • An ƙara sabon .table-inversezaɓi.
  • Ƙara masu gyara kan tebur: .thead-defaultda .thead-inverse.
  • Sake suna azuzuwan mahallin don samun .table-prefix. Don haka .active, .success, .warning, da .dangerkuma , , , da ..info.table-active.table-success.table-warning.table-danger.table-info

Siffofin

  • Matsar da kashi ya sake saitawa zuwa _reboot.scssfayil ɗin.
  • An canza suna .control-labelzuwa .col-form-label.
  • Sake suna .input-lgkuma .input-smzuwa .form-control-lgda .form-control-sm, bi da bi.
  • An sauke darasi .form-group-*don sauƙi. Yi amfani .form-control-*da azuzuwan maimakon yanzu.
  • Zuba .help-blockda maye gurbin shi da .form-textdon rubutun taimako-matakin toshe. Don rubutun taimako na kan layi da sauran zaɓuɓɓuka masu sassauƙa, yi amfani da azuzuwan masu amfani kamar .text-muted.
  • An sauke .radio-inlinekuma .checkbox-inline.
  • Ƙarfafa .checkboxkuma .radiocikin .form-checkda kuma azuzuwan daban-daban .form-check-*.
  • Siffofin kwance sun yi sama da fadi:
    • Ya sauke .form-horizontalbuƙatar aji.
    • .form-groupbaya amfani da salo daga .rowhanyar mixin, don haka .rowana buƙatar yanzu don shimfidar grid a kwance (misali, <div class="form-group row">).
    • Ƙara sabon .col-form-labelaji zuwa lakabin tsakiya a tsaye tare da .form-controls.
    • An ƙara sabo .form-rowdon ƙaƙƙarfan shimfidu na tsari tare da azuzuwan grid (musanya ku .rowdon a .form-rowtafi).
  • Ƙara goyon bayan fom na al'ada (don akwatunan rajista, rediyo, zaɓi, da shigar da fayil).
  • Maye gurbin .has-error, .has-warning, da .has-successazuzuwan tare da ingantaccen tsari na HTML5 ta hanyar CSS's :invalidda :validazuzuwan karya.
  • An canza suna .form-control-staticzuwa .form-control-plaintext.

Buttons

  • An canza suna .btn-defaultzuwa .btn-secondary.
  • Ya sauke .btn-xsaji gaba ɗaya kamar yadda .btn-smya fi ƙanƙanta fiye da v3's.
  • An jefar da fasalin maɓallin maɓallibutton.js na jQuery plugin. Wannan ya haɗa da $().button(string)da $().button('reset')hanyoyin. Muna ba da shawara ta yin amfani da ɗan ƙaramin JavaScript na al'ada maimakon, wanda zai sami fa'idar yin daidai yadda kuke so.
    • Lura cewa sauran fasalulluka na plugin ɗin (akwatunan rajistan maɓalli, maɓalli na rediyo, maɓallai guda ɗaya) an kiyaye su a cikin v4.
  • Canja maɓallan' [disabled]zuwa :disabledkamar yadda IE9+ ke tallafawa :disabled. Duk da haka fieldset[disabled]har yanzu yana da mahimmanci saboda nakasassun filayen filayen har yanzu suna da wahala a cikin IE11 .

Ƙungiyar maɓalli

  • Sake rubuta bangaren tare da flexbox.
  • An cire .btn-group-justified. A matsayin madadin za ku iya amfani <div class="btn-group d-flex" role="group"></div>da shi azaman abin rufewa a kusa da abubuwa tare da .w-100.
  • Ya sauke .btn-group-xsclass gabad'aya an cire .btn-xs.
  • An cire tazara ta zahiri tsakanin ƙungiyoyin maɓalli a cikin maɓallan kayan aiki; yi amfani da kayan aikin gefe yanzu.
  • Ingantattun takaddun don amfani tare da sauran abubuwan haɗin gwiwa.
  • Canja daga masu zaɓin iyaye zuwa azuzuwan guda ɗaya don duk abubuwan haɗin gwiwa, masu gyara, da sauransu.
  • Sauƙaƙen salon zazzagewa don daina jigilar kibau masu fuskantar sama ko ƙasa haɗe zuwa menu na zazzagewa.
  • Za'a iya gina abubuwan saukarwa da <div>s ko <ul>s yanzu.
  • Sake gina tsarin zazzagewa da alama don samar da sauƙi, ginanniyar goyan baya ga abubuwan zaɓuka masu tushe <a>.<button>
  • An canza suna .dividerzuwa .dropdown-divider.
  • Abubuwan saukewa yanzu suna buƙatar .dropdown-item.
  • Canjin saukarwa baya buƙatar bayyane <span class="caret"></span>; Ana bayar da wannan ta atomatik ta hanyar CSS's ::afteron .dropdown-toggle.

Tsarin Grid

  • Ƙara sabon 576pxmadaidaicin grid kamar sm, ma'ana yanzu akwai jimillar matakai biyar ( xs, sm, md, lg, da xl).
  • An canza suna azuzuwan masu gyara grid daga .col-{breakpoint}-{modifier}-{size}zuwa .{modifier}-{breakpoint}-{size}don azuzuwan grid masu sauƙi.
  • An jefar da turawa da ja azuzuwan masu gyara don sabbin azuzuwan da ke da karfin flexbox order. Misali, maimakon .col-8.push-4da .col-4.pull-8, za ku yi amfani .col-8.order-2da .col-4.order-1.
  • Ƙara azuzuwan masu amfani flexbox don tsarin grid da abubuwan haɗin gwiwa.

Jerin ƙungiyoyi

  • Sake rubuta bangaren tare da flexbox.
  • Maye gurbin a.list-group-itemshi da fayyace aji, .list-group-item-action, don hanyar haɗin salo da nau'ikan maɓallin jerin abubuwan ƙungiyar.
  • Ƙara .list-group-flushaji don amfani da katunan.
  • Sake rubuta bangaren tare da flexbox.
  • Idan aka ba da matsawa zuwa flexbox, daidaitawar gumakan korar a cikin taken yana yiwuwa ya karye saboda ba ma amfani da masu iyo. Abun ciki mai iyo yana zuwa da farko, amma tare da flexbox wannan ba haka bane. Sabunta gumakan korar ku don zuwa bayan taken yanayi don gyarawa.
  • Zaɓin remote(wanda za'a iya amfani dashi don lodawa ta atomatik da shigar da abun ciki na waje a cikin tsari) kuma loaded.bs.modalan cire abin da ya dace. Muna ba da shawarar maimakon yin amfani da samfuri na gefen abokin ciniki ko tsarin daurin bayanai, ko kiran jQuery.load da kanku.
  • Sake rubuta bangaren tare da flexbox.
  • An jefar da kusan duk >masu zaɓe don salo mafi sauƙi ta hanyar azuzuwan da ba a saka su ba.
  • Madadin takamaiman masu zaɓin HTML kamar .nav > li > a, muna amfani da azuzuwan daban don .navs, .nav-items, da .nav-links. Wannan yana sa HTML ɗinku ya zama mafi sassauƙa yayin kawo ƙarin haɓakawa.

An sake rubuta navbar gaba ɗaya a cikin flexbox tare da ingantaccen tallafi don daidaitawa, amsawa, da keɓancewa.

  • Ana amfani da halayen navbar masu amsawa yanzu zuwa .navbaraji ta hanyar da ake buƙata .navbar-expand-{breakpoint} inda kuka zaɓi inda zaku rushe navbar. A baya wannan ya kasance Karamin gyare-gyare kuma ana buƙatar sake tarawa.
  • .navbar-defaultyana yanzu .navbar-light, ko da yake .navbar-darkya kasance iri ɗaya. Ana buƙatar ɗaya daga cikin waɗannan akan kowace navbar. Koyaya, waɗannan azuzuwan sun daina saita background-colors; a maimakon haka suna tasiri kawai color.
  • Navbars yanzu suna buƙatar bayanin baya na wani nau'in. Zaɓi daga kayan aikin mu na baya ( .bg-*) ko saita naku tare da azuzuwan haske/bangaren da ke sama don ƙera mahaukaci .
  • Idan aka ba da salon flexbox, navbars na iya amfani da kayan aikin flexbox don sauƙin daidaitawa.
  • .navbar-toggleyana yanzu .navbar-togglerkuma yana da salo daban-daban da alamar ciki (babu sauran <span>s uku).
  • Ya sauke .navbar-formajin gaba daya. Ba lallai ba ne; a maimakon haka, kawai amfani .form-inlineda amfani da abubuwan amfani da gefe kamar yadda ya cancanta.
  • Navbars ba ya haɗa margin-bottomko border-radiusta tsohuwa. Yi amfani da kayan aiki kamar yadda ya cancanta.
  • Duk misalan da ke nuna navbars an sabunta su don haɗa da sabon sa alama.

Pagination

  • Sake rubuta bangaren tare da flexbox.
  • Ana buƙatar azuzuwan bayyane ( .page-item, .page-link) akan zuriyar .paginations
  • Ya jefar da .pagerbangaren gaba ɗaya saboda bai fi maɓallan shaci da aka keɓance ba.
  • A halin yanzu ana buƙatar aji bayyananne .breadcrumb-itemakan zuriyar .breadcrumbs

Lakabi da baji

  • Ƙarfafa .labelkuma .badgedon warwarewa daga <label>kashi da sauƙaƙa abubuwan da ke da alaƙa.
  • An ƙara .badge-pillazaman mai gyara don kallon “kwayoyin cuta” mai zagaye.
  • Ba a daina yawo baji ta atomatik a cikin ƙungiyoyin jeri da sauran abubuwan haɗin gwiwa. Yanzu ana buƙatar azuzuwan amfani don hakan.
  • .badge-defaultan jefar da shi kuma .badge-secondaryan ƙara shi zuwa azuzuwan gyara abubuwan da aka yi amfani da su a wani wuri.

Panels, thumbnails, da rijiyoyi

An sauke gaba ɗaya don sabon ɓangaren katin.

Panels

  • .panelzuwa .card, yanzu an gina shi da flexbox.
  • .panel-defaultcire kuma ba maye.
  • .panel-groupcire kuma ba maye. .card-groupba maye ba ne, daban ne.
  • .panel-headingku.card-header
  • .panel-titleku .card-title. Dangane da yanayin da ake so, kuna iya amfani da abubuwan kan layi ko azuzuwan (misali <h3>, .h3) ko abubuwa masu ƙarfi ko azuzuwan (misali <strong>, <b>, .font-weight-bold). Lura cewa .card-title, yayin da ake kira iri ɗaya, yana samar da wani kamanni daban fiye da .panel-title.
  • .panel-bodyku.card-body
  • .panel-footerku.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, kuma .panel-dangeran jefar da su don .bg-, .text-, da .borderabubuwan amfani da aka samar daga $theme-colorstaswirar Sass.

Ci gaba

  • .progress-bar-*Maye gurbin azuzuwan mahallin tare da .bg-*kayan aiki. Misali, class="progress-bar progress-bar-danger"ya zama class="progress-bar bg-danger".
  • Maye gurbinsa .activedon sandunan ci gaba mai rai da .progress-bar-animated.
  • An overhauled gaba ɗaya bangaren don sauƙaƙa ƙira da salo. Muna da ƴan salo da za ku iya sokewa, sabbin alamu, da sabbin gumaka.
  • Duk CSS ba a saka su ba kuma an sake masa suna, yana tabbatar da kowane aji an riga an yi shi da .carousel-.
    • Don abubuwan carousel, .next, .prev, .left, kuma .rightyanzu .carousel-item-next, .carousel-item-prev, .carousel-item-left, da .carousel-item-right.
    • .itemyanzu kuma .carousel-item.
    • Don sarrafawa na baya/na gaba, .carousel-control.rightkuma .carousel-control.leftsuna yanzu .carousel-control-nextda .carousel-control-prev, ma'ana ba sa buƙatar takamaiman ajin tushe.
  • An cire duk salo mai amsawa, jinkirin zuwa abubuwan amfani (misali, nuna taken kan wasu wuraren kallo) da salon al'ada idan an buƙata.
  • Hoton da aka cire yana tsallakewa don hotuna a cikin abubuwan carousel, suna karkata zuwa abubuwan amfani.
  • Tweaked misalin Carousel don haɗa sabon alamar alama da salo.

Tables

  • Cire goyan baya don tebur mai salo mai salo. Yanzu an gaji duk salon tebur a cikin v4 don masu zaɓi masu sauƙi.
  • An ƙara bambance-bambancen tebur mai juzu'i.

Abubuwan amfani

  • Nuna, ɓoye, da ƙari:
    • An yi abubuwan amfani da nuni suna amsawa (misali, .d-noneda d-{sm,md,lg,xl}-none).
    • An jefar da mafi yawan abubuwan .hidden-*amfani don sabbin kayan aikin nuni . Misali, maimakon .hidden-sm-up, yi amfani da .d-sm-none. Sake suna masu .hidden-printamfani don amfani da tsarin sanyawa mai amfani nuni. Ƙarin bayani a ƙarƙashin ɓangaren abubuwan amfani masu amsawa na wannan shafin.
    • Ƙara .float-{sm,md,lg,xl}-{left,right,none}azuzuwan don tafiye-tafiye masu ruwa da tsaki kuma an cire su .pull-leftkuma .pull-righttunda ba su da yawa .float-leftkuma .float-right.
  • Nau'in:
    • Ƙara bambance-bambancen amsawa zuwa azuzuwan daidaita rubutu .text-{sm,md,lg,xl}-{left,center,right}.
  • Daidaitawa da tazara:
  • An sabunta Clearfix don sauke tallafi don tsoffin nau'ikan burauza.

Haɗin kai prefix mai siyarwa

Bootstrap 3's prefix mixins dillalai, waɗanda aka rage a cikin v3.2.0, an cire su a cikin Bootstrap 4. Tun da muke amfani da Autoprefixer , ba su da mahimmanci.

Cire abubuwan haɗin gwiwa animation: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Takaddun bayanai

Takardun mu sun sami haɓakawa a duk faɗin hukumar kuma. Ga ƙananan ƙasa:

  • Har yanzu muna amfani da Jekyll, amma muna da plugins a cikin mahaɗin:
    • bugify.rbana amfani da shi don fitar da ingantaccen lissafin abubuwan da ke cikin shafin bugs ɗin mu .
    • example.rbcokali mai yatsa na al'ada ne na highlight.rbplugin ɗin tsoho, yana ba da damar sauƙin sarrafa lambar misali.
    • callout.rbcokali mai yatsa na al'ada iri ɗaya ne na wancan, amma an ƙirƙira shi don kiran takaddun takaddun mu na musamman.
    • ana amfani da jekyll-toc don samar da teburin abubuwan cikin mu.
  • An sake rubuta duk abubuwan da ke cikin takardu a Markdown (maimakon HTML) don sauƙin gyarawa.
  • An sake tsara shafuna don abun ciki mai sauƙi da mafi kusancin matsayi.
  • Mun ƙaura daga CSS na yau da kullun zuwa SCSS don cin gajiyar sauye-sauyen Bootstrap, mixins, da ƙari.

Abubuwan amfani masu amsawa

@screen-An cire duk masu canji a cikin v4.0.0. Yi amfani da media-breakpoint-up(), media-breakpoint-down(), ko media-breakpoint-only()Sass mixins ko $grid-breakpointstaswirar Sass maimakon.

An cire azuzuwan aikin mu masu amsawa don amfanin fayyace displaykayan aiki.

  • An cire .hiddenda .showazuzuwan saboda sun ci karo da jQuery's $(...).hide()da $(...).show()hanyoyin. Madadin haka, gwada jujjuya [hidden]sifa ko amfani da salon layi kamar style="display: none;"da style="display: block;".
  • .hidden-An cire duk azuzuwan, ajiye don kayan aikin bugawa waɗanda aka sake suna.
    • An cire daga 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
    • An cire daga v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Buga abubuwan amfani ba su fara da .hidden-ko .visible-, amma tare da .d-print-.
    • Tsofaffin sunayen : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
    • Sabbin darasi : .d-print-block, .d-print-inline,.d-print-inline-block.d-print-none

Maimakon yin amfani da .visible-*azuzuwan fayyace, kuna sanya wani abu a bayyane ta hanyar kawai kada ku ɓoye shi a girman allo. Kuna iya haɗa .d-*-noneaji ɗaya tare da .d-*-blockaji ɗaya don nuna kashi ɗaya kawai akan tazarar da aka bayar na girman allo (misali .d-none.d-md-block.d-xl-noneyana nuna kashi akan matsakaita da manyan na'urori kawai).

Lura cewa canje-canje zuwa wuraren karya grid a cikin v4 yana nufin cewa za ku buƙaci tafiya wuri mafi girma don cimma sakamako iri ɗaya. Sabbin azuzuwan masu amfani ba sa yunƙurin ɗaukar ƙananan lamuran da ba a saba gani ba inda ba za a iya bayyana yanayin ganuwa a matsayin kewayon girman kallon kallo guda ɗaya ba; a maimakon haka za ku buƙaci amfani da CSS na al'ada a irin waɗannan lokuta.