in English

Gara v4tti godaanuu

Bootstrap 4 irra deebiin barreessuu guddaa guutummaa pirojektii kanaati. Jijjiiramni baay’ee mul’atu armaan gaditti gabaabfameera, itti aansuudhaan jijjiirama adda ta’e qaamolee barbaachisoo ta’an irratti taasifameera.

Jijjiirama tasgabbaa’aa

Beta 3 irraa gara gadhiifama v4.x tasgabbaa'aa keenyaatti yoo ceenu, jijjiiramni cabsu hin jiru, garuu jijjiiramni mul'atu tokko tokko jira.

Maxxansa

  • Faayidaa maxxansaa cabe sirreesse. Duraan, gita fayyadamuun .d-print-*gita biraa kamiyyuu osoo hin eegin irra darba .d-*. Amma, isaan faayidaa agarsiisaa keenya kanneen biroo wajjin walsimsiisuu fi miidiyaa sana qofa irratti raawwatu ( @media print).

  • Faayidaa agarsiisa maxxansaa jiran babal'isee faayidaa biroo wajjin walsimsiisuuf. Beta 3 fi isaa ol qofa qaban block, inline-block, inline, fi none. Tasgabbaa'aa v4 dabalame flex, inline-flex, table, table-row, fi table-cell.

  • Agarsiisa durtii maxxansaa dhaabbataa biraawwaroota hunda keessatti akkaataa maxxansaa haaraa kanneen ifteessaniin @page size.

Beta 3 jijjiirama

Beta 2 yeroo marsaa beetaa jijjiirama cabsuu keenyaa harka caalu kan arge yoo ta'u, garuu ammallee muraasa kanneen Beta 3 gadhiifamu keessatti furmaata argachuu qaban qabna. Jijjiiramni kun kan hojjetu yoo Beta 2 irraa gara Beta 3 ykn Bootstrap isa durii kamiyyuutti fooyyessaa jirta ta'edha.

Kan hin beekamne

  • $thumbnail-transitionJijjiiramaa hin fayyadamne haqee . Homaa hin ce'aa turre, kanaaf koodii dabalataa qofa ture.
  • Paakeejiin npm kana booda faayiloota madda fi dist keenyaan alatti faayiloota biroo hin hammatu; yoo isaanitti hirkattee fi iskiriiptii keenya karaa node_modulesgalmee sanaa hojjechaa turte, adeemsa hojii kee madaqsuu qabda.

Unkaalee

  • Sanduuqawwan filannoo fi raadiyoowwan amalaafi durtii lamaan irra deebi'ii barreessi. Amma, lamaan isaanii caasaa HTML walsimsiisu (alaa <div>obboleessa <input>fi <label>) fi akkaataa qindaa'ina walfakkaataa (durtii tuulamaa, gita fooyyessaa wajjin sarara keessaa) qabu. Kunis haala galtee irratti hundaa'uun asxaa akkaataa itti goonu nu dandeessisa, deeggarsa disabledamalootaa salphisuu (duraan gita warraa barbaada) fi mirkaneessuu unkaa keenya haala gaariin deeggaru.

    background-imageAkka qaama kanaatti, CSS sanduuqa filannoo unka amalaafi raadiyoo irratti s hedduu bulchuuf jijjiirreerra . Duraan, qaamni amma haqame .custom-control-indicatorhalluu duubbee, garaagarummaa, fi mallattoo SVG qaba ture. Garaagarummaa duubbee dhuunfachuu jechuun yeroo tokko qofa jijjiiruu qabdu hundatti kanneen hunda bakka buusuu jechuudha. Amma, .custom-control-label::beforeguutuu fi garagalchaaf qabna akkasumas .custom-control-label::aftermallattoo qabata.

    Sarara keessaa sakatta'iinsa amala gochuuf, dabali .custom-control-inline.

  • Filataa gareewwan qaree galtee irratti hundaa'aniif fooyya'e. Akkaataa [data-toggle="buttons"] { }fi amalaaf osoo hin taane, dataamalli amala JS qofaaf fayyadamnee .btn-group-toggleakkaataadhaaf gita haaraa irratti hirkatna.

  • .col-form-legendXiqqoo fooyya'e fayyadu buqqifame .col-form-label. Haala kanaan .col-form-label-smfi elementoota irratti salphaatti .col-form-label-lgfayyadamuu ni danda'ama .<legend>

  • Galteewwan faayilii amala jijjiiramaa $custom-file-textSass isaanii irratti jijjiirama argatan. Kana booda kaartaa Sass nested miti amma immoo dhangii tokko qofa humna kenna- Browsebutton akkuma sun amma pseudo-element qofa Sass keenya irraa maddisiifame. Barreeffamni Choose fileamma kan dhufe .custom-file-label.

