Source

Pagbalhin sa v4

Ang Bootstrap 4 usa ka mayor nga pagsulat pag-usab sa tibuok nga proyekto. Ang labing inila nga mga pagbag-o gisumada sa ubos, gisundan sa mas espesipikong mga pagbag-o sa mga may kalabutan nga mga sangkap.

Lig-on nga mga pagbag-o

Ang pagbalhin gikan sa Beta 3 ngadto sa among stable nga v4.0 nga pagpagawas, wala'y mga pagbag-o sa paglapas, apan adunay pipila ka talagsaong mga pagbag-o.

Pag-imprinta

  • Giayo ang guba nga mga gamit sa pag-imprinta. Kaniadto, ang paggamit sa usa ka .d-print-*klase wala damha nga makalapas sa bisan unsang lain .d-*nga klase. Karon, gipares nila ang among uban pang mga kagamitan sa pagpakita ug magamit ra sa kana nga media ( @media print).

  • Gipalapdan nga magamit nga mga gamit sa pagpakita sa pag-imprinta aron ipares sa ubang mga gamit. Ang Beta 3 ug labaw pa adunay block, inline-block, inline, ug none. Stable v4 gidugang flex, inline-flex, table, table-row, ug table-cell.

  • Giayo nga print preview rendering sa mga browser nga adunay bag-ong mga estilo sa pag-imprinta nga nagtino sa @page size.

Beta 3 nga mga pagbag-o

Samtang nakita sa Beta 2 ang kadaghanan sa among mga pagbag-o sa pagbag-o sa panahon sa beta nga yugto, apan aduna pa kami pipila nga kinahanglan nga sulbaron sa pagpagawas sa Beta 3. Kini nga mga pagbag-o magamit kung nag-update ka sa Beta 3 gikan sa Beta 2 o bisan unsang karaan nga bersyon sa Bootstrap.

Miscellaneous

  • Gikuha ang wala magamit $thumbnail-transitionnga variable. Wala mi nag-transition bisan unsa, mao nga extra code lang.
  • Ang npm package wala na naglakip sa bisan unsa nga mga file gawas sa atong tinubdan ug dist files; kung nagsalig ka niini ug nagpadagan sa among mga script pinaagi sa node_modulesfolder, kinahanglan nimo nga ipahiangay ang imong dagan sa trabaho.

Mga porma

  • Isulat pag-usab ang custom ug default nga mga checkbox ug radyo. Karon, ang duha adunay managsama nga istruktura sa HTML (sa gawas nga <div>adunay igsoon <input>ug <label>) ug parehas nga mga istilo sa layout (stacked default, inline sa klase sa modifier). Kini nagtugot kanamo sa pag-istilo sa label base sa kahimtang sa input, pagpayano sa suporta alang sa disabledhiyas (kaniadto nanginahanglan usa ka ginikanan nga klase) ug mas maayo nga pagsuporta sa among pag-validate sa porma.

    Isip bahin niini, giusab namo ang CSS para sa pagdumala sa daghang background-images sa custom nga porma nga mga checkbox ug radyo. Kaniadto, ang natangtang na .custom-control-indicatornga elemento adunay kolor sa background, gradient, ug icon nga SVG. Ang pag-customize sa background gradient nagpasabut nga ilisan ang tanan sa matag higayon nga kinahanglan nimo nga usbon ang usa lang. Karon, kami adunay .custom-control-label::beforealang sa pagpuno ug gradient ug .custom-control-label::afterpagdumala sa icon.

    Aron makahimo og custom check inline, idugang ang .custom-control-inline.

  • Gi-update nga tigpili alang sa mga grupo sa buton nga gibase sa input. Imbis [data-toggle="buttons"] { }alang sa istilo ug pamatasan, gigamit namon ang datahiyas alang lamang sa mga pamatasan sa JS ug nagsalig sa usa ka bag-ong .btn-group-toggleklase alang sa pag-istilo.

  • Gikuha .col-form-legendpabor sa usa ka gamay nga milambo .col-form-label. Kini nga paagi .col-form-label-smug .col-form-label-lgmahimong magamit sa <legend>mga elemento nga dali.

  • Ang custom file inputs nakadawat ug kausaban sa ilang $custom-file-textSass variable. Dili na kini usa ka nested nga mapa sa Sass ug karon usa na lang ka kuwerdas ang gigamit—ang Browsebuton kay mao na kini ang bugtong pseudo-element nga namugna gikan sa atong Sass. Ang Choose fileteksto karon gikan sa .custom-file-label.

