Source

Yɛretu akɔ v4 so

Bootstrap 4 yɛ ade titiriw a wɔasan akyerɛw wɔ adwuma no nyinaa ho. Wɔabobɔ nsakrae a ɛda nsow sen biara no so wɔ ase ha, na wɔde nsakrae pɔtee kɛse aba nneɛma a ɛfa ho no akyi.

Nsakrae a egyina pintinn

Sɛ yɛrekɔ Beta 3 so akɔ yɛn v4.0 a ɛyɛ den no so a, nsakraeɛ biara nni hɔ a ɛrebubu, nanso nsakraeɛ bi wɔ hɔ a ɛda nsow.

Nsɛm a Wɔtintim

  • Wosiesiee print utilities a asɛe. Kan no, sɛ wɔde .d-print-*adesuakuw bi di dwuma a, ɛbɛma wɔabu adesuakuw foforo biara so mpofirim .d-*. Afei, ɛne yɛn display utilities afoforo no hyia na ɛfa saa media no nkutoo ho ( @media print).

  • Wɔatrɛw print display utilities a ɛwɔ hɔ no mu ma ɛne utilities afoforo ahyia. Beta 3 ne nea ɛboro saa nkutoo na na ɔwɔ block, inline-block, inline, ne none. Stable v4 a wɔde aka ho flex, inline-flex, table, table-row, ne table-cell.

  • Wɔasiesie print preview rendering wɔ browser ahorow nyinaa so a print styles foforo a ɛkyerɛ @page size.

Beta 3 no sesa

Bere a Beta 2 huu yɛn nsakrae a ɛrebubu no fã kɛse no ara wɔ beta fã no mu no, nanso yɛda so ara wɔ kakraa bi a na ɛsɛ sɛ wodi ho dwuma wɔ Beta 3 a wɔayi no adi no mu. Saa nsakraeɛ yi fa ho sɛ woreyɛ foforɔ akɔ Beta 3 afiri Beta 2 anaa Bootstrap dedaw biara mu a.

Nkekaho

  • $thumbnail-transitionWoyii variable a wɔmfa nni dwuma no fii hɔ. Na yɛnyɛ nsakrae biara, enti na ɛyɛ extra code kɛkɛ.
  • npm package no nka fael biara bio gye yɛn source ne dist fael ahorow no; sɛ wode wo ho too wɔn so na na node_moduleswonam folda no so reyɛ yɛn scripts no a, ɛsɛ sɛ wosakra w’adwumayɛ no.

Nkyerɛwee ahorow

  • San kyerɛw custom ne default checkbox ne radio ahorow no nyinaa. Afei, abien no nyinaa wɔ HTML nhyehyɛe a ɛne no hyia (akyi <div>a ɛwɔ sibling <input>ne <label>) ne nhyehyɛe ahorow koro no ara (stacked default, inline ne modifier class). Wei ma yɛtumi yɛ style label no gyina input no tebea so, ɛma mmoa a wɔde ma disabledattribute no yɛ mmerɛw (kan no na ɛhwehwɛ sɛ wonya ɔwofo adesua) na ɛboa yɛn form validation no yiye.

    Sɛ eyi fã no, yɛasesa CSS a wɔde hwɛ background-images pii so wɔ custom form checkboxes ne radio ahorow so. Kane no, na .custom-control-indicatorelement a seesei wɔayi afiri hɔ no wɔ akyi kɔla, gradient, ne SVG ahyɛnsodeɛ. Ná akyi a wobɛsesa no kyerɛ sɛ wobɛsesa saa nneɛma no nyinaa bere biara a ɛho behia sɛ wosakra biako pɛ no. Afei, yɛwɔ .custom-control-label::beforema fill ne gradient na .custom-control-label::afterɛdi icon no ho dwuma.

    Sɛ wopɛ sɛ woyɛ custom check inline a, fa ka ho .custom-control-inline.

  • Wɔayɛ selector a wɔayɛ no foforo ama button akuw a egyina input so. Sɛ anka [data-toggle="buttons"] { }yɛde bedi dwuma ama style ne suban no, yɛde dataattribute no di dwuma ma JS suban ahorow nkutoo na yɛde yɛn ho to .btn-group-toggleadesuakuw foforo so ma styling.

  • Woyii .col-form-legendfii hɔ de gye toom sɛ wɔbɛma anya nkɔso kakra .col-form-label. Saa kwan yi so .col-form-label-smna .col-form-label-lgwobetumi de adi dwuma wɔ <legend>elements so a ɛnyɛ den.

  • Custom file inputs nyaa nsakraeɛ wɔ wɔn $custom-file-textSass variable no mu. Ɛnyɛ nested Sass map bio na seesei ɛma ahoɔden biako pɛ —button no Browsesɛnea mprempren ɛno nkutoo ne pseudo-element a wɔayɛ afi yɛn Sass no mu. Mprempren Choose filenkyerɛwee no fi .custom-file-label.

