Source

Kuhamia kwa v4

Bootstrap 4 ni uandishi mkuu upya wa mradi mzima. Mabadiliko mashuhuri zaidi yamefupishwa hapa chini, yakifuatiwa na mabadiliko mahususi zaidi kwa vipengele husika.

Mabadiliko thabiti

Kuhama kutoka Beta 3 hadi toleo letu thabiti la v4.0, hakuna mabadiliko makubwa, lakini kuna mabadiliko fulani mashuhuri.

Uchapishaji

  • Huduma zisizohamishika za uchapishaji zilizovunjika. Hapo awali, kutumia .d-print-*darasa kungeshinda bila kutarajia .d-*darasa lingine lolote. Sasa, zinalingana na huduma zetu zingine za onyesho na zinatumika tu kwa media hiyo ( @media print).

  • Imepanua huduma zinazopatikana za uchapishaji ili zilingane na huduma zingine. Beta ya 3 na zaidi ilikuwa na block, inline-block, inline, na none. v4 thabiti imeongezwa flex, inline-flex, table, table-row, na table-cell.

  • Utoaji usiobadilika wa uchapishaji kwenye vivinjari na mitindo mipya ya uchapishaji inayobainisha @page size.

Mabadiliko ya Beta 3

Ingawa Beta 2 iliona idadi kubwa ya mabadiliko yetu yanayotokea wakati wa awamu ya beta, lakini bado tunayo machache ambayo yalihitaji kushughulikiwa katika toleo la Beta 3. Mabadiliko haya yatatumika ikiwa unasasisha hadi Beta 3 kutoka Beta 2 au toleo lolote la awali la Bootstrap.

Mbalimbali

  • Imeondoa $thumbnail-transitionkigezo kisichotumika. Hatukuwa tukibadilisha chochote, kwa hivyo ilikuwa nambari ya ziada tu.
  • Kifurushi cha npm hakijumuishi tena faili zozote isipokuwa faili zetu za chanzo na dist; ikiwa uliwategemea na ulikuwa unaendesha hati zetu kupitia node_modulesfolda, unapaswa kurekebisha mtiririko wako wa kazi.

Fomu

  • Andika upya visanduku vya kuteua maalum na chaguomsingi na redio. Sasa, zote mbili zina muundo wa HTML unaolingana (wa nje <div>na kaka <input>na <label>) na mitindo sawa ya mpangilio (chaguo-msingi iliyopangwa, inline na darasa la kurekebisha). Hii huturuhusu kuweka muundo wa lebo kulingana na hali ya ingizo, kurahisisha usaidizi wa disabledsifa (hapo awali ilihitaji darasa la wazazi) na kusaidia vyema uthibitishaji wetu wa fomu.

    Kama sehemu ya hili, tumebadilisha CSS ya kudhibiti nyingi background-imagekwenye visanduku vya kuteua vya fomu maalum na redio. Hapo awali, kipengee kilichoondolewa sasa .custom-control-indicatorkilikuwa na rangi ya mandharinyuma, gradient, na ikoni ya SVG. Kubinafsisha upinde rangi wa usuli kulimaanisha kubadilisha zote kila wakati ulipohitaji kubadilisha moja pekee. Sasa, tuna .custom-control-label::beforekwa ajili ya kujaza na gradient na .custom-control-label::afterHushughulikia ikoni.

    Ili kufanya ukaguzi maalum ndani ya mstari, ongeza .custom-control-inline.

  • Kiteuzi kimesasishwa kwa vikundi vya vitufe vinavyotegemea ingizo. Badala ya [data-toggle="buttons"] { }mtindo na tabia, tunatumia datasifa kwa ajili ya tabia za JS pekee na kutegemea .btn-group-toggledarasa jipya kwa mtindo.

  • Imeondolewa .col-form-legendkwa ajili ya kuboreshwa kidogo .col-form-label. Njia hii .col-form-label-smna .col-form-label-lginaweza kutumika kwa <legend>vipengele kwa urahisi.

  • Ingizo za faili maalum zilipokea mabadiliko kwa utofauti wao wa $custom-file-textSass. Sio tena ramani ya Sass iliyoorodheshwa na sasa ina nguvu ya mfuatano mmoja pekee— Browsekitufe kwani hicho ndicho kipengele pekee cha uwongo kilichotolewa kutoka kwa Sass yetu. Maandishi Choose filesasa yanatoka kwa ..custom-file-label

