Source

Kusamukira ku v4

Bootstrap 4 ndikulembanso kwakukulu kwa polojekiti yonse. Zosintha zodziwika bwino ndizofupikitsidwa pansipa, ndikutsatiridwa ndi kusintha kwapadera kwa zigawo zofunikira.

Kusintha kokhazikika

Kuchokera ku Beta 3 kupita ku v4.0 yathu yokhazikika, palibe zosintha, koma pali zosintha zina.

Kusindikiza

  • Zothandizira zosindikiza zosweka. M'mbuyomu, kugwiritsa ntchito .d-print-*kalasi kungawononge mosayembekezereka gulu lina lililonse .d-*. Tsopano, amafanana ndi zida zathu zina zowonetsera ndipo amangogwira pa media ( @media print).

  • Onjezani zida zosindikizira zomwe zilipo kuti zigwirizane ndi zida zina. Beta 3 ndi akulu okha anali ndi block, inline-block, inline, ndi none. Wokhazikika v4 wawonjezedwa flex, inline-flex, table, table-row, ndi table-cell.

  • Kuwonetseratu kosindikiza kokhazikika pamasakatuli onse okhala ndi masitayelo atsopano omwe amafotokozera @page size.

Kusintha kwa Beta 3

Pomwe Beta 2 idawona kuchuluka kwakusintha kwathu pagawo la beta, komabe tili ndi zochepa zomwe zimayenera kuyankhidwa pakutulutsidwa kwa Beta 3. Zosinthazi zimagwira ntchito ngati mukusintha kukhala Beta 3 kuchokera ku Beta 2 kapena mtundu uliwonse wakale wa Bootstrap.

Zosiyanasiyana

  • Anachotsa $thumbnail-transitionkusintha kosagwiritsidwa ntchito. Sitinali kusintha kalikonse, kotero inali ma code owonjezera.
  • Phukusi la npm siliphatikizanso mafayilo ena kupatula mafayilo athu ndi dist; ngati mumawadalira ndikuyendetsa zolemba zathu kudzera node_modulesmufoda, muyenera kusintha kachitidwe kanu.

Mafomu

  • Lembaninso mabokosi ndi mawailesi omwe mwamakonda komanso osasintha. Tsopano, onse ali ndi mawonekedwe a HTML ofananira (akunja <div>ndi abale ) <input>ndi <label>masitayilo omwewo (osakhazikika, okhala ndi gulu losintha). Izi zimatilola kupanga masitayilo kutengera momwe zalembedwera, kufewetsa kuthandizira kwa mawonekedwe disabled(omwe poyamba amafunikira kalasi ya makolo) komanso kuthandizira kutsimikizira mawonekedwe athu.

    Monga gawo la izi, tasintha CSS yoyang'anira ma angapo background-imagepamabokosi amtundu wamtundu ndi mawayilesi. M'mbuyomu, .custom-control-indicatorchinthu chomwe chidachotsedwa tsopano chinali ndi mtundu wakumbuyo, gradient, ndi chithunzi cha SVG. Kusintha makonda akumbuyo kumatanthauza kusintha zonsezo nthawi iliyonse mukafuna kusintha chimodzi chokha. Tsopano, tili ndi .custom-control-label::beforekudzaza ndi gradient ndikugwirizira .custom-control-label::afterchithunzicho.

    Kuti mupange cheke chokhazikika pamzere, onjezani .custom-control-inline.

  • Chosankha chosinthidwa chamagulu otengera mabatani. M'malo mwa [data-toggle="buttons"] { }kalembedwe ndi kachitidwe, timagwiritsa ntchito mawonekedwewo datapamakhalidwe a JS ndikudalira .btn-group-togglekalasi yatsopano yamakongoletsedwe.

  • Kuchotsedwa .col-form-legendmokomera pang'ono bwino .col-form-label. Njira iyi .col-form-label-smndipo .col-form-label-lgingagwiritsidwe ntchito pazinthu <legend>zosavuta.

  • Zolowetsa zamafayilo mwamakonda zidalandira kusintha kwamitundu yawo ya $custom-file-textSass. Sikulinso mapu a Sass okhala ndi zisa ndipo tsopano akungopatsa mphamvu chingwe chimodzi - Browsebatani popeza ndiye chinthu chokhacho chomwe chimapangidwa kuchokera ku Sass yathu. Mawuwa Choose filetsopano akuchokera ku .custom-file-label.