Mga grupo sa input

  • Ang mga addon sa input nga grupo karon espesipiko sa ilang pagbutang nga may kalabotan sa usa ka input. Nahulog na kami .input-group-addonug .input-group-btnpara sa duha ka bag-ong klase, .input-group-prependug .input-group-append. Kinahanglang klaro ka nga mogamit ug append o prepend karon, nga nagpasimple sa kadaghanan sa among CSS. Sulod sa usa ka append o prepend, ibutang ang imong mga buton ingon nga kini anaa bisan asa, apan ibutang ang teksto sa .input-group-text.

  • Gisuportahan na karon ang mga istilo sa pag-validate, ingon man daghang mga input (bisan kung mahimo ra nimo ma-validate ang usa ka input matag grupo).

  • Ang pagsukod sa mga klase kinahanglang anaa sa ginikanan .input-groupug dili sa indibidwal nga mga elemento sa porma.

Mga pagbag-o sa Beta 2

Samtang naa sa beta, gitinguha namon nga wala’y mga pagbag-o sa paglapas. Bisan pa, ang mga butang dili kanunay mahitabo ingon sa giplano. Sa ubos mao ang mga pagbag-o nga kinahanglan hinumdoman kung mobalhin gikan sa Beta 1 hangtod sa Beta 2.