Vikundi vya kuingiza

  • Viongezi vya vikundi vya ingizo sasa ni maalum kwa uwekaji wao kuhusiana na ingizo. Tumeacha .input-group-addonna .input-group-btnkwa madarasa mawili mapya, .input-group-prependna .input-group-append. Ni lazima utumie kiambatisho au utayarishaji kwa uwazi sasa, kurahisisha sehemu kubwa ya CSS yetu. Ndani ya kiambatisho au tayarisha, weka vitufe vyako jinsi ambavyo vingekuwepo mahali pengine popote, lakini funga maandishi kwa .input-group-text.

  • Mitindo ya uthibitishaji sasa inatumika, kama vile ingizo nyingi (ingawa unaweza tu kuthibitisha ingizo moja kwa kila kikundi).

  • Madarasa ya ukubwa lazima yawe ya mzazi .input-groupna sio vipengele vya umbo mahususi.

Mabadiliko ya Beta 2

Tukiwa kwenye beta, tunalenga kutokuwa na mabadiliko yoyote. Walakini, mambo huwa hayaendi kama ilivyopangwa. Yafuatayo ni mabadiliko muhimu ya kuzingatia unapohama kutoka Beta 1 hadi Beta 2.

Kuvunja

  • Imeondolewa $badge-colortofauti na matumizi yake kwenye .badge. Tunatumia chaguo za kukokotoa za utofautishaji wa rangi kuchagua colorkulingana na background-color, kwa hivyo utofauti sio lazima.
  • Chaguo grayscale()la kukokotoa limepewa jina jipya gray()ili kuepuka kuvunja mgongano na grayscalekichujio asilia cha CSS.
  • Imebadilishwa jina .table-inverse, .thead-inverse, na .thead-defaultkwa .*-darkna .*-light, vinavyolingana na mifumo yetu ya rangi inayotumika kwingineko.
  • Majedwali jibu sasa yanazalisha madarasa kwa kila sehemu ya gridi ya kukatika. Hii inaachana na Beta 1 kwa kuwa .table-responsiveambayo umekuwa ukitumia ni kama .table-responsive-md. Sasa unaweza kutumia .table-responsiveau .table-responsive-{sm,md,lg,xl}kama inahitajika.
  • Usaidizi wa Bower ulioacha kama kidhibiti kifurushi kimeacha kutumika kwa mbadala (kwa mfano, Uzi au npm). Tazama bower/bower#2298 kwa maelezo.
  • Bootstrap bado inahitaji jQuery 1.9.1 au toleo jipya zaidi, lakini unashauriwa kutumia toleo la 3.x kwa kuwa vivinjari vinavyotumika kwenye v3.x ndivyo Bootstrap inavyotumia pamoja na v3.x ina marekebisho kadhaa ya usalama.
  • Imeondoa .form-control-labeldarasa ambalo halijatumika. Iwapo ulitumia darasa hili, lilikuwa ni nakala ya .col-form-labeldarasa ambalo liliweka kiwima <label>pembejeo inayohusishwa nayo katika miundo ya fomu mlalo.
  • Ilibadilisha color-yiqkutoka kwa mchanganyiko uliojumuisha sifa colorhadi chaguo za kukokotoa ambazo hurejesha thamani, kukuruhusu kuitumia kwa sifa yoyote ya CSS. Kwa mfano, badala ya color-yiq(#000), ungeandika color: color-yiq(#000);.

Vivutio

  • Ilianzisha pointer-eventsmatumizi mapya kwenye moduli. Nje .modal-dialoghupitia matukio pointer-events: nonekwa ushughulikiaji maalum wa kubofya (inafanya iwezekane kusikiliza tu .modal-backdropkwa mibofyo yoyote), na kisha inapingana nayo kwa uhalisi .modal-contentna pointer-events: auto.

Muhtasari

Hivi ndivyo vitu vikubwa vya tikiti utakavyotaka kufahamu unapohama kutoka v3 hadi v4.

Usaidizi wa kivinjari

  • Imeacha kutumia IE8, IE9, na iOS 6. v4 sasa ni IE10+ na iOS 7+ pekee. Kwa tovuti zinazohitaji mojawapo ya hizo, tumia v3.
  • Umeongeza usaidizi rasmi wa Kivinjari na Mwonekano wa Wavuti wa Android v5.0 Lollipop. Matoleo ya awali ya Kivinjari cha Android na Mwonekano wa Wavuti yanasalia kuwa na msaada usio rasmi.

Mabadiliko ya kimataifa

  • Flexbox imewezeshwa kwa chaguo-msingi. Kwa ujumla hii inamaanisha kuondoka kwa kuelea na zaidi katika vipengele vyetu.
  • Imebadilisha kutoka Less hadi Sass kwa faili zetu chanzo cha CSS.
  • Imebadilishwa kutoka pxhadi remkama kitengo chetu cha msingi cha CSS, ingawa pikseli bado zinatumika kwa hoja za maudhui na tabia ya gridi ya taifa kwa vile mirija ya kutazama ya kifaa haiathiriwi na ukubwa wa aina.
  • Ukubwa wa fonti ulimwenguni uliongezeka kutoka 14pxhadi 16px.
  • Imesasishwa viwango vya gridi ili kuongeza chaguo la tano (kushughulikia vifaa vidogo 576pxchini na chini) na kuondoa -xsinfix kutoka kwa madarasa hayo. Mfano .col-6.col-sm-4.col-md-3:.
  • Ilibadilisha mandhari tofauti ya hiari na chaguzi zinazoweza kusanidiwa kupitia vigeu vya SCSS (kwa mfano, $enable-gradients: true).
  • Jenga mfumo uliofanyiwa marekebisho ili kutumia mfululizo wa hati za npm badala ya Grunt. Tazama package.jsonkwa hati zote, au usome mradi wetu kwa mahitaji ya maendeleo ya ndani.
  • Matumizi yasiyojibu ya Bootstrap hayatumiki tena.
  • Imeacha Kibinafsishaji mtandaoni ili kupendelea uwekaji wa hati nyingi zaidi na miundo iliyobinafsishwa.
  • Imeongeza dazeni za madarasa mapya ya matumizi kwa jozi za kawaida za thamani ya mali ya CSS na njia za mkato za kuweka nafasi kwenye pambizo/kipengele.

Mfumo wa gridi ya taifa

  • Imehamishwa hadi kwenye flexbox.
    • Usaidizi ulioongezwa wa flexbox katika michanganyiko ya gridi na madarasa yaliyofafanuliwa awali.
    • Kama sehemu ya kisanduku chenye kubadilika, kilijumuisha usaidizi wa madarasa ya upangaji wima na mlalo.
  • Majina ya darasa la gridi na safu mpya ya gridi imesasishwa.
    • Imeongeza safu mpya ya smgridi hapa chini 768pxkwa udhibiti zaidi wa punjepunje. Sasa tuna xs, sm, md, lgna xl. Hii pia inamaanisha kuwa kila safu imeinuliwa kwa kiwango kimoja (kwa hivyo .col-md-6katika v3 sasa iko .col-lg-6kwenye v4).
    • xsmadarasa ya gridi yamerekebishwa ili kutohitaji infix ili kuwakilisha kwa usahihi zaidi kwamba wanaanza kutumia mitindo min-width: 0na wala si thamani ya pikseli iliyowekwa. Badala yake .col-xs-6, ni sasa .col-6. Viwango vingine vyote vya gridi vinahitaji infix (kwa mfano, sm).
  • Ukubwa wa gridi iliyosasishwa, mchanganyiko na vigeu.
    • Mifereji ya gridi sasa ina ramani ya Sass ili uweze kubainisha upana mahususi wa mifereji ya maji katika kila sehemu ya kukatika.
    • Michanganyiko ya gridi iliyosasishwa ili kutumia mchanganyiko wa make-col-readykutayarisha na a make-colkuweka flexna max-widthkwa ukubwa wa safu wima mahususi.
    • Umebadilisha sehemu za utatuzi za hoja ya mfumo wa gridi ya taifa na upana wa kontena ili kuwajibika kwa kiwango kipya cha gridi ya taifa na kuhakikisha kuwa safu wima zinaweza kugawanywa kwa usawa kwa 12upana wake wa juu zaidi.
    • Sehemu za kuvunja gridi na upana wa kontena sasa zinashughulikiwa kupitia ramani za Sass ( $grid-breakpointsna $container-max-widths) badala ya vijisehemu vingi tofauti. Hizi hubadilisha @screen-*vigeu kabisa na hukuruhusu kubinafsisha kikamilifu viwango vya gridi ya taifa.
    • Hoja za media pia zimebadilika. Badala ya kurudia matamko ya hoja zetu za media zenye thamani sawa kila wakati, sasa tuna @include media-breakpoint-up/down/only. Sasa, badala ya kuandika @media (min-width: @screen-sm-min) { ... }, unaweza kuandika @include media-breakpoint-up(sm) { ... }.

Vipengele

  • Paneli zilizodondoshwa, vijipicha na visima vya kijenzi kipya kinachojumuisha yote, kadi .
  • Imedondosha fonti ya ikoni ya Glyphicons. Ikiwa unahitaji icons, chaguzi zingine ni:
  • Imedondosha programu-jalizi ya Affix jQuery.
    • Tunapendekeza kutumia position: stickybadala yake. Tazama HTML5 Tafadhali ingiza kwa maelezo na mapendekezo mahususi ya ujazo wa aina nyingi. Pendekezo moja ni kutumia @supportskanuni ya kuitekeleza (kwa mfano, @supports (position: sticky) { ... })/
    • Iwapo ulikuwa unatumia Affix kuomba positionmitindo ya ziada, isiyo ya mitindo, ujazo wa aina nyingi huenda usitumie kesi yako ya utumiaji. Chaguo moja kwa matumizi kama haya ni maktaba ya ScrollPos-Styler ya mtu wa tatu .
  • Imedondosha sehemu ya pager kwani kimsingi ilikuwa ni vitufe vilivyobinafsishwa kidogo.
  • Imerekebisha takriban vipengele vyote ili kutumia viteuzi zaidi vya darasa visivyo na kiota badala ya viteuzi mahususi zaidi vya watoto.

Kwa sehemu

Orodha hii inaangazia mabadiliko muhimu kwa kipengele kati ya v3.xx na v4.0.0.

Washa upya

Mpya kwa Bootstrap 4 ni Anzisha Upya , laha mpya ya mtindo inayojengwa juu ya Kusawazisha na mitindo yetu ya kuweka upya yenye maoni kwa kiasi fulani. Viteuzi vinavyoonekana katika faili hii hutumia vipengele pekee—hakuna madarasa hapa. Hii hutenganisha mitindo yetu ya kuweka upya kutoka kwa mitindo ya vipengele vyetu kwa mbinu ya kawaida zaidi. Baadhi ya uwekaji upya muhimu zaidi huu ni pamoja na box-sizing: border-boxmabadiliko, kusonga kutoka emkwa remvitengo kwenye vipengele vingi, mitindo ya viungo, na uwekaji upya wa vipengee vingi vya fomu.

Uchapaji

  • Umehamisha .text-huduma zote kwenye _utilities.scssfaili.
  • Imeshuka .page-headerkwani mitindo yake inaweza kutumika kupitia huduma.
  • .dl-horizontalimetupwa. Badala yake, tumia .rowna <dl>utumie madarasa ya safu wima ya gridi (au mchanganyiko) kwenye yake <dt>na <dd>watoto.
  • Vizuizi vilivyoundwa upya, kuhamisha mitindo yao kutoka kwa <blockquote>kipengele hadi darasa moja .blockquote,. Imetupa .blockquote-reversekirekebishaji cha huduma za maandishi.
  • .list-inlinesasa inahitaji kwamba orodha ya vitu vya watoto iwe na .list-inline-itemdarasa jipya kutumika kwao.

Picha

  • Imepewa jina .img-responsivejipya .img-fluid.
  • Imepewa jina .img-roundedjipya.rounded
  • Imepewa jina .img-circlejipya.rounded-circle

Majedwali

  • Takriban matukio yote ya >kiteuzi yameondolewa, kumaanisha kuwa jedwali zilizowekwa kiotomatiki sasa zitarithi mitindo kiotomatiki kutoka kwa wazazi wao. Hii hurahisisha sana wateule wetu na ubinafsishaji unaowezekana.
  • Imepewa jina jipya .table-condensedkwa .table-smuthabiti.
  • Imeongeza .table-inversechaguo jipya.
  • Virekebishaji vya vichwa vya jedwali vilivyoongezwa: .thead-defaultna .thead-inverse.
  • Madarasa ya muktadha yamepewa jina jipya kuwa na .table--kiambishi awali. Kwa hivyo .active, .success, .warning, .dangerna .infokwa .table-active, .table-success, .table-warningna .table-danger..table-info

Fomu

  • Kipengele kilichohamishwa kimewekwa upya hadi kwenye _reboot.scssfaili.
  • Imepewa jina .control-labeljipya .col-form-label.
  • Imepewa jina jipya .input-lgna .input-smkwa .form-control-lgna .form-control-sm, mtawalia.
  • Madarasa yaliyoacha .form-group-*kwa sababu ya urahisi. Tumia .form-control-*madarasa badala yake sasa.
  • Imedondoshwa .help-blockna kuibadilisha na .form-textmaandishi ya usaidizi ya kiwango cha kuzuia. Kwa maandishi ya usaidizi wa ndani na chaguo zingine zinazonyumbulika, tumia madarasa ya matumizi kama vile .text-muted.
  • Imeshuka .radio-inlinena .checkbox-inline.
  • Imeunganishwa .checkboxna .radiondani na madarasa .form-checkmbalimbali ..form-check-*
  • Fomu za mlalo zilizorekebishwa:
    • Imeacha .form-horizontalhitaji la darasa.
    • .form-grouphaitumiki tena mitindo kutoka kwa .rowmixin, kwa hivyo .rowinahitajika kwa mpangilio wa gridi ya mlalo (kwa mfano, <div class="form-group row">).
    • Imeongeza .col-form-labeldarasa jipya kwenye lebo za katikati wima zenye .form-controls.
    • Imeongezwa mpya .form-rowkwa muundo wa fomu kompakt na madarasa ya gridi ya taifa (badilishana yako .rowkwa a .form-rowna kwenda).
  • Usaidizi wa fomu maalum zilizoongezwa (kwa visanduku vya kuteua, redio, teule, na ingizo la faili).
  • Imebadilishwa .has-error, .has-warning, na .has-successmadarasa na uthibitishaji wa fomu ya HTML5 kupitia CSS :invalidna :validmadarasa ya uwongo.
  • Imepewa jina .form-control-staticjipya .form-control-plaintext.

Vifungo

  • Imepewa jina .btn-defaultjipya .btn-secondary.
  • Imeacha .btn-xsdarasa kabisa kwa kuwa .btn-smni ndogo sana kuliko v3.
  • Kitufe cha hali ya juu cha programu- jalizi ya jQuery kimetupwa . button.jsHii ni pamoja na $().button(string)na $().button('reset')mbinu. Tunashauri kutumia JavaScript maalum badala yake, ambayo itakuwa na manufaa ya kutenda jinsi unavyotaka iwe.
    • Kumbuka kuwa vipengele vingine vya programu-jalizi (vitufe vya kuteua, vibonye vya redio, vitufe vya kugeuza moja) vimehifadhiwa katika v4.
  • Badilisha vitufe [disabled]kuwa :disabledkama IE9+ inavyoauni :disabled. Hata hivyo fieldset[disabled]bado ni muhimu kwa sababu sehemu asilia zilizozimwa bado zina hitilafu katika IE11 .

Kikundi cha kifungo

  • Andika upya sehemu kwa kutumia flexbox.
  • Imeondolewa .btn-group-justified. Kama uingizwaji unaweza kutumia <div class="btn-group d-flex" role="group"></div>kama kitambaa karibu na vitu na .w-100.
  • Imeacha .btn-group-xsdarasa kabisa kutokana na kuondolewa kwa .btn-xs.
  • Imeondoa nafasi wazi kati ya vikundi vya vitufe katika upau wa vidhibiti; tumia huduma za ukingo sasa.
  • Nyaraka zilizoboreshwa kwa matumizi na vifaa vingine.
  • Imebadilishwa kutoka kwa viteuzi vya wazazi hadi madarasa ya umoja kwa vipengee vyote, virekebishaji n.k.
  • Mitindo ya kunjuzi iliyorahisishwa ili kutosafirishwa tena kwa vishale vinavyoelekeza juu au chini vilivyoambatishwa kwenye menyu kunjuzi.
  • Njia kunjuzi zinaweza kujengwa na <div>s au <ul>s sasa.
  • Mitindo ya kunjuzi iliyojengwa upya na chapa ili kutoa usaidizi rahisi, uliojengewa ndani kwa vipengee <a>vya <button>kunjuzi.
  • Imepewa jina .dividerjipya .dropdown-divider.
  • Vipengee kunjuzi sasa vinahitaji .dropdown-item.
  • Vigeuza kunjuzi havihitaji tena uwazi <span class="caret"></span>; hii sasa inatolewa kiotomatiki kupitia CSS ::afterkwenye .dropdown-toggle.

Mfumo wa gridi ya taifa

  • Imeongeza kikomo kipya cha 576pxgridi kama sm, kumaanisha sasa kuna viwango vitano jumla ( xs, sm, md, lg, na xl).
  • Imebadilisha jina la madarasa ya kirekebishaji gridi msikivu kutoka .col-{breakpoint}-{modifier}-{size}hadi .{modifier}-{breakpoint}-{size}kwa madarasa rahisi ya gridi ya taifa.
  • Madarasa ya kirekebishaji cha kusukuma na kuvuta kwa madarasa mapya yanayoendeshwa na flexbox order. Kwa mfano, badala ya .col-8.push-4na .col-4.pull-8, ungetumia .col-8.order-2na .col-4.order-1.
  • Imeongeza madarasa ya matumizi ya flexbox kwa mfumo wa gridi na vipengee.

Orodhesha vikundi

  • Andika upya sehemu kwa kutumia flexbox.
  • Imebadilishwa a.list-group-itemna darasa chafu, .list-group-item-action, kwa viungo vya kuweka mitindo na matoleo ya vitufe vya orodha ya vipengee vya kikundi.
  • Darasa lililoongezwa .list-group-flushkwa matumizi na kadi.
  • Andika upya sehemu kwa kutumia flexbox.
  • Kwa kuzingatia kuhamishwa kwa kisanduku chenye kubadilika, upangaji wa aikoni za ondoa kwenye kichwa unaweza kuvunjika kwa kuwa hatutumii tena kuelea. Maudhui yaliyoelea huja kwanza, lakini kwa flexbox ndivyo sivyo. Sasisha aikoni zako za kuondoa ili zije baada ya mada za modal kurekebisha.
  • Chaguo remote(ambalo linaweza kutumika kupakia kiotomatiki na kuingiza maudhui ya nje kwenye modali) na loaded.bs.modaltukio linalolingana liliondolewa. Tunapendekeza badala yake utumie kiolezo cha upande wa mteja au mfumo wa kuunganisha data, au kupiga simu jQuery.load mwenyewe.
  • Andika upya sehemu kwa kutumia flexbox.
  • Imeondoa takriban viteuzi vyote >kwa uundaji rahisi zaidi kupitia madarasa ambayo hayajawekwa kiota.
  • Badala ya viteuzi mahususi vya HTML kama vile .nav > li > a, tunatumia madarasa tofauti kwa .navs, .nav-items, na .nav-links. Hii inafanya HTML yako kunyumbulika zaidi huku ikileta upanuzi ulioongezeka.

Upau wa urambazaji umeandikwa upya kabisa katika kisanduku cha kubadilika-badilika kwa usaidizi ulioboreshwa wa upangaji, uitikiaji na ubinafsishaji.

  • Mienendo sikivu ya upau wa urambazaji sasa inatumika kwa .navbardarasa kupitia inayohitajika .navbar-expand-{breakpoint} ambapo unachagua mahali pa kukunja upau wa urambazaji. Hapo awali hii ilikuwa ni muundo Chini wa kutofautisha na ulihitaji urejeshaji.
  • .navbar-defaultni sasa .navbar-light, ingawa .navbar-darkbado ni sawa. Mojawapo ya haya inahitajika kwenye kila upau wa urambazaji. Hata hivyo, madarasa haya tena kuweka background-colors; badala yake kimsingi yanaathiri tu color.
  • Navbar sasa zinahitaji tamko la usuli la aina fulani. Chagua kutoka kwa huduma zetu za mandharinyuma ( .bg-*) au uweke yako binafsi na madarasa mepesi/ya kinyume hapo juu ili ubinafsishe wazimu .
  • Kwa kuzingatia mitindo ya flexbox, pau za urambazaji sasa zinaweza kutumia huduma za flexbox kwa chaguo rahisi za kupanga.
  • .navbar-toggleiko sasa .navbar-togglerna ina mitindo tofauti na alama za ndani (hakuna sekunde tatu zaidi <span>).
  • Aliacha .navbar-formdarasa kabisa. Sio lazima tena; badala yake, tumia tu .form-inlinena utumie huduma za ukingo inapohitajika.
  • Navbar hazijumuishi tena margin-bottomau border-radiuskwa chaguo-msingi. Tumia huduma kama inahitajika.
  • Mifano yote inayoangazia pau za urambazaji imesasishwa ili kujumuisha lebo mpya.

Pagination

  • Andika upya sehemu kwa kutumia flexbox.
  • Madarasa ya wazi ( .page-item, .page-link) sasa yanahitajika kwa wazao wa .paginations
  • Imedondosha .pagerkijenzi kabisa kwani kilikuwa zaidi ya vitufe vya muhtasari vilivyobinafsishwa.
  • Darasa la wazi, .breadcrumb-item, sasa linahitajika kwa wazao wa .breadcrumbs

Lebo na beji

  • Imeunganishwa .labelna .badgekutenganisha kutoka kwa <label>kipengele na kurahisisha vipengele vinavyohusiana.
  • Imeongezwa .badge-pillkama kirekebishaji cha mwonekano wa "kidonge" cha mviringo.
  • Beji hazielezwi tena kiotomatiki katika vikundi vya orodha na vipengele vingine. Madarasa ya matumizi sasa yanahitajika kwa hilo.
  • .badge-defaultimeondolewa na .badge-secondarykuongezwa kwa madarasa ya kirekebisha sehemu inayotumika kwingineko.

Paneli, vijipicha, na visima

Imeshuka kabisa kwa kijenzi kipya cha kadi.

Paneli

  • .panelto .card, sasa imejengwa kwa flexbox.
  • .panel-defaultkuondolewa na hakuna uingizwaji.
  • .panel-groupkuondolewa na hakuna uingizwaji. .card-groupsio mbadala, ni tofauti.
  • .panel-headingkwa.card-header
  • .panel-titlekwa .card-title. Kulingana na mwonekano unaotaka, unaweza pia kutaka kutumia vipengee vya kichwa au madarasa (kwa mfano <h3>, .h3) au vipengee vikali au darasa (kwa mfano <strong>, <b>, .font-weight-bold). Kumbuka kuwa .card-title, wakati inaitwa vile vile, hutoa sura tofauti kuliko .panel-title.
  • .panel-bodykwa.card-body
  • .panel-footerkwa.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, na .panel-dangerzimeachwa kwa .bg-, .text-, na .borderhuduma zinazotolewa kutoka kwa $theme-colorsramani yetu ya Sass.

Maendeleo

  • .progress-bar-*Madarasa ya muktadha yalibadilishwa na .bg-*huduma. Kwa mfano, class="progress-bar progress-bar-danger"inakuwa class="progress-bar bg-danger".
  • Imebadilishwa .activekwa baa za maendeleo zilizohuishwa na .progress-bar-animated.
  • Imebadilisha sehemu nzima ili kurahisisha muundo na mitindo. Tuna mitindo michache ya wewe kubatilisha, viashirio vipya na ikoni mpya.
  • CSS zote hazijawekwa kiota na kupewa jina jipya, na hivyo kuhakikisha kila darasa limeangaziwa na .carousel-.
    • Kwa vitu vya jukwa, .next, .prev, .leftna .rightsasa .carousel-item-next, .carousel-item-prev, .carousel-item-left, na .carousel-item-right.
    • .itempia ni sasa .carousel-item.
    • Kwa vidhibiti vilivyotangulia/vifuatavyo, .carousel-control.rightna .carousel-control.leftni sasa .carousel-control-nextna .carousel-control-prev, kumaanisha kwamba havihitaji tena darasa maalum la msingi.
  • Imeondoa mitindo yote inayoitikia, kuahirisha huduma (kwa mfano, kuonyesha manukuu kwenye tovuti fulani za kutazama) na mitindo maalum inapohitajika.
  • Ubatilifu wa picha ulioondolewa kwa picha katika vipengee vya jukwa, ukirejelea huduma.
  • Imerekebisha mfano wa Carousel kujumuisha lebo na mitindo mipya.

Majedwali

  • Imeondoa usaidizi wa majedwali yaliyowekwa kiota. Mitindo yote ya jedwali sasa imerithiwa katika v4 kwa viteuzi rahisi zaidi.
  • Imeongeza lahaja ya jedwali kinyume.

Huduma

  • Onyesha, siri, na zaidi:
    • Ilifanya huduma za kuonyesha kuitikia (kwa mfano, .d-nonena d-{sm,md,lg,xl}-none).
    • Imepunguza wingi wa .hidden-*huduma za huduma mpya za kuonyesha . Kwa mfano, badala ya .hidden-sm-up, tumia .d-sm-none. Imebadilisha jina la .hidden-printhuduma ili kutumia mpango wa kutoa majina wa matumizi. Maelezo zaidi chini ya sehemu ya Huduma za Kujibika ya ukurasa huu.
    • Madarasa yaliyoongezwa .float-{sm,md,lg,xl}-{left,right,none}kwa vielelezo vinavyoitikia na kuondolewa .pull-leftna .pull-rightkwa kuwa hayana maana .float-leftna .float-right.
  • Aina:
    • Aliongeza tofauti za kuitikia kwa madarasa yetu ya upatanishaji maandishi .text-{sm,md,lg,xl}-{left,center,right}.
  • Mpangilio na nafasi:
    • Imeongeza ukingo mpya wa kuitikia na huduma za kuweka pedi kwa pande zote, pamoja na shorthands wima na mlalo.
    • Upakiaji wa boti wa huduma za flexbox .
    • Imeshuka .center-blockkwa darasa jipya .mx-auto.
  • Clearfix imesasishwa ili kuacha kutumia matoleo ya zamani ya kivinjari.

Mchanganyiko wa kiambishi awali cha muuzaji

Michanganyiko ya kiambishi awali cha mchuuzi ya Bootstrap 3 , ambayo iliacha kutumika katika v3.2.0, imeondolewa kwenye Bootstrap 4. Kwa kuwa tunatumia Autoprefixer , si lazima tena.

Imeondoa michanganyiko ifuatayo : ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, animation. _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Nyaraka

Hati zetu zilipata uboreshaji kote bodi pia. Hapa kuna chini chini:

  • Bado tunatumia Jekyll, lakini tunayo programu-jalizi kwenye mchanganyiko:
    • bugify.rbinatumika kuorodhesha maingizo kwenye ukurasa wetu wa hitilafu za kivinjari .
    • example.rbni uma maalum wa programu- highlight.rbjalizi chaguo-msingi, ikiruhusu utunzaji rahisi wa msimbo wa mfano.
    • callout.rbni uma maalum wa hiyo, lakini imeundwa kwa ajili ya vibali vyetu maalum vya hati.
    • jekyll-toc inatumika kutengeneza jedwali letu la yaliyomo.
  • Maudhui yote ya hati yameandikwa upya katika Markdown (badala ya HTML) kwa uhariri rahisi.
  • Kurasa zimepangwa upya kwa maudhui rahisi na daraja linaloweza kufikiwa zaidi.
  • Tulihama kutoka kwa CSS ya kawaida hadi SCSS ili kuchukua fursa kamili ya vigeuzo vya Bootstrap, mchanganyiko, na zaidi.

Huduma za msikivu

Vigezo vyote @screen-vimeondolewa katika v4.0.0. Tumia mchanganyiko wa media-breakpoint-up(), media-breakpoint-down(), au media-breakpoint-only()Sass au $grid-breakpointsramani ya Sass badala yake.

Madarasa yetu ya matumizi sikivu kwa kiasi kikubwa yameondolewa kwa ajili ya displayhuduma za lugha chafu.

  • The .hiddenna .showmadarasa yameondolewa kwa sababu yalikinzana na jQuery $(...).hide()na $(...).show()mbinu. Badala yake, jaribu kugeuza [hidden]sifa au tumia mitindo ya ndani kama style="display: none;"na style="display: block;".
  • Madarasa yote .hidden-yameondolewa, isipokuwa kwa huduma za uchapishaji ambazo zimepewa jina jipya.
    • Imeondolewa kutoka kwa 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
    • Imeondolewa kutoka kwa alpha za 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
  • Huduma za kuchapisha hazianzi tena na .hidden-au .visible-, lakini na .d-print-.
    • Majina ya zamani : .visible-print-block,,,.visible-print-inline.visible-print-inline-block.hidden-print
    • Madarasa mapya: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Badala ya kutumia .visible-*madarasa wazi, unafanya kipengele kionekane kwa kutokificha kwa ukubwa huo wa skrini. Unaweza kuchanganya .d-*-nonedarasa moja na darasa moja .d-*-blockili kuonyesha kipengele kwa muda fulani wa ukubwa wa skrini (km .d-none.d-md-block.d-xl-noneinaonyesha kipengele kwenye vifaa vya kati na vikubwa pekee).

Kumbuka kuwa mabadiliko ya sehemu za kukatika kwa gridi ya v4 inamaanisha kuwa utahitaji kwenda sehemu moja kubwa zaidi ili kufikia matokeo sawa. Madarasa mapya ya matumizi hayajaribu kushughulikia hali ambazo hazijazoeleka sana ambapo mwonekano wa kipengee hauwezi kuonyeshwa kama fungu moja la ukubwa unaotazamwa; badala yake utahitaji kutumia CSS maalum katika visa kama hivyo.