Magulu olowetsa

  • Zowonjezera zamagulu zolowetsa tsopano ndizokhazikika pakuyika kwawo mogwirizana ndi zolowetsa. Tasiya .input-group-addonndipo .input-group-btnm'makalasi awiri atsopano, .input-group-prependndipo .input-group-append. Muyenera kugwiritsa ntchito append kapena prepend tsopano, kufewetsa zambiri za CSS yathu. M'kati mwa zowonjezera kapena zokonzekera, ikani mabatani anu momwe angakhalire kwina kulikonse, koma sungani malemba mu .input-group-text.

  • Masitayelo otsimikizira tsopano athandizidwa, monganso zolowetsa zingapo (ngakhale mutha kutsimikizira zolowetsa kamodzi pagulu).

  • Makalasi akukula ayenera kukhala pa kholo .input-grouposati mawonekedwe amunthu payekha.

Kusintha kwa Beta 2

Tili mu beta, tikufuna kusasintha. Komabe, zinthu sizimayenda monga momwe munakonzera. Pansipa pali zosintha zomwe muyenera kukumbukira mukachoka ku Beta 1 kupita ku Beta 2.

Kuswa

  • Kusintha $badge-colorkwachotsedwa ndikugwiritsa ntchito pa .badge. Timagwiritsa ntchito mtundu wosiyanitsa mitundu kuti tisankhe colorkutengera background-color, chifukwa chake kusinthako sikofunikira.
  • Ntchito grayscale()yosinthidwa kuti mupewe kuswa mkangano ndi zosefera gray()za CSS .grayscale
  • Kusinthidwa .table-inverse, .thead-inverse, ndi .thead-defaultku .*-darkndi .*-light, kufananiza mitundu yathu yomwe imagwiritsidwa ntchito kwina.
  • Matebulo oyankha tsopano akupanga makalasi amtundu uliwonse wa grid. Izi zikuchokera ku Beta 1 chifukwa zomwe .table-responsivemwakhala mukugwiritsa ntchito ndizofanana .table-responsive-md. Mutha kugwiritsa ntchito .table-responsivekapena .table-responsive-{sm,md,lg,xl}ngati pakufunika.
  • Thandizo la Bower lomwe lagwetsedwa pomwe woyang'anira phukusi wachotsedwa panjira zina (mwachitsanzo, Yarn kapena npm). Onani bower/bower#2298 kuti mumve zambiri.
  • Bootstrap ikufunabe jQuery 1.9.1 kapena apamwamba, koma mukulangizidwa kugwiritsa ntchito mtundu wa 3.x popeza asakatuli othandizidwa ndi v3.x ndi omwe Bootstrap imathandizira kuphatikiza v3.x ili ndi zosintha zina zachitetezo.
  • Anachotsa kalasi yosagwiritsidwa .form-control-labelntchito. Ngati munagwiritsapo ntchito kalasiyi, inali yofanana ndi .col-form-labelkalasi yomwe imayika pakati a <label>ndi zomwe zimalumikizidwa ndi mawonekedwe opingasa.
  • Anasintha color-yiqkuchokera ku mixin yomwe imaphatikizapo colorkatunduyo kukhala ntchito yomwe imabweretsa mtengo, kukulolani kuti mugwiritse ntchito pa katundu aliyense wa CSS. Mwachitsanzo, m'malo color-yiq(#000)molemba color: color-yiq(#000);.

Mfundo zazikuluzikulu

  • Adayambitsa kugwiritsidwa ntchito kwatsopano pointer-eventspama modals. Zakunja .modal-dialogzimadutsa muzochitika zomwe pointer-events: nonezimangodinanso makonda (kupangitsa kuti zitheke kumvetsera pa .modal-backdropkudina kulikonse), ndiyeno kumatsutsana ndi zenizeni .modal-contentndi pointer-events: auto.

Chidule

Nazi zinthu zazikulu zamatikiti zomwe mungafune kudziwa mukachoka ku v3 kupita ku v4.