Nagbuwag

  • Gitangtang $badge-colorang variable ug ang paggamit niini sa .badge. Gigamit namo ang color contrast function sa pagpili og colorbase sa background-color, mao nga ang variable dili kinahanglan.
  • Gibag -o ang ngalan grayscale()nga function aron gray()malikayan ang pagbungkag sa panagsumpaki sa lumad nga grayscalefilter sa CSS.
  • Giusab ang ngalan .table-inversenga , .thead-inverse, ug .thead-defaultsa .*-darkug .*-light, nga gipares sa among mga laraw sa kolor nga gigamit sa ubang lugar.
  • Ang mga responsive nga mga lamesa karon nagmugna og mga klase alang sa matag grid breakpoint. Kini gikan sa Beta 1 kay ang .table-responsiveimong gigamit kay mas sama sa .table-responsive-md. Mahimo nimong gamiton .table-responsiveo .table-responsive-{sm,md,lg,xl}kung gikinahanglan.
  • Gihulog ang suporta sa Bower tungod kay ang tagdumala sa pakete wala na magamit alang sa mga alternatibo (pananglitan, Yarn o npm). Tan-awa ang bower/bower#2298 para sa mga detalye.
  • Nagkinahanglan gihapon ang Bootstrap og jQuery 1.9.1 o mas taas pa, apan gitambagan ka nga mogamit og bersyon 3.x tungod kay ang gisuportahan nga mga browser sa v3.x mao ang gisuportahan sa Bootstrap ug ang v3.x adunay pipila ka mga pag-ayo sa seguridad.
  • Gikuha ang wala magamit .form-control-labelnga klase. Kung gigamit nimo kini nga klase, kini usa ka duplicate sa .col-form-labelklase nga patayong nakasentro sa usa <label>nga adunay kauban nga input sa pinahigda nga mga layout sa porma.
  • Giusab ang color-yiqgikan sa usa ka mixin nga naglakip sa colorkabtangan ngadto sa usa ka function nga nagbalik sa usa ka bili, nga nagtugot kanimo sa paggamit niini alang sa bisan unsa nga CSS kabtangan. Pananglitan, imbes nga color-yiq(#000), isulat nimo ang color: color-yiq(#000);.

Mga highlight

  • Gipaila ang bag-ong pointer-eventspaggamit sa modals. Ang gawas nga .modal-dialogmoagi sa mga panghitabo nga adunay pointer-events: nonealang sa naandan nga pagdumala sa pag-klik (naghimo nga posible nga maminaw lang sa .modal-backdropalang sa bisan unsang mga pag-klik), ug dayon gikontra kini alang sa aktwal nga .modal-contentadunay pointer-events: auto.

Summary

Ania ang dagkong mga butang sa tiket nga gusto nimong mahibal-an kung mobalhin gikan sa v3 hangtod sa v4.

Suporta sa browser

  • Gihulog ang suporta sa IE8, IE9, ug iOS 6. Ang v4 karon IE10+ na lang ug iOS 7+. Alang sa mga site nga nanginahanglan bisan hain niini, gamita ang v3.
  • Gidugang ang opisyal nga suporta alang sa Android v5.0 Lollipop's Browser ug WebView. Ang mga naunang bersyon sa Android Browser ug WebView nagpabilin nga dili opisyal nga suportado.

Global nga mga pagbag-o

  • Ang Flexbox gipalihok pinaagi sa default. Sa kinatibuk-an kini nagpasabut nga usa ka pagbalhin gikan sa mga float ug daghan pa sa among mga sangkap.
  • Gibalhin gikan sa Less ngadto sa Sass para sa among source CSS files.
  • Gibalhin gikan pxsa remisip among panguna nga yunit sa CSS, bisan kung ang mga pixel gigamit gihapon alang sa mga pangutana sa media ug pamatasan sa grid tungod kay ang mga viewport sa aparato wala maapektuhan sa gidak-on sa tipo.
  • Ang gidak-on sa font sa tibuok kalibutan misaka gikan 14pxsa 16px.
  • Gibag-o nga mga tier sa grid aron makadugang usa ka ikalima nga kapilian (pag-address sa gagmay nga mga aparato sa 576pxug sa ubos) ug gitangtang ang -xsinfix gikan sa mga klase. Pananglitan: .col-6.col-sm-4.col-md-3.
  • Gipulihan ang separado nga opsyonal nga tema nga adunay mga kapilian nga ma-configure pinaagi sa mga variable sa SCSS (pananglitan, $enable-gradients: true).
  • Pagtukod sa sistema nga gi-overhaul aron magamit ang usa ka serye sa npm script imbes nga Grunt. Tan-awa package.jsonang tanan nga mga script, o ang among proyekto readme para sa lokal nga mga panginahanglanon sa kalamboan.
  • Ang dili motubag nga paggamit sa Bootstrap dili na suportado.
  • Gihulog ang online Customizer pabor sa mas lapad nga dokumentasyon sa setup ug customized nga mga build.
  • Gidugang ang daghang mga bag-ong klase sa utility alang sa sagad nga mga pares nga kantidad sa kabtangan sa CSS ug mga shortcut sa gilay-on sa margin/padding.

Sistema sa grid

  • Gibalhin sa flexbox.
    • Gidugang nga suporta alang sa flexbox sa grid mixins ug predefined nga mga klase.
    • Isip bahin sa flexbox, gilakip ang suporta alang sa bertikal ug horizontal alignment nga mga klase.
  • Gi-update nga mga ngalan sa klase sa grid ug usa ka bag-ong lebel sa grid.
    • Gidugang ang usa ka bag-ong smgrid tier sa ubos 768pxpara sa dugang nga granular nga kontrol. Kita karon adunay xs, sm, md, lgug xl. Nagpasabot usab kini nga ang matag hut-ong na-bumped sa usa ka lebel (mao nga .col-md-6sa v3 naa na karon .col-lg-6sa v4).
    • xsAng mga klase sa grid giusab aron dili kinahanglan ang infix nga mas tukma nga magrepresentar nga nagsugod sila sa paggamit sa mga istilo sa min-width: 0ug dili usa ka set nga kantidad sa pixel. Imbes nga .col-xs-6, karon na .col-6. Ang tanan nga uban pang mga grid tier nanginahanglan sa infix (pananglitan, sm).
  • Gi-update nga mga gidak-on sa grid, mga mixin, ug mga variable.
    • Ang grid gutters aduna nay mapa sa Sass aron imong matino ang piho nga gilapdon sa gutter sa matag breakpoint.
    • Gi-update nga grid mixins aron magamit ang usa ka make-col-readyprep mixin ug usa make-colaron itakda ang flexug max-widthalang sa indibidwal nga gidak-on sa kolum.
    • Giusab ang grid system media query breakpoints ug container widths aron i-account ang bag-ong grid tier ug maseguro nga ang mga column parehas nga mabahin 12sa ilang max nga gilapdon.
    • Ang mga breakpoint sa grid ug mga gilapdon sa sudlanan gidumala na pinaagi sa mga mapa sa Sass ( $grid-breakpointsug $container-max-widths) imbes sa pipila ka bulag nga mga variable. Gipulihan niini ang mga @screen-*variable ug gitugotan ka nga hingpit nga ipasadya ang mga tier sa grid.
    • Ang mga pangutana sa media nausab usab. Imbis nga balikon ang among mga deklarasyon sa pangutana sa media nga adunay parehas nga kantidad matag higayon, aduna na kami karon @include media-breakpoint-up/down/only. Karon, imbes nga magsulat @media (min-width: @screen-sm-min) { ... }, mahimo kang magsulat @include media-breakpoint-up(sm) { ... }.

Mga sangkap

  • Nahulog nga mga panel, thumbnail, ug mga atabay alang sa bag-ong sangkap nga naglangkob sa tanan, mga kard .
  • Gihulog ang Glyphicons icon font. Kung kinahanglan nimo ang mga icon, ang pipila nga mga kapilian mao ang:
  • Gihulog ang Affix jQuery plugin.
    • Among girekomendar ang paggamit sa position: stickybaylo. Tan-awa ang HTML5 Palihug nga entry para sa mga detalye ug piho nga mga rekomendasyon sa polyfill. Usa ka sugyot mao ang paggamit sa usa ka @supportslagda alang sa pagpatuman niini (eg, @supports (position: sticky) { ... })/
    • Kung gigamit nimo ang Affix aron magamit ang dugang, dili positionmga istilo, ang mga polyfill mahimong dili mosuporta sa imong kaso sa paggamit. Usa ka kapilian alang sa ingon nga mga gamit mao ang ikatulo nga partido nga ScrollPos-Styler library.
  • Gihulog ang bahin sa pager tungod kay kini gamay nga gipahiangay nga mga buton.
  • Gi-refactor ang hapit tanan nga mga sangkap aron magamit ang daghang wala’y salag nga mga tigpili sa klase imbes nga labi ka piho nga mga tigpili sa mga bata.

Pinaagi sa component

Kini nga listahan nagpasiugda sa mahinungdanong mga kausaban sa component tali sa v3.xx ug v4.0.0.

Pag-reboot

Bag-o sa Bootstrap 4 mao ang Reboot , usa ka bag-ong stylesheet nga nagtukod sa Normalize gamit ang among kaugalingon nga medyo opinionated reset styles. Ang mga tigpili nga makita sa kini nga file naggamit lamang sa mga elemento-walay mga klase dinhi. Gilain niini ang among mga istilo sa pag-reset gikan sa among mga istilo sa sangkap alang sa usa ka labi ka modular nga pamaagi. Ang pila sa labing hinungdanon nga mga pag-reset nga gilakip niini mao ang box-sizing: border-boxpagbag-o, pagbalhin gikan emsa remmga yunit sa daghang mga elemento, mga istilo sa link, ug daghang mga pag-reset sa elemento sa porma.

Tipograpiya

  • Gibalhin ang tanan .text-nga mga gamit sa _utilities.scssfile.
  • Gihulog .page-headertungod kay ang mga estilo niini mahimong magamit pinaagi sa mga utilities.
  • .dl-horizontalgihulog na. Hinuon, gamita ug gamita ang mga klase sa kolum .rowsa <dl>grid (o mga mixin) sa niini <dt>ug sa <dd>mga bata.
  • Gidisenyo pag-usab nga blockquotes, pagbalhin sa ilang mga estilo gikan sa <blockquote>elemento ngadto sa usa ka klase, .blockquote. Gihulog ang .blockquote-reversemodifier para sa text utilities.
  • .list-inlinekaron nanginahanglan nga ang mga butang sa listahan sa mga bata adunay bag-ong .list-inline-itemklase nga magamit sa kanila.

Mga larawan

  • Giusab ang ngalan .img-responsivesa .img-fluid.
  • Giusab ang ngalan .img-roundedsa.rounded
  • Giusab ang ngalan .img-circlesa.rounded-circle

Mga lamesa

  • Hapit tanan nga mga higayon sa >nagpili gitangtang, nagpasabut nga ang mga nested nga lamesa awtomatiko na nga makapanunod sa mga istilo gikan sa ilang mga ginikanan. Gipasimple niini pag-ayo ang among mga tigpili ug potensyal nga pag-customize.
  • Giusab ang ngalan .table-condensedsa .table-smalang sa pagkamakanunayon.
  • Nagdugang og bag-ong .table-inverseopsyon.
  • Gidugang nga table header modifiers: .thead-defaultug .thead-inverse.
  • Gibag-o ang ngalan sa mga klase sa konteksto aron adunay usa ka .table--prefix. Busa .active, .success, .warning, .dangerug .infosa .table-active, .table-success, .table-warning, .table-dangerug .table-info.

Mga porma

  • Ang gibalhin nga elemento gi-reset sa _reboot.scssfile.
  • Giusab ang ngalan .control-labelsa .col-form-label.
  • Giusab ang ngalan .input-lgug .input-smsa .form-control-lgug .form-control-sm, sa tinagsa.
  • Gihulog .form-group-*ang mga klase alang sa kayano. Gamita .form-control-*ang mga klase karon.
  • Gihulog .help-blockug gipulihan kini og .form-textpara sa block-level nga tabang nga teksto. Para sa inline nga tabang nga teksto ug uban pang flexible nga mga kapilian, gamita ang mga klase sa utility sama sa .text-muted.
  • Nahulog .radio-inlineug .checkbox-inline.
  • Gikonsolida .checkboxug .radiosa .form-checkug sa lain-laing mga .form-check-*klase.
  • Ang mga pinahigda nga porma gi-overhaul:
    • Giwagtang ang .form-horizontalkinahanglanon sa klase.
    • .form-groupwala na magamit ang mga estilo gikan sa .rowvia mixin, mao .rownga gikinahanglan na karon para sa pinahigda nga mga layout sa grid (pananglitan, <div class="form-group row">).
    • Gidugang ang bag-ong .col-form-labelklase sa vertically center nga mga label nga adunay .form-controls.
    • Gidugang bag-o .form-rowalang sa mga compact nga porma nga mga layout sa mga klase sa grid (ibaylo ang imong .rowalang sa usa .form-rowug lakaw).
  • Gidugang nga suporta sa custom nga porma (alang sa mga checkbox, radyo, pagpili, ug mga input sa file).
  • Giilisan .has-errorang , .has-warning, ug .has-successmga klase nga adunay HTML5 nga porma nga validation pinaagi sa CSS :invalidug :validpseudo-classes.
  • Giusab ang ngalan .form-control-staticsa .form-control-plaintext.

Mga butones

  • Giusab ang ngalan .btn-defaultsa .btn-secondary.
  • Gihulog ang .btn-xsklase sa bug-os ingon .btn-smnga proporsyonal nga mas gamay kaysa sa v3.
  • Ang stateful button nga feature sa button.jsjQuery plugin gihulog na. Kini naglakip sa $().button(string)ug $().button('reset')mga pamaagi. Gitambagan namon ang paggamit sa usa ka gamay nga naandan nga JavaScript sa baylo, nga adunay kaayohan sa paggawi sa eksakto sa paagi nga gusto nimo.
    • Timan-i nga ang ubang mga bahin sa plugin (button checkboxes, button radios, single-toggle buttons) gipabilin sa v4.
  • Usba ang mga buton' [disabled]sa :disabledingon nga IE9+ nagsuporta :disabled. Apan fieldset[disabled]gikinahanglan gihapon tungod kay ang mga native disabled fieldsets kay buggy gihapon sa IE11 .

Grupo sa butones

  • Isulat pag-usab ang sangkap gamit ang flexbox.
  • Gitangtang .btn-group-justified. Isip usa ka puli mahimo nimong gamiton <div class="btn-group d-flex" role="group"></div>ingon usa ka wrapper sa palibot sa mga elemento nga adunay .w-100.
  • Gihulog ang .btn-group-xsklase sa bug-os nga gihatag nga pagtangtang sa .btn-xs.
  • Gikuha ang klaro nga gilay-on tali sa mga grupo sa buton sa mga toolbar sa buton; gamita ang margin utilities karon.
  • Gipauswag nga dokumentasyon para magamit sa ubang mga sangkap.
  • Gibalhin gikan sa mga tigpili sa ginikanan ngadto sa singular nga mga klase alang sa tanan nga mga sangkap, mga modifier, ug uban pa.
  • Gipasimple nga mga istilo sa paghulog aron dili na ipadala uban ang pataas o paubos nga nag-atubang nga mga arrow nga gilakip sa dropdown menu.
  • Ang mga dropdown mahimong matukod gamit <div>ang s o <ul>s karon.
  • Gitukod pag-usab ang mga estilo sa dropdown ug markup aron makahatag og sayon, built-in nga suporta alang <a>ug <button>base sa dropdown nga mga butang.
  • Giusab ang ngalan .dividersa .dropdown-divider.
  • Ang dropdown nga mga butang gikinahanglan na karon .dropdown-item.
  • Ang dropdown toggles wala na magkinahanglan ug klaro <span class="caret"></span>; kini karon awtomatikong gihatag pinaagi sa CSS ::aftersa .dropdown-toggle.

Sistema sa grid

  • Gidugang ang usa ka bag-ong 576pxgrid breakpoint isip sm, nagpasabot nga aduna nay lima ka kinatibuk-ang lebel ( xs, sm, md, lg, ug xl).
  • Giusab ang ngalan sa responsive grid modifier nga mga klase gikan .col-{breakpoint}-{modifier}-{size}sa ngadto .{modifier}-{breakpoint}-{size}sa mas simple nga grid classes.
  • Gihulog ang mga klase sa pagduso ug pagbitad sa modifier alang sa bag-ong mga klase nga gipadagan sa flexbox order. Pananglitan, imbes .col-8.push-4ug .col-4.pull-8, imong gamiton .col-8.order-2ug .col-4.order-1.
  • Gidugang ang mga klase sa utility sa flexbox alang sa sistema sa grid ug mga sangkap.

Ilista ang mga grupo

  • Isulat pag-usab ang sangkap gamit ang flexbox.
  • Gipulihan a.list-group-itemsa usa ka tin-aw nga klase, .list-group-item-action, alang sa pag-istilo sa link ug butones nga mga bersyon sa listahan sa mga butang sa grupo.
  • Gidugang .list-group-flushnga klase para magamit sa mga kard.
  • Isulat pag-usab ang sangkap gamit ang flexbox.
  • Tungod sa paglihok sa flexbox, ang pag-align sa mga dismiss nga mga icon sa header lagmit nga nabuak tungod kay wala na kami naggamit sa mga float. Nag-una ang naglutaw nga sulud, apan sa flexbox dili na kana ang kaso. I-update ang imong mga dismiss nga mga icon nga moabut pagkahuman sa modal nga mga titulo aron ayohon.
  • Ang remotekapilian (nga mahimong magamit sa awtomatikong pagkarga ug pag-inject sa gawas nga sulud sa usa ka modal) ug ang katugbang nga loaded.bs.modalpanghitabo gikuha. Imbes girekomenda namon ang paggamit sa template sa kilid sa kliyente o usa ka balangkas nga nagbugkos sa datos, o pagtawag sa jQuery.load sa imong kaugalingon.
  • Isulat pag-usab ang sangkap gamit ang flexbox.
  • Gihulog ang halos tanang >mga tigpili alang sa mas simple nga pag-istilo pinaagi sa wala-salag nga mga klase.
  • Imbes sa HTML-specific selectors sama sa .nav > li > a, migamit mig bulag nga mga klase para .navsa s, .nav-items, ug .nav-links. Kini naghimo sa imong HTML nga mas flexible samtang nagdala sa dugang nga pagpalapad.

Ang navbar hingpit nga gisulat pag-usab sa flexbox nga adunay gipaayo nga suporta alang sa pag-align, pagtubag, ug pag-customize.

  • Ang mga responsive navbar nga kinaiya kay gigamit na karon sa .navbarklase pinaagi sa gikinahanglan .navbar-expand-{breakpoint} kung asa nimo pilion kung asa mahugno ang navbar. Kaniadto kini usa ka Dili kaayo variable nga pagbag-o ug kinahanglan nga pag-recompile.
  • .navbar-defaultkaron .navbar-light, bisan .navbar-darkpa sa gihapon. Ang usa niini gikinahanglan sa matag navbar. Bisan pa, kini nga mga klase wala na magbutang background-colors; sa baylo sila sa esensya makaapekto lamang color.
  • Ang mga Navbar karon nanginahanglan usa ka deklarasyon sa background sa usa ka matang. Pagpili gikan sa among mga gamit sa background ( .bg-*) o itakda ang imong kaugalingon gamit ang kahayag/balit-ad nga mga klase sa ibabaw para sa buang nga pag-customize .
  • Gihatag ang mga estilo sa flexbox, ang mga navbar mahimo nang mogamit sa mga gamit sa flexbox alang sa dali nga mga kapilian sa pag-align.
  • .navbar-togglekaron .navbar-togglerug adunay lain-laing mga estilo ug sulod nga marka (wala nay tulo ka <span>s).
  • Nahulog ang .navbar-formklase sa hingpit. Dili na kinahanglan; hinoon, gamita lang .form-inlineug gamita ang margin utilities kung gikinahanglan.
  • Ang mga Navbar wala na maglakip margin-bottomo border-radiuspinaagi sa default. Gamita ang mga utilities kung gikinahanglan.
  • Ang tanan nga mga pananglitan nga adunay mga navbar gi-update aron maapil ang bag-ong markup.

Pagination

  • Isulat pag-usab ang sangkap gamit ang flexbox.
  • Ang klaro nga mga klase ( .page-item, .page-link) gikinahanglan na sa mga kaliwat ni .paginations
  • Gihulog sa .pagerbug-os ang sangkap tungod kay gamay ra kini sa gipahiangay nga mga buton sa outline.
  • Ang usa ka tin-aw nga klase, .breadcrumb-item, gikinahanglan na karon sa mga kaliwat ni .breadcrumbs

Mga label ug badge

  • Gikonsolida .labelug .badgearon madisambiguate gikan sa <label>elemento ug pasimplehon ang mga may kalabutan nga sangkap.
  • Gidugang .badge-pillisip modifier para sa rounded "pill" look.
  • Ang mga badge dili na awtomatikong gipalutaw sa listahan nga mga grupo ug uban pang mga sangkap. Ang mga klase sa utility gikinahanglan na alang niana.
  • .badge-defaultgihulog ug .badge-secondarygidugang aron sa pagpares sa mga klase sa component modifier nga gigamit sa ubang dapit.

Mga panel, thumbnail, ug mga atabay

Nahulog sa hingpit alang sa bag-ong bahin sa kard.

Mga panel

  • .panelsa .card, karon gitukod uban sa flexbox.
  • .panel-defaultgikuha ug walay kapuli.
  • .panel-groupgikuha ug walay kapuli. .card-groupdili kapuli, lahi kini.
  • .panel-headingsa.card-header
  • .panel-titlesa .card-title. Depende sa gusto nga hitsura, mahimo usab nimo gamiton ang mga elemento sa ulohan o mga klase (eg <h3>, .h3) o mga bold nga elemento o mga klase (eg <strong>, <b>, .font-weight-bold). Timan-i nga .card-title, samtang parehas nga ginganlan, nagpatunghag lahi nga hitsura kaysa .panel-title.
  • .panel-bodysa.card-body
  • .panel-footersa.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ug .panel-dangergihulog tungod sa .bg-, .text-, ug .bordermga utilities nga namugna gikan sa among $theme-colorsmapa sa Sass.

Pag-uswag

  • Gipulihan ang mga .progress-bar-*klase sa konteksto sa mga .bg-*gamit. Pananglitan, class="progress-bar progress-bar-danger"mahimong class="progress-bar bg-danger".
  • Gipulihan .activealang sa mga animated nga progress bar nga adunay .progress-bar-animated.
  • Gi-overhaul ang tibuuk nga sangkap aron mapasimple ang disenyo ug estilo. Kami adunay gamay nga mga estilo nga imong i-override, bag-ong mga timailhan, ug bag-ong mga icon.
  • Ang tanan nga CSS wala na salag ug giilisan ang ngalan, pagsiguro nga ang matag klase adunay prefix nga .carousel-.
    • Alang sa mga butang sa carousel, .next, .prev, .left, ug .rightkaron .carousel-item-next, .carousel-item-prev, .carousel-item-left, ug .carousel-item-right.
    • .itemmao usab karon .carousel-item.
    • Para sa prev/next controls, .carousel-control.rightug .carousel-control.leftkaron .carousel-control-nextug .carousel-control-prev, nagpasabot nga wala na sila magkinahanglan ug piho nga base class.
  • Gikuha ang tanang responsive nga estilo, paglangan sa mga utilities (pananglitan, pagpakita sa mga caption sa pipila ka viewports) ug custom nga mga estilo kon gikinahanglan.
  • Gitangtang ang mga override sa imahe alang sa mga imahe sa mga butang sa carousel, nga naglangan sa mga utilities.
  • Gi-tweak ang pananglitan sa Carousel aron maapil ang bag-ong markup ug mga istilo.

Mga lamesa

  • Gikuha ang suporta alang sa gi-istilo nga nested nga mga lamesa. Ang tanang estilo sa lamesa napanunod na sa v4 para sa mas simple nga mga tigpili.
  • Gidugang ang inverse nga variant sa lamesa.

Mga gamit

  • Ipakita, gitago, ug uban pa:
    • Gihimong responsive ang mga utility sa display (pananglitan, .d-noneug d-{sm,md,lg,xl}-none).
    • Gihulog ang kadaghanan sa mga .hidden-*utilities para sa mga bag-ong display utilities . Pananglitan, imbes nga .hidden-sm-up, gamita ang .d-sm-none. Gibag-o ang ngalan sa mga .hidden-printutilities aron magamit ang laraw sa pagngalan sa utility sa pagpakita. Dugang impormasyon ubos sa Responsive utilities nga seksyon niini nga panid.
    • Gidugang .float-{sm,md,lg,xl}-{left,right,none}nga mga klase alang sa mga responsive float ug gitangtang .pull-leftug .pull-righttungod kay kini sobra sa .float-leftug .float-right.
  • Matang:
    • Gidugang ang mga responsive nga mga kalainan sa among mga klase sa pag-align sa teksto .text-{sm,md,lg,xl}-{left,center,right}.
  • Pag-align ug gilay-on:
  • Gi-update ang Clearfix aron ihulog ang suporta alang sa mga daan nga bersyon sa browser.

Vendor prefix mixins

Ang mga mixin sa prefix sa vendor sa Bootstrap 3 , nga wala na gigamit sa v3.2.0, gitangtang na sa Bootstrap 4. Tungod kay gigamit namo ang Autoprefixer , dili na kini kinahanglan.

Gikuha ang mosunod nga mga mix : 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-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dokumentasyon

Ang among dokumentasyon nakadawat usab og pag-upgrade sa tibuok board. Ania ang ubos sa ubos:

  • Gigamit gihapon namo ang Jekyll, apan kami adunay mga plugins sa mix:
    • bugify.rbgigamit sa epektibong paglista sa mga entry sa among browser bugs page.
    • example.rbusa ka naandan nga tinidor sa default nga highlight.rbplugin, nga nagtugot alang sa labi ka dali nga pagdumala sa pananglitan-code.
    • callout.rbmao ang susama nga custom fork niana, apan gidisenyo alang sa among espesyal nga docs callouts.
    • Ang jekyll-toc gigamit sa paghimo sa among talaan sa mga sulud.
  • Ang tanang sulod sa docs kay gisulat na pag-usab sa Markdown (imbes HTML) para sa mas sayon ​​nga pag-edit.
  • Ang mga panid gi-organisar pag-usab alang sa mas simple nga sulod ug mas daling duolon nga hierarchy.
  • Mibalhin kami gikan sa regular nga CSS ngadto sa SCSS aron mapahimuslan sa hingpit ang mga variable, mixin, ug uban pa sa Bootstrap.

Responsive nga mga utilities

Ang tanan @screen-nga mga baryable gikuha sa v4.0.0. Gamita hinuon ang media-breakpoint-up(), media-breakpoint-down(), o media-breakpoint-only()Sass mixin o ang $grid-breakpointsSass nga mapa.

Ang among responsive nga mga klase sa utility kadaghanan gitangtang pabor sa klaro nga mga displayutilities.

  • Ang .hiddenug .showang mga klase gitangtang tungod kay sukwahi sila sa jQuery's $(...).hide()ug $(...).show()mga pamaagi. Hinuon, sulayi nga i-togg ang [hidden]attribute o gamita ang inline nga mga estilo sama sa style="display: none;"ug style="display: block;".
  • Ang tanan .hidden-nga mga klase gitangtang, gawas sa mga kagamitan sa pag-imprinta nga gibag-o sa ngalan.
    • Gikuha gikan sa 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
    • Gikuha gikan sa 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
  • Ang mga kagamitan sa pag-imprinta wala na magsugod sa .hidden-o .visible-, apan sa .d-print-.
    • Karaang mga ngalan: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Bag-ong mga klase: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Imbis nga gamiton ang mga klaro nga .visible-*klase, gihimo nimo ang usa ka elemento nga makita pinaagi sa dili pagtago niini sa gidak-on sa screen. Mahimo nimong isagol ang usa ka .d-*-noneklase sa usa ka .d-*-blockklase aron ipakita ang usa ka elemento sa usa ka gilay-on nga gidak-on sa screen (pananglitan .d-none.d-md-block.d-xl-none, gipakita ang elemento sa medium ug dako nga aparato).

Timan-i nga ang mga pagbag-o sa grid breakpoints sa v4 nagpasabut nga kinahanglan nimo nga moadto sa usa ka breakpoint nga mas dako aron makab-ot ang parehas nga mga resulta. Ang bag-ong responsive utility classes wala mosulay sa pag-accommodate sa dili kaayo komon nga mga kaso diin ang visibility sa usa ka elemento dili mapahayag isip usa ka sumpay nga gidak-on sa viewport; ikaw hinoon kinahanglan sa paggamit sa custom CSS sa maong mga kaso.