Source

Ke neʻe nei i v4

ʻO Bootstrap 4 kahi kākau hou nui o ka papahana holoʻokoʻa. Hōʻuluʻulu ʻia nā hoʻololi kaulana loa ma lalo nei, a ukali ʻia e nā hoʻololi kikoʻī hou aku i nā mea pili.

Hoʻololi kūpaʻa

Ke neʻe nei mai Beta 3 a hiki i kā mākou hoʻokuʻu stable v4.0, ʻaʻohe hoʻololi haki, akā aia kekahi mau loli koʻikoʻi.

Paʻi ʻana

  • Hoʻopaʻa i nā pono paʻi haʻihaʻi. Ma mua, ʻo ka hoʻohana ʻana i kahi .d-print-*papa i manaʻo ʻole e hoʻokahuli i nā .d-*papa ʻē aʻe. I kēia manawa, hoʻohālikelike lākou i kā mākou mau pono hōʻike ʻē aʻe a pili wale i kēlā media ( @media print).

  • Hoʻonui ʻia nā pono hōʻike paʻi e hoʻohālikelike i nā pono hana ʻē aʻe. ʻO ka Beta 3 a ʻoi aku wale nō ka block, inline-block, inline, a me none. Hoʻohui ʻia ʻo Stable v4 flex, inline-flex, table, table-row, a me table-cell.

  • Hoʻopaʻa paʻa nā manaʻo paʻi ma waena o nā mākaʻikaʻi me nā ʻano paʻi hou e kuhikuhi ana @page size.

Hoʻololi Beta 3

ʻOiai ua ʻike ʻo Beta 2 i ka nui o kā mākou hoʻololi ʻana i ka wā o ka beta, akā loaʻa iā mākou kekahi mau mea e pono ai ke kamaʻilio ʻia i ka hoʻokuʻu ʻana i ka Beta 3. Hoʻopili kēia mau hoʻololi inā hoʻonui ʻoe i ka Beta 3 mai ka Beta 2 a i ʻole kekahi mana kahiko o Bootstrap.

Nā mea like ʻole

  • Wehe ʻia ka $thumbnail-transitionhoʻololi i hoʻohana ʻole ʻia. ʻAʻole mākou i hoʻololi i kekahi mea, no laila he code ʻokoʻa wale nō.
  • ʻAʻole hoʻokomo hou ka pūʻolo npm i nā faila ʻē aʻe ma mua o kā mākou kumu a me nā faila dist; inā ʻoe i hilinaʻi iā lākou a ke holo nei i kā mākou mau palapala ma o ka node_moduleswaihona, pono ʻoe e hoʻololi i kāu kahe hana.

Nā palapala

  • Kākau hou i nā pahu pahu maʻamau a me nā lekiō. I kēia manawa, loaʻa nā ʻano HTML like ʻelua (waho <div>me ke kaikunāne <input>a <label>) a me nā ʻano hoʻonohonoho like (stacked default, inline me ka papa hoʻololi). Hāʻawi kēia iā mākou e hana i ka lepili e pili ana i ke kūlana o ka mea hoʻokomo, e hoʻomaʻamaʻa i ke kākoʻo no ka disabledʻano (e koi ana i ka papa makua) a me ke kākoʻo maikaʻi ʻana i kā mākou palapala hōʻoia.

    Ma ke ʻano o kēia, ua hoʻololi mākou i ka CSS no ka hoʻokele ʻana i nā background-images he nui ma nā pahu pahu maʻamau a me nā lekiō. Ma mua, ʻo ka mea i hoʻoneʻe ʻia i kēia manawa ua .custom-control-indicatorloaʻa ke kala hope, gradient, a me SVG icon. ʻO ka hoʻopilikino ʻana i ke kāʻei hope ʻo ia ka mea e hoʻololi i kēlā mau mea āpau i kēlā me kēia manawa āu e hoʻololi ai i hoʻokahi wale nō. I kēia manawa, loaʻa iā mākou .custom-control-label::beforeno ka hoʻopiha a me ka gradient a .custom-control-label::aftermālama i ka ikona.

    No ka hana ʻana i kahi loiloi maʻamau i loko o ka laina, hoʻohui .custom-control-inline.

  • Mea koho hou ʻia no nā pūʻulu pihi hoʻokomo. Ma kahi o [data-toggle="buttons"] { }ke ʻano a me ke ʻano, hoʻohana mākou i ke ʻano datano nā ʻano JS wale nō a hilinaʻi i kahi .btn-group-togglepapa hou no ke kāhili.

  • Wehe .col-form-legendʻia no ka hoʻomaikaʻi iki ʻana .col-form-label. ʻO kēia ala .col-form-label-sma .col-form-label-lghiki ke hoʻohana ma <legend>nā mea me ka maʻalahi.

  • Ua loaʻa i nā hoʻokomo faila maʻamau ka hoʻololi ʻana i kā lākou $custom-file-textʻano Sass. ʻAʻole ia he palapala ʻāina Sass nested a i kēia manawa ke mana wale nei i hoʻokahi kaula-ʻo ke Browsepihi ʻoiai ʻo ia wale nō ka pseudo-element i hana ʻia mai kā mākou Sass. Choose fileMai ka .custom-file-label.