Thandizo la msakatuli

  • Adagwetsa thandizo la IE8, IE9, ndi iOS 6. v4 tsopano ndi IE10+ ndi iOS 7+ yokha. Pamasamba omwe akufunika chilichonse mwa izi, gwiritsani ntchito v3.
  • Onjezani chithandizo chovomerezeka cha Android v5.0 Lollipop's Browser ndi WebView. Mitundu yam'mbuyomu ya Android Browser ndi WebView imakhalabe yothandizidwa mosavomerezeka.

Kusintha kwapadziko lonse

  • Flexbox imayatsidwa mwachisawawa. Mwambiri izi zikutanthauza kuchoka pa zoyandama ndi zina kudutsa zigawo zathu.
  • Kusintha kuchokera ku Less kupita ku Sass pamasamba athu a CSS.
  • Kusintha kuchokera pxku remCSS ngati gawo lathu loyamba la CSS, ngakhale ma pixel amagwiritsidwabe ntchito pamafunso azama media ndi machitidwe a grid popeza mawonedwe a chipangizo samakhudzidwa ndi kukula kwa mtundu.
  • Kukula kwa zilembo padziko lonse lapansi kwawonjezeka kuchoka 14pxpa 16px.
  • Adasinthidwanso magawo a gridi kuti muwonjezere njira yachisanu (yoyang'anira zida zazing'ono 576pxpansi ndi pansi) ndikuchotsa -xszosokoneza m'makalasi amenewo. Chitsanzo: .col-6.col-sm-4.col-md-3.
  • M'malo mwa mutu womwe mwasankha ndikusankha zomwe mungasinthidwe kudzera pamitundu yosiyanasiyana ya SCSS (mwachitsanzo, $enable-gradients: true).
  • Pangani dongosolo losinthidwa kuti mugwiritse ntchito zolemba zingapo za npm m'malo mwa Grunt. Onani package.jsonzolembedwa zonse, kapena projekiti yathu yowerengera pazosowa zachitukuko zakomweko.
  • Kugwiritsa ntchito osayankha kwa Bootstrap sikukuthandizidwanso.
  • Yagwetsa Customizer yapaintaneti m'malo mwazolemba zochulukira komanso zomanga makonda.
  • Onjezani makalasi ambiri atsopano amtundu wa CSS mtengo wapawiri ndi njira zazifupi za m'mphepete / padding.

Grid system

  • Zasunthidwa ku flexbox.
    • Thandizo lowonjezera la flexbox mu zosakaniza za gridi ndi makalasi ofotokozedwatu.
    • Monga gawo la flexbox, kuphatikiza chithandizo chamagulu oyimirira ndi opingasa.
  • Adasinthidwa mayina a gulu la grid ndi gawo latsopano la grid.
    • Onjezani smgululi latsopano pansipa 768pxkuti muwongolere kwambiri. Tsopano tili ndi xs, sm, md, lgndi xl. Izi zikutanthawuzanso kuti gawo lililonse lakwera mulingo umodzi (kotero .col-md-6mu v3 tsopano ili .col-lg-6mu v4).
    • xsmakalasi a gridi asinthidwa kuti asafune kuti infix iwonetsere molondola kuti ayamba kugwiritsa ntchito masitayelo min-width: 0osati mtengo wa pixel. M'malo mwake .col-xs-6, ndi tsopano .col-6. Magawo ena onse a gridi amafunikira infix (mwachitsanzo, sm).
  • Zasinthidwa kukula kwa gridi, zosakaniza, ndi zosinthika.
    • Magetsi a ma gridi tsopano ali ndi mapu a Sass kotero mutha kufotokoza m'lifupi mwake panjira iliyonse.
    • Kusinthidwa ma gridi osakaniza kuti agwiritse ntchito make-col-readykusakaniza kokonzekera ndi make-colkuyika flexndi kukula kwa magawo max-width.
    • Zosintha zamafunso amtundu wa grid system ndi m'lifupi mwa chidebe kuti ziwerengere gawo latsopano la grid ndikuwonetsetsa kuti mizati imagawika mofanana ndi 12m'lifupi mwake.
    • Malo opumira ma gridi ndi makulidwe a chidebe tsopano akugwiridwa kudzera pa mamapu a Sass ( $grid-breakpointsndi $container-max-widths) m'malo mwazosiyana zochepa. Izi @screen-*zimasintha zosinthika kwathunthu ndikukulolani kuti musinthe magawo a gridi.
    • Mafunso azama media nawonso asintha. M'malo mobwereza mawu athu a pawailesi yakanema ndi mtengo womwewo nthawi iliyonse, tili ndi @include media-breakpoint-up/down/only. Tsopano, m'malo molemba @media (min-width: @screen-sm-min) { ... }, mukhoza kulemba @include media-breakpoint-up(sm) { ... }.

