Source

Okusenguka okudda ku v4

Bootstrap 4 ye kuddamu okuwandiika okunene okwa pulojekiti yonna. Enkyukakyuka ezisinga okweyoleka zifunze wansi, ne zigobererwa enkyukakyuka ezisingawo ezenjawulo ku bitundu ebikwatagana.

Enkyukakyuka ezitebenkedde

Okuva ku Beta 3 okudda ku stable v4.0 release yaffe, tewali nkyukakyuka zimenya, naye waliwo enkyukakyuka ezimu ezeeyoleka.

Okukuba ebitabo

  • Ebikozesebwa mu kukuba ebitabo ebimenyese bitereezeddwa. Emabegako, okukozesa .d-print-*kiraasi kyandisobodde okusazaamu .d-*kiraasi endala yonna mu ngeri etasuubirwa. Kati, zikwatagana n’ebikozesebwa byaffe ebirala eby’okulaga era zikola ku mikutu egyo gyokka ( @media print).

  • Egaziyiziddwa ebikozesebwa eby'okulaga okukuba ebitabo ebiriwo okukwatagana n'ebikozesebwa ebirala. Beta 3 n'okudda waggulu bokka baalina block, inline-block, inline, ne none. Stable v4 yayongeddeko flex, inline-flex, table, table-row, ne table-cell.

  • Okulaga okulaga okusooka okukuba ebitabo okutereezeddwa mu bulawuzi zonna n'emisono emipya egy'okukuba egyalaga @page size.

Beta 3 ekyukakyuka

So nga Beta 2 yalaba enkyukakyuka zaffe ezisinga obungi ez’okumenya mu kiseera kya beta phase, naye tukyalina ntono ezaali zeetaaga okukolebwako mu Beta 3 release. Enkyukakyuka zino zikola singa oba okyusa ku Beta 3 okuva ku Beta 2 oba enkyusa yonna enkadde eya Bootstrap.

Ebintu by'enjawulo

  • Yaggyewo $thumbnail-transitionenkyukakyuka etakozesebwa. Tetwali tukyusa kintu kyonna, kale kyali kya koodi ya kwongerako yokka.
  • Package ya npm tekyalimu fayiro ndala yonna okuggyako fayiro zaffe ez'ensibuko ne dist; singa oba weesigamyeko era nga wali oddukanya script zaffe ng'oyita mu node_modulesfolda, wandibadde okyusa enkola yo ey'emirimu.

Ffoomu

  • Ddamu okuwandiika ebibokisi byombi eby'ennono n'ebya bulijjo ne leediyo. Kati, zombi zirina ensengeka ya HTML ekwatagana (ey’ebweru <div>ne muganda <input>ne <label>) n’emisono gy’ensengeka gye gimu (stacked default, inline ne modifier class). Kino kitusobozesa okukola sitayiro y’akabonero okusinziira ku mbeera y’okuyingiza, okwanguyiza okuwagira disabledekintu (eyali kyetaagisa kiraasi y’omuzadde) n’okuwagira obulungi okukakasa foomu yaffe.

    Nga ekitundu ku kino, tukyusizza CSS ey'okuddukanya background-images eziwera ku custom form checkboxes ne radios. Emabegako, ekintu kati ekyaggyibwawo .custom-control-indicatorkyalina langi y'emabega, gradient, n'akabonero ka SVG. Okulongoosa background gradient kyali kitegeeza okukyusa ebyo byonna buli lwe weetaaga okukyusa emu yokka. Kati, tulina .custom-control-label::beforefor the fill ne gradient era .custom-control-label::afterekwata icon.

    Okukola okukebera okw'ennono mu layini, yongerako .custom-control-inline.

  • Ekisunsuddwa ekipya eky'ebibinja bya button ebisinziira ku kuyingiza. Mu kifo ky’okukola [data-toggle="buttons"] { }sitayiro n’enneeyisa, tukozesa dataekintu ekyo ku nneeyisa za JS zokka era ne twesigama ku .btn-group-togglekiraasi empya olw’okukola sitayiro.

  • Yaggyibwawo .col-form-legendnga bawagira eky'okulongoosaamu katono .col-form-label. Mu ngeri eno .col-form-label-smera .col-form-label-lgesobola okukozesebwa ku <legend>elementi n’obwangu.

  • Ebiyingizibwa mu fayiro eza bulijjo byafuna enkyukakyuka ku nkyukakyuka yaabwe eya $custom-file-textSass. Tekyali maapu ya Sass eriko ekiyumba era kati egaba amaanyi mu lunyiriri lumu lwokka —bbaatuuni Browsenga kati eyo ye kintu kyokka eky’obulimba ekikolebwa okuva mu Sass yaffe. Ekiwandiiko Choose filekati kiva mu .custom-file-label.