Pūʻulu hoʻokomo

  • Hoʻopili ʻia nā mea hoʻohui pūʻulu hoʻokomo i ko lākou kau ʻana e pili ana i kahi hoʻokomo. Ua hāʻule mākou .input-group-addona .input-group-btnno ʻelua papa hou, .input-group-prependa .input-group-append. Pono ʻoe e hoʻohana i ka append a i ʻole prepend i kēia manawa, e hoʻomaʻamaʻa i ka hapa nui o kā mākou CSS. I loko o ka append a prepend, e kau i kāu mau pihi e like me ka mea e noho ai ma nā wahi ʻē aʻe, akā e hoʻopili i nā kikokikona i loko .input-group-text.

  • Kākoʻo ʻia nā ʻano hōʻoia, e like me nā mea hoʻokomo he nui (ʻoiai hiki iā ʻoe ke hōʻoia i hoʻokahi hoʻokomo i kēlā me kēia hui).

  • Pono nā papa hoʻopaʻa ʻana ma ka makua .input-groupa ʻaʻole i nā ʻano mea hoʻokahi.

Hoʻololi Beta 2

ʻOiai ma ka beta, manaʻo mākou ʻaʻohe loli. Eia naʻe, ʻaʻole holo nā mea e like me ka mea i hoʻolālā ʻia. Aia ma lalo iho nā loli e hoʻomanaʻo ʻia i ka neʻe ʻana mai Beta 1 a i Beta 2.