Zigawo

  • Mapanelo ogwetsedwa, tizithunzi, ndi zitsime za gawo latsopano lazonse, makadi .
  • Yagwetsa zilembo zazithunzi za Glyphicons. Ngati mukufuna zithunzi, zosankha zina ndi izi:
  • Yagwetsa pulogalamu yowonjezera ya Affix jQuery.
    • Timalimbikitsa kugwiritsa ntchito position: stickym'malo mwake. Onani HTML5 Chonde lowetsani kuti mudziwe zambiri komanso malingaliro enaake a polyfill. Lingaliro limodzi ndiloti mugwiritse ntchito @supportslamulo pokwaniritsa izi (mwachitsanzo, @supports (position: sticky) { ... })/
    • Mukadakhala mukugwiritsa ntchito Affix kuti mugwiritse ntchito zina zowonjezera, zosagwirizana position, ma polyfill mwina sangagwirizane ndi vuto lanu. Njira imodzi yogwiritsira ntchito izi ndi laibulale yachitatu ya ScrollPos-Styler .
  • Inagwetsa gawo la pager popeza linali mabatani osinthidwa pang'ono.
  • Anasinthanso pafupifupi zigawo zonse kuti agwiritse ntchito masankhidwe am'kalasi omwe alibe zisa m'malo mosankha ana enieni.

Mwa chigawo

Mndandandawu ukuwonetsa kusintha kwakukulu ndi chigawo pakati pa v3.xx ndi v4.0.0.

Yambitsaninso

Chatsopano ku Bootstrap 4 ndi Kuyambiransoko , pepala latsopano lomwe limamangidwa pa Normalize ndi masitaelo athu osintha malingaliro athu. Zosankha zomwe zikuwonekera mufayiloyi zimangogwiritsa ntchito zinthu-palibe makalasi pano. Izi zimatipatula masitayelo athu osinthika kuchokera kumitundu yathu kuti tigwiritse ntchito modula. Zina mwazosintha zofunika kwambiri izi zikuphatikiza box-sizing: border-boxndikusintha, kusuntha kuchoka emku remmayunitsi pazinthu zambiri, masitayelo amalumikizidwe, ndi ma seti ambiri amitundu.

Kujambula

  • Yasunthira .text-zofunikira zonse ku _utilities.scssfayilo.
  • Atayidwa .page-headermonga masitayelo ake angagwiritsidwe ntchito pogwiritsa ntchito zida.
  • .dl-horizontalwagwetsedwa. M'malo mwake, gwiritsani .rowntchito <dl>ndikugwiritsa ntchito makalasi amtundu wa gridi (kapena zosakaniza) pa ake <dt>ndi <dd>ana.
  • Ma blockquotes okonzedwanso, akusuntha masitayelo awo kuchoka pa <blockquote>chinthu kupita ku gulu limodzi, .blockquote. Yagwetsa .blockquote-reversezosintha zamawu.
  • .list-inlinetsopano imafuna kuti ana ake andandanda zinthu akhale ndi .list-inline-itemkalasi yatsopano yogwiritsidwa ntchito kwa iwo.

Zithunzi

  • Adasinthidwa .img-responsivekukhala .img-fluid.
  • Adasinthidwa .img-roundedkukhala.rounded
  • Adasinthidwa .img-circlekukhala.rounded-circle

Matebulo

  • Pafupifupi zochitika zonse za >osankhidwa achotsedwa, kutanthauza kuti matebulo omwe ali m'chisawa adzalandira masitayelo kuchokera kwa makolo awo. Izi zimathandizira kwambiri osankha athu komanso makonda omwe angakhale nawo.
  • Adasinthidwa .table-condensedkukhala .table-smkusasinthasintha.
  • Anawonjezera njira yatsopano .table-inverse.
  • Zosintha zamutu wowonjezera patebulo: .thead-defaultndi .thead-inverse.
  • Adasinthidwanso makalasi okhazikika kuti akhale ndi .table--prefix. Chifukwa chake .active, .success, ndi ku , , ndi . .warning_.danger.info.table-active.table-success.table-warning.table-danger.table-info