Ebibinja ebiyingiza

  • Input group addons kati specific to their placement relative to an input. Tusuddewo .input-group-addonera .input-group-btnku bibiina bibiri ebipya, .input-group-prependera .input-group-append. Olina okukozesa mu bulambulukufu append oba prepend kati, okwanguyiza ekitundu ekinene ekya CSS yaffe. Munda mu append oba prepend, teeka buttons zo nga bwe zandibadde awalala wonna, naye zingako ebiwandiiko mu .input-group-text.

  • Emisono gy'okukakasa kati giwagirwa, nga bwe kiri ku biyingizibwa ebingi (wadde nga osobola okukakasa okuyingiza kumu kwokka buli kibinja).

  • Sizing classes zirina okuba ku muzadde .input-groupso si elements za form ssekinnoomu.

Beta 2 ekyukakyuka

Nga tuli mu beta, tuluubirira obutaba na nkyukakyuka yonna emenya. Kyokka bulijjo ebintu tebitambula nga bwe byategekebwa. Wansi waliwo enkyukakyuka ezimenya z’olina okujjukira ng’ova ku Beta 1 okudda ku Beta 2.

Okumenya

  • Eggiddwawo $badge-colorenkyukakyuka n'enkozesa yaayo ku .badge. Tukozesa omulimu gw’enjawulo mu langi okulonda colorokusinziira ku background-color, kale enkyukakyuka tekyetaagisa.
  • grayscale()Omulimu gukyusiddwa erinnya gray()eri okwewala okumenya obutakkaanya grayscalen'omusengejja enzaalwa ya CSS.
  • Yakyusibwa erinnya .table-inverse, .thead-inverse, ne .thead-defaultku .*-darkne .*-light, nga ekwatagana ne langi zaffe ezikozesebwa awalala.
  • Emmeeza eziddamu kati zikola kiraasi ku buli kifo ekimenya giridi. Kino kimenyawo Beta 1 mu ngeri nti the .table-responsivegy'obadde okozesa esinga kufaanana .table-responsive-md. Kati oyinza okukozesa .table-responsiveoba .table-responsive-{sm,md,lg,xl}nga bwe kyetaagisa.
  • Yasuula obuwagizi bwa Bower nga omuddukanya package abadde avudde ku nkola endala (okugeza, Yarn oba npm). Laba bower/bower#2298 okumanya ebisingawo.
  • Bootstrap ekyalina jQuery 1.9.1 oba okusingawo, naye oweebwa amagezi okukozesa version 3.x okuva v3.x's supported browsers ze Bootstrap z'ewagira plus v3.x erina ebimu ku bitereezeddwa mu by'okwerinda.
  • Yaggyewo ekibiina ekitakozesebwa .form-control-label. Bwoba nga wakola okukozesa kiraasi eno, yali duplicate ya .col-form-labelclass eya vertically centered a <label>ne it's associated input mu horizontal form layouts.
  • Yakyusa color-yiqokuva ku mixin eyalimu coloreky'obugagga okudda ku mulimu oguzza omuwendo, okukusobozesa okugukozesa ku kintu kyonna ekya CSS. Okugeza, mu kifo kya color-yiq(#000), wandiwandiise color: color-yiq(#000);.

Ebikulu ebikulu

  • Yaleeta enkozesa empya pointer-eventsku modals. Eky’ebweru .modal-dialogkiyita mu bibaddewo ne pointer-events: nonefor custom click handling (okusobozesa okumala okuwuliriza ku .modal-backdropfor any clicks), n’oluvannyuma counteract it for the actual .modal-contentwith pointer-events: auto.

Okubumbako

Wano waliwo ebintu ebinene ebya tikiti by’onooyagala okumanya ng’ova ku v3 okudda ku v4.

Obuwagizi bwa Browser

  • Yasuula obuwagizi bwa IE8, IE9, ne iOS 6. v4 kati ya IE10+ yokka ne iOS 7+. Ku mikutu egyetaaga ekimu ku ebyo, kozesa v3.
  • Yayongeddeko obuwagizi obutongole eri Android v5.0 Lollipop's Browser ne WebView. Enkyusa ezasooka eza Android Browser ne WebView zisigala nga ziwagirwa mu ngeri etali ntongole zokka.

