Ke neʻe nei i v4

ʻO Bootstrap 4 kahi mea kākau hou o ka papahana holoʻokoʻa. Hōʻuluʻulu ʻia nā hoʻololi kaulana loa ma lalo, 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). ʻAe 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 mua i kahi 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 ʻia i <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

• ʻO nā mea hoʻohui pūʻulu hoʻokomo i kēia manawa i ko lākou kau ʻana e pili ana i kahi hoʻokomo. Ua hāʻule mākou .input-group-addona .input-group-btnno nā papa hou ʻelua, .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 kahi hoʻopili a i ʻole 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 .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 nui 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 hoʻololi. 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()i ka hana i gray()mea e pale ai i ka haki ʻana 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 ua like ia 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ō ʻo 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. Ua 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 ʻāpana.
• 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.
  • Hōʻano hou ʻia nā hui ʻana no ka hoʻohana ʻana i kahi make-col-readymixin prep a me ka make-colhoʻonohonoho ʻana i ka flexnui max-widtho nā 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:
  • ka mana o luna o Glyphicons
  • Octicons
  • Kaumaha ka Font
  • E ʻike i ka ʻaoʻao Extend no ka papa inoa o nā mea ʻē aʻe. He mau manaʻo hou aʻe? E ʻoluʻolu e wehe i kahi pilikia a i ʻole PR.
• Hoʻokuʻu i ka plugin Affix jQuery.
  • Paipai mākou e hoʻohana position: stickyma kahi. E nānā i ke komo ʻana 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 i nā polyfills ke kākoʻo 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 ʻia .page-headerʻoiai, ma waho aʻe o ka palena, hiki ke hoʻohana ʻia kona mau ʻano āpau 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.
• <blockquote>Ua neʻe ke kāhili maʻamau i nā papa— a .blockquoteme ka .blockquote-reversemea hoʻololi.
• .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 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.
• ʻAʻole koi hou nā papa pane i kahi mea ʻōwili. Akā, e kau wale i ka .table-responsiveʻākau ma ka <table>.
• 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 e 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 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 i .form-control-plaintext.

Nā pihi

• Kapa .btn-defaulthou 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 e mau ana nā kahua kahua kīnā ʻole 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 wehe ʻ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.

Nā hāʻule iho

• 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 i .dropdown-divider.
• Pono nā mea dropdown 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.

Modal

• 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 ka alignment 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.

Navs

• 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.

Navbar

Ua kākau hou ʻia ka navbar i ka flexbox me ke kākoʻo maikaʻi ʻana 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. 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 hope ( .bg-*) a i ʻole e hoʻonohonoho iā ʻoe 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 like ʻole 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.

Lai palaoa

• Ua koi ʻia kahi papa kikoʻī, .breadcrumb-item, i nā mamo a .breadcrumbs

Nā lepili a me nā hōʻailona

• Hoʻololi .labelʻia .badgei ka wehewehe ʻana mai ka <label>mea.
• Hoʻokuʻu i ka ʻāpana no ka .badgemea ua aneane like me nā lepili. E hoʻohana i ka .badge-pillmea hoʻololi me ka ʻāpana lepili ma kahi o kēlā nānā poʻe.
• ʻAʻole e lana ʻakomi ʻia nā kaha ma nā pūʻulu papa inoa a me nā mea ʻē aʻe. Pono nā papa 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 kahi ʻē 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 ka nānā 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

• Hoʻololi ʻia nā .progress-bar-*papa ʻokoʻa me .bg-*nā pono. 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.

Carousel

• Hoʻoponopono hou 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 pākaukau inverse.

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 nā mea hana 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 lākou i ka .float-lefta me .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ʻohui ʻia nā ʻaoʻao pane pane hou a me nā pono hana no nā ʻaoʻao a pau, me nā pōkole kū pololei a me ka pae.
  • Hoʻohui ʻia ka ukana o ka pahu flexbox .
  • Haʻule .center-blockno ka .mx-autopapa hou.
• 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.rbua hoʻohana ʻ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 hoʻohana ʻana i nā code code.
  • callout.rbHe ʻano maʻamau like ia o kēlā, akā i hoʻolālā ʻia no kā mākou mau palapala kikoʻī kūikawā.
  • markdown-block.rbhoʻohana ʻia e hāʻawi i nā snippets Markdown i loko o nā mea HTML e like me nā papa.
  • 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 i SCSS e hoʻohana pono i nā ʻano hoʻololi o 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 me ka hūnā ʻole ʻana iā ia i 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 kahi 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.