Nsɛm a wɔde hyɛ mu akuw ahorow

  • Input kuw addons mprempren yɛ pɔtee ma wɔn beae a ɛfa input bi ho. Yɛagyae .input-group-addonna .input-group-btnama adesua foforo abien, .input-group-prependne .input-group-append. Ɛsɛ sɛ wode append anaa prepend di dwuma pefee mprempren, na ɛma yɛn CSS no fã kɛse no ara yɛ mmerɛw. Wɔ append anaa prepend mu no, fa wo buttons no si hɔ sɛnea anka ɛbɛba baabi foforo biara no, nanso fa nsɛm no kyekyere .input-group-text.

  • Mprempren wɔboa validation styles, sɛnea wɔboa inputs pii (ɛwom sɛ wubetumi agye input biako pɛ wɔ kuw biara mu).

  • Ɛsɛ sɛ adesua ahorow a wɔde ma kɛse no yɛ ɔwofo no so .input-groupna ɛnyɛ ankorankoro form elements no so.

Beta 2 no sesa

Bere a yɛwɔ beta mu no, yɛde asi yɛn ani so sɛ yɛrennya nsakrae biara a ɛbɛpaapae. Nanso, ɛnyɛ bere nyinaa na nneɛma kɔ so sɛnea wɔayɛ ho nhyehyɛe no. Ase hɔ no yɛ nsakrae a ɛrebubu a ɛsɛ sɛ wode tra w’adwenem bere a worekɔ Beta 1 so akɔ Beta 2 no.