Enkyukakyuka mu nsi yonna

  • Flexbox ekozesebwa nga bwe kibadde. Okutwaliza awamu kino kitegeeza okuva ku biwujjo n’ebirala okubuna ebitundu byaffe.
  • Yakyusibwa okuva ku Less okudda ku Sass ku fayiro zaffe eza CSS ez'ensibuko.
  • Yakyusibwa okuva pxku okudda remnga ekitundu kyaffe ekikulu ekya CSS, wadde nga pixels zikyakozesebwa ku kubuuza kw'emikutu n'enneeyisa ya grid nga ebifo eby'okulaba eby'ebyuma tebikosebwa sayizi ya kika.
  • Enkula y’empandiika mu nsi yonna yeeyongera okuva 14pxku 16px.
  • Yalongoosa emitendera gya grid okwongerako eky'okutaano (okukola ku byuma ebitono ku 576pxne wansi) era n'aggyawo -xsinfix okuva mu bibiina ebyo. Okugeza: .col-6.col-sm-4.col-md-3.
  • Yakyusa omulamwa ogw'enjawulo ogw'okwesalirawo n'eby'okulonda ebisobola okusengekebwa okuyita mu nkyukakyuka za SCSS (okugeza, $enable-gradients: true).
  • Enkola y'okuzimba erongooseddwa okukozesa omuddirirwa gwa npm scripts mu kifo kya Grunt. Laba package.jsonscripts zonna, oba project yaffe readme ku byetaago by'enkulaakulana y'ekitundu.
  • Enkozesa ya Bootstrap etali ya kuddamu tekyawagirwa.
  • Yasuula Customizer ku yintaneeti n'awagira ebiwandiiko ebisingawo eby'okuteekawo n'okuzimba okulongooseddwa.
  • Yayongeddeko amakumi g'ebika by'ebikozesebwa ebipya eby'ebibiri ebya bulijjo ebya CSS eby'omuwendo n'amakubo amampi ag'ebanga ku margin/padding.

Enkola ya grid

  • Yasengulwa ku flexbox.
    • Yayongeddeko obuwagizi bwa flexbox mu grid mixins ne classes ezitegekeddwa edda.
    • Nga ekitundu ku flexbox, mwalimu obuwagizi eri kiraasi z’okulaganya okw’okwesimbye n’okw’okwesimbye.
  • Amannya ga kiraasi za grid agatereezeddwa n'omutendera omupya ogwa grid.
    • Yayongeddeko omutendera omupya smogwa grid wansi 768pxokusobola okufuga ennyo granular. Kati tulina xs, sm, md, lg, ne xl. Kino era kitegeeza nti buli tier ebadde bumped up one level (kale .col-md-6mu v3 kati eri .col-lg-6mu v4).
    • xsgrid classes zikyusiddwa obutakwetaagisa infix okukiikirira obulungi ennyo nti zitandika okukozesa sitayiro ku min-width: 0so si muwendo gwa pixel oguteekeddwawo. Mu kifo kya .col-xs-6, kati kiri .col-6. Emitendera emirala gyonna egya grid gyetaaga infix (okugeza, sm).
  • Enkula za grid ezitereezeddwa, mixins, n'enkyukakyuka.
    • Grid gutters kati zirina Sass map osobole okulaga specific gutter widths ku buli breakpoint.
    • Updated grid mixins okukozesa make-col-readyprep mixin ne a make-colokuteekawo flexne max-widthku individual column sizing.
    • Yakyusa grid system media query breakpoints ne container widths okubala grid tier empya n'okukakasa nti empagi zigabanyizibwa kyenkanyi ku 12ku max width yazo.
    • Ebifo ebikutukamu giridi n’obugazi bwa konteyina kati bikwatibwa nga biyita mu maapu za Sass ( $grid-breakpointsne $container-max-widths) mu kifo ky’enkyukakyuka entonotono ez’enjawulo. Bino @screen-*bikyusakyusa ddala enkyukakyuka era bikusobozesa okulongoosa mu bujjuvu emitendera gya grid.
    • Ebibuuzo by’emikutu gy’amawulire nabyo bikyuse. Mu kifo ky’okuddamu okulangirira kwaffe okw’okubuuza kw’emikutu gy’amawulire n’omuwendo gwe gumu buli mulundi, kati tulina @include media-breakpoint-up/down/only. Kati, mu kifo ky’okuwandiika @media (min-width: @screen-sm-min) { ... }, osobola okuwandiika @include media-breakpoint-up(sm) { ... }.