Garee galtee

  • Addons garee galtee amma galtee tokkoo wajjin walqabatee iddoo isaaniif adda ta'u. Kufnee jirra .input-group-addonfi .input-group-btndaree haaraa lamaaf, .input-group-prependfi .input-group-append. Amma ifatti dabalata ykn durtii fayyadamuu qabda, baay'ee CSS keenyaa salphisa. Dabalata ykn durtii keessa, qaree kee akka bakka biraa kamiyyuu jiranitti kaa'i, garuu barruu .input-group-text.

  • Akkaataaleen mirkaneessuu amma ni deeggaraman, akkuma galteewwan hedduu (garee tokkoof galtee tokko qofa mirkaneessuu dandeessa ta'us).

  • Gitoota safaruu warra irratti ta'uu qaba .input-groupmalee qaamolee unkaa dhuunfaa irratti ta'uu hin qabu.

Beta 2 jijjiirama

Beetaa keessa osoo jirruu jijjiirama cabsuu tokkollee akka hin qabne kaayyeffanna. Haa ta'u malee, yeroo hunda wanti akka karoorfametti hin deemu. Jijjiirama cabsuu yeroo Beta 1 irraa gara Beta 2tti ce'an yaada keessa galchuu qabdan armaan gaditti dhiyaataniiru.

Cabsuu

  • $badge-colorJijjiiramaa fi itti fayyadama isaa irratti haqame .badge. Faankishinii walfaallaa halluu fayyadamnee a colorirratti hundaa'uun filanna background-color, kanaaf jijjiiramaan hin barbaachisu.
  • grayscale()Faankishinii gara maqaa jijjiirame gray()waldhabdee grayscalecalaqqee dhalootaa CSS waliin akka hin cabsneef.
  • Maqaa jijjiirame .table-inverse, .thead-inverse, fi .thead-defaultgara .*-darkfi .*-light, walsimsiisuun halluu keenya bakka biraatti fayyadamnu.
  • Gabateewwan deebii kennaman amma tokkoon tokkoo tuqaa ciccitaa tarjaadhaaf gitawwan maddisiisu. Kun Beta 1 irraa kan cabsu yoo ta'u, the .table-responsiveati fayyadamaa turte caalaatti .table-responsive-md. Amma fayyadamuu dandeessa .table-responsiveykn .table-responsive-{sm,md,lg,xl}akka barbaachisummaa isaatti.
  • Deeggarsi Bower kufe akka hogganaan paakeejii filannoowwaniif (fkn, Yarn ykn npm) hin barbaachifneetti. Bal’ina isaaf bower/bower#2298 ilaali.
  • Bootstrap ammallee jQuery 1.9.1 fi isaa ol barbaada, garuu v3.x'n deeggarame browsers kanneen Bootstrap deeggaru dabalataan v3.x sirreeffama nageenyaa tokko tokko waan qabuuf version 3.x akka fayyadamtu gorfama.
  • Kutaa hin fayyadamne haqee .form-control-label. Yoo gita kana fayyadamte, dachaa gita kan galtee isaa walqabate waliin qindaa'inoota unka qajeelaa keessatti .col-form-labela vertikaaliin giddugaleessa godhe ture.<label>
  • color-yiqThe mixin kan qabeentaa hammate irraa gara faankishinii gatii deebisu jijjiire color, qabeentaa CSS kamiifuu akka fayyadamtu si dandeessisa. Fakkeenyaaf, bakka color-yiq(#000), barreessita turte color: color-yiq(#000);.

Wantoota ijoo ta'an

  • Fayyadama haaraa pointer-eventsmoodaalota irratti jalqabe. Alaan .modal-dialogtaateewwan keessa darba with for custom click handling ( cuqaasuu kamiifuu pointer-events: nonekan irratti qofa dhaggeeffachuu akka danda'amu taasisa ), sana booda qabatamaa wajjin counteracts it ..modal-backdrop.modal-contentpointer-events: auto

Cuunfaa

Wantoonni tikkeettii gurguddoo yeroo v3 irraa gara v4tti sochootan irratti dammaquu barbaaddan kunooti.

Deeggarsa biraawzari

  • Deeggarsa IE8, IE9, fi iOS 6 gadi dhiise. v4 amma IE10+ fi iOS 7+ qofa ta'eera. Marsariitiiwwan kanneen keessaa tokko barbaadaniif, v3 fayyadami.
  • Deeggarsa ofiisaa Android v5.0 Lollipop's Browser fi WebView dabale. Versions Android Browser fi WebView duraanii haala hin ofiisaa qofaan deeggaramee hafa.

Jijjiirama addunyaa

  • Flexbox durtiidhan dandeessifama. Walumaagalatti kun jechuun qaamolee keenya qaxxaamuranii floats fi caalaa irraa fagaachuu jechuudha.
  • Faayilota CSS madda keenyaaf Less irraa gara Sass tti jijjiirameera.
  • Akka yuunitii CSS keenya isa jalqabaatti pxgara garaatti jijjiirame rem, haa ta'u malee piikseelonni ammallee gaaffii miidiyaa fi amala tarjaadhaaf kan fayyadaman ta'us akkuma buufatawwan ilaalcha meeshaa guddina akaakuutiin hin miidhamne.
  • Guddinni qubee addunyaa irraa 14pxgara 16px.
  • Filannoo shanaffaa dabaluudhaaf sadarkaawwan tarjaa haaromse (meeshaalee xixiqqoo irratti 576pxfi gadiitti teessoo kennuu) fi -xsinfix gitaalee sana irraa haqee. Fakkeenyaaf: .col-6.col-sm-4.col-md-3.
  • Mata duree filannoo adda ta'e filannoowwan qindaa'uu danda'aniin karaa jijjiiramoota SCSS bakka buuse (fkn, $enable-gradients: true).
  • Sirni ijaarsaa Grunt osoo hin taane iskiriiptii npm walduraa duubaan fayyadamuuf fooyya'e. Iskiriiptii hundaaf ilaali package.json, ykn pirojektii keenya readme fedhii misooma naannoo.
  • Fayyadamni Bootstrap deebii hin kennine kana booda hin deeggaramu.
  • Dokumantarii qindeessaa bal'aa fi ijaarsa dhuunfate fayyaduudhaan Customizer toora interneetii gadi dhiise.
  • Lamaan qabeenya-gatii CSS waliigalaa fi karaa gabaabaa addaan fageenya margin/padding tiif gita faayidaa haaraa kudhan kudhan dabalame .

Sirna giiridii

  • Gara flexbox tti ce'e.
    • Deeggarsa flexbox mixins tarjaa fi gita durtii keessatti dabalame.
    • Akka qaama flexbox, deeggarsa gita qindaa'ina dhaabbataa fi qajeelaa of keessatti hammate.
  • Maqaa gita tarjaa fooyya'ee fi sadarkaa tarjaa haaraa.
    • To'annoo granular caalaaf smsadarkaa tarjaa haaraa armaan gadii dabale . 768pxAmma xs, sm, md, lg, fi xl. Kunis sadarkaan hundi sadarkaa tokko bumped up ta'eera jechuudha (kanaaf .col-md-6v3 keessatti amma .col-lg-6v4 keessa jira).
    • xsmin-width: 0gitaawwan tarjaa akka isaan akkaataawwan gatii piikselii saagame irratti malee gatii piikselii saagame irratti hojii irra oolchuu akka jalqaban caalaatti sirritti bakka bu'uu akka hin barbaachifneef fooyya'aniiru . Bakka .col-xs-6, amma .col-6. Sadarkaaleen tarjaa biroo hundi infix barbaadu (fkn, sm).
  • Hammangaawwan tarjaa, mixins, fi jijjiiramoota fooyya'an.
    • Guutaroonni giiridii amma kaartaa Sass qabu kanaaf bal'ina gutter murtaa'e tokkoon tokkoo qabxii cabbii irratti ifteessuu dandeessa.
    • Miksiin tarjaa fooyya'e make-col-readymiksiin qophii fayyadamuuf fi a make-colsaaguuf flexakkasumas max-widthsafara tarjaa dhuunfaaf.
    • Qabxiilee ciccitaa gaaffii miidiyaa sirna tarjaa jijjiirame fi bal'ina qabduu sadarkaa tarjaa haaraa herrega gochuuf fi tarjaawwan 12bal'ina isaanii ol'aanaa irratti walqixa qoodamuu isaanii mirkaneessuuf.
    • Qabxiileen ciccitaa tarjaa fi bal'inni qabduu amma jijjiiramoota adda addaa harka muraasa osoo hin taane karaa kaartaa Sass ( $grid-breakpointsfi ) qabamu. $container-max-widthsIsaan kun @screen-*jijjiiramoota guutummaatti bakka bu'u fi sadarkaawwan tarjaa guutummaatti akka dhuunfattu si dandeessisu.
    • Gaaffiin miidiyaalees jijjiirameera. Ibsa gaaffii miidiyaa keenyaa yeroo hunda gatii walfakkaatuun irra deddeebi'uu mannaa, amma @include media-breakpoint-up/down/only. Amma, barreessuu mannaa , @media (min-width: @screen-sm-min) { ... }barreessuu dandeessa @include media-breakpoint-up(sm) { ... }.

Qaamolee

  • Paanaalii, suuraa xiqqaa, fi boolla qaama haaraa hunda hammateef, kaardii .
  • Qubee mallattoo Glyphicons gadi dhiise. Yoo mallattoolee barbaadde, filannoowwan tokko tokko:
  • Ijaarsa Affix jQuery jedhu gadi dhiise.
    • Inumaa fayyadamuu ni gorsina position: sticky. Bal'inaafi gorsa addaa polyfill argachuuf HTML5 Maaloo galtee ilaali . Yaadni tokko @supportsseera hojiirra oolchuuf fayyadamuudha (fkn, @supports (position: sticky) { ... }) .
    • Yoo dabalataa, positionakkaataa hin taane hojii irra oolchuuf Affix fayyadamaa turte, polyfills haala fayyadama kee deeggaru dhiisuu danda'a. Filannoon tokko fayyadama akkasii mana kitaabaa qaama sadaffaa ScrollPos-Styler dha.
  • Bu'uuraan xiqqoo buttons dhuunfatame waan ta'eef qaama pager gadi dhiise.
  • Filattoota ijoollee garmalee adda ta'an osoo hin taane filattoota gitaa hin-n-nested baay'ee fayyadamuuf qaamolee hunda jechuun ni danda'ama irra deebi'ee faaktar godhe.

Qaamoleetiin

Tarreen kun jijjiirama furtuu qaamaan v3.xx fi v4.0.0 gidduu jiru calaqqisiisa.

Irra deebi'ii jalqabi

Bootstrap 4 irratti haaraan Reboot , stylesheet haaraa kan Normalize irratti ijaarame akkaataa reset mataa keenyaa hamma tokko yaada qabudha. Filattoonni faayilii kana keessatti mul'atan elementoota qofa fayyadamu—asitti gitawwan hin jiran. Kunis akkaataa irra deebi'uu keenya akkaataa qaama keenyaa irraa adda baasee mala caalaatti moojuulaa ta'eef. Resetwwan barbaachisoo ta'an keessaa muraasni kun of keessatti hammate box-sizing: border-boxjijjiirama, elementoota hedduu irratti emgara remyuunitii irraa socho'uu, akkaataa walqabsiisaa, fi irra deebi'uu elementoota unkaa hedduudha.

Taayipoogiraafii

  • .text-Faayidaa hunda gara _utilities.scssfaayilii sochoose.
  • Akkaataawwan .page-headerisaa karaa faayidaa hojii irra oolchuun waan danda'amuuf gadi bu'e.
  • .dl-horizontalkufee jira. Inumaayyuu, .rowon fayyadami <dl>fi gita tarjaa tarjaa (ykn mixins) isaa <dt>fi <dd>ijoollee irratti fayyadami.
  • Caqasoota uggura irra deebi'amee hojjetame, akkaataa isaanii <blockquote>elementii irraa gara gita tokkootti sochoosuun, .blockquote. .blockquote-reverseFaayidaa barruudhaaf fooyyessaa gadi dhiise.
  • .list-inlineamma wantoota tarreessuun ijoolleen isaa .list-inline-itemgita haaraan akka isaan irratti hojiirra oolu barbaada.

Fakkiiwwan

  • Moggaafame .img-responsivegara .img-fluid.
  • Maqaa .img-roundedjijjiirrame.rounded
  • Maqaa .img-circlejijjiirrame.rounded-circle

Gabateewwan

  • Fakkeenyonni >filannoo hunduu jechuun ni danda'ama haqamaniiru, jechuunis gabateewwan man'ee amma ofumaan akkaataa warra isaanii irraa dhaalu. Kunis filattoota keenyaa fi dhuunfachiisuu danda'an baay'ee salphisa.
  • Walsimannaaf .table-condensedgara maqaa jijjiirame .table-sm.
  • .table-inverseFilannoo haaraa dabale .
  • Fooyyessitoota mataduree gabatee dabalame: .thead-defaultfi .thead-inverse.
  • Gitoota yaadannoo akka .table--durtii qabaataniif jijjiire. Kanarraa ka’uun .active, .success, .warning, .dangerfi .infogara .table-active, .table-success, .table-warning, .table-dangerfi .table-info.

Unkaalee

  • Qaamni socho'e gara _reboot.scssfaayilii deebisa.
  • Moggaafame .control-labelgara .col-form-label.
  • Maqaa jijjiiramee .input-lgfi .input-smgara .form-control-lgfi .form-control-sm, akkaataa wal duraa duubaan.
  • Salphaa .form-group-*ta'uuf jecha daree gadi dhiise. .form-control-*Amma bakka isaa daree fayyadami .
  • Gadi dhiisee barruu gargaarsa sadarkaa ugguraaf .help-blockbakka buuse . .form-textBarruu gargaarsa sarara keessaa fi filannoowwan biroo socho'oodhaaf, gita faayidaa akka .text-muted.
  • Kufee .radio-inlinefi .checkbox-inline.
  • Walitti makamee .checkboxfi .radiogara .form-checkfi gita adda addaa .form-check-*.
  • Unkaalee qajeeloo irra deebiin fooyya’an: 1.1.
    • .form-horizontalUlaagaa daree gadi dhiise .
    • .form-groupkana booda akkaataawwan .rowkaraa mixin irraa hin hojjetu, kanaafuu .rowamma qindaa'inoota tarjaa qajeeloodhaaf barbaachisaadha (fkn, <div class="form-group row">).
    • Asxaalee giddugaleessa dhaabbataa s .col-form-labelwaliin gita haaraa dabalame ..form-control
    • .form-rowHaaraa qindaa'inoota unkaa kompaaktii gita tarjaa waliin dabalame (kee .rowa .form-rowfi deemi jijjiiri).
  • Deeggarsa unkaalee amala dabalame (sanduuqawwan filannoo, raadiyoowwan, filannoowwanii, fi galtee faayilii).
  • .has-error, .has-warning, fi gitaalee .has-successmirkaneessa unka HTML5 karaa CSS's :invalidfi :validgita-sobaatiin bakka bu'e.
  • Moggaafame .form-control-staticgara .form-control-plaintext.

Qabduulee

  • Moggaafame .btn-defaultgara .btn-secondary.
  • .btn-xsKutaa guutummaatti akka v3 .btn-sm's caalaa proportionally baay'ee xiqqaa ta'etti gadi dhiise.
  • Amalli qaree haalaa kan button.jsjQuery plugin gadi bu'eera. Kunis malawwanii $().button(string)fi kan dabalatudha. $().button('reset')Inumaayyuu JaavaScript amala xiqqoo fayyadamuu gorsina, kunis faayidaa sirriitti akkaataa ati barbaaddutti amala qabaachuu qabaata.
    • Hubadhu, amaloonni biroo pilaaginii (sanduuqa filannoo qaree, raadiyoo qaree, qaree jijjiirraa tokkoo) v4 keessatti qabamaniiru.
  • Qabduu' [disabled]gara :disabledakka IE9+ deeggarutti jijjiiri :disabled. Haa ta'u malee fieldset[disabled]ammallee barbaachisaa dha sababiin isaas tuuta man'ee dhalootaan hanqifame ammallee IE11 keessatti dogongora qaba .

Garee buttooni

  • Qaama flexbox waliin irra deebi'ii barreessi.
  • Buqqifame .btn-group-justified. Akka bakka bu'iinsaatti <div class="btn-group d-flex" role="group"></div>akka marfata naannoo elementoota .w-100.
  • .btn-group-xsKutaa guutummaatti kennamee buqqisuu gadi dhiise .btn-xs.
  • Gareewwan qaree gidduutti addaan fageenya ifa ta'e barruulee qaree keessatti haqameera; amma faayidaa margina fayyadami.
  • Galmee fooyya'aa qaamolee biroo wajjin fayyadamuuf.
  • Filattoota warraa irraa gara gita tokkichatti qaamolee hundaaf, fooyyessitoota fi kkf jijjiirame.
  • Akkaataawwan gadi bu'aa salphaa ta'an kana booda xiyyawwan gara oliitti ykn gara gadiitti ilaalan kanneen sajoo gadi bu'aa irratti maxxanan waliin akka hin ergineef.
  • Dropdowns amma s <div>ykn s waliin ijaaruun ni danda'ama .<ul>
  • Akkaataawwan gadi bu'aa fi mallattoo irra deebi'amee ijaarame wanta gadi bu'aa salphaa, deeggarsa keessaa <a>fi <button>bu'uura godhate kennuudhaaf.
  • Moggaafame .dividergara .dropdown-divider.
  • Wantoonni gadi bu'an amma barbaadu .dropdown-item.
  • Jijjiirraawwan gadi bu'iinsaa kana booda ifa ta'e hin barbaadan <span class="caret"></span>; kun amma ofumaan karaa CSS's ::afteron .dropdown-toggle.

Sirna giiridii

  • 576pxQabxii cabsuu tarjaa haaraa akka tti dabalame sm, jechuunis amma sadarkaa waliigalaa shan jira ( xs, sm, md, lg, fi xl).
  • Gitoota fooyyessaa tarjaa deebii kennuu gita tarjaa salphaa ta'aniif .col-{breakpoint}-{modifier}-{size}gara garatti jijjiire..{modifier}-{breakpoint}-{size}
  • Gitoota fooyyessaa dhiibaa fi harkisaa gitaalee haaraa flexbox-powered ta'aniif gadi dhiise order. Fakkeenyaaf, bakka .col-8.push-4fi , fi .col-4.pull-8fayyadamta ..col-8.order-2.col-4.order-1
  • Gitoota faayidaa flexbox sirna giiridii fi qaamoleedhaaf dabalame.

Garee tarreessi

  • Qaama flexbox waliin irra deebi'ii barreessi.
  • a.list-group-itemGitaa ifa ta'een bakka bu'e, , .list-group-item-actionakkaataa walqabsiisaa fi gosoota qaree wanta garee tarreef.
  • .list-group-flushKaardii waliin fayyadamuuf gita dabalame .
  • Qaama flexbox waliin irra deebi'ii barreessi.
  • Gara flexbox tti ce'uu yoo ilaalle, kana booda floats fayyadamaa waan hin jirreef, qindaa'inni mallattoolee ari'uu mataduree keessatti cabsuu hin oolu. Qabiyyeen lola'e dursa, garuu flexbox waliin kana booda akkas miti. Mallattoolee hojii irraa ari'uu kee fooyyessuuf mata dureewwan moodaalii booda dhufan haaromsi.
  • Filannoon remote(kan qabiyyee alaa ofumaan fe'uu fi gara moodaaliitti galchuuf fayyadamuu danda'u) fi loaded.bs.modaltaatee walgitu haqameera. Inumaayyuu unkaa gama maamilaa ykn unkaa hidhaa deetaa fayyadamuu, ykn jQuery.load ofii keetii waamuun ni gorsina.
  • Qaama flexbox waliin irra deebi'ii barreessi.
  • Filattoota hunda jechuun ni danda'ama >karaa gitaalee un-nested styling salphaa ta'eef gadi dhiise.
  • Filattoota HTML adda ta'an kan akka , osoo hin taane, s , s, fi s'f .nav > li > agita adda addaa fayyadamna . Kunis HTML kee caalaatti kan jijjiiramu yoo ta'u, bal'ina dabalataa fida..nav.nav-item.nav-link

Navbar guutummaatti flexbox keessatti irra deebi'amee barreeffame deeggarsa fooyya'aa qindaa'ina, deebii kennuu, fi dhuunfachiisuun.

  • Amaloonni navbar deebii kennan amma .navbarkaraa barbaachisaa .navbar-expand-{breakpoint} bakka ati bakka navbar itti kuffistu filattu gita irratti hojii irra oola. Duraan kun fooyya'iinsa jijjiiramaa xiqqaa ta'ee fi irra deebiin qindeessuu barbaada ture.
  • .navbar-defaultis now .navbar-light, haa ta’u malee .navbar-darkakkuma jirutti jira. Kanneen keessaa tokko tokkoon tokkoon navbar irratti barbaachisaadha. Haa ta’u malee, gitawwan kun kana booda background-colors hin kaa’an; inumaayyuu isaan bu'uuraan color.
  • Navbars amma ibsa duubbee gosa tokkoo barbaadu. Faayidaa duubbee keenya keessaa filadhu ( .bg-*) ykn gita ifaa/faallaa armaan olii wajjin kan kee saagi mad customization .
  • Akkaataawwan flexbox kennaman, navbars amma filannoowwan qindaa'ina salphaadhaaf faayilii flexbox fayyadamuu danda'u.
  • .navbar-toggleamma ta'ee .navbar-togglerfi akkaataa adda addaa fi mallattoo keessaa qaba ( <span>s sadii caalaa hin jiru).
  • .navbar-formGuutummaatti daree gadi dhiise . Kana booda barbaachisaa miti; kanaa mannaa, .form-inlineakka barbaachisummaa isaatti faayidaa margina fayyadamuu fi hojiirra oolchuu qofa.
  • Navbars kana booda hin dabalatu margin-bottomykn border-radiusdurtii. Akka barbaachisummaa isaatti utilities fayyadamuu.
  • Fakkeenyonni navbar agarsiisan hundi mallattoo haaraa akka hammataniif fooyya'aniiru.

Fuulaa (Pagination) jedhu

  • Qaama flexbox waliin irra deebi'ii barreessi.
  • Gitoota ifa ta'an ( .page-item, .page-link) amma sanyii .paginations irratti barbaachisoodha
  • Qabduu .pageryaada dhuunfate caalaa xiqqoo waan ta'eef qaama guutummaatti gadi dhiise.
  • Gitni ifa ta’e, .breadcrumb-item, amma sanyii .breadcrumbs irratti barbaachisaadha

Asxaalee fi baajii

  • Walitti makamee .labelfi elementii .badgeirraa disambiguate gochuu <label>fi qaamolee walqabatan salphisuuf.
  • .badge-pillIlaalcha “kiniinii” geengoo ta’eef akka fooyyessaatti dabalame .
  • Baajiiwwan kana booda gareewwan tarree fi qaamolee biroo keessatti ofumaan hin yaa'aman. Sanaaf amma kutaaleen faayidaa barbaachisa.
  • .badge-default.badge-secondarygita fooyyessaa qaama bakka biraatti fayyadaman walsimsiisuuf kufee dabalameera.

Paanaalii, suuraa xiqqaa, fi boolla bishaanii

Guutummaatti qaama kaardii haaraadhaaf gadi bu'e.

Paanaalii

  • .panelto .card, amma flexbox waliin ijaarame.
  • .panel-defaultbuqqa’ee bakka bu’ee hin jiru.
  • .panel-groupbuqqa’ee bakka bu’ee hin jiru. .card-groupbakka bu'aa miti, addadha.
  • .panel-headinggara.card-header
  • .panel-titlegara .card-title. Ilaalcha barbaadame irratti hundaa'uun, akkasumas qaamolee ykn gita mata duree (fkn <h3>, .h3) ykn qaamolee ykn gita jajjaboo (fkn <strong>, <b>, .font-weight-bold) fayyadamuu barbaadda ta'a. Hubadhu .card-title, haala walfakkaatuun kan moggaafame yoo ta'ellee, ilaalcha adda ta'e kan uumu ta'uu isaa hubadhu .panel-title.
  • .panel-bodygara.card-body
  • .panel-footergara.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, fi , , fi faayidaa kaartaa Sass keenya irraa uumamaniif .panel-dangergataniiru ..bg-.text-.border$theme-colors

Fooyya'iinsa

  • .progress-bar-*Gitoota haalata .bg-*fayyadamtootaan bakka bu'e. Fakkeenyaaf, class="progress-bar progress-bar-danger"taʼa class="progress-bar bg-danger".
  • Barruulee .activeadeemsa socho'aniif .progress-bar-animated.
  • Dizaayinii fi istaayilii salphisuuf qaama guutuu sirreesse. Akkaataawwan muraasa akka ati irra darbitu, agarsiistota haaraa, fi mallattoolee haaraa qabna.
  • CSS hundi un-nested fi maqaa jijjiirameera, tokkoon tokkoon gitaa durtii .carousel-.
    • Meeshaalee karooseeliidhaaf, .next, .prev, .left, fi .rightamma .carousel-item-next, .carousel-item-prev, .carousel-item-left, fi .carousel-item-right.
    • .itemakkasumas amma .carousel-item.
    • To'annoowwan duraa/itti aanuuf, .carousel-control.rightfi .carousel-control.leftamma .carousel-control-nextfi .carousel-control-prev, jechuunis kana booda gita bu'uuraa murtaa'e hin barbaadan.
  • Akkaataa deebii kennuu hunda haqee, faayilii yeroo biraatti dabarsuu (fkn, mata dureewwan mul'ata murtaa'oo irratti agarsiisuu) fi akkaataa amala akka barbaachisummaa isaatti.
  • Fakkiiwwan wanta kaarooseelii keessa jiraniif fakkiiwwan irra darbaman haqame, gara faayidaatti yeroo biraatti dabarsu.
  • Fakkeenya Kaarooseelii mallattoo fi akkaataa haaraa hammachuudhaaf jijjiire.

Gabateewwan

  • Deeggarsi gabateewwan man'ee akkaataa qabaniif haqameera. Akkaataawwan gabatee hundi amma filattoota salphaa ta'aniif v4 keessatti dhaalamu.
  • Garaagarummaa gabatee faallaa dabalame.

Faayidaa (Utilities) jedhaman

  • Agarsiisi, dhokataa fi kanneen biroo:
    • Faayidaaleen agarsiisaa deebii akka kennan taasise (fkn, .d-nonefi d-{sm,md,lg,xl}-none).
    • Faayidaa agarsiisaa haaraadhaaf .hidden-*faayidaa baay'ee gadi dhiise . Fakkeenyaaf, bakka , fayyadami . Iskiimii moggaasa faayidaa agarsiisaa fayyadamuuf faayilii maqaa jijjiire. Odeeffannoo dabalataa kutaa Faayidaa deebii kennuu fuula kanaa jalatti..hidden-sm-up.d-sm-none.hidden-print
    • .float-{sm,md,lg,xl}-{left,right,none}Gitoota deebii kennuudhaaf dabalamee fi buqqifamee .pull-leftfi .pull-righterga isaan gara .float-leftfi .float-right.
  • Akaakuu:
    • Jijjiiramoota deebii kennanii gitaalee qindaa'ina barruu keenyaatti dabale .text-{sm,md,lg,xl}-{left,center,right}.
  • Hiriirsaa fi addaan fageenya: 1.1.
    • Faayidaa deebii kennuu haaraa margina fi padding gama hundaaf dabalame, dabalataan gabaabduu dhaabbataa fi qajeelaa.
    • Faayidaa flexbox bidiruu fe'ame dabale .
    • Kutaa .center-blockhaaraadhaaf gadi bu'e .mx-auto.
  • Clearfix deeggarsa gosoota biraawzari durii gadi dhiisuuf fooyya'e.

Miksiinota durtii gurguraa

Bootstrap 3's vendor prefix mixins, kan v3.2.0 keessatti hin barbaachifne, Bootstrap 4 keessatti haqameera.Erga Autoprefixer fayyadamnee , kana booda barbaachisoo miti.

Miksiinota armaan gadii haqee: 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,translate3duser-select

Dokumantarii

Dokumantarii keenyas akkasuma fooyya'iinsa argateera. Kunoo gadi bu'aa gadi bu'aa:

  • Ammallee Jekyll fayyadamaa jirra, garuu mix keessatti plugins qabna:
  • Qabiyyeen docs hundi gulaallii salphaa ta'eef Markdown (HTML osoo hin taane) irra deebi'amee barreeffameera.
  • Fuulonni qabiyyee salphaa fi sadarkaa itti dhiyaachuu danda’uuf irra deebiin gurmaa’aniiru.
  • Jijjiiramoota Bootstrap, mixins, fi kkf guutummaatti fayyadamuuf CSS idilee irraa gara SCSS tti ce'e.

Faayidaa deebii kennu

Jijjiiramoonni hundi @screen-v4.0.0 keessatti haqamaniiru. Bakka isaa media-breakpoint-up(), media-breakpoint-down(), ykn media-breakpoint-only()Sass mixins ykn $grid-breakpointskaartaa Sass fayyadami.

Gitoota faayidaa deebii kennan keenya baay’inaan displayfaayidaa ifa ta’e fayyadu buqqifamaniiru.

  • Gitoonni .hiddenfi jQuery's fi malawwan .showwaliin waan wal dhabaniif haqamaniiru . Inumaayyuu, amallicha jijjiiruu yaali ykn akkaataa sarara keessaa akka fi fayyadami .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Gitiiwwan hundi .hidden-haqamaniiru, faayilii maxxansaa kanneen maqaa jijjiiran qusata.
    • v3 irraa kan haqame:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • v4 alphas irraa kan haqame:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Faayidaaleen maxxansaa kana booda .hidden-ykn tiin hin jalqaban .visible-, garuu .d-print-.
    • Maqaa durii: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Kutaa haaraa: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Gitoota ifa ta'an fayyadamuu irra .visible-*, elementii tokko salphaatti hammangaa iskiriinii sanaan dhoksuu dhiisuudhaan akka mul'atu goota. .d-*-noneGitaa tokko gita tokko waliin walitti makuun .d-*-blockelementii tokko gidduugaleessa hammangaa iskiriinii kenname qofa irratti .d-none.d-md-block.d-xl-noneagarsiisuu dandeessa (fkn elementicha meeshaalee giddugaleessaa fi gurguddoo qofa irratti agarsiisa).

Hubadhu jijjiiramni tuqaawwan ciccitaa tarjaa v4 keessatti bu'aa walfakkaataa galmaan ga'uuf qabxii ciccituu tokko guddaa deemuun si barbaachisa jechuudha. Gitoota faayidaa deebii kennan haaraan haalawwan baay'inaan hin mul'anne bakka mul'achuun elementii tokkoo akka hammangaa buufata ilaalchaa tokkootti walitti aanee ibsamuu hin dandeenye keessummeessuuf hin yaalan; inumaayyuu haala akkasii keessatti CSS amala fayyadamuu si barbaachisa.