Mafomu

  • Zinthu zasunthidwa kukonzanso ku _reboot.scssfayilo.
  • Adasinthidwa .control-labelkukhala .col-form-label.
  • Adasinthidwanso .input-lgndi .input-smku .form-control-lgndi .form-control-sm, motsatana.
  • Makalasi otsika .form-group-*chifukwa cha kuphweka. Gwiritsani ntchito .form-control-*makalasi tsopano.
  • Adagwetsa .help-blockndikuyikamo .form-textmawu othandizira pamlingo wa block. Pamalemba othandizira pa intaneti ndi zosankha zina zosinthika, gwiritsani ntchito makalasi othandizira ngati .text-muted.
  • Wagwa .radio-inlinendi .checkbox-inline.
  • Kuphatikizidwa .checkboxndi .radiokulowa .form-checkndi magalasi osiyanasiyana .form-check-*.
  • Mafomu opingasa asinthidwa:
    • Anasiya .form-horizontalzofunikira za kalasi.
    • .form-groupsichikugwiritsanso ntchito masitayelo kuchokera ku .rowmixin, kotero .rowtsopano ikufunika pamasanjidwe opingasa a gridi (mwachitsanzo, <div class="form-group row">).
    • Onjezani kalasi yatsopano .col-form-labelpama malembo apakatikati okhala ndi .form-controls.
    • Zowonjezedwa zatsopano .form-rowpamapangidwe amafomu ophatikizika ndi makalasi a gridi (sinthanani anu .rowndi .form-rowkupita).
  • Kuthandizira mafomu owonjezera (mabokosi, mawailesi, zosankhidwa, ndi zolowetsa mafayilo).
  • Osinthidwa .has-error, .has-warning, ndi .has-successmakalasi okhala ndi mawonekedwe a HTML5 ovomerezeka kudzera pa CSS's :invalidndi :validpseudo-classes.
  • Adasinthidwa .form-control-statickukhala .form-control-plaintext.

Mabatani

  • Adasinthidwa .btn-defaultkukhala .btn-secondary.
  • Adagwetsa .btn-xskalasi yonse chifukwa .btn-smndi yaying'ono kwambiri kuposa ma v3.
  • Mbali yodziwika bwino ya batani la button.jsjQuery plugin yagwetsedwa. Izi zikuphatikizapo $().button(string)ndi $().button('reset')njira. Tikukulangizani kugwiritsa ntchito JavaScript yokhazikika m'malo mwake, yomwe ingakhale ndi phindu lochita momwe mukufunira.
    • Dziwani kuti zina za pulogalamu yowonjezera (mabokosi oyang'anira mabatani, mabatani a wailesi, mabatani osinthira kamodzi) zasungidwa mu v4.
  • Sinthani mabatani' [disabled]kuti :disabledakhale momwe IE9+ imathandizira :disabled. Komabe fieldset[disabled]ndizofunikirabe chifukwa madera omwe ali olumala akadali ngolo mu IE11 .

Gulu la batani

  • Lembaninso gawo ndi flexbox.
  • Zachotsedwa .btn-group-justified. M'malo mwake mutha kugwiritsa ntchito <div class="btn-group d-flex" role="group"></div>ngati chokulunga mozungulira zinthu ndi .w-100.
  • Adagwetsa .btn-group-xskalasi atapatsidwa kuchotsedwa kwa .btn-xs.
  • Kuchotsa kusiyana pakati pamagulu a batani muzitsulo zazitsulo; gwiritsani ntchito zida zam'mphepete tsopano.
  • Zolemba zokonzedwa kuti zigwiritsidwe ntchito ndi zigawo zina.
  • Kusintha kuchoka kwa osankha makolo kupita m'makalasi amodzi pazinthu zonse, zosintha, ndi zina.
  • Masitayilo otsika osavuta kuti asatumizenso ndi mivi yoyang'ana m'mwamba kapena pansi yolumikizidwa pamenyu yotsitsa.
  • Zotsitsa zitha kumangidwa ndi <div>s kapena <ul>s tsopano.
  • Kumanganso masitayelo otsikira ndi zolembera kuti mupereke chithandizo chosavuta, chomangirira <a>ndi <button>zinthu zotsikira.
  • Adasinthidwa .dividerkukhala .dropdown-divider.
  • Zinthu zotsika zimafunikira .dropdown-item.
  • Matembenuzidwe otsitsa safunanso zachidziwitso <span class="caret"></span>; izi tsopano zimaperekedwa zokha kudzera pa CSS ::afterpa .dropdown-toggle.

Grid system

  • Adawonjeza malo atsopano 576pxmonga sm, kutanthauza kuti pali magawo asanu ( xs, sm, md, lg, ndi xl).
  • Anasinthanso magulu osinthika a gridi omvera kuchokera kumagulu .col-{breakpoint}-{modifier}-{size}osavuta .{modifier}-{breakpoint}-{size}a gridi.
  • Makalasi ogwetsera okankhira ndi kukoka pamakalasi atsopano oyendetsedwa ndi flexbox order. Mwachitsanzo, m'malo mwa .col-8.push-4ndi .col-4.pull-8, mungagwiritse ntchito .col-8.order-2ndi .col-4.order-1.
  • Makalasi owonjezera a flexbox a grid system ndi zida.

Lembani magulu

  • Lembaninso gawo ndi flexbox.
  • M'malo a.list-group-itemmwa kalasi yowonekera, .list-group-item-action, ya masitayelo ulalo ndi mabatani a mndandanda wazinthu zamagulu.
  • Gulu lowonjezera .list-group-flushkuti mugwiritse ntchito ndi makadi.
  • Lembaninso gawo ndi flexbox.
  • Popeza kusuntha kwa flexbox, kuyanjanitsa kwa zithunzi zochotsa pamutu kumakhala kosweka chifukwa sitikugwiritsanso ntchito zoyandama. Zomwe zimayandama zimabwera koyamba, koma ndi flexbox sizili choncho. Sinthani zithunzi zanu zochotsa kuti zibwere pambuyo pa mitu ya modal kuti mukonze.
  • Chosankha remote(chomwe chingagwiritsidwe ntchito kuyika zokha ndikulowetsa zakunja mu modal) ndipo loaded.bs.modalchochitika chofananacho chinachotsedwa. M'malo mwake timalimbikitsa kugwiritsa ntchito matempu a kasitomala kapena chimango chomangirira deta, kapena kuyimbira jQuery.load nokha.
  • Lembaninso gawo ndi flexbox.
  • Yagwetsa pafupifupi >osankha onse kuti apange masitayelo osavuta kudzera m'makalasi opanda zisa.
  • M'malo mwa osankha enieni a HTML monga .nav > li > a, timagwiritsa ntchito makalasi osiyana a .navs, .nav-items, ndi .nav-links. Izi zimapangitsa HTML yanu kukhala yosinthika pamene ikubweretsa kuwonjezereka.

Navbar yalembedwanso kwathunthu mu flexbox ndi chithandizo chokhazikika cha kuyanjanitsa, kuyankha, ndi makonda.

  • Makhalidwe omvera a navbar tsopano akugwiritsidwa ntchito ku .navbarkalasi kudzera pakufunika .navbar-expand-{breakpoint} komwe mumasankha komwe mungagwetse navbar. M'mbuyomu uku kunali kusinthidwa Kocheperako ndipo kumafunikira kubwezanso.
  • .navbar-defaulttsopano .navbar-light, ngakhale .navbar-darkidakali chimodzimodzi. Chimodzi mwa izi ndichofunika pa navbar iliyonse. Komabe, makalasi awa sakhalanso background-colors; m'malo mwake zimangokhudza color.
  • Ma Navbar tsopano amafunikira chilengezo chakumbuyo chamtundu wina. Sankhani kuchokera kuzinthu zathu zakumbuyo ( .bg-*) kapena ikani zanu ndi makalasi opepuka/osiyana pamwambapa kuti musinthe mwamisala .
  • Potengera masitayilo a flexbox, ma navbars tsopano atha kugwiritsa ntchito zida za flexbox pazosankha zosavuta.
  • .navbar-toggleili pano .navbar-togglerndipo ili ndi masitayelo osiyanasiyana ndi zolembera zamkati (palibenso ma <span>s atatu).
  • Ndinasiya .navbar-formkalasi yonse. Sizikufunikanso; m'malo mwake, ingogwiritsani ntchito .form-inlinendikugwiritsa ntchito malire ngati pakufunika.
  • Ma Navbar sakuphatikizanso margin-bottomkapena border-radiusmwachisawawa. Gwiritsani ntchito zofunikira ngati pakufunika.
  • Zitsanzo zonse zomwe zili ndi ma navbar zasinthidwa kuti ziphatikizepo chizindikiro chatsopano.

Pagination

  • Lembaninso gawo ndi flexbox.
  • Makalasi omveka bwino ( .page-item, .page-link) tsopano akufunika pa mbadwa za .paginations
  • Yagwetsera .pagergawo lonse chifukwa linali locheperako kuposa mabatani osinthidwa makonda.
  • Kalasi yomveka bwino, .breadcrumb-item, tsopano ikufunika pa mbadwa za .breadcrumbs

Zolemba ndi mabaji

  • Kuphatikizika .labelndi .badgekulekanitsa kuchokera ku <label>chinthucho ndi kuphweka zomwe zikugwirizana nazo.
  • Awonjezedwa .badge-pillngati chosinthira cha mawonekedwe ozungulira a "mapiritsi".
  • Mabaji sakuyandamanso m'magulu amndandanda ndi zigawo zina. Maphunziro othandiza tsopano akufunika pa izi.
  • .badge-defaultwagwetsedwa .badge-secondaryndikuwonjezedwa kuti agwirizane ndi magulu osinthira omwe amagwiritsidwa ntchito kwina.

Mapanelo, tizithunzi, ndi zitsime

Zatsitsidwa kwathunthu ku gawo latsopano lamakhadi.

Magulu

  • .panelku .card, tsopano yomangidwa ndi flexbox.
  • .panel-defaultkuchotsedwa ndipo palibe cholowa m'malo.
  • .panel-groupkuchotsedwa ndipo palibe cholowa m'malo. .card-groupsi cholowa m'malo, ndi chosiyana.
  • .panel-headingku.card-header
  • .panel-titleku .card-title. Kutengera ndi mawonekedwe omwe mukufuna, mutha kugwiritsanso ntchito mitu yamutu kapena makalasi (mwachitsanzo <h3>, .h3) kapena zinthu zolimba kapena makalasi (mwachitsanzo <strong>, <b>, .font-weight-bold). Dziwani kuti .card-title, ngakhale amatchulidwanso chimodzimodzi, amatulutsa mawonekedwe osiyana ndi .panel-title.
  • .panel-bodyku.card-body
  • .panel-footerku.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ndipo .panel-dangerzatsitsidwa ku .bg-, .text-, ndi .borderzofunikira zochokera ku $theme-colorsmapu athu a Sass.

Kupita patsogolo

  • M'malo mwa .progress-bar-*makalasi okhazikika ndi .bg-*zofunikira. Mwachitsanzo, class="progress-bar progress-bar-danger"amakhala class="progress-bar bg-danger".
  • M'malo .activemwa mipiringidzo yokongoletsedwa yokhala ndi .progress-bar-animated.
  • Kuwongolera gawo lonse kuti muchepetse mapangidwe ndi masitayelo. Tili ndi masitayelo ochepera oti musinthe, zizindikiro zatsopano, ndi zithunzi zatsopano.
  • CSS yonse sinakhazikitsidwe ndikusinthidwanso, kuwonetsetsa kuti kalasi iliyonse ili ndi .carousel-.
    • Kwa zinthu za carousel, .next, .prev, .left, ndi .righttsopano .carousel-item-next, .carousel-item-prev, .carousel-item-left, ndi .carousel-item-right.
    • .itemndi tsopano .carousel-item.
    • Kwa zowongolera zam'mbuyomu/zotsatira, .carousel-control.rightndipo .carousel-control.lefttsopano .carousel-control-nextndi .carousel-control-prev, kutanthauza kuti sizikufunikanso gulu linalake loyambira.
  • Yachotsa masitayelo onse omvera, kutengera zofunikira (mwachitsanzo, kuwonetsa mawu ofotokozera pamawonekedwe ena) ndi masitayelo anthawi zonse ngati pakufunika.
  • Zithunzi zomwe zachotsedwa pazithunzi muzinthu za carousel, kutengera zofunikira.
  • Tinasintha chitsanzo cha Carousel kuti chiphatikizepo mawonekedwe atsopano ndi masitayelo.

Matebulo

  • Thandizo lachotsedwa pamatebulo okhala ndi masitayelo. Masitayilo onse a tebulo tsopano alowa mu v4 kwa osankha osavuta.
  • Onjezani zosintha za tebulo.

Zothandizira

  • Onetsani, zobisika, ndi zina zambiri:
    • Adapanga zida zowonetsera kumvera (mwachitsanzo, .d-nonendi d-{sm,md,lg,xl}-none).
    • Zagwetsa zambiri .hidden-*zazinthu zatsopano zowonetsera . Mwachitsanzo, m'malo mwa .hidden-sm-up, gwiritsani ntchito .d-sm-none. Adasinthidwanso zida .hidden-printkuti mugwiritse ntchito pulogalamu yowonetsera. Zambiri pansi pa gawo la Responsive utility la tsambali.
    • Makalasi .float-{sm,md,lg,xl}-{left,right,none}owonjezera a zoyandama zomvera ndikuchotsedwa .pull-leftndipo .pull-rightpopeza safunikira .float-leftku .float-right.
  • Mtundu:
    • Adawonjezeranso kusiyanasiyana kwamakalasi athu akusintha mawu .text-{sm,md,lg,xl}-{left,center,right}.
  • Kuyanjanitsa ndi mipata:
    • Onjezani zida zatsopano zoyankhira mbali zonse, kuphatikiza zoyima ndi zopingasa.
    • Zowonjezera ngalawa za flexbox utility .
    • Watsitsidwa kalasi .center-blockyatsopano .mx-auto.
  • Clearfix yasinthidwa kuti igwetse chithandizo chamitundu yakale.

Zosakaniza za prefix

Bootstrap 3's vedor prefix mixins, omwe adachotsedwa mu v3.2.0, achotsedwa mu Bootstrap 4. Popeza timagwiritsa ntchito Autoprefixer , sizilinso zofunika.

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

Zolemba

Zolemba zathu zidawonjezedwanso pagulu lonse. Nayi zotsika pansi:

  • Tikugwiritsabe ntchito Jekyll, koma tili ndi mapulagini osakanikirana:
    • bugify.rbimagwiritsidwa ntchito kulemba bwino zomwe zili patsamba lathu la bugs .
    • example.rbndi foloko yokhazikika ya highlight.rbpulogalamu yowonjezera, yomwe imalola kuwongolera kosavuta kwachitsanzo.
    • callout.rbndi foloko yomweyi, koma idapangidwira ma callout athu apadera.
    • jekyll-toc imagwiritsidwa ntchito kupanga zomwe zili mkati.
  • Zolemba zonse zalembedwanso ku Markdown (m'malo mwa HTML) kuti zisinthidwe mosavuta.
  • Masamba akonzedwanso kuti akhale osavuta komanso kuti akhale osavuta kumva.
  • Tidachoka ku CSS wamba kupita ku SCSS kuti tipeze mwayi pazosintha za Bootstrap, zosakaniza, ndi zina zambiri.

Zothandizira zomvera

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
    • Makalasi atsopano .d-print-block: .d-print-inline,,,,.d-print-inline-block.d-print-none

M'malo mogwiritsa ntchito .visible-*makalasi olaula, mumapangitsa kuti chinthucho chiwoneke posachibisa pazithunzizo. Mutha kuphatikiza .d-*-nonekalasi imodzi ndi .d-*-blockkalasi imodzi kuti muwonetse chinthu pakanthawi kochepa ka makulidwe a sikirini (monga .d-none.d-md-block.d-xl-noneamawonetsa chinthucho pazida zapakati ndi zazikulu).

Zindikirani kuti kusintha kwa grid breakpoints mu v4 kumatanthauza kuti muyenera kupita kumalo amodzi okulirapo kuti mukwaniritse zotsatira zomwezo. Makasitomala atsopano omvera samayesa kutengera zochitika zochepa pomwe mawonekedwe a chinthu sangathe kufotokozedwa ngati kukula kosiyana kosiyana; m'malo mwake muyenera kugwiritsa ntchito CSS yanthawi zonse.