Ebitundu ebikola omubiri

  • Ebipande ebisuuliddwa, ebifaananyi ebitonotono, n’enzizi ez’ekitundu ekipya ekizingiramu byonna, kaadi .
  • Yasudde efonti y'akabonero ka Glyphicons. Bw’oba ​​weetaaga ebifaananyi, ebimu ku by’oyinza okukola bye bino:
  • Yasuddewo ekipande kya Affix jQuery.
    • Tukuwa amagezi okukozesa position: stickymu kifo ky’ekyo. Laba HTML5 Nsaba okuyingira okumanya ebisingawo n'okuteesa ebitongole ku polyfill. Ekiteeso ekimu kwe kukozesa @supportsetteeka okulissa mu nkola (okugeza, @supports (position: sticky) { ... })/ .
    • Singa wali okozesa Affix okusiiga ebirala, ebitali bya positionsitayiro, polyfills ziyinza obutawagira nkozesa yo. Ekimu ku biyinza okukolebwa mu nkozesa ng’ezo ye tterekero ly’ebitabo erya ScrollPos-Styler ery’ekibiina eky’okusatu .
  • Yasuula ekitundu kya pager nga mu bukulu kyali buttons ezikoleddwaako katono.
  • Refactored kumpi ebitundu byonna okukozesa ebisingawo un-nested class selectors mu kifo over-specific abaana selectors.

Okusinziira ku kitundu

Olukalala luno lulaga enkyukakyuka enkulu okusinziira ku kitundu wakati wa v3.xx ne v4.0.0.

Ddamu okutandika

Ekipya ku Bootstrap 4 ye Reboot , stylesheet empya ezimba ku Normalize nga tulina emisono gyaffe egy’okuzzaawo egy’endowooza. Ebisunsula ebirabika mu fayiro eno bikozesa elementi zokka—tewali kiraasi wano. Kino kyawula emisono gyaffe egy’okuzzaawo okuva ku sitayiro zaffe ez’ebitundu olw’enkola esingako eya modulo. Ebimu ku bikulu ebiddamu okuteekebwawo kino mwe muli kwe box-sizing: border-boxkukyusa, okuva emku remyuniti ku elementi nnyingi, emisono gy’okuyunga, n’okuzzaawo ebintu bingi ebya ffoomu.

Okuwandiika ebitabo

  • Yatambuza .text-ebikozesebwa byonna mu _utilities.scssfayiro.
  • Esuuliddwa .page-headernga sitayiro zaayo zisobola okukozesebwa nga ziyita mu bikozesebwa.
  • .dl-horizontalebadde esuuliddwa. Wabula, kozesa .rowku <dl>era kozesa grid column classes (oba mixins) ku yaayo <dt>n'abaana <dd>.
  • Ebiwandiiko ebiddamu okukolebwa, nga bitambuza emisono gyabyo okuva ku <blockquote>elementi okudda mu kiraasi emu, .blockquote. Yasudde .blockquote-reverseekikyusa eky'ebikozesebwa mu biwandiiko.
  • .list-inlinekati kyetaagisa abaana baayo okuwandiisa ebintu balina ekibiina ekipya .list-inline-itemekibakozesezza.

Ebifaananyi

  • Yakyusibwa erinnya .img-responsiven'efuulibwa .img-fluid.
  • Yakyusibwa erinnya .img-roundedne lifuuka.rounded
  • Yakyusibwa erinnya .img-circlene lifuuka.rounded-circle

Emmeeza

  • Kumpi ebifaananyi byonna eby'omusunsu >biggiddwawo, ekitegeeza nti emmeeza eziteekeddwa mu kisenge kati zijja kusikira emisono okuva mu bazadde baazo mu ngeri ey'otoma. Kino kyanguyiza nnyo ebisunsula byaffe n’ebiyinza okutukyusa.
  • Yakyusibwa erinnya n’etuumibwa .table-condensedolw’obutakyukakyuka .table-sm.
  • Yayongeddeko eky’okulonda ekipya .table-inverse.
  • Yayongeddeko ebikyusa omutwe gw'emmeeza: .thead-defaultne .thead-inverse.
  • Yakyusa amannya ga kiraasi z'ensonga okubeera .table-n'entandikwa -. Kyova olaba .activenti , .success, .warning, .dangerne .infoku .table-active, .table-success, .table-warning, .table-dangerne .table-info.

