in English

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 ƙaƙƙarfan sakinmu v4.x, babu canje-canje masu karye, 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 ƙaura zuwa flexbox, daidaitawar gumakan korar a cikin taken yana yiwuwa ya karye saboda ba ma yin 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 no longer include margin-bottom or border-radius by default. Use utilities as necessary.
  • All examples featuring navbars have been updated to include new markup.

Pagination

  • Rewrote component with flexbox.
  • Explicit classes (.page-item, .page-link) are now required on the descendants of .paginations
  • Dropped the .pager component entirely as it was little more than customized outline buttons.
  • An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels and badges

  • Consolidated .label and .badge to disambiguate from the <label> element and simplify related components.
  • Added .badge-pill as modifier for rounded “pill” look.
  • Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
  • .badge-default has been dropped and .badge-secondary added to match component modifier classes used elsewhere.

Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

  • .panel to .card, now built with flexbox.
  • .panel-default removed and no replacement.
  • .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  • .panel-heading to .card-header
  • .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
  • .panel-body to .card-body
  • .panel-footer to .card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Progress

  • Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".
  • Replaced .active for animated progress bars with .progress-bar-animated.
  • Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
  • All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
    • For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
    • .item is also now .carousel-item.
    • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
  • Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
  • Removed image overrides for images in carousel items, deferring to utilities.
  • Tweaked the Carousel example to include the new markup and styles.

Tables

  • Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
  • Added inverse table variant.

Utilities

  • Display, hidden, and more:
    • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
    • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
    • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
  • Type:
    • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment and spacing:
  • Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

  • We’re still using Jekyll, but we have plugins in the mix:
    • bugify.rb is used to efficiently list out the entries on our browser bugs page.
    • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
    • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
    • jekyll-toc is used to generate our table of contents.
  • All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
  • Pages have been reorganized for simpler content and a more approachable hierarchy.
  • We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

  • The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
  • All .hidden- classes have been removed, save for the print utilities which have been renamed.
    • Removed from 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
    • Removed from 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
  • Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
    • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
    • Sababbin 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.