Haʻihaʻi

  • Wehe ʻia $badge-colorka loli a me kona hoʻohana ʻana ma .badge. Hoʻohana mākou i kahi hana ʻokoʻa kala e koho i kahi colorma muli o ka background-color, no laila ʻaʻole pono ka loli.
  • Hoʻololi grayscale()ʻia ka hana i gray()mea e pale aku ai i ka hakakā me ka grayscalekānana maoli CSS.
  • Kapa hou ʻia ʻo .table-inverse, .thead-inverse, a .thead-defaultiā .*-darka .*-light, e like me kā mākou mau kala kala i hoʻohana ʻia ma nā wahi ʻē aʻe.
  • Hoʻopuka nā papa pane i nā papa no kēlā me kēia wahi haʻihaʻi. Ua haʻalele kēia mai ka Beta 1 i ka mea .table-responsiveāu i hoʻohana ai e like me .table-responsive-md. Hiki iā ʻoe ke hoʻohana i kēia manawa a i .table-responsiveʻole .table-responsive-{sm,md,lg,xl}e pono ai.
  • Hoʻopau ʻia ke kākoʻo ʻo Bower no ka mea ua hoʻopau ʻia ka luna pūʻolo no nā mea ʻē aʻe (e laʻa, Yarn a i ʻole npm). E nānā i ka bower/bower#2298 no nā kikoʻī.
  • Pono ʻo Bootstrap i ka jQuery 1.9.1 a i ʻole ke kiʻekiʻe, akā ua ʻōlelo ʻia ʻoe e hoʻohana i ka mana 3.x no ka mea ʻo nā polokalamu kele pūnaewele i kākoʻo ʻia ʻo ia ka mea a Bootstrap e kākoʻo ai a loaʻa iā v3.x kekahi mau hoʻoponopono palekana.
  • Wehe ʻia ka .form-control-labelpapa i hoʻohana ʻole ʻia. Inā ʻoe i hoʻohana i kēia papa, he kope ia o ka .col-form-labelpapa i hoʻonohonoho pono <label>ʻia a me ka hoʻokomo pili ʻana i nā hoʻolālā ʻano ākea.
  • Hoʻololi i ka color-yiqmai kahi mixin i hoʻokomo i ka colorwaiwai i kahi hana e hoʻihoʻi i kahi waiwai, e ʻae iā ʻoe e hoʻohana ia mea no kekahi waiwai CSS. No ka laʻana, ma kahi o color-yiq(#000), e kākau ʻoe color: color-yiq(#000);.

Nā mea nui

  • Hoʻokomo ʻia ka pointer-eventshoʻohana hou ʻana ma nā modals. Hele ka waho .modal-dialogi nā hanana me pointer-events: noneka hoʻohana ʻana i ke kaomi maʻamau (e hiki ai ke hoʻolohe wale i ke .modal-backdropkaomi no kekahi kaomi), a laila kūʻē iā ia no ka mea maoli .modal-contentme pointer-events: auto.

Hōʻuluʻulu manaʻo

Eia nā mea tikiki nui āu e makemake ai e ʻike i ka neʻe ʻana mai v3 a i v4.

Kākoʻo polokalamu kele pūnaewele

  • Hoʻokuʻu i ke kākoʻo IE8, IE9, a me iOS 6. ʻO ka v4 wale nō kēia IE10+ a me iOS 7+. No nā pūnaewele e pono ai kekahi o ia mau mea, e hoʻohana i ka v3.
  • Hoʻohui ʻia ke kākoʻo kūhelu no ka Android v5.0 Lollipop's Browser a me WebView. Kākoʻo ʻole ʻia nā mana o ka Android Browser a me WebView.

Hoʻololi honua

  • Hoʻohana ʻia ʻo Flexbox ma ka paʻamau. Ma keʻano laulā, ʻo ia hoʻi ka neʻe ʻana mai nā lana a ʻoi aʻe ma waena o kā mākou mau mea.
  • Ua hoʻololi ʻia mai ka liʻiliʻi a i ka Sass no kā mākou kumu waihona CSS.
  • Ua hoʻololi ʻia mai pxko remmākou pūʻulu CSS mua, ʻoiai ke hoʻohana mau ʻia nei nā pika no nā nīnau media a me nā ʻano pānaehana no ka mea ʻaʻole pili ʻia nā hiʻohiʻona o nā hāmeʻa e ka nui ʻano.
  • Ua hoʻonui ʻia ka nui o ka font honua mai 14pxka 16px.
  • Hoʻopili hou ʻia nā pae mānoanoa e hoʻohui i kahi koho ʻelima (e ʻōlelo ana i nā mea liʻiliʻi ma 576pxlalo) a wehe i ka -xsinfix mai kēlā mau papa. Laʻana: .col-6.col-sm-4.col-md-3.
  • Hoʻololi i ke kumumanaʻo koho ʻokoʻa me nā koho configurable ma o nā mea hoʻololi SCSS (e laʻa, $enable-gradients: true).
  • Kūkulu ʻia ka ʻōnaehana i hoʻohana ʻia e hoʻohana i ke ʻano o nā palapala npm ma kahi o Grunt. E ʻike package.jsoni nā palapala āpau, a i ʻole kā mākou papahana readme no nā pono hoʻomohala kūloko.
  • ʻAʻole kākoʻo hou ʻia ka hoʻohana ʻole ʻana o Bootstrap.
  • Hoʻokuʻu i ka Customizer pūnaewele no ka ʻoi aku ka nui o nā palapala hoʻonohonoho a me nā kūkulu maʻamau.
  • Hoʻohui ʻia nā papa hana hou no nā hui waiwai-waiwai CSS maʻamau a me nā ʻaoʻao pōkole spacing margin/padding.

Pūnaehana mānoanoa

  • Neʻe ʻia i flexbox.
    • Hoʻohui i ke kākoʻo no ka flexbox i loko o nā hui hui a me nā papa i koho mua ʻia.
    • Ma ke ʻano he flexbox, ua hoʻokomo ʻia ke kākoʻo no nā papa alignment vertical a me ka pae.
  • Hōʻano hou ʻia nā inoa papa kikohoʻe a me kahi pae mākia hou.
    • Hoʻohui ʻia kahi pae mānoanoa hou smma lalo 768pxno ka mana ʻoi aku ka maikaʻi. Loaʻa iā mākou i kēia manawa xs, sm, md, lga xl. ʻO ia hoʻi, ua hoʻokiʻekiʻe ʻia kēlā me kēia pae i hoʻokahi pae (no laila .col-md-6ma v3 i kēia manawa .col-lg-6i v4).
    • xsUa hoʻololi ʻia nā papa grid i ʻole e koi i ka infix e hōʻike pololei i ka hoʻomaka ʻana e hoʻohana i nā kaila min-width: 0a ʻaʻole i kahi waiwai pixel i hoʻonohonoho ʻia. Ma kahi o .col-xs-6, i kēia manawa .col-6. Pono nā pae mānoanoa ʻē aʻe i ka infix (e laʻa, sm).
  • Ua hoʻonui ʻia ka nui o ka mānoanoa, nā huila, a me nā ʻano like ʻole.
    • Loaʻa iā Grid gutters kahi palapala ʻāina Sass no laila hiki iā ʻoe ke kuhikuhi i nā laula awāwa kikoʻī i kēlā me kēia haki.
    • Hoʻohui hou ʻia nā huila mānoanoa e hoʻohana i kahi make-col-readymixin prep a me kahi make-cole hoʻonohonoho i ka nui flexa max-widthno ka nui o ke kolamu pākahi.
    • Ua hoʻololi ʻia nā ʻāpana nīnau nīnau media pūnaewele a me nā laula pahu e helu i ka pae mākia hou a e hōʻoia i ka puʻunaue like ʻana o nā kolamu 12ma ko lākou laula kiʻekiʻe.
    • Hoʻohana ʻia nā ʻāpana haki a me nā laula ipu ma o nā palapala ʻāina Sass ( $grid-breakpointsa $container-max-widths) ma kahi o kahi liʻiliʻi o nā ʻano like ʻole. Hoʻololi kēia mau mea i nā @screen-*mea hoʻololi āpau a ʻae iā ʻoe e hoʻonohonoho pono i nā pae kiʻi.
    • Ua loli pū nā nīnau Media. Ma kahi o ka hana hou ʻana i kā mākou mau ʻōlelo hoʻolaha nīnau media me ka waiwai like i kēlā me kēia manawa, loaʻa iā mākou i kēia manawa @include media-breakpoint-up/down/only. I kēia manawa, ma kahi o ke kākau ʻana @media (min-width: @screen-sm-min) { ... }, hiki iā ʻoe ke kākau @include media-breakpoint-up(sm) { ... }.

Nā ʻāpana

  • Nā panela i hoʻokuʻu ʻia, nā liʻiliʻi liʻiliʻi, a me nā pūnāwai no kahi mea hoʻopili hou, kāleka .
  • Ua hoʻokuʻu i ka font icon Glyphicons. Inā makemake ʻoe i nā ikona, aia kekahi mau koho:
  • Hoʻokuʻu i ka plugin Affix jQuery.
    • Paipai mākou e hoʻohana position: sticky. E ʻike i ke komo ʻana o HTML5 Please no nā kikoʻī a me nā ʻōlelo paipai polyfill kikoʻī. Hoʻokahi manaʻo e hoʻohana i kahi @supportslula no ka hoʻokō ʻana (eg, @supports (position: sticky) { ... })/
    • Inā ʻoe e hoʻohana ana i ka Affix no ka hoʻohana ʻana i nā kaila ʻē aʻe, positionʻaʻole hiki ke kākoʻo nā polyfills i kāu hihia hoʻohana. ʻO kahi koho no ia hoʻohana ʻana ʻo ka waihona ScrollPos-Styler ʻaoʻao ʻekolu .
  • Hoʻokuʻu i ka ʻāpana pager no ka mea he mau pihi i hoʻonohonoho pono ʻia.
  • Hoʻopili hou ʻia ma kahi o nā ʻāpana āpau e hoʻohana i nā mea koho papa ʻole i hoʻopaʻa ʻia ma mua o nā mea koho keiki ʻoi aku ka kikoʻī.

Ma ka ʻāpana

Hōʻike kēia papa inoa i nā hoʻololi koʻikoʻi e ka ʻāpana ma waena o v3.xx a me v4.0.0.

Hoʻomaka hou

ʻO ka mea hou i Bootstrap 4 ka Reboot , kahi stylesheet hou i kūkulu ʻia ma Normalize me kā mākou mau ʻano hoʻonohonoho ʻano manaʻo. Hoʻohana wale nā ​​mea koho i kēia faila i nā ʻeleʻele—ʻaʻohe papa ma aneʻi. Hoʻokaʻawale kēia i kā mākou kaila hoʻonohonoho hou mai kā mākou ʻano ʻāpana no kahi ala modular. ʻO kekahi o nā hoʻoponopono koʻikoʻi e pili ana i kēia, ʻo ia ka box-sizing: border-boxhoʻololi, ka neʻe ʻana mai emi remnā ʻāpana ma nā mea he nui, nā ʻano loulou, a me nā ʻano mea hoʻonohonoho hou.

Palapala kiʻi

  • Ua hoʻoneʻe i nā .text-pono hana a pau i ka _utilities.scssfaila.
  • Hoʻokuʻu .page-headerʻia ʻoiai hiki ke hoʻohana ʻia kona mau ʻano ma o nā pono hana.
  • .dl-horizontalua hoʻokuʻu ʻia. Akā, e hoʻohana a hoʻohana .rowi <dl>nā papa kolamu grid (a i ʻole mixins) ma kāna <dt>a me <dd>nā keiki.
  • Hoʻolālā hou ʻia nā blockquotes, e hoʻoneʻe i kā lākou mau ʻano mai ka <blockquote>mea i kahi papa hoʻokahi, .blockquote. Hoʻokuʻu i ka .blockquote-reversemea hoʻololi no nā pono kikokikona.
  • .list-inlinei kēia manawa pono e hoʻopili ʻia nā mea papa inoa o kāna mau keiki i ka papa hou .list-inline-itemiā lākou.

Nā kiʻi

  • Kapa .img-responsivehou ʻia i .img-fluid.
  • Kapa .img-roundedhou ʻia i.rounded
  • Kapa .img-circlehou ʻia i.rounded-circle

Nā papaʻaina

  • ʻAneʻane pau nā manawa o ka >mea koho i wehe ʻia, ʻo ia hoʻi, e hoʻoili ʻokoʻa ʻia nā papa hoʻopaʻa ʻia i nā ʻano mai ko lākou mau mākua. Hoʻomaʻamaʻa nui kēia i kā mākou mea koho a me nā hana hoʻoponopono.
  • Hoʻololi .table-condensedi ka inoa .table-smno ka paʻa.
  • Hoʻohui i kahi .table-inversekoho hou.
  • Hoʻohui ʻia nā mea hoʻololi poʻomanaʻo: .thead-defaulta .thead-inverse.
  • Kapa hou ʻia nā papa ʻokoʻa i loaʻa kahi .table--prefix. No laila .active, .success, .warning, .dangera .infoi .table-active, .table-success, .table-warning, .table-dangera .table-info.

Nā palapala

  • Hoʻihoʻi hou ʻia ka mea hoʻoneʻe i ka _reboot.scssfaila.
  • Kapa .control-labelhou ʻia i .col-form-label.
  • Hoʻololi i ka inoa .input-lga me .input-sma .form-control-lgme .form-control-sm, kēlā me kēia.
  • Haʻule .form-group-*nā ​​papa no ka maʻalahi. E hoʻohana .form-control-*i nā papa i kēia manawa.
  • Hoʻokuʻu .help-blockʻia a hoʻololi ʻia me .form-textka kikokikona kōkua pae-poka. No nā kikokikona kōkua inline a me nā koho maʻalahi ʻē aʻe, e hoʻohana i nā papa pono e like me .text-muted.
  • Hāʻule .radio-inlinea .checkbox-inline.
  • Hoʻohui ʻia .checkboxa .radioi loko .form-checka me nā .form-check-*papa like ʻole.
  • Hoʻoponopono hou ʻia nā ʻano horizontal:
    • Haʻalele i ka .form-horizontalpapa koi.
    • .form-groupʻaʻole hoʻohana hou i nā kaila mai ka .rowmixin, no laila .rowua koi ʻia i kēia manawa no nā hoʻonohonoho papa kuhikuhi (eg, <div class="form-group row">).
    • Hoʻohui ʻia ka .col-form-labelpapa hou i nā lepili kūwaena me .form-controlka s.
    • Hoʻohui hou .form-rowʻia no nā papa hoʻonohonoho paʻa me nā papa grid (hoʻololi iā ʻoe .rowno kahi .form-rowa hele).
  • Hoʻohui ʻia nā kākoʻo maʻamau (no nā pahu pahu, nā lekiō, nā koho, a me nā hoʻokomo faila).
  • Hoʻololi ʻia .has-errornā , .has-warning, a me .has-successnā papa me ka hōʻoia ʻana o ka palapala HTML5 ma o nā CSS a :invalidme :validnā papa pseudo.
  • Kapa .form-control-statichou ʻia i .form-control-plaintext.

Nā pihi

  • Kapa .btn-defaulthou ʻia i .btn-secondary.
  • Hoʻokuʻu .btn-xsloa i ka papa e like me .btn-smka liʻiliʻi ma mua o ka v3.
  • Ua hoʻokuʻu ʻia ka hiʻohiʻona pihi stateful o ka button.jsplugin jQuery. Loaʻa kēia i nā ʻano $().button(string)a me $().button('reset')nā ʻano. Manaʻo mākou e hoʻohana i kahi JavaScript maʻamau, e loaʻa iā ia ka pōmaikaʻi o ka hana ʻana i ke ʻano āu e makemake ai.
    • E hoʻomanaʻo i nā hiʻohiʻona ʻē aʻe o ka plugin (nā pahu pahu pahu, nā lekiō pihi, nā pihi hoʻololi hoʻokahi) i mālama ʻia ma v4.
  • E hoʻololi i nā pihi ' [disabled]e :disabledlike me ke kākoʻo ʻana o IE9+ :disabled. Pono nō naʻe fieldset[disabled]no ka mea ʻaʻole paʻa nā kahua kahua ʻōiwi ma IE11 .

Pūʻulu pihi

  • E kākau hou i ka ʻāpana me ka pahu pahu.
  • Wehe ʻia .btn-group-justified. Ma ke ʻano he pani hiki iā ʻoe ke hoʻohana <div class="btn-group d-flex" role="group"></div>ma ke ʻano he wīwī a puni nā mea me .w-100.
  • Hoʻokuʻu i ka .btn-group-xspapa i hāʻawi ʻia i ka lawe ʻia ʻana o .btn-xs.
  • Wehe ʻia ka mokowā ʻokoʻa ma waena o nā pūʻulu pihi ma nā pahu hana pihi; e hoʻohana i nā pono hana margin i kēia manawa.
  • Hoʻomaikaʻi ʻia nā palapala no ka hoʻohana ʻana me nā mea ʻē aʻe.
  • Hoʻololi ʻia mai nā mea koho makua i nā papa hoʻokahi no nā ʻāpana āpau, nā mea hoʻololi, etc.
  • ʻAʻole i hoʻouna hou ʻia nā ʻano hoʻohaʻahaʻa maʻalahi me nā pua e kū ana i luna a i lalo paha i hoʻopili ʻia i ka papa kuhikuhi.
  • Hiki ke kūkulu ʻia nā dropdown me <div>s a i ʻole <ul>s i kēia manawa.
  • Hoʻokumu hou i nā ʻano hoʻohaʻahaʻa a me ka markup e hāʻawi i ke kākoʻo maʻalahi i kūkulu ʻia no <a>nā <button>mea hāʻule iho.
  • Kapa .dividerhou ʻia i .dropdown-divider.
  • Pono nā mea hāʻule i kēia manawa .dropdown-item.
  • ʻAʻole koi hou nā hoʻololi i lalo i kahi kikoʻī <span class="caret"></span>; Hāʻawi ʻia kēia manawa ma o CSS ::afterma .dropdown-toggle.

Pūnaehana mānoanoa

  • Ua hoʻohui ʻia i kahi wahi 576pxhaʻihaʻi hou e like me sm, ʻo ia hoʻi, aia i kēia manawa ʻelima mau pae ( xs, sm, md, lg, a me xl).
  • Hoʻololi i ka inoa i nā papa hoʻololi hoʻololi pānaʻi pane mai .col-{breakpoint}-{modifier}-{size}a .{modifier}-{breakpoint}-{size}no nā papa mākia maʻalahi.
  • Hoʻokuʻu ʻia nā papa hoʻololi a huki no nā papa hana flexbox hou order. No ka laʻana, ma kahi o ka .col-8.push-4a .col-4.pull-8, e hoʻohana ʻoe .col-8.order-2a me .col-4.order-1.
  • Hoʻohui ʻia nā papa hana flexbox no ka ʻōnaehana grid a me nā ʻāpana.

E papa inoa i nā hui

  • E kākau hou i ka ʻāpana me ka pahu pahu.
  • Hoʻololi a.list-group-itemʻia me kahi papa kikoʻī, .list-group-item-action, no ka loulou styling a me nā mana pihi o nā mea hui papa inoa.
  • Hoʻohui .list-group-flushʻia ka papa no ka hoʻohana ʻana me nā kāleka.
  • E kākau hou i ka ʻāpana me ka pahu pahu.
  • Hāʻawi ʻia i ka neʻe ʻana i ka flexbox, ua haki paha ke kuhi ʻana o nā kiʻi hoʻokuʻu i ke poʻo no ka mea ʻaʻole mākou e hoʻohana hou i nā lana. ʻO ka maʻiʻo lana ka mea mua, akā me ka flexbox ʻaʻole ia ka hihia. Hoʻohou i kāu mau kiʻi hoʻokuʻu e hele mai ma hope o nā poʻo inoa modal e hoʻoponopono ai.
  • ʻO ke remotekoho (hiki ke hoʻohana ʻia e hoʻouka a hoʻokomo i nā ʻike o waho i kahi modal) a loaded.bs.modalua wehe ʻia ka hanana pili. Manaʻo mākou e hoʻohana i ka hoʻohālikelike ʻaoʻao o ka mea kūʻai aku a i ʻole kahi papa hana paʻa ʻikepili, a i ʻole ke kāhea ʻana iā jQuery.load iā ʻoe iho.
  • E kākau hou i ka ʻāpana me ka pahu pahu.
  • Hoʻokuʻu ʻia i nā >mea koho a pau no ke kāhiko maʻalahi ma o nā papa pūnana ʻole.
  • Ma kahi o nā mea koho HTML-specific like .nav > li > a, hoʻohana mākou i nā papa ʻokoʻa no .navs, .nav-items, a me .nav-links. ʻOi aku ka maʻalahi o kāu HTML i ka lawe ʻana mai i ka hoʻonui ʻia.

Ua kākau hou ʻia ka navbar i ka flexbox me ke kākoʻo i hoʻomaikaʻi ʻia no ka alignment, pane, a me ka hana maʻamau.

  • Hoʻohana ʻia nā ʻano navbar pane i ka .navbarpapa ma o ka mea i makemake .navbar-expand-{breakpoint} ʻia kahi āu e koho ai i kahi e hāʻule ai ka navbar. Ma mua he hoʻololi liʻiliʻi liʻiliʻi kēia a pono e hoʻopili hou.
  • .navbar-defaulti kēia manawa .navbar-light, ʻoiai .navbar-darke mau ana ka like. Pono kekahi o kēia ma kēlā me kēia navbar. Eia naʻe, ʻaʻole hoʻonohonoho hou kēia mau papa i nā background-colors; akā, pili wale lākou color.
  • Pono ʻo Navbars i kahi ʻōlelo hoʻolaha o kekahi ʻano. E koho mai i kā mākou mau pono hana ( .bg-*) a i ʻole e hoʻonohonoho i kāu iho me nā papa māmā/inverse ma luna no ka hana maʻamau .
  • Hāʻawi ʻia i nā ʻano flexbox, hiki i nā navbars ke hoʻohana i nā pono flexbox no nā koho alignment maʻalahi.
  • .navbar-togglei kēia manawa .navbar-togglera loaʻa nā ʻano ʻokoʻa a me ka hōʻailona o loko (ʻaʻohe ʻekolu <span>mau).
  • Haʻalele .navbar-formloa i ka papa. ʻAʻole pono hou; akā, e hoʻohana wale .form-inlinea hoʻopili i nā pono hana margin e like me ka mea e pono ai.
  • ʻAʻole hoʻokomo hou ʻia nā Navbars margin-bottoma border-radiusma ka paʻamau. E hoʻohana i nā mea pono e like me ka mea e pono ai.
  • Ua hōʻano hou ʻia nā hiʻohiʻona āpau e hōʻike ana i nā navbars e hoʻokomo i ka markup hou.

Ka helu helu

  • E kākau hou i ka ʻāpana me ka pahu pahu.
  • Pono nā papa kikoʻī ( .page-item, .page-link) i nā mamo a .paginations
  • Hoʻokuʻu .pagerloa i ka ʻāpana no ka mea ʻoi aku ka liʻiliʻi ma mua o nā pihi outline maʻamau.
  • Ua koi ʻia kahi papa kikoʻī, .breadcrumb-item, i nā mamo a .breadcrumbs

Nā lepili a me nā hōʻailona

  • Hoʻohui ʻia .labela .badgehoʻokaʻawale i ka ʻāpana <label>a hoʻomaʻamaʻa i nā ʻāpana pili.
  • Hoʻohui .badge-pillʻia ma ke ʻano he mea hoʻololi no ka nānā ʻana i ka "pill".
  • ʻAʻole e lana ʻakomi ʻia nā kaha i nā pūʻulu papa inoa a me nā mea ʻē aʻe. Pono nā papa hana pono no kēlā.
  • .badge-defaultua hoʻokuʻu ʻia a .badge-secondaryhoʻohui ʻia e hoʻohālikelike i nā papa hoʻololi ʻāpana i hoʻohana ʻia ma nā wahi ʻē aʻe.

Nā panela, nā kiʻi liʻiliʻi, a me nā pūnāwai

Haʻule loa no ka ʻāpana kāleka hou.

Nā Panela

  • .paneli .card, i kēia manawa i kūkulu ʻia me flexbox.
  • .panel-defaultwehe ʻia a ʻaʻohe pani.
  • .panel-groupwehe ʻia a ʻaʻohe pani. .card-groupʻaʻole ia he pani, he ʻokoʻa.
  • .panel-headingi.card-header
  • .panel-titlei .card-title. Ma muli o ke ʻano i makemake ʻia, makemake paha ʻoe e hoʻohana i nā mea poʻomanaʻo a i ʻole nā ​​papa (e laʻa <h3>, .h3) a i ʻole nā ​​​​mea wiwo ʻole a i ʻole nā ​​papa (eg <strong>, <b>, .font-weight-bold). E hoʻomaopopo ʻo .card-title, ʻoiai ua like ka inoa ʻana, hana i kahi hiʻohiʻona ʻokoʻa ma mua o .panel-title.
  • .panel-bodyi.card-body
  • .panel-footeri.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, a .panel-dangerua waiho ʻia no .bg-, .text-, a me .bordernā pono hana i hana ʻia mai kā mākou $theme-colorspalapala ʻāina Sass.

Holomua

  • .progress-bar-*Ua hoʻololi ʻia nā papa ʻokoʻa me .bg-*nā pono hana. No ka laʻana, class="progress-bar progress-bar-danger"lilo class="progress-bar bg-danger".
  • Hoʻololi .activeʻia no nā pahu holomua animated me .progress-bar-animated.
  • Hoʻoponopono i ka ʻāpana holoʻokoʻa e maʻalahi i ka hoʻolālā a me ke ʻano. He liʻiliʻi kā mākou mau kaila no ʻoe e hoʻopau, nā hōʻailona hou, a me nā kiʻi hou.
  • ʻAʻole i hoʻopaʻa ʻia a kapa hou ʻia nā CSS āpau, me ka hōʻoia ʻana e kau ʻia kēlā me kēia papa me .carousel-.
    • No nā mea carousel, .next, .prev, .left, a .righti kēia manawa .carousel-item-next, .carousel-item-prev, .carousel-item-left, a .carousel-item-right.
    • .itemʻo ia hoʻi i kēia manawa .carousel-item.
    • No nā mana prev/next, .carousel-control.righta .carousel-control.lefti kēia manawa .carousel-control-nexta me .carousel-control-prev, ʻo ia hoʻi ʻaʻole lākou e koi hou i kahi papa kumu kikoʻī.
  • Wehe ʻia nā kāhiko pane a pau, ka hoʻopaneʻe ʻana i nā pono hana (e laʻa, hōʻike ʻana i nā captions ma kekahi mau hiʻohiʻona) a me nā ʻano maʻamau e like me ka mea e pono ai.
  • Wehe ʻia nā kiʻi no nā kiʻi ma nā mea carousel, e kali ana i nā pono hana.
  • Hoʻopili i ka hiʻohiʻona Carousel e hoʻokomo i ka markup hou a me nā ʻano.

Nā papaʻaina

  • Wehe ʻia ke kākoʻo no nā papa pūnana i kāhua ʻia. Ua hoʻoili ʻia nā ʻano papa ʻaina a pau ma v4 no nā mea koho maʻalahi.
  • Hoʻohui ʻia ka ʻano papaʻaina hoʻohuli.

Nā pono hana

  • Hōʻike, hūnā, a me nā mea hou aku:
    • Hoʻololi i nā pono hana hōʻike (e laʻa, .d-nonea me d-{sm,md,lg,xl}-none).
    • Hoʻokuʻu i ka nui o .hidden-*nā pono no nā pono hōʻike hou . No ka laʻana, ma kahi o .hidden-sm-up, hoʻohana .d-sm-none. Hoʻololi i ka inoa o nā .hidden-printpono hana no ka hoʻohana ʻana i ka papa inoa inoa o ka pono hōʻike. ʻIke hou aku ma lalo o ka ʻāpana Responsive utilities o kēia ʻaoʻao.
    • Hoʻohui .float-{sm,md,lg,xl}-{left,right,none}ʻia nā papa no nā lana pane a hoʻoneʻe ʻia .pull-lefta .pull-rightno ka mea ʻoi aku ka nui o lākou .float-lefta .float-right.
  • ʻAno:
    • Hoʻohui i nā ʻano like ʻole i kā mākou papa hoʻoponopono kikokikona .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment a me spacing:
  • Hoʻopau hou ʻia ʻo Clearfix e hāʻule i ke kākoʻo no nā mana polokalamu kele kahiko.

Mea hoʻohui prefix mea kūʻai aku

Ua wehe ʻia nā hui prefix kūʻai aku o Bootstrap 3 , i hoʻopau ʻia ma v3.2.0, ma Bootstrap 4. No ka mea, hoʻohana mākou iā Autoprefixer , ʻaʻole pono lākou.

Wehe ʻia nā hui like ʻole : 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

Palapala

Ua loaʻa i kā mākou palapala ka hoʻomaikaʻi ʻana ma ka papa. Eia ka haʻahaʻa haʻahaʻa:

  • Ke hoʻohana nei mākou iā Jekyll, akā loaʻa iā mākou nā plugins i ka hui:
    • bugify.rbHoʻohana ʻia ia e papa inoa i nā mea i hoʻokomo ʻia ma kā mākou ʻaoʻao bugs browser .
    • example.rbʻO ia kahi maʻa maʻamau o ka plugin paʻamau highlight.rb, e ʻae ana i ka maʻalahi o ka laʻana-code handling.
    • callout.rbHe ʻano hana maʻamau like ʻo ia, akā i hoʻolālā ʻia no kā mākou mau palapala kikoʻī kūikawā.
    • Hoʻohana ʻia ʻo jekyll-toc e hana i kā mākou papa ʻike.
  • Ua kākau hou ʻia nā ʻike a pau ma Markdown (ma kahi o HTML) no ka hoʻoponopono maʻalahi.
  • Ua hoʻonohonoho hou ʻia nā ʻaoʻao no ka ʻike maʻalahi a me kahi hierarchy hiki ke hoʻokokoke.
  • Ua neʻe mākou mai CSS maʻamau a i SCSS e hoʻohana pono i nā ʻano hoʻololi a Bootstrap, mixins, a me nā mea hou aku.

Nā pono hana pane

Ua @screen-wehe ʻia nā ʻano like ʻole ma v4.0.0. E hoʻohana i ka media-breakpoint-up(), media-breakpoint-down(), a i ʻole media-breakpoint-only()Sass mixins a i ʻole ka $grid-breakpointspalapala ʻāina Sass.

Ua wehe nui ʻia kā mākou papa hana pane no ka makemake o nā displaypono pono.

  • Ua wehe ʻia nā papa .hiddena me .shownā papa no ka mea ua hakakā lākou me nā jQuery a $(...).hide()me nā ʻano $(...).show(). Akā, e ho'āʻo e hoʻololi i ke [hidden]ʻano a i ʻole e hoʻohana i nā ʻano inline like style="display: none;"a me style="display: block;".
  • Ua .hidden-wehe ʻia nā papa a pau, koe wale no nā pono paʻi i kapa hou ʻia.
    • Wehe ʻia mai 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
    • Wehe ʻia mai 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
  • ʻAʻole hoʻomaka hou nā pono paʻi me .hidden-ka .visible-, akā me ka .d-print-.
    • Nā inoa kahiko: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nā papa hou: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Ma mua o ka hoʻohana ʻana i nā papa kikoʻī .visible-*, hana ʻoe i kahi mea i ʻike ʻia ma ka hūnā ʻole ʻana iā ia ma kēlā nui o ka pale. Hiki iā ʻoe ke hoʻohui i hoʻokahi .d-*-nonepapa me hoʻokahi .d-*-blockpapa e hōʻike i kahi mea wale nō ma ka manawa i hāʻawi ʻia o ka nui o ka pale (e laʻa .d-none.d-md-block.d-xl-noneme ka hōʻike ʻana i ka mea ma nā ʻaoʻao waena a me nā mea nui).

E hoʻomanaʻo, ʻo ka hoʻololi ʻana i nā wahi haʻihaʻi ma v4, pono ʻoe e hele i hoʻokahi breakpoint nui aʻe e loaʻa ai nā hopena like. ʻAʻole hoʻāʻo nā papa hoʻohana pane hou e hoʻokipa i nā hihia maʻamau i hiki ʻole ke hōʻike ʻia ka ʻike ʻana o kahi mea ma ke ʻano he hoʻokahi ākea o ka nui viewport; pono ʻoe e hoʻohana i ka CSS maʻamau i ia mau hihia.