Ffoomu

  • Ekintu ekitambuddwa kiddamu okuteekebwa ku _reboot.scssfayiro.
  • Yakyusibwa erinnya .control-labeln'efuulibwa .col-form-label.
  • Okukyusa amannya .input-lgne .input-smku .form-control-lgne .form-control-sm, okusinziira ku.
  • Yasuula .form-group-*ebisulo olw'okubeera ebyangu. Kozesa .form-control-*kiraasi mu kifo ky’ekyo kati.
  • Yasuula .help-blockn'agikyusaamu ne .form-textfor block-level help text. Ku biwandiiko by'obuyambi mu layini n'ebirala ebikyukakyuka, kozesa kiraasi z'omugaso nga .text-muted.
  • Yasuulibwa .radio-inlineera .checkbox-inline.
  • Consolidated .checkboxne .radiomu ne kiraasi .form-checkez’enjawulo ..form-check-*
  • Ffoomu ezibeera mu bbanga (horizontal forms) zitereezeddwa:
    • Yasuula .form-horizontalekyetaagisa mu kibiina.
    • .form-grouptekyakozesa sitayiro okuva mu .rowvia mixin, kale .rowkati kyetaagisa ku nteekateeka za grid ez'okwebungulula (okugeza, <div class="form-group row">).
    • Yayongeddeko kiraasi empya .col-form-labelku bipande ebiri wakati mu vertikal nga biriko .form-controls.
    • Yayongeddeko ebipya .form-rowku nsengeka za ffoomu enzibu ne kiraasi za grid (swap your .rowfor a .form-rowand go).
  • Yayongeddeko obuwagizi bwa foomu eza custom (ku checkboxes, radios, selects, n'okuyingiza fayiro).
  • Yakyusiddwa .has-error, .has-warning, ne .has-successkiraasi ne zikakasa ffoomu ya HTML5 nga ziyita mu CSS's :invalidne :validpseudo-classes.
  • Yakyusibwa erinnya .form-control-staticn'efuulibwa .form-control-plaintext.

Ebikondo ebiyitibwa Buttons

  • Yakyusibwa erinnya .btn-defaultn'efuulibwa .btn-secondary.
  • Yasuula .btn-xskiraasi yonna nga bwe .btn-smkiri proportionally kitono nnyo okusinga v3's.
  • Ekintu kya buttonful stateful ekya button.jsjQuery plugin kisuuliddwa. Kuno kw’ogatta enkola $().button(string)n’enkola $().button('reset'). Tukuwa amagezi okukozesa akatono aka JavaScript eya custom mu kifo ky’ekyo, ekijja okuba n’omugaso gw’okweyisa mu ngeri ddala gy’oyagala.
    • Weetegereze nti ebirala ebiri mu plugin (ebibokisi ebikebera button, leediyo za button, buttons ezikyusa omulundi gumu) bikuumiddwa mu v4.
  • Kyusa buttons' [disabled]okudda ku :disablednga IE9+ ewagira :disabled. Naye fieldset[disabled]kikyali kyetaagisa kubanga native disabled fieldsets zikyali buggy mu IE11 .

Ekibinja kya button

  • Ddamu okuwandiika ekitundu ne flexbox.
  • Eggyiddwawo .btn-group-justified. Nga eky'okukyusaamu osobola okukozesa <div class="btn-group d-flex" role="group"></div>ng'ekizinga okwetooloola elementi ezirina .w-100.
  • Yasudde .btn-group-xsddala ekibiina nga aweereddwa okuggyibwawo kwa .btn-xs.
  • Ggyawo ebanga ery'olwatu wakati w'ebibinja bya button mu button toolbars; kozesa ebikozesebwa ku margin utilities kati.
  • Ebiwandiiko ebirongooseddwa okukozesebwa n'ebitundu ebirala.
  • Yakyusibwa okuva ku balonda abazadde okudda ku kiraasi emu ku bitundu byonna, ebikyusa, n’ebirala.
  • Emisono egy’okukka egyanguyiziddwa obutaddamu kusindika ng’erina obusaale obutunudde waggulu oba wansi obuyungiddwa ku menu egwa wansi.
  • Dropdowns zisobola okuzimbibwa ne <div>s oba <ul>s kati.
  • Emisono egy’okukka egyaddamu okuzimbibwa n’okussaako obubonero okusobola okuwa obuwagizi obwangu, obuzimbibwamu ku bintu ebikka <a>era <button>nga byesigamiziddwa ku bintu ebikka.
  • Yakyusibwa erinnya .dividern'efuulibwa .dropdown-divider.
  • Ebintu ebigwa kati byetaaga .dropdown-item.
  • Dropdown toggles tezikyetaaga explicit <span class="caret"></span>; kino kati kiweebwa mu ngeri ey'otoma nga kiyita mu CSS's ::afterku .dropdown-toggle.

Enkola ya grid

  • Yayongeddeko ekifo ekipya 576pxeky'okumenya grid nga sm, ekitegeeza kati waliwo emitendera etaano gyonna awamu ( xs, sm, md, lg, ne xl).
  • Yakyusa amannya g'ebika by'ebikyusa giridi ebiddamu okuva .col-{breakpoint}-{modifier}-{size}ku okutuuka .{modifier}-{breakpoint}-{size}ku bibiina bya giridi ebyangu.
  • Yasuula kiraasi za push ne pull modifier ku kiraasi empya ezikozesa flexbox order. Okugeza, mu kifo kya .col-8.push-4ne .col-4.pull-8, wandikozesezza .col-8.order-2ne .col-4.order-1.
  • Yayongeddeko flexbox utility classes ku nkola ya grid n'ebitundu.

Laga ebibinja

  • Ddamu okuwandiika ekitundu ne flexbox.
  • Ekyusiddwa a.list-group-itemne kiraasi eyeetegeerekeka, .list-group-item-action, olw'okukola sitayiro enkyusa z'enkolagana ne button z'ebintu by'ekibinja ky'olukalala.
  • Yayongeddeko .list-group-flushkiraasi okukozesebwa ne kaadi.
  • Ddamu okuwandiika ekitundu ne flexbox.
  • Given move to flexbox, alignment of dismiss icons mu header eyinza okumenyeka nga tetukyakozesa floats. Ebirimu ebitengejja bye bisooka, naye ne flexbox ekyo tekikyali bwe kityo. Update your dismiss icons okujja oluvannyuma lwa modal titles okutereeza.
  • Enkola remote(eyinza okukozesebwa okutikka n’okuyingiza ebirimu eby’ebweru mu modal mu ngeri ey’otoma) n’ekintu ekikwatagana loaded.bs.modalbyaggyibwawo. Tukuwa amagezi mu kifo ky'ekyo okukozesa client-side templating oba data binding framework, oba okuyita jQuery.load ggwe kennyini.
  • Ddamu okuwandiika ekitundu ne flexbox.
  • Yasuula kumpi ebisunsula byonna >okusobola okukola sitayiro ennyangu ng’ayita mu kiraasi ezitali za kisenge.
  • Mu kifo ky’ebisunsula ebikwata ku HTML nga .nav > li > a, tukozesa kiraasi ez’enjawulo ku .navs, .nav-items, ne .nav-links. Kino kifuula HTML yo okubeera ennyangu ate nga kireeta okugaziwa okweyongera.

Navbar ezzeemu okuwandiikibwa yonna mu flexbox n'obuwagizi obulongooseddwa obw'okulaganya, okuddamu, n'okulongoosa.

  • Enneeyisa za navbar eziddamu kati zikozesebwa ku .navbarkiraasi nga ziyita mu kyetaagisa .navbar-expand-{breakpoint} w'olonda w'ogenda okugwa navbar. Emabegako kino kyali kya Less variable modification era nga kyetaagisa recompiling.
  • .navbar-defaultis now .navbar-light, wadde nga .navbar-darkkisigala kye kimu. Ekimu ku bino kyetaagibwa ku buli navbar. Naye, ebika bino tebikyateekawo background-colors; mu kifo ky’ekyo mu bukulu zikwata ku color.
  • Navbars kati zeetaaga okulangirira okw'emabega okw'ekika ekimu. Londa okuva mu bikozesebwa byaffe eby'emabega ( .bg-*) oba teeka ebibyo n'ebika by'ekitangaala/ekikyuusa waggulu olw'okulongoosa eddalu .
  • Kubanga emisono gya flexbox, navbars kati zisobola okukozesa ebikozesebwa bya flexbox olw'okulonda okwangu okw'okulaganya.
  • .navbar-toggleeri kati .navbar-togglerera erina emisono egy’enjawulo ne inner markup (tewali <span>s ssatu zisingawo).
  • Yasuula .navbar-formddala ekibiina. Tekikyakwetaagisa; mu kifo ky’ekyo, kozesa kyokka .form-inlineera okozese margin utilities nga bwe kyetaagisa.
  • Navbars tezikyalimu margin-bottomoba border-radiusnga bwe kibadde. Kozesa ebikozesebwa nga bwe kyetaagisa.
  • Ebyokulabirako byonna ebirimu navbars bitereezeddwa okussaamu markup empya.

Okuwandiika empapula

  • Ddamu okuwandiika ekitundu ne flexbox.
  • Ebika eby’olwatu ( .page-item, .page-link) kati byetaagibwa ku bazzukulu ba .paginations
  • Yasuula .pagerekitundu kyonna nga bwe kyali kisingako katono okusinga customized outline buttons.
  • Ekibiina eky’olwatu, .breadcrumb-item, kati kyetaagibwa ku bazzukulu ba .breadcrumbs

Ebipande ne baagi

  • Okugatta .labeln’okuggyamu .badgeensonga okuva mu <label>elementi n’okwanguyiza ebitundu ebikwatagana.
  • Yayongerwako .badge-pillnga modifier for rounded “pill” look.
  • Badge tezikyatengejja mu ngeri ya otomatiki mu bibinja by’olukalala n’ebitundu ebirala. Utility classes kati zeetaagibwa ku ekyo.
  • .badge-defaultebadde esuuliddwa .badge-secondaryn'eyongerwako okukwatagana n'ebika by'ebikyusa ebitundu ebikozesebwa awalala.

Ebipande, ebifaananyi ebitonotono, n’enzizi

Esuuliddwa ddala olw'ekitundu kya kaadi empya.

Ebipande ebiyitibwa Panels

  • .panelto .card, kati ezimbiddwa ne flexbox.
  • .panel-defaulteggyiddwawo era tewali akyusiddwa.
  • .panel-groupeggyiddwawo era tewali akyusiddwa. .card-groupsi kya kudda mu bigere, kya njawulo.
  • .panel-headingku.card-header
  • .panel-titleokutuuka ku .card-title. Okusinziira ku ndabika gy’oyagala, oyinza n’okwagala okukozesa ebintu oba kiraasi z’omutwe (okugeza <h3>, .h3) oba ebintu oba kiraasi enzirugavu (okugeza <strong>, <b>, .font-weight-bold). Weetegereze nti .card-title, wadde nga etuumiddwa mu ngeri y’emu, efulumya endabika ey’enjawulo okusinga .panel-title.
  • .panel-bodyku.card-body
  • .panel-footerku.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, era .panel-dangerzisuuliddwa ku .bg-, .text-, .bordern'ebikozesebwa ebikoleddwa okuva ku $theme-colorsmaapu yaffe eya Sass.

Okukulakulana

  • Yakyusa ebika by’embeera (contextual .progress-bar-*classes) ne .bg-*bifuulibwa ebikozesebwa. Ng’ekyokulabirako, class="progress-bar progress-bar-danger"kifuuka class="progress-bar bg-danger".
  • Ekyusiddwa .activeku bbaala z'enkulaakulana eziriko obulamu ne .progress-bar-animated.
  • Yalongoosa ekitundu kyonna okusobola okwanguyiza dizayini n’okukola sitayiro. Tulina emisono mitono gy’oyinza okusazaamu, ebiraga ebipya, n’ebifaananyi ebipya.
  • CSS yonna ebadde efuuliddwa un-nested era n'ekyusibwa erinnya, okukakasa nti buli kiraasi esookera ddala .carousel-.
    • Ku bintu bya carousel, .next, .prev, .left, era .rightkati .carousel-item-next, .carousel-item-prev, .carousel-item-left, ne .carousel-item-right.
    • .itemnaye kati ye .carousel-item.
    • Ku bifuga eby'emabega/ebiddako, .carousel-control.rightera .carousel-control.leftbiri kati .carousel-control-nextne .carousel-control-prev, ekitegeeza nti tebikyetaaga kiraasi ya musingi eyeetongodde.
  • Ggyawo sitayiro zonna eziddamu, okuyimirizaawo ebikozesebwa (okugeza, okulaga ebigambo ku bifo ebimu eby'okulaba) n'emisono egy'enjawulo nga bwe kyetaagisa.
  • Okuggyibwawo okusazaamu ebifaananyi ku bifaananyi mu bintu bya carousel, okwongezaayo ku bikozesebwa.
  • Tweaked ekyokulabirako kya Carousel okussaamu markup empya ne styles.

Emmeeza

  • Ggyawo obuwagizi bw'emmeeza eziteekeddwa mu sitayiro. Emisono gyonna egy'emmeeza kati gisikira mu v4 ku bisunsula ebyangu.
  • Yayongeddeko enkyukakyuka y’emmeeza ey’ekifuulannenge.

Ebikozesebwa

  • Okwolesebwa, okukwekebwa, n'ebirala:
    • Yakola ebikozesebwa eby’okwolesebwa okuddamu (okugeza, .d-nonene d-{sm,md,lg,xl}-none).
    • Yasuula ekitundu ekinene eky'ebikozesebwa ku .hidden-*bikozesebwa ebipya eby'okwolesebwa . Okugeza, mu kifo kya .hidden-sm-up, kozesa .d-sm-none. Yakyusa amannya g'ebikozesebwa .hidden-printokukozesa enteekateeka y'okutuuma amannya g'ebikozesebwa eby'okwolesebwa. Ebisingawo wansi w'ekitundu kya Responsive utilities ku muko guno.
    • Yayongeddeko .float-{sm,md,lg,xl}-{left,right,none}classes for responsive floats ne ziggyibwawo .pull-leftera .pull-rightokuva bweziri redundant ku .float-leftne .float-right.
  • Okuwandiika:
    • Yayongeddeko enjawulo eziddamu ku bibiina byaffe eby'okusengeka ebiwandiiko .text-{sm,md,lg,xl}-{left,center,right}.
  • Okulaganya n’okuteeka ebanga:
  • Clearfix etereezeddwa okusuula obuwagizi ku nkyusa za browser enkadde.

Entandikwa y’omutunzi mixins

Bootstrap 3's vendor prefix mixins, ezaali ziggyibwawo mu v3.2.0, ziggiddwawo mu Bootstrap 4. Okuva lwe tukozesa Autoprefixer , tezikyakwetaagisa.

Ggyawo mixins zino wammanga: 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

Ebiwandiiko

Ebiwandiiko byaffe byafuna okulongoosebwa mu buli kitundu nabyo. Wano waliwo wansi wansi:

  • Tukyakozesa Jekyll, naye tulina plugins mu mix:
    • bugify.rbekozesebwa okuwandiika obulungi ebiyingiziddwa ku mukutu gwaffe ogwa browser bugs .
    • example.rbye fork eya custom eya highlight.rbplugin eya bulijjo, esobozesa okukwata ekyokulabirako-code okwangu.
    • callout.rbye custom fork efaananako bwetyo eya ekyo, naye ekoleddwa ku callouts zaffe ez'enjawulo eza docs.
    • jekyll-toc ekozesebwa okukola ekipande kyaffe eky’ebirimu.
  • Ebirimu byonna mu docs bizzeemu okuwandiikibwa mu Markdown (mu kifo kya HTML) okusobola okwanguyirwa okulongoosa.
  • Empapula zizzeemu okusengekebwa okusobola okufuna ebirimu ebyangu n’ensengeka esobola okutuukirirwa.
  • Twava ku CSS eya bulijjo okudda ku SCSS okweyambisa mu bujjuvu enkyukakyuka za Bootstrap, mixins, n'ebirala.

Ebikozesebwa ebiddamu

Enkyukakyuka zonna @screen-ziggiddwawo mu v4.0.0. Kozesa media-breakpoint-up(), media-breakpoint-down(), oba media-breakpoint-only()Sass mixins oba $grid-breakpointsSass map mu kifo ky'ekyo.

Ebika byaffe eby’omugaso ebiddamu okusinga biggiddwawo nga biwagira displayebikozesebwa eby’olwatu.

  • The .hiddenne .showclasses ziggiddwawo kubanga zaali zikontana ne jQuery's $(...).hide()n'enkola $(...).show(). Wabula, gezaako okukyusakyusa [hidden]ekintu oba kozesa emisono egy’omu layini nga style="display: none;"ne style="display: block;".
  • Kiraasi zonna .hidden-ziggiddwawo, okuggyako ebikozesebwa mu kukuba ebitabo ebikyusiddwa amannya.
    • Eggiddwa mu 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
    • Eggiddwa mu 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
  • Ebikozesebwa mu kukuba ebitabo tebikyatandika na .hidden-oba .visible-, wabula ne .d-print-.
    • Amannya amakadde: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Ebisulo ebipya: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Mu kifo ky’okukozesa .visible-*kiraasi ez’olwatu, okola ekintu ekirabika ng’omala obutakikweka ku sayizi eyo eya screen. Osobola okugatta .d-*-nonekiraasi emu ne .d-*-blockkiraasi emu okulaga ekintu kyokka ku bbanga eriweereddwa erya sayizi za ssirini (okugeza .d-none.d-md-block.d-xl-noneeraga ekintu ku byuma ebya wakati n’ebinene byokka).

Weetegereze nti enkyukakyuka mu bifo eby’okumenyawo giridi mu v4 kitegeeza nti ojja kwetaaga okugenda ekifo kimu ekinene okusobola okutuuka ku bivaamu bye bimu. Ebika by'omugaso ebipya ebiddamu tebigezaako kukwata misango egitatera kubaawo ng'okulabika kw'ekintu tekuyinza kwolesebwa ng'olunyiriri lumu olukwatagana olw'obunene bw'ekifo eky'okulaba; mu kifo ky’ekyo ojja kwetaaga okukozesa CSS eya bulijjo mu mbeera ng’ezo.