Abubuw

  • Woayi $badge-colorvariable ne nea wɔde di dwuma wɔ .badge. Yɛde kɔla nsonsonoe adwuma di dwuma de paw a coloregyina background-color, enti nsakrae no ho nhia.
  • Wɔasan din grayscale()ayɛ adwuma no gray()sɛnea ɛbɛyɛ a ɛrensɛe ntawntawdi ne CSS kurom hɔ grayscalefilter no.
  • Wɔasesa din .table-inverse, .thead-inverse, ne .thead-defaultto .*-darkne .*-light, a ɛne yɛn kɔla ahorow a yɛde di dwuma wɔ mmeae afoforo no hyia.
  • Mprempren pon ahorow a ɛma mmuae no ma adesua ahorow ma grid breakpoint biara. Eyi gyae fi Beta 1 mu sɛ nea .table-responsivewode redi dwuma no te sɛ .table-responsive-md. Afei wubetumi de adi dwuma .table-responsiveanaasɛ .table-responsive-{sm,md,lg,xl}sɛnea ɛho hia.
  • Wɔagyae Bower mmoa sɛ wɔagyae package manager no ama akwan foforo (sɛ nhwɛso no, Yarn anaa npm). Hwɛ bower/bower#2298 ma nsɛm no mu nsɛm.
  • Bootstrap da so ara hia jQuery 1.9.1 anaa nea ɛboro saa, nanso wɔtu wo fo sɛ fa version 3.x di dwuma efisɛ v3.x browser ahorow a wɔboa no ne nea Bootstrap boa plus v3.x wɔ ahobammɔ nsiesie ahorow bi.
  • .form-control-labelWoyii adesuakuw a wɔmfa nni dwuma no fii hɔ. Sɛ woyɛɛ saa adesua yi dii dwuma a, na ɛyɛ adesua no duplicate a .col-form-labelɛde vertically centered a <label>ne ne ho nsɛm a ɛbata ho wɔ horizontal form layouts mu.
  • Sesaa no color-yiqfi mixin a na coloragyapade no ka ho no so kɔɔ adwuma bi a ɛsan de botae bi ba, a ɛma wo kwan ma wode di dwuma ma CSS agyapade biara. Sɛ nhwɛso no, sɛ́ color-yiq(#000)anka wobɛkyerɛw color: color-yiq(#000);.

Nsɛm a Ɛho Hia

  • Wɔde dwuma foforo a pointer-eventswɔde di dwuma wɔ modals so bae. Abɔnten .modal-dialogno fa nsɛm a esisi mu ne pointer-events: nonefor custom click handling (a ɛma ɛyɛ yiye sɛ wobɛtie kɛkɛ wɔ the .modal-backdropfor any clicks), na afei counteracts no ma ankasa .modal-contentno ne pointer-events: auto.

Tɔfabɔ

Tekete nneɛma akɛse a wobɛpɛ sɛ wuhu bere a worekɔ v3 so akɔ v4 no ni.

Browser mmoa a wɔde ma

  • Wogyaee IE8, IE9, ne iOS 6 mmoa. v4 mprempren yɛ IE10+ ne iOS 7+ nkutoo. Sɛ wopɛ sɛ wohu saa nsɛm no mu biara a, fa v3 di dwuma.
  • Wɔde aban mmoa a wɔde ma Android v5.0 Lollipop no Browser ne WebView kaa ho. Android Browser ne WebView a atwam no da so ara yɛ nea wɔboa no wɔ ɔkwan a ɛnyɛ aban kwan so nkutoo.

Wiase nyinaa nsakrae

  • Flexbox no yɛ adwuma default so. Mpɛn pii no eyi kyerɛ sɛ yɛbɛtwe yɛn ho afi floats ne pii afa yɛn components no ho.
  • Wɔasesae fii Less so kɔɔ Sass so maa yɛn fibea CSS fael ahorow no.
  • Wɔasesa firii pxkɔ remsɛ yɛn CSS kuo titire, ɛwom sɛ wɔda so ara de piksel di dwuma ma media nsɛmmisa ne grid suban sɛdeɛ mfiri viewports no nnya type size so nkɛntɛnsoɔ.
  • Wiase nyinaa font-size kɔɔ soro fi 14pxkosi 16px.
  • Wɔyɛɛ grid tiers foforo de kaa ɔkwan a ɛto so anum ho (a ɛfa mfiri nketewa ho wɔ 576pxne ase) na woyii -xsinfix no fii saa adesua ahorow no mu. Nhwɛso: .col-6.col-sm-4.col-md-3.
  • Wɔde akwan a wotumi hyehyɛ denam SCSS nsakrae ahorow so (sɛ nhwɛso no, $enable-gradients: true) besii asɛmti a ɛyɛ soronko a wobɛpaw no ananmu.
  • Build system overhauled sɛ wɔde npm scripts a ɛtoatoa so bedi dwuma sen sɛ wɔde Grunt bedi dwuma. Hwɛ package.jsonscripts nyinaa, anaa yɛn project readme ma mpɔtam hɔ nkɔso ahiade.
  • Bootstrap a wɔmfa nni dwuma a ɛnyɛ mmuaeɛ no, wɔmfa nni dwuma bio.
  • Wogyaee intanɛt so Customizer no de gyee nhyehyɛe ho nkrataa a ɛtrɛw kɛse ne adan a wɔahyɛ da ayɛ no akyi.
  • Wɔde mfaso adesuakuw foforo du du pii aka ho ama CSS agyapade-botae abien a wɔtaa de di dwuma ne margin/padding spacing shortcuts.

Grid nhyehyɛe

  • Wɔde kɔɔ flexbox so.
    • Wɔde mmoa a wɔde ma flexbox kaa ho wɔ grid mixins ne adesua ahorow a wɔakyerɛkyerɛ mu dedaw no mu.
    • Sɛ́ flexbox no fã no, na mmoa a wɔde ma vertical ne horizontal alignment adesua ahorow no ka ho.
  • Wɔayɛ grid adesua din foforo ne grid tier foforo.
    • Wɔde smgrid tier foforo aka ho wɔ ase hɔ 768pxma granular control pii. Seesei yɛwɔ xs, sm, md, lg, ne xl. Wei nso kyerɛ sɛ wɔabɔ tier biara bumped up level baako (enti .col-md-6wɔ v3 mu seesei .col-lg-6ɛwɔ v4 mu).
    • xswɔasesa grid adesua ahorow no sɛnea ɛbɛyɛ a ɛrenhia sɛ infix no gyina hɔ ma pɛpɛɛpɛ sɛ wofi ase de style ahorow di dwuma wɔ min-width: 0na ɛnyɛ pixel bo a wɔahyɛ no. Sɛ́ anka ɛbɛyɛ .col-xs-6, ɛyɛ mprempren .col-6. Grid tiers afoforo nyinaa hwehwɛ infix (sɛ nhwɛso no, sm).
  • Wɔayɛ grid akɛseɛ, mixins, ne nsakraeɛ foforɔ.
    • Grid gutters seesei wɔ Sass map enti wobɛtumi akyerɛ gutter ntrɛmu pɔtee wɔ breakpoint biara.
    • Updated grid mixins de utilize a make-col-readyprep mixin ne a make-colde hyehyɛ flexne max-widthma ankorankoro column sizing.
    • Wɔasesa grid system media query breakpoints ne container widths de bu akontaa ma grid tier foforo na hwɛ hu sɛ columns no yɛ pɛpɛɛpɛ divisible denam 12wɔ wɔn max width.
    • Mprempren wɔde Sass maps ( $grid-breakpointsne $container-max-widths) di grid breakpoints ne container widths ho dwuma sen sɛ wɔde nsa kakraa bi na ɛyɛ nsakrae ahorow a ɛsono emu biara. Eyinom si @screen-*nsakrae ahorow no ananmu koraa na ɛma wutumi sesa grid tiers no koraa.
    • Nsɛm ho amanneɛbɔfo nsɛmmisa nso asesa. Sɛ́ anka yɛbɛsan ayɛ yɛn nsɛm ho amanneɛbɔfo asɛmmisa mpaemuka ahorow a ɛsom bo koro no ara bere biara no, mprempren yɛwɔ @include media-breakpoint-up/down/only. Afei, sɛ́ anka wobɛkyerɛw @media (min-width: @screen-sm-min) { ... }, wubetumi akyerɛw @include media-breakpoint-up(sm) { ... }.

Nneɛma a ɛwom

  • Panel ahorow, mfonini nketewa, ne abura a wɔatow agu ama ade foforo a ɛka biribiara ho, nkrataa .
  • Wogyaee Glyphicons ahyɛnsode font no. Sɛ wuhia ahyɛnsode ahorow a, nneɛma bi a wubetumi apaw ne:
  • Wogyaee Affix jQuery plugin no.
    • Yɛkamfo kyerɛ sɛ fa di dwuma position: stickymmom. Hwɛ HTML5 Yɛsrɛ wo nkyerɛwde no ma nsɛm no mu nsɛm ne polyfill nyansahyɛ pɔtee. Nyansahyɛ biako ne sɛ wɔde mmara bi @supportsbedi dwuma de adi dwuma (sɛ nhwɛso no, @supports (position: sticky) { ... })/ .
    • Sɛ na wode Affix redi dwuma de adi dwuma de aka ho, a ɛnyɛ positionstyles a, ebia polyfills no rentumi mmoa wo dwumadie asɛm no. Ade biako a wubetumi afa so de adi dwuma saa ne ScrollPos-Styler nhomakorabea a ɛto so abiɛsa no.
  • Droped pager component sɛ ɛyɛ titiriw kakra customized buttons.
  • Ɛkame ayɛ sɛ wɔyɛɛ afã horow no nyinaa foforo de dii dwuma de adesuakuw a wɔpaw no a wɔmfa nested pii nni dwuma sen sɛ wɔde mmofra a wɔpaw nneɛma pɔtee dodo bedi dwuma.

Ɛdenam ɔfã bi so

Saa list yi si nsakrae titiriw a ɛwɔ component biara mu wɔ v3.xx ne v4.0.0 ntam no so dua.

Reboot no bio

Foforo wɔ Bootstrap 4 ne Reboot , stylesheet foforo a egyina Normalize so a yɛn ankasa adwene bi wɔ reset styles. Nneɛma a wɔpaw a ɛbɛpue wɔ fael yi mu no de elements nkutoo na edi dwuma—klas biara nni ha. Eyi tew yɛn reset styles fi yɛn component styles ho ma ɛyɛ modular kwan kɛse. Resets a ɛho hia paa a eyi ka ho no bi ne box-sizing: border-boxnsakrae, a ɛkɔ emunits remso wɔ elements pii so, link styles, ne form element resets pii.

Typography a wɔde kyerɛw nsɛm

  • .text-Wɔde utilities nyinaa kɔɔ _utilities.scssfael no mu.
  • Droped .page-headersɛ, sɛ yɛde border no to nkyɛn a, ne styles nyinaa betumi adi dwuma via utilities.
  • .dl-horizontalwɔatow agu. Mmom, fa .rowon <dl>na fa grid column classes (anaa mixins) di dwuma wɔ ne <dt>ne <dd>mmofra so.
  • Custom <blockquote>styling akɔ adesua ahorow mu — .blockquotene .blockquote-reversemodifier no.
  • .list-inlineafei hwehwɛ sɛ ne mma kyerɛw nneɛma no ma wɔde .list-inline-itemadesuakuw foforo no di dwuma wɔ wɔn ho.

Mfonini ahorow

  • Wɔsesaa ne din .img-responsiveyɛɛ no .img-fluid​​.
  • Wɔsesaa din .img-roundedyɛɛ no.rounded
  • Wɔsesaa din .img-circleyɛɛ no.rounded-circle

Nnwinnade ahorow

  • Ɛkame ayɛ sɛ wɔayi >selector no nhwɛso nyinaa afi hɔ, a ɛkyerɛ sɛ afei deɛ nested tables bɛnya styles afiri wɔn awofoɔ hɔ ankasa. Eyi ma yɛn selectors ne nea ebetumi ayɛ customizations no yɛ mmerɛw kɛse.
  • Nnwinnade a ɛma mmuae no nhia biribi a wɔde kyekyere nneɛma ho bio. Mmom no, fa nea .table-responsiveɛfata no to <table>.
  • Wɔsesaa din .table-condensedyɛɛ no ​​sɛnea .table-smɛbɛyɛ a ɛbɛkɔ so pɛpɛɛpɛ.
  • Wɔde ɔkwan foforo .table-inversea wobetumi afa so aka ho.
  • Wɔde table header nsakrae ahorow aka ho: .thead-defaultne .thead-inverse.
  • Wɔasesa nsɛm a ɛfa ho adesua ahorow din sɛnea ɛbɛyɛ a wobenya .table--prefix. Enti .active, .success, .warning, .dangerne .infoto .table-active, .table-success, .table-warning, .table-dangerne .table-info.

Nkyerɛwee ahorow

  • Element a wɔatu no san kɔ _reboot.scssfael no so.
  • Wɔsesaa ne din .control-labelyɛɛ no .col-form-label​​.
  • Wɔasesa din .input-lgne .input-smto .form-control-lgne .form-control-sm, sɛnea ɛte biara.
  • Wogyaee .form-group-*adesua ahorow esiane sɛ ɛbɛyɛ mmerɛw nti. Fa .form-control-*adesua ahorow di dwuma mmom mprempren.
  • Tow .help-blockna wɔde .form-textfor block-level help text sii ananmu. Sɛ wopɛ inline mmoa nsɛm ne akwan foforo a ɛyɛ mmerɛw a wobɛpaw a, fa mfaso adesua ahorow te sɛ .text-muted.
  • Wɔtow gui .radio-inlinena .checkbox-inline.
  • Consolidated .checkboxne .radiomu .form-checkne .form-check-*adesuakuw ahorow no.
  • Horizontal forms a wɔayɛ no foforo:
    • Wogyaee .form-horizontaladesuakuw no ahwehwɛde no.
    • .form-groupmfa styles a ɛfiri .rowvia mixin no mu nni dwuma bio, enti .rowseesei ɛho hia ma horizontal grid layouts (sɛ nhwɛsoɔ no, <div class="form-group row">).
    • Wɔde .col-form-labeladesuakuw foforo aka vertically center labels a .form-controls wom no ho.
    • Wɔde foforo aka ho .form-rowama compact form layouts ne grid classes (swap wo .rowfor a .form-rowna kɔ).
  • Wɔde custom forms mmoa aka ho (ma checkboxes, radios, selects, ne file inputs).
  • Wɔde HTML5 fom validation a ɛnam CSS's ne pseudo-classes so asi .has-error, .has-warning, ne adesua ahorow ananmu..has-success:invalid:valid
  • Wɔsesaa ne din .form-control-staticyɛɛ no .form-control-plaintext​​.

Nsɛmma nhoma no

  • Wɔsesaa ne din .btn-defaultyɛɛ no .btn-secondary​​.
  • Droped .btn-xsadesuakuw no koraa sɛnea .btn-smɛyɛ proportionally pii ketewaa sen v3's.
  • Wɔagyae jQuery plugin no stateful button afã no . button.jsNea ɛka eyi ho $().button(string)ne $().button('reset')akwan a wɔfa so yɛ no. Yɛtu fo sɛ fa JavaScript ketewaa bi a wɔahyɛ da ayɛ mmom di dwuma, a ɛbɛma woanya mfaso sɛ wobɛyɛ w’ade sɛnea wopɛ no pɛpɛɛpɛ.
    • Hyɛ no nsow sɛ wɔakora plugin no mu nneɛma afoforo (button checkboxes, button radios, single-toggle buttons) so wɔ v4 mu.
  • Sesa buttons' [disabled]kɔ :disabledsɛnea IE9 + boa :disabled. Nanso fieldset[disabled]ɛda so ara hia efisɛ native disabled fieldsets da so ara yɛ buggy wɔ IE11 mu.

Button kuw no

  • San kyerɛw component ne flexbox.
  • Wɔayi afi .btn-group-justifiedhɔ . Sɛ́ nea wode besi ananmu no wubetumi de adi dwuma <div class="btn-group d-flex" role="group"></div>sɛ ade a wɔde kyekyere nneɛma ho a ɛwɔ .w-100.
  • Wogyaee .btn-group-xsadesuakuw no koraa a wɔde yii .btn-xs.
  • Wɔayi kwan a ɛda bɔtn akuw ntam a ɛda adi pefee wɔ bɔtn adwinnade ahorow mu no afi hɔ; fa margin utilities di dwuma mprempren.
  • Nwoma a wɔatu mpɔn a wɔde bedi dwuma wɔ nneɛma afoforo ho.
  • Wɔasesae fi awofo a wɔpaw no so kɔɔ adesuakuw biako so ma nneɛma a ɛwom nyinaa, nsakraefo, ne nea ɛkeka ho.
  • Dropdown styles a wɔayɛ no mmerɛw sɛ wɔremfa nkɔma bio a agyan a ɛhwɛ soro anaa fam a wɔde abata dropdown menu no ho.
  • Wobetumi de <div>s anaa <ul>s akyekye dropdowns mprempren.
  • Wɔasan asi dropdown styles ne markup de ama mmoa a ɛnyɛ den, a wɔasisi mu ama <a>na <button>egyina dropdown nneɛma so.
  • Wɔsesaa ne din .divideryɛɛ no .dropdown-divider​​.
  • Mprempren nneɛma a wɔde bɛto fam no hwehwɛ sɛ .dropdown-item.
  • Dropdown toggles nhia bio sɛ ​​wɔde explicit <span class="caret"></span>; mprempren wɔde eyi ama ankasa denam CSS's ::afteron .dropdown-toggle.

Grid nhyehyɛe

  • Wɔde 576pxgrid breakpoint foforo aka ho sɛ sm, a ɛkyerɛ sɛ mprempren ɛwɔ tiers anum a wɔaka abom ( xs, sm, md, lg, ne xl).
  • Wɔsesaa grid modifier adesua ahorow a ɛyɛ mmuae no din fii .col-{breakpoint}-{modifier}-{size}to so .{modifier}-{breakpoint}-{size}maa grid adesua ahorow a ɛyɛ mmerɛw.
  • Wogyaee push ne pull modifier adesua ahorow no maa adesuakuw foforo a wɔde flexbox-powered orderdi dwuma no. Sɛ nhwɛso no, sɛ́ anka wode .col-8.push-4ne .col-4.pull-8bedi dwuma no, anka wode .col-8.order-2ne bedi dwuma .col-4.order-1.
  • Wɔde flexbox utility adesua ahorow aka ho ama grid nhyehyɛe ne nneɛma a ɛwom.

Kyerɛw akuw ahorow din

  • San kyerɛw component ne flexbox.
  • Wɔde a.list-group-itemadesuakuw a ɛda adi pefee asi ananmu, .list-group-item-action, ama styling link ne button nkyerɛase ahorow a ɛwɔ list kuw nneɛma mu.
  • Wɔde .list-group-flushadesuakuw bi aka ho a wɔde bedi dwuma wɔ nkrataa ho.
  • San kyerɛw component ne flexbox.
  • Sɛ wɔde move to flexbox ma a, alignment a ɛwɔ dismiss icons wɔ header no mu no bɛyɛ sɛ abubu efisɛ yɛmfa floats nni dwuma bio. Floated content na edi kan, nanso flexbox ho no ɛnyɛ saa bio. Update wo dismiss icons sɛ ɛbɛba akyi modal titles na woasiesie.
  • Woyii remoteɔkwan a wɔfa so paw (a wobetumi de adi dwuma de ahyɛ akyi nneɛma na wɔde ahyɛ modal mu) ne loaded.bs.modaladeyɛ a ɛne no hyia no fii hɔ. Yɛhyɛ nyansa mmom sɛ fa client-side templating anaa data binding framework di dwuma, anaasɛ frɛ jQuery.load w’ankasa.
  • San kyerɛw component ne flexbox.
  • Ɛkame ayɛ sɛ wɔde >selectors nyinaa too fam maa styling a ɛyɛ mmerɛw via un-nested classes.
  • Sɛ anka yɛde HTML-specific selectors te sɛ .nav > li > a, yɛde adesua ahorow a ɛsono emu biara di dwuma ma .navs, .nav-items, ne .nav-links. Wei ma wo HTML no yɛ mmerɛw bere a ɛde ntrɛwmu a ɛkɔ soro ba no.

Wɔasan akyerɛw navbar no koraa wɔ flexbox mu a ɛwɔ mmoa a ɛkɔ anim ma alignment, mmuae, ne customization.

  • Mmuaeɛ navbar suban afei wɔde di dwuma wɔ .navbaradesua no mu via ahwehwɛdeɛ .navbar-expand-{breakpoint} a ɛwɔ baabi a wobɛpaw baabi a wobɛbu navbar no. Kane no na eyi yɛ Less variable nsakrae na na ɛhwehwɛ sɛ wɔsan boaboa ano.
  • .navbar-defaultis now .navbar-light, ɛwom sɛ .navbar-darkɛda so ara yɛ nea ɛte saa ara de. Eyinom mu biako na wɔhwehwɛ wɔ navbar biara so. Nanso, saa adesuakuw ahorow yi mfa s nsi hɔ bio background-color; mmom no, nea ɛho hia no, ɛka color.
  • Navbars mprempren hwehwɛ sɛ wɔyɛ akyi mpaemuka bi. Paw fi yɛn akyi utilities ( .bg-*) anaa hyehyɛ w'ankasa de ne hann/inverse adesua ahorow a ɛwɔ atifi hɔ ma mad customization .
  • Wɔde flexbox styles ama no, afei navbars betumi de flexbox utilities adi dwuma ama alignment options a ɛnyɛ den.
  • .navbar-toggleyɛ mprempren .navbar-togglerna ɛwɔ style ahorow ne emu markup (ɛnyɛ <span>s abiɛsa bio).
  • Wogyaee .navbar-formadesua no koraa. Ɛho nhia bio; mmom no, .form-inlinefa margin utilities di dwuma kɛkɛ na fa di dwuma sɛnea ɛho hia.
  • Navbars no nka ho bio margin-bottomanaasɛ border-radiusdefault so. Fa utilities di dwuma sɛnea ɛho hia.
  • Wɔayɛ nhwɛsoɔ a ɛkyerɛ navbars nyinaa foforɔ ama wɔde markup foforɔ ahyɛ mu.

Nkratafa a wɔde kyerɛw nsɛm

  • San kyerɛw component ne flexbox.
  • Mprempren wɔhwehwɛ adesua ahorow a ɛda adi pefee ( .page-item, ) wɔ s .page-linkasefo so.pagination
  • Droped .pagercomponent no koraa sɛnea na ɛyɛ kakraa bi sen customized outline buttons.
  • Mprempren wɔhwehwɛ adesuakuw a ɛda adi pefee, , wɔ s .breadcrumb-itemasefo so.breadcrumb

Nkyerɛwde ne badge ahorow

  • Wɔsesaa din .labelsɛ .badgeto disambiguate fi <label>element no mu.
  • Droped .badgecomponent no sɛnea ɛkame ayɛ sɛ ɛne labels yɛ pɛ. Fa .badge-pillmodifier no bom ne label component no mmom ma saa rounded look no.
  • Badge ahorow no ntumi nkɔ soro bio wɔ list akuw ne nneɛma afoforo mu. Mprempren wɔhwehwɛ sɛ wɔyɛ utility adesua ahorow ma ɛno.
  • .badge-defaultwɔatow agu na .badge-secondarywɔde aka ho ma ɛne component modifier class ahorow a wɔde di dwuma wɔ mmeae afoforo no ahyia.

Panel ahorow, mfonini nketewa, ne abura ahorow

Wɔagyae koraa ama kaad no fã foforo no.

Panel ahorow

  • .panelto .card, mprempren wɔde flexbox na ɛyɛe.
  • .panel-defaultwɔayi afi hɔ na wɔamfa nsi ananmu.
  • .panel-groupwɔayi afi hɔ na wɔamfa nsi ananmu. .card-groupnyɛ ade a wɔde besi ananmu, ɛyɛ soronko.
  • .panel-headingkɔ.card-header
  • .panel-titleto .card-title. Ɛgyina sɛnea wopɛ sɛ wohwɛ no so no, wubetumi nso de asɛmti mu nneɛma anaa adesua ahorow (sɛ nhwɛso <h3>no , .h3) anaasɛ nneɛma anaa adesua ahorow a ɛyɛ tuntum (sɛ nhwɛso <strong>no , <b>, .font-weight-bold) di dwuma. Hyɛ no nsow sɛ .card-title, ɛwom sɛ wɔato din saa ara de, nanso ɛma ɛyɛ soronko sen .panel-title.
  • .panel-bodykɔ.card-body
  • .panel-footerkɔ.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, na .panel-dangerwɔatow agu ama .bg-, .text-, ne .borderutilities a wɔayɛ afi yɛn $theme-colorsSass map no mu.

Mpuntuo

  • Wɔde utilities sii nsɛm a ɛfa ho .progress-bar-*adesua ahorow ananmu .bg-*. Sɛ nhwɛso no, class="progress-bar progress-bar-danger"ɛbɛyɛ class="progress-bar bg-danger".
  • Wɔde . .active_.progress-bar-animated
  • Wɔyɛɛ ɔfã no nyinaa foforo sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wɔbɛyɛ ne sɛnea wɔyɛ no. Yɛwɔ styles kakraa bi a wobɛtumi abɔ so, nsɛnkyerɛnneɛ foforɔ, ne ahyɛnsodeɛ foforɔ.
  • Wɔayi CSS nyinaa afiri mu na wɔasesa din, ahwɛ ahu sɛ wɔde .carousel-.
    • Wɔ carousel nneɛma ho no, .next, .prev, .left, ne .rightmprempren .carousel-item-next, .carousel-item-prev, .carousel-item-left, ne .carousel-item-right.
    • .itemnso yɛ mprempren .carousel-item.
    • Wɔ prev/next controls, .carousel-control.rightna .carousel-control.leftɛyɛ seesei .carousel-control-nextne .carousel-control-prev, a ɛkyerɛ sɛ wɔnhia base class pɔtee bi bio.
  • Woyii mmuaeɛ styling nyinaa, deferring to utilities (sɛ nhwɛsoɔ, kyerɛ captions wɔ viewports binom so) ne custom styles sɛdeɛ ɛhia.
  • Wɔayi mfonini overrides ama mfonini ahorow wɔ carousel nneɛma mu, deferring to utilities.
  • Tweaked Carousel nhwɛso no de markup foforo ne styles no aka ho.

Nnwinnade ahorow

  • Wɔayi mmoa a wɔde ma styled nested tables no afi hɔ. Seesei wɔagye table styles nyinaa wɔ v4 mu ama selectors a ɛnyɛ den.
  • Wɔde inverse table variant kaa ho.

Nneɛma a wɔde di dwuma

  • Yi adi, nea wɔde asie, ne nea ɛkeka ho:
    • Ɔmaa ɔyɛkyerɛ utilities yɛɛ adwuma (sɛ nhwɛso no, .d-nonene d-{sm,md,lg,xl}-none).
    • Wogyaee utilities dodow no ara ma display utilities.hidden-* foforo . Sɛ nhwɛso no, sɛ́ anka wode bedi dwuma no , fa . Wɔasesa utilities no din de adi dwuma de display utility din nhyehyɛe no adi dwuma. More info wɔ Responsive utilities ɔfã a ɛwɔ krataafa yi ase no ase..hidden-sm-up.d-sm-none.hidden-print
    • Added .float-{sm,md,lg,xl}-{left,right,none}classes for responsive floats na woyii .pull-leftna .pull-rightesiane sɛ wɔyɛ redundant to .float-leftne .float-right.
  • Korɔ:
    • Wɔde nsakrae a ɛma mmuae kaa yɛn nsɛm a wɔde hyehyɛ adesua ahorow .text-{sm,md,lg,xl}-{left,center,right}no ho .
  • Nhyiam ne ntam kwan:
  • Clearfix ayɛ foforo sɛ ɛbɛgyae mmoa a wɔde ma browser nkyerɛase dedaw no.

Vendor anim asɛm mixins

Bootstrap 3 no vendor prefix mixins, a na wɔagyae wɔ v3.2.0 mu no, wɔayi afi hɔ wɔ Bootstrap 4. Esiane sɛ yɛde Autoprefixer di dwuma nti , ɛho nhia bio.

Woyii mixins a edidi so yi fii hɔ : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration,transition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Nwoma a Wɔkyerɛwee

Yɛn nkrataa no nyaa nkɔso wɔ board no nyinaa so nso. Ɛha na ɛba fam no:

  • Yɛda so ara de Jekyll redi dwuma, nanso yɛwɔ plugins wɔ mix no mu:
    • bugify.rbno yɛ nea wɔde kyerɛw nsɛm a ɛwɔ yɛn browser bugs krataafa no so no yiye.
    • example.rbyɛ custom fork a ɛwɔ default highlight.rbplugin no mu, a ɛma kwan ma ɛyɛ mmerɛw sɛ wobedi nhwɛso-kode ho dwuma.
    • callout.rbyɛ amanne fork a ɛte saa ara a ɛte saa, nanso wɔayɛ ama yɛn docs callouts soronko no.
    • markdown-block.rbwɔde di dwuma de kyerɛ Markdown snippets wɔ HTML elements mu te sɛ tables.
    • jekyll-toc na wɔde yɛ yɛn table of contents no.
  • Wɔasan akyerɛw docs mu nsɛm nyinaa wɔ Markdown mu (sen sɛ wɔbɛkyerɛw HTML) ama ayɛ mmerɛw sɛ wɔbɛsesa.
  • Wɔasan asiesie nkratafa no ama nsɛm a ɛyɛ mmerɛw ne nhyehyɛe a ɛyɛ mmerɛw sɛ wɔbɛbɛn no.
  • Yɛfirii CSS a ɛyɛ daa so kɔɔ SCSS so sɛ yɛrekɔfa Bootstrap no nsakraeɛ, mixins, ne nea ɛkeka ho no so mfasoɔ koraa.

Nneɛma a wɔde di dwuma a ɛyɛ mmuae

Wɔayi @screen-nsakraeɛ nyinaa afiri hɔ wɔ v4.0.0 mu. Fa media-breakpoint-up(), media-breakpoint-down(), anaa media-breakpoint-only()Sass mixins anaa $grid-breakpointsSass map no di dwuma mmom.

Wɔayi yɛn utility adesua ahorow a ɛyɛ mmuae no afi hɔ kɛse de agye utility ahorow a ɛda adi pefee no atom display.

  • Wɔayi .hiddenne .showadesua ahorow no afi hɔ efisɛ ɛne jQuery's $(...).hide()ne $(...).show()akwan horow no bɔ abira. Mmom, bɔ mmɔden sɛ wobɛdannan [hidden]su no anaa fa inline styles te sɛ style="display: none;"ne style="display: block;".
  • Wɔayi .hidden-adesua ahorow nyinaa afi hɔ, gye print utilities a wɔasesa din no.
    • Wɔayi afi v3 mu:.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
    • Wɔayi afi v4 alphas mu:.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 mfi ase bio wɔ .hidden-anaa .visible-, na mmom .d-print-.
    • Edin dedaw: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Adesua foforo: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Sɛ́ anka wode .visible-*adesua ahorow a ɛda adi pefee bedi dwuma no, woma element bi da adi denam nea woremfa nsie wɔ saa screen kɛse no so ara kwa no so. Wubetumi de .d-*-noneadesuakuw biako ne adesuakuw biako aka abom .d-*-blockde akyerɛ element bi wɔ ntamgyinafo bi a wɔde ama a ɛwɔ screen akɛse nkutoo so (sɛ nhwɛso no, .d-none.d-md-block.d-xl-noneɛkyerɛ element no wɔ mfiri a ɛwɔ mfinimfini ne akɛse nkutoo so).

Hyɛ no nsow sɛ nsakrae a ɛba wɔ grid breakpoints mu wɔ v4 mu no kyerɛ sɛ ɛho behia sɛ wokɔ breakpoint biako kɛse na ama woanya aba koro no ara. Mmuaeɛ utility adesua foforɔ no mmɔ mmɔden sɛ ɛbɛgye nsɛm a ɛntaa nsi a element bi a wɔhunu no ntumi nkyerɛ sɛ viewport akɛseɛ ahodoɔ baako a ɛtoatoa soɔ; ɛho behia mmom sɛ wode custom CSS di dwuma wɔ nsɛm a ɛtete saa mu.