Source

Heke ki te v4

Ko te Bootstrap 4 he tuhi hou mo te kaupapa katoa. Ko nga huringa tino rongonui ka whakarapopotohia ki raro nei, ka whai ake ko nga huringa motuhake ki nga waahanga e tika ana.

Nga huringa pumau

Ko te neke mai i te Beta 3 ki ta maatau tuku v4.0 pumau, kaore he huringa pakaru, engari he rereke nga huringa.

Te tā

  • Kua whakatikahia nga taputapu ta pakaru. I mua, ko te whakamahi i te .d-print-*karaehe ka whakakore ohorere i tetahi atu .d-*akomanga. Inaianei, ka rite ki a maatau atu taputapu whakaatu ka pa ana ki taua hunga pāpāho ( @media print).

  • Kua whakaroahia nga taputapu whakaatu ta e waatea ana kia rite ki etahi atu taputapu. Ko te Beta 3 me te pakeke ake i a ia anake block, inline-block, inline, me none. Stable v4 tāpiri flex, inline-flex, table, table-row, me table-cell.

  • Kua whakatikahia te tahuahua arokitenga puta noa i nga kaitirotiro me nga momo tuhinga hou e tohu ana @page size.

Nga huringa Beta 3

Ahakoa i kite a Beta 2 i te nuinga o nga huringa pakaru i te wa o te wahanga beta, engari kei a matou etahi mea e tika ana kia whakatikahia i roto i te tukunga Beta 3. Ka pa enei huringa ki te whakahōu koe ki te Beta 3 mai i te Beta 2, ki tetahi putanga tawhito ake ranei o Bootstrap.

Te tini

  • I tangohia te $thumbnail-transitiontaurangi kaore i whakamahia. Kaore matou i te whakawhiti i tetahi mea, na he waehere taapiri noa.
  • Karekau he konae kei roto i te kete npm i tua atu i o maatau puna me nga konae dist; Mena i whakawhirinaki koe ki a raatau me te whakahaere i o maatau tuhinga ma te node_moduleskōpaki, me urutau to rerengamahi.

Puka

  • Tuhia ano nga pouakataki ritenga me te taunoa me nga reo irirangi. Inaianei, he rite te hanganga HTML e rua (waho <div>me te tuakana <input>me <label>te ) me nga momo tahora rite (tapae taunoa, rarangi me te akomanga whakarereke). Ma tenei ka taea e matou te whakaahu i te tapanga i runga i te ahua o te whakaurunga, te whakangawari i te tautoko mo te disabledhuanga (me tono he akomanga matua i mua) me te pai ake ki te tautoko i to maatau puka whakamana.

    Hei wahanga o tenei, kua whakarereketia e matou te CSS mo te whakahaere i nga background-images maha i runga i nga pouakataki ahua ritenga me nga reo irirangi. I mua, ko te .custom-control-indicatorhuānga kua tangohia inaianei ko te tae papamuri, te rōnaki, me te ata SVG. Ko te whakarite i te rōnaki papamuri ko te whakakapi i aua mea katoa i nga wa katoa ka hiahia koe ki te huri i tetahi. Inaianei, kei .custom-control-label::beforea maatau te whakakii me te rōnaki me .custom-control-label::afterte hapai i te ata.

    Hei hanga i te riirangi taki ritenga, taapirihia .custom-control-inline.

  • Ko te kaiwhiriwhiri kua whakahōuhia mo nga roopu paatene-whakauru. Engari [data-toggle="buttons"] { }mo te ahua me te whanonga, ka whakamahia e matou te datahuanga mo nga whanonga JS anake ka whakawhirinaki ki tetahi .btn-group-togglekaraehe hou mo te taatai.

  • I tangohia .col-form-legendmo te whakapai paku .col-form-label. Ma tenei huarahi .col-form-label-smka .col-form-label-lgtaea te whakamahi i runga i <legend>nga huānga me te ngawari.

  • Ko nga whakaurunga o nga konae ritenga he huringa ki o raatau $custom-file-texttaurangi Sass. Ehara i te mapi Sass kohanga, a inaianei kotahi noa te aho e kaha ana—ko te Browsepaatene i te mea koinei anake te huānga pseudo i hangaia mai i a maatau Sass. Ko te Choose filetuhinga inaianei ka puta mai i te .custom-file-label.

Rōpū whakauru

  • Ko nga taapiri roopu whakauru he mea motuhake inaianei ki o raatau tuunga e pa ana ki tetahi whakauru. Kua heke matou .input-group-addonmo .input-group-btnnga karaehe hou e rua, .input-group-prependa .input-group-append. Me tino whakamahi koe i te taapiri, i te taapiri ranei inaianei, hei whakamaarama i te nuinga o a maatau CSS. I roto i te taapiri, te taapiri ranei, tuuhia o paatene kia rite ki te noho ki hea atu, engari ka takai i te kuputuhi ki roto .input-group-text.

  • Kei te tautokohia nga momo whakamanatanga inaianei, me te maha o nga whakaurunga (ahakoa ka taea e koe te whakamana kotahi te whakauru mo ia roopu).

  • Me noho nga karaehe rahi ki runga i te matua .input-group, kaua ko nga huānga ahua takitahi.

Nga huringa Beta 2

I te wa i te beta, e whai ana matou kia kaua e pakaru nga huringa. Heoi, karekau e rite nga mea i whakaritea i nga wa katoa. Kei raro nei nga huringa pakaru hei maumahara ina neke mai i te Beta 1 ki te Beta 2.

Whatiwhati

  • Kua tangohia $badge-colorte taurangi me tona whakamahinga ki runga .badge. Ka whakamahia e matou he mahi rereke tae ki te whiriwhiri i colorrunga i te background-color, no reira kaore e tika te taurangi.
  • Kua whakaingoatia grayscale()te mahi ki gray()te karo i te pakaru i te papā ki te grayscaletātari taketake CSS.
  • I whakaingoatia .table-inverse, .thead-inverse, me .thead-defaultki .*-darka .*-light, kia rite ki o maatau kaupapa tae i whakamahia ki etahi atu waahi.
  • Ko nga ripanga urupare inaianei ka whakaputa i nga karaehe mo ia waahi wehenga matiti. Ka wehe tenei mai i te Beta 1 i te mea ko te .table-responsivemea i whakamahia e koe he rite tonu ki te .table-responsive-md. Ka taea e koe te whakamahi i .table-responsivete .table-responsive-{sm,md,lg,xl}wa e hiahiatia ana.
  • Kua whakakorehia te tautoko a Bower i te mea kua whakakorehia te kaiwhakahaere mokihi mo etahi atu (hei tauira, Miro, npm ranei). Tirohia te bower/bower#2298 mo nga taipitopito.
  • Kei te hiahia tonu a Bootstrap i te jQuery 1.9.1 teitei ake ranei, engari ka tohutohu koe ki te whakamahi i te putanga 3.x i te mea ko nga kaitirotiro tautoko a v3.x nga mea e tautokohia ana e Bootstrap me te v3.x etahi whakatika haumarutanga.
  • I tangohia te .form-control-labelakomanga kaore i whakamahia. Mena i whakamahia e koe tenei karaehe, he taarua o te .col-form-labelkaraehe i whakakaupapa poutū a <label>me te whakaurunga e hono ana ki nga whakatakotoranga ahua whakapae.
  • I hurihia te color-yiqmai i te ranunga i whakaurua te colortaonga ki tetahi mahi whakahoki uara, ka taea e koe te whakamahi mo tetahi taonga CSS. Hei tauira, hei utu mo color-yiq(#000), ka tuhi koe color: color-yiq(#000);.

Nga mea nui

  • I whakauruhia he pointer-eventswhakamahinga hou mo nga tikanga. Ka haere te waho .modal-dialogki nga huihuinga pointer-events: nonemo te whakahaere paato ritenga (ka taea ki te whakarongo noa i runga i te .modal-backdropmo nga pao katoa), a ka whakahē i te reira mo te tino .modal-contentme te pointer-events: auto.

Whakarāpopototanga

Anei nga taonga tikiti nui e hiahia ana koe kia mohio koe ina neke mai i te v3 ki te v4.

Tautoko Pūtirotiro

  • I tukuna te tautoko IE8, IE9, me te iOS 6. Ko te v4 ko IE10+ anake me iOS 7+. Mo nga waahi e hiahia ana ki tetahi o enei, whakamahia te v3.
  • He tautoko whai mana mo te Android v5.0 Lollipop's Pūtirotiro me WebView. Ko nga putanga o mua o te Pūtirotiro Android me te Tirohanga Tukutuku kei te tautoko kore mana noa.

Nga huringa o te ao

  • Ko te Flexbox kua whakahohea ma te taunoa. Ko te tikanga o tenei ko te neke atu i nga maanu me te maha atu o o maatau waahanga.
  • I hurihia mai i te Iti ki te Sass mo a maatau konae CSS puna.
  • Hurihia mai i pxto remmaatau waahanga CSS tuatahi, ahakoa kei te whakamahia tonu nga pika mo nga patai pāpāho me te whanonga matiti na te mea kaore nga waahanga tirohanga e pa ana ki te rahi o te momo.
  • I piki te rahi momotuhi-a-ao mai i 14pxte 16px.
  • Kua whakahouhia nga taumata matiti hei taapiri atu i te tuarima o nga whiringa (te whakatika i nga taputapu iti ki 576pxraro me raro) ka tangohia te -xsinfix mai i aua akomanga. Tauira: .col-6.col-sm-4.col-md-3.
  • I whakakapihia te kaupapa motuhake me nga whiringa ka taea te whirihora ma nga taurangi SCSS (hei tauira, $enable-gradients: true).
  • Hangaia te punaha ki te whakamahi i te raupapa o nga tuhinga npm hei utu mo Grunt. Tirohia package.jsonmo nga tuhinga katoa, mo ta maatau panui kaupapa ranei mo nga hiahia whanaketanga o te rohe.
  • Ko te whakamahi kore-whakautu o Bootstrap kua kore e tautokona.
  • I whakatakahia te Kaiwhakaritenga ipurangi mo te nui ake o nga tuhinga tatūnga me nga hanga ritenga.
  • He maha nga karaehe whaipainga hou kua taapirihia mo nga takirua uara-waa CSS noa me nga pokatata mokowhiti tawhē/padding.

Pūnaha mātiti

  • Kua nukuhia ki te flexbox.
    • He tautoko taapiri mo te flexbox i roto i nga whakaranu matiti me nga karaehe kua tautuhia.
    • Hei waahanga o te flexbox, i whakauruhia he tautoko mo nga karaehe whakatikatika poutū me te whakapae.
  • Kua whakahōuhia nga ingoa karaehe matiti me tetahi taumata matiti hou.
    • smI taapirihia he taumata matiti hou ki raro 768pxmo te mana maramara ake. Kei a tatou inaianei xs, sm, md, lg, me xl. Ko te tikanga hoki kua eke nga taumata katoa ki te taumata kotahi (no reira .col-md-6kei te v3 kei te .col-lg-6v4 inaianei).
    • xsKua whakarereketia nga karaehe matiti kia kore ai e tono te infix kia tika ake te whakaatu ka tiimata te tono momo ki min-width: 0te kore he uara pika kua whakaritea. Engari .col-xs-6, ko tenei inaianei .col-6. Ko etahi atu taumata matiti katoa e hiahia ana ki te whakauru (hei tauira, sm).
  • Kua whakahōuhia te rahi o te mātiti, te ranunga, me te taurangi.
    • Inaianei he mapi Sass nga awaawa matiti kia taea ai e koe te tautuhi i nga whanuitanga awaawa motuhake i ia waahi pakaru.
    • Ko nga ranunga matiti kua whakahōuhia hei whakamahi i te make-col-readyranunga o mua me te make-colki te whakarite i te flexme max-widthte rahinga o te pou takitahi.
    • I hurihia nga waahi patai paanui me nga whanui ipu hei korero mo te taumata matiti hou me te whakarite kia wehewehea nga pou i runga 12i te whanui teitei.
    • Ko nga waahi wehenga matiti me te whanui ipu kei te whakahaere inaianei ma nga mapi Sass ( $grid-breakpointsme $container-max-widths) hei utu mo etahi taurangi motuhake. Ka whakakapi @screen-*katoa enei i nga taurangi ka taea e koe te whakarite katoa i nga taumata matiti.
    • Kua huri ano nga patai pāpāho. Engari ki te tukurua i a maatau korero patai pāpāho he rite te uara ia wa, kei a matou inaianei @include media-breakpoint-up/down/only. Inaianei, hei utu mo te tuhi @media (min-width: @screen-sm-min) { ... }, ka taea e koe te tuhi @include media-breakpoint-up(sm) { ... }.

Waehanga

  • Ko nga panui kua taka, nga karakōnui, me nga puna mo tetahi waahanga hou, he kaari .
  • I whakataka te momotuhi tohu Glyphicons. Mena ka hiahia koe ki nga tohu, etahi waahanga ko:
  • I tukuna te mono Affix jQuery.
    • Ka tūtohu mātou kia whakamahia position: stickykētia. Tirohia te urunga HTML5 Tena mo nga taipitopito me nga taunakitanga polyfill motuhake. Ko tetahi whakaaro ko te whakamahi i tetahi @supportsture hei whakatinana (hei tauira, @supports (position: sticky) { ... })/
    • Mēnā kei te whakamahi koe i te Affix ki te tono atu, positionkāhua-kore, kare pea nga polyfills e tautoko i to take whakamahi. Ko tetahi waahanga mo enei whakamahinga ko te whare pukapuka ScrollPos-Styler tuatoru .
  • I whakatakahia te wahanga pager na te mea he mea paku noa nga paatene.
  • Tata ki nga waahanga katoa ka huri ki te whakamahi i etahi atu kaikowhiri karaehe kore-kohanga hei utu mo nga kaikowhiri tamariki tino-motuhake.

Ma te waahanga

Ko tenei rarangi e whakaatu ana i nga huringa matua ma te waahanga i waenga i te v3.xx me te v4.0.0.

Whakahou ano

He hou ki Bootstrap 4 ko te Reboot , he pepa ahua hou e hanga ana i runga i te Normalize me o tatou ake ahua tautuhi. Ko nga kaiwhiriwhiri ka puta mai i tenei konae ka whakamahi noa i nga huānga—kaore he karaehe kei konei. Ma tenei ka wehe i a maatau momo tautuhi mai i a maatau momo waahanga kia pai ake te huarahi. Ko etahi o nga mea tino nui ko te box-sizing: border-boxwhakarereketanga, ko te neke mai i emnga remwaeine i runga i nga huānga maha, nga momo hono, me te maha o nga huinga huinga huinga.

Kuputuhi

  • Nekehia nga .text-taputapu katoa ki te _utilities.scsskonae.
  • Ka whakahekehia .page-headerna te mea ka taea te tono ma nga taputapu.
  • .dl-horizontalkua whakataka. Engari, whakamahia .rowki runga <dl>me te whakamahi i nga karaehe pourangi matiti (whakaranu ranei) i runga i ona <dt>me <dd>nga tamariki.
  • Ko nga korero poraka kua hoahoatia ano, ka nekehia o raatau momo mai i te <blockquote>huānga ki te karaehe kotahi, .blockquote. I whakatakahia te .blockquote-reversewhakarereke mo nga taputapu kuputuhi.
  • .list-inlineInaianei me tono e ana tamariki nga taonga rarangi ingoa mo te .list-inline-itemkaraehe hou.

Whakaahua

  • I whakaingoatia .img-responsiveki .img-fluid.
  • I whakaingoatia .img-roundedki.rounded
  • I whakaingoatia .img-circleki.rounded-circle

Ripanga

  • Tata ki nga wa katoa o te >kaiwhiriwhiri kua tangohia, ko te tikanga ka riro aunoa i nga ripanga kohanga nga momo mai i o ratau maatua. Ma tenei ka tino whakangwari i o maatau kaikowhiri me nga whakaritenga ka taea.
  • I whakaingoatia .table-condensedkia .table-smrite tonu.
  • Kua taapirihia he .table-inversewhiringa hou.
  • Kua taapirihia nga whakarereke pane pane: .thead-defaultme .thead-inverse.
  • I whakaingoatia ano nga karaehe horopaki kia whai tohu- .table-muamua. No reira .active, .success, .warning, .dangerme .infoki .table-active, .table-success, .table-warning, .table-dangerme .table-info.

Puka

  • Ka tautuhi ano te huānga kua nukuhia ki te _reboot.scsskonae.
  • I whakaingoatia .control-labelki .col-form-label.
  • I whakaingoatia ano .input-lgme .input-smki .form-control-lgme .form-control-sm, ia.
  • Kua whakahekehia .form-group-*nga karaehe mo te ngawari. Whakamahia .form-control-*nga karaehe inaianei.
  • I whakataka .help-blockka whakakapia ki te .form-textmo te kuputuhi awhina taumata-paraka. Mo nga kupu awhina raina me etahi atu whiringa ngawari, whakamahia nga karaehe whaipainga penei i te .text-muted.
  • Whakataka .radio-inlineme .checkbox-inline.
  • Whakakotahitia .checkboxki .radioroto .form-checkme nga momo .form-check-*karaehe.
  • Ko nga puka whakapae kua whakahoutia:
    • I whakahekehia te .form-horizontalwhakaritenga o te karaehe.
    • .form-groupkua kore te whakamahi i nga momo mai i te .rowmaa mixin, no reira .rowe hiahiatia ana inaianei mo nga whakatakotoranga matiti whakapae (hei tauira, <div class="form-group row">).
    • Kua taapirihia te .col-form-labelkaraehe hou ki nga tapanga poutū ki waenganui me .form-controlte s.
    • He mea hou .form-rowmo nga whakatakotoranga ahua kiato me nga karaehe matiti (whakawhitihia to .rowa .form-rowka haere).
  • He tautoko puka ritenga taapiri (mo nga pouakataki, nga reo irirangi, nga kowhiringa, me nga whakaurunga konae).
  • Kua whakakapihia .has-errorte , .has-warning, me .has-successnga karaehe ki te whakamana puka HTML5 ma te CSS :invalidme :validnga akomanga pseudo.
  • I whakaingoatia .form-control-staticki .form-control-plaintext.

Patene

  • I whakaingoatia .btn-defaultki .btn-secondary.
  • I taka katoa te .btn-xskaraehe i te mea .btn-smhe iti ake i te v3's.
  • Kua tukuna te ahua o te paatenebutton.js mana o te mono jQuery. Kei roto i tenei ko nga $().button(string)me $().button('reset')nga tikanga. Ka tohutohu matou ki te whakamahi i tetahi waahanga iti o te JavaScript ritenga hei utu, ka whai hua o te whanonga kia rite ki taau e hiahia ana.
    • Kia mahara ko etahi atu ahuatanga o te mono (pouakataki paatene, reo irirangi paatene, paatene takahuri-kotahi) kua mau tonu ki te v4.
  • Hurihia nga paatene ' [disabled]ki :disabledte tautoko a IE9+ :disabled. Engari fieldset[disabled]he mea tika tonu na te mea kei te raru tonu nga huinga mara haua i IE11 .

Rōpū pātene

  • Tuhia ano te waahanga me te pouaka whakahuri.
  • Kua tangohia .btn-group-justified. Hei whakakapinga ka taea e koe te whakamahi <div class="btn-group d-flex" role="group"></div>hei takai huri noa i nga huānga me te .w-100.
  • I whakataka te .btn-group-xskaraehe kua tukuna katoatia te tangohanga o .btn-xs.
  • Kua tangohia te mokowhiti marama i waenga i nga roopu paatene i nga paeutauta paatene; whakamahia nga taputapu tawhē inaianei.
  • Kua pai ake nga tuhinga mo te whakamahi me etahi atu waahanga.
  • Hurihia mai i nga kaiwhiriwhiri matua ki nga karaehe takitahi mo nga waahanga katoa, whakarereke, aha atu.
  • Ko nga momo takaiho ngawari kia kaua e tukuna atu me nga pere anga whakarunga, whakararo ranei kua piri ki te tahua takaiho.
  • Ka taea te hanga i nga whakahekenga ki <div>te s, <ul>s ranei inaianei.
  • Hangaia ano nga momo takaiho me te tohu tohu hei whakarato ngawari, tautoko hanga-i roto mo <a>nga <button>taonga takaiho.
  • I whakaingoatia .dividerki .dropdown-divider.
  • Ko nga taonga takaiho e hiahiatia ana inaianei .dropdown-item.
  • Ko nga takahuri takaiho karekau e hiahia kia marama <span class="caret"></span>; ka tukuna aunoatia tenei ma te CSS's ::afteron .dropdown-toggle.

Pūnaha mātiti

  • 576pxKua taapirihia he waahi wehenga matiti hou hei sm, ko te tikanga e rima te katoa o nga taumata ( xs, sm, md, lg, me xl).
  • I whakaingoatia ano nga karaehe whakakē matiti aro mai .col-{breakpoint}-{modifier}-{size}ki .{modifier}-{breakpoint}-{size}nga akomanga matiti ngawari ake.
  • Kua whakataka nga karaehe pana me te kume whakarerekē mo nga karaehe hou-a-ringa order. Hei tauira, hei utu mo te .col-8.push-4me te .col-4.pull-8, ka whakamahi koe .col-8.order-2me te .col-4.order-1.
  • Kua taapirihia nga karaehe whaipainga flexbox mo te punaha tukutuku me nga waahanga.

Whakarārangihia ngā rōpū

  • Tuhia ano te waahanga me te pouaka whakahuri.
  • I whakakapia a.list-group-itemki te karaehe marama, .list-group-item-action, mo te whakaahua hononga me nga putanga patene o nga taonga roopu rarangi.
  • He .list-group-flushakomanga taapiri hei whakamahi me nga kaari.
  • Tuhia ano te waahanga me te pouaka whakahuri.
  • I te neke ki te flexbox, ka pakaru pea te tirohanga o nga tohu whakakore i te pane i te mea kua kore matou e whakamahi waka. Ko nga ihirangi maanu ka puta tuatahi, engari me te flexbox kua kore e pera. Whakahoutia o tohu whakakore kia haere mai i muri i nga taitara tikanga hei whakatika.
  • Ko te remotekōwhiringa (ka taea te whakamahi ki te uta aunoa me te wero i nga ihirangi o waho ki te ahua) ka loaded.bs.modaltangohia te takahanga e rite ana. Ka tūtohu matou ki te whakamahi i te tauira taha-kiritaki, i te anga herenga raraunga ranei, me waea atu ranei koe ki a jQuery.load .
  • Tuhia ano te waahanga me te pouaka whakahuri.
  • I whakataka tata ki nga >kaikowhiri katoa mo te whakaahua ngawari ake ma nga karaehe kore-kohanga.
  • Engari i nga kaiwhiriwhiri HTML-motuhake penei i te .nav > li > a, ka whakamahia e matou nga karaehe motuhake mo .navs, .nav-items, me .nav-links. Ma tenei ka ngawari ake to HTML i te wa e nui haere ana te whakaroa.

Kua tuhia katoatia te navbar ki flexbox me te pai ake o te tautoko mo te tirohanga, te whakautu, me te whakaritenga.

  • Ko nga whanonga navbar urupare ka tukuna ki te .navbarkaraehe ma te waahi ka tohua e .navbar-expand-{breakpoint} koe te waahi ka tiango te pae whakatere. I mua ko tenei he whakarereketanga iti me te hiahia ki te whakahiato.
  • .navbar-defaultko tenei inaianei .navbar-light, ahakoa .navbar-darkhe rite tonu. Ko tetahi o enei e hiahiatia ana i ia pae whakatere. Heoi, kua kore enei karaehe e whakatakoto background-colors; engari ka pa noa iho color.
  • Inaianei kei te hiahia nga Navbars ki te whakapuakanga papamuri o etahi momo. Whiriwhiria mai i a maatau taputapu papamuri ( .bg-*) ka whakarite ranei i a koe ake me nga karaehe marama/korero i runga ake nei mo te whakarite porangi .
  • I runga i nga momo flexbox, ka taea e nga navbars te whakamahi i nga taputapu flexbox mo nga whiringa whakatikatika ngawari.
  • .navbar-togglekei aianei .navbar-toggler, he rereke nga ahuatanga me te tohu o roto (kaore e toru nga wa <span>).
  • I hinga katoa te .navbar-formakomanga. Kare e tika ana; engari, whakamahia noa .form-inlineme te tono taputapu tawhē ina tika.
  • Ko nga Navbars kua kore e whakauru margin-bottom, border-radiusma te taunoa ranei. Whakamahia nga taputapu e tika ana.
  • Ko nga tauira katoa e whakaatu ana i nga navbars kua whakahoutia ki te whakauru i nga tohu hou.

whakawhārangi

  • Tuhia ano te waahanga me te pouaka whakahuri.
  • Ko nga karaehe marama ( .page-item, .page-link) e hiahiatia ana inaianei mo nga uri o .paginations
  • I whakataka katoatia te .pagerwae na te mea he iti ake i nga paatene whakahuahua kua whakaritea.
  • He karaehe marama, .breadcrumb-item, e hiahiatia ana inaianei mo nga uri o .breadcrumbs

Nga tapanga me nga tohu

  • Whakakotahitia .labelme .badgete wetewete i te <label>huānga me te whakangawari i nga waahanga e pa ana.
  • Kua taapirihia .badge-pillhei whakarereke mo te ahua "pire" porotaka.
  • Ko nga tohu kua kore e rewa aunoa i nga roopu rarangi me etahi atu waahanga. Ko nga karaehe taputapu e hiahiatia ana mo tera.
  • .badge-defaultkua whakatakahia, kua taapirihia .badge-secondarykia rite ki nga karaehe whakarereke i whakamahia ki etahi atu waahi.

Paewhiri, karakōnui, me ngā puna

I taka katoa mo te waahanga kaari hou.

Paewhiri

  • .panelki te .card, kua hangaia inaianei me te flexbox.
  • .panel-defaultka tangohia, karekau he whakakapinga.
  • .panel-groupka tangohia, karekau he whakakapinga. .card-groupehara i te whakakapi, he rereke.
  • .panel-headingki.card-header
  • .panel-titleki .card-title. I runga i te ahua e hiahiatia ana, ka hiahia pea koe ki te whakamahi i nga huānga pane, i nga karaehe ranei (hei tauira <h3>, .h3) i nga huānga maia, i nga karaehe ranei (hei tauira <strong>, <b>, .font-weight-bold). Kia mahara ko .card-title, ahakoa he rite te whakaingoatia, ka puta he ahua rereke atu i te .panel-title.
  • .panel-bodyki.card-body
  • .panel-footerki.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, a .panel-dangerkua tukuna mo .bg-, .text-, me nga .bordertaputapu i hangaia mai i to maatau $theme-colorsmahere Sass.

Te ahunga whakamua

  • .progress-bar-*I whakakapihia nga karaehe horopaki me nga .bg-*taputapu. Hei tauira, class="progress-bar progress-bar-danger"ka class="progress-bar bg-danger".
  • I whakakapihia .activemo nga pae whakamua pakiwaituhi me te .progress-bar-animated.
  • I whakahouhia te waahanga katoa hei whakangwari i te hoahoa me te hanga. He iti ake a maatau momo ka taea e koe te whakakore, nga tohu hou, me nga tohu hou.
  • Ko nga CSS katoa kua kore e noho kohanga me te whakaingoa ano, me te whakarite kia whakauruhia ia akomanga ki te .carousel-.
    • Mo nga taonga carousel, .next, .prev, .left, a .rightinaianei .carousel-item-next, .carousel-item-prev, .carousel-item-left, me .carousel-item-right.
    • .iteminaianei ano hoki .carousel-item.
    • Mo nga mana o mua/muri, .carousel-control.righta .carousel-control.leftinaianei .carousel-control-nextme te .carousel-control-prev, te tikanga kaore e hiahiatia he akomanga turanga motuhake.
  • I tangohia nga whakaahua urupare katoa, te whakaroa ki nga taputapu (hei tauira, te whakaatu tapanga ki etahi tauranga tirohanga) me nga momo ritenga ina hiahiatia.
  • Ko te tango i te atahanga whakaahuru mo nga whakaahua kei roto i nga taonga carousel, kei te whakaroa ki nga taputapu.
  • I takawirihia te tauira Carousel ki te whakauru i nga tohu hou me nga momo.

Ripanga

  • Kua tangohia te tautoko mo nga ripanga kohanga. Ko nga momo ripanga katoa kua tuku iho inaianei ki te v4 mo nga kaiwhiringa ngawari ake.
  • Kua taapirihia te momo ripanga kōaro.

Nga taputapu

  • Whakaatu, huna, me etahi atu:
    • Ko nga taputapu whakaatu kia aro (hei tauira, .d-noneme te d-{sm,md,lg,xl}-none).
    • I whakahekehia te nuinga o nga .hidden-*taputapu mo nga taputapu whakaatu hou . Hei tauira, hei utu mo te .hidden-sm-up, whakamahia .d-sm-none. I whakaingoatia ano nga .hidden-printtaputapu hei whakamahi i te kaupapa whakaingoa taputapu whakaatu. He maha atu nga korero kei raro i te waahanga taputapu urupare o tenei wharangi.
    • Kua taapirihia .float-{sm,md,lg,xl}-{left,right,none}nga karaehe mo nga maanu urupare me te tango .pull-leftmai .pull-righti te mea he nui noa atu ki .float-lefta .float-right.
  • Momo:
    • Kua taapirihia nga rereketanga urupare ki o maatau karaehe whakatikatika kuputuhi .text-{sm,md,lg,xl}-{left,center,right}.
  • Tirohanga me te mokowā:
  • I whakahouhia a Clearfix ki te whakaheke i te tautoko mo nga putanga tirotiro tawhito.

Kaihoko whakaurunga prefix

Ko nga whakaurunga o mua kaihoko a Bootstrap 3 , i whakakorehia i roto i te v3.2.0, kua tangohia i Bootstrap 4. I te mea ka whakamahia e matou te Autoprefixer , kua kore e tika.

I tangohia nga ranunga e whai ake nei : 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_skewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Tuhinga

I whiwhi whakamohoatanga o taatau tuhinga puta noa i te poari. Anei te iti ki raro:

  • Kei te whakamahi tonu matou i a Jekyll, engari he mono kei roto i te ranunga:
    • bugify.rbka whakamahia hei whakarārangi pai i ngā tāurunga i runga i tā mātou wharangi pepeha tirotiro.
    • example.rbhe marau ritenga o te highlight.rbmono taunoa, kia ngawari ake te whakahaere tauira-waehere.
    • callout.rbhe rite tonu te marau o tera, engari i hangaia mo a maatau tuhinga korero motuhake.
    • Kei te whakamahia te jekyll-toc ki te whakaputa i a maatau tepu korero.
  • Ko nga ihirangi tuhinga katoa kua tuhia ano ki Markdown (hei utu mo te HTML) kia ngawari ake te whakatika.
  • Kua whakatikatikahia nga wharangi mo nga kaupapa ngawari ake me te arotautanga ngawari ake.
  • I neke matou mai i te CSS auau ki te SCSS ki te whai rawa i nga taurangi a Bootstrap, whakauru, me etahi atu.

Nga taputapu urupare

Kua @screen-tangohia nga taurangi katoa i roto i te v4.0.0. Whakamahia te whakaurunga media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-only()Sass ranei, te $grid-breakpointsmahere Sass ranei.

Ko o maatau karaehe whaipainga urupare kua nekehia atu mo nga displaytaputapu maamaa.

  • Kua tangohia te .hiddenme .shownga karaehe na te mea i taupatupatu ki nga jQuery $(...).hide()me $(...).show()nga tikanga. Engari, ngana ki te takahuri i te [hidden]huanga ka whakamahi ranei i nga momo raarangi penei style="display: none;"me te style="display: block;".
  • Kua .hidden-tangohia nga karaehe katoa, engari mo nga taputapu ta kua whakaingoatia.
    • Kua tangohia mai i te 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
    • Kua tangohia mai i te 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
  • Ko nga taputapu tuhi kaore e timata ki .hidden-te .visible-, engari ki te .d-print-.
    • Ingoa tawhito: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nga karaehe hou: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Engari ki te whakamahi i nga .visible-*karaehe marama, ka kitea e koe tetahi huānga ma te kore e huna i tera rahi o te mata. Ka taea e koe te whakakotahi i tetahi .d-*-nonekaraehe me te .d-*-blockakomanga kotahi hei whakaatu i tetahi huānga i runga i te waahi o te rahi o te mata (hei tauira .d-none.d-md-block.d-xl-noneka whakaatu i te huānga ki nga taputapu reo me te rahi anake).

Kia mahara ko nga huringa ki nga waahi wehenga matiti i te v4 ko te tikanga me haere koe ki tetahi waahi wehenga nui ake kia rite ai nga hua. Ko nga karaehe whaipainga urupare hou e kore e ngana ki te whakauru i nga keehi iti noa e kore e taea te whakaatu i te tirohanga o tetahi huānga hei awhe tatai o te rahi tauranga tirohanga; ka hiahia koe ki te whakamahi i CSS ritenga i roto i enei take.