in English

Yn mudo i v4

Mae Bootstrap 4 yn ailysgrifennu mawr o'r prosiect cyfan. Crynhoir y newidiadau mwyaf nodedig isod, ac yna newidiadau mwy penodol i gydrannau perthnasol.

Newidiadau sefydlog

Gan symud o Beta 3 i'n rhyddhau v4.x sefydlog, nid oes unrhyw newidiadau torri, ond mae rhai newidiadau nodedig.

Argraffu

  • Cyfleustodau argraffu toredig sefydlog. Yn flaenorol, byddai defnyddio .d-print-*dosbarth yn diystyru unrhyw ddosbarth arall yn annisgwyl .d-*. Nawr, maen nhw'n cyd-fynd â'n cyfleustodau arddangos eraill ac yn berthnasol i'r cyfrwng hwnnw yn unig ( @media print).

  • Cyfleustodau arddangos print estynedig sydd ar gael i gyd-fynd â chyfleustodau eraill. Roedd gan Beta 3 a hŷn yn unig block, inline-block, inline, a none. Ychwanegodd stabl v4 flex, inline-flex, table, table-row, a table-cell.

  • Rendro rhagolwg print sefydlog ar draws porwyr gydag arddulliau argraffu newydd sy'n nodi @page size.

Beta 3 yn newid

Er bod Beta 2 wedi gweld y rhan fwyaf o'n newidiadau torri yn ystod y cyfnod beta, ond mae gennym rai o hyd y mae angen rhoi sylw iddynt yn y datganiad Beta 3. Mae'r newidiadau hyn yn berthnasol os ydych chi'n diweddaru i Beta 3 o Beta 2 neu unrhyw fersiwn hŷn o Bootstrap.

Amrywiol

  • $thumbnail-transitionWedi dileu'r newidyn nas defnyddiwyd . Nid oeddem yn trawsnewid unrhyw beth, felly dim ond cod ychwanegol ydoedd.
  • Nid yw'r pecyn npm bellach yn cynnwys unrhyw ffeiliau heblaw ein ffeiliau ffynhonnell a dist; os oeddech yn dibynnu arnynt ac yn rhedeg ein sgriptiau drwy'r node_modulesffolder, dylech addasu eich llif gwaith.

Ffurflenni

  • Ailysgrifennu blychau ticio a radios arferol a rhagosodedig. Nawr, mae gan y ddau strwythur HTML cyfatebol (allanol <div>gyda brawd neu chwaer <input>a <label>) a'r un arddulliau gosodiad (rhagosodedig wedi'i bentyrru, yn unol â dosbarth addasydd). Mae hyn yn ein galluogi i steilio'r label yn seiliedig ar gyflwr y mewnbwn, gan symleiddio cefnogaeth i'r disabledpriodoledd (yn flaenorol angen dosbarth rhiant) a chefnogi ein dilysiad ffurflen yn well.

    Fel rhan o hyn, rydym wedi newid y CSS ar gyfer rheoli sawl background-images ar flychau ticio ffurflenni arferol a radios. Yn flaenorol, roedd gan yr elfen sydd bellach wedi'i dileu .custom-control-indicatorliw cefndir, graddiant, ac eicon SVG. Roedd addasu'r graddiant cefndir yn golygu newid pob un o'r rhain bob tro roedd angen i chi newid un yn unig. Nawr, mae gennym ni .custom-control-label::beforear gyfer y llenwad a'r graddiant ac .custom-control-label::aftermae'n trin yr eicon.

    I wneud gwiriad personol yn unol, ychwanegwch .custom-control-inline.

  • Dewisydd wedi'i ddiweddaru ar gyfer grwpiau botwm sy'n seiliedig ar fewnbwn. Yn hytrach nag ar [data-toggle="buttons"] { }gyfer arddull ac ymddygiad, rydym yn defnyddio'r datapriodoledd ar gyfer ymddygiadau JS yn unig ac yn dibynnu ar .btn-group-toggleddosbarth newydd ar gyfer steilio.

  • Wedi'i ddileu .col-form-legendo blaid gwelliant ychydig .col-form-label. Fel hyn .col-form-label-sma .col-form-label-lggellir ei ddefnyddio ar <legend>elfennau yn rhwydd.

  • Derbyniodd mewnbynnau ffeil personol newid i'w $custom-file-textnewidyn Sass. Nid yw'n fap Sass wedi'i nythu bellach ac erbyn hyn dim ond un llinyn sy'n pweru - y Browsebotwm gan mai hwnnw bellach yw'r unig ffug-elfen a gynhyrchir o'n Sass. Daw'r Choose filetestun yn awr o'r .custom-file-label.

Grwpiau mewnbwn

  • Mae ategion grŵp mewnbwn bellach yn benodol i'w lleoliad mewn perthynas â mewnbwn. Rydym wedi gollwng .input-group-addonac .input-group-btnar gyfer dau ddosbarth newydd, .input-group-prependa .input-group-append. Rhaid i chi ddefnyddio atodiad neu ragpend yn benodol nawr, gan symleiddio llawer o'n CSS. O fewn atodiad neu ragpend, rhowch eich botymau fel y byddent yn bodoli yn unrhyw le arall, ond lapio testun i mewn .input-group-text.

  • Cefnogir arddulliau dilysu bellach, yn ogystal â mewnbynnau lluosog (er mai dim ond un mewnbwn y grŵp y gallwch ei ddilysu).

  • Rhaid i ddosbarthiadau maint fod ar y rhiant .input-groupac nid ar yr elfennau ffurf unigol.

Beta 2 yn newid

Tra yn y beta, ein nod yw peidio â chael unrhyw newidiadau sy'n torri. Fodd bynnag, nid yw pethau bob amser yn mynd fel y cynlluniwyd. Isod mae'r newidiadau torri i'w cofio wrth symud o Beta 1 i Beta 2.

Torri

  • Newidyn wedi'i dynnu $badge-colora'i ddefnydd ar .badge. Rydym yn defnyddio swyddogaeth cyferbyniad lliw i ddewis yn colorseiliedig ar y background-color, felly mae'r newidyn yn ddiangen.
  • grayscale()Swyddogaeth wedi'i ailenwi gray()er mwyn osgoi gwrthdaro â'r grayscalehidlydd brodorol CSS.
  • Wedi'i ailenwi .table-inverse, .thead-inverse, ac .thead-defaulti .*-darka .*-light, yn cyfateb i'n cynlluniau lliw a ddefnyddir mewn mannau eraill.
  • Mae tablau ymatebol bellach yn cynhyrchu dosbarthiadau ar gyfer pob torbwynt grid. Mae hyn yn torri o Beta 1 gan fod yr hyn .table-responsiverydych chi wedi bod yn ei ddefnyddio yn debycach i .table-responsive-md. Gallwch nawr ddefnyddio .table-responsiveneu .table-responsive-{sm,md,lg,xl}yn ôl yr angen.
  • Gostyngwyd cefnogaeth Bower gan fod y rheolwr pecyn wedi'i anghymeradwyo ar gyfer dewisiadau eraill (ee, Yarn neu npm). Gweler bower/bower#2298 am fanylion.
  • Mae angen jQuery 1.9.1 neu uwch ar Bootstrap o hyd, ond fe'ch cynghorir i ddefnyddio fersiwn 3.x gan mai'r porwyr a gefnogir gan v3.x yw'r rhai y mae Bootstrap yn eu cefnogi ac mae gan v3.x rai atebion diogelwch.
  • Wedi dileu'r dosbarth nas defnyddiwyd .form-control-label. Os gwnaethoch ddefnydd o'r dosbarth hwn, roedd yn ddyblyg o'r .col-form-labeldosbarth a oedd wedi'i ganoli'n fertigol a <label>gyda'i fewnbwn cysylltiedig mewn gosodiadau ffurf llorweddol.
  • Wedi newid y color-yiqcymysgedd a oedd yn cynnwys yr coloreiddo i swyddogaeth sy'n dychwelyd gwerth, sy'n eich galluogi i'w ddefnyddio ar gyfer unrhyw eiddo CSS. Er enghraifft, yn lle color-yiq(#000), byddech chi'n ysgrifennu color: color-yiq(#000);.

Uchafbwyntiau

  • Cyflwyno pointer-eventsdefnydd newydd o foddau. Mae'r allanol .modal-dialogyn mynd trwy ddigwyddiadau ag pointer-events: nonear gyfer trin clic wedi'i deilwra (gan ei gwneud hi'n bosibl gwrando ar .modal-backdropunrhyw gliciau), ac yna'n ei wrthweithio ar gyfer y gwir .modal-contentgyda pointer-events: auto.

Crynodeb

Dyma'r eitemau tocyn mawr y byddwch am fod yn ymwybodol ohonynt wrth symud o v3 i v4.

Cefnogaeth porwr

  • Wedi gollwng cefnogaeth IE8, IE9, ac iOS 6. Dim ond IE10+ ac iOS 7+ yw v4 bellach. Ar gyfer safleoedd sydd angen y naill neu'r llall, defnyddiwch v3.
  • Ychwanegwyd cefnogaeth swyddogol ar gyfer Porwr Android v5.0 Lollipop a WebView. Dim ond yn answyddogol y cefnogir fersiynau cynharach o'r Porwr Android a WebView.

Newidiadau byd-eang

  • Mae Flexbox wedi'i alluogi yn ddiofyn. Yn gyffredinol, mae hyn yn golygu symud oddi wrth fflotiau a mwy ar draws ein cydrannau.
  • Wedi newid o Llai i Sass ar gyfer ein ffeiliau CSS ffynhonnell.
  • Wedi'i newid o pxi remfel ein prif uned CSS, er bod picsel yn dal i gael ei ddefnyddio ar gyfer ymholiadau cyfryngau ac ymddygiad grid gan nad yw maint y math yn effeithio ar olygfeydd dyfeisiau.
  • Cynyddodd maint ffont byd-eang 14pxo 16px.
  • Haenau grid wedi'u hailwampio i ychwanegu pumed opsiwn (yn mynd i'r afael â dyfeisiau llai ar 576pxac oddi tano) a thynnu'r -xsmewnfodiad o'r dosbarthiadau hynny. Enghraifft: .col-6.col-sm-4.col-md-3.
  • Wedi disodli'r thema ddewisol ar wahân gydag opsiynau ffurfweddu trwy newidynnau SCSS (ee, $enable-gradients: true).
  • Ailwampio'r system adeiladu i ddefnyddio cyfres o sgriptiau npm yn lle Grunt. Gweler package.jsonyr holl sgriptiau, neu darllenwch ein prosiect ar gyfer anghenion datblygu lleol.
  • Nid yw defnydd anymatebol o Bootstrap bellach yn cael ei gefnogi.
  • Gollyngwyd y Customizer ar-lein o blaid dogfennaeth setup helaethach ac adeiladau wedi'u teilwra.
  • Ychwanegwyd dwsinau o ddosbarthiadau cyfleustodau newydd ar gyfer parau gwerth eiddo CSS cyffredin a llwybrau byr bylchiad ymyl / padin.

System grid

  • Wedi symud i flexbox.
    • Cefnogaeth ychwanegol ar gyfer flexbox yn y cymysgeddau grid a dosbarthiadau wedi'u diffinio ymlaen llaw.
    • Fel rhan o flexbox, yn cynnwys cefnogaeth ar gyfer dosbarthiadau aliniad fertigol a llorweddol.
  • Enwau dosbarth grid wedi'u diweddaru a haen grid newydd.
    • Ychwanegwyd smhaen grid newydd isod 768pxar gyfer mwy o reolaeth gronynnog. Mae gennym ni nawr xs, sm, md, lg, a xl. Mae hyn hefyd yn golygu bod pob haen wedi'i tharo i fyny un lefel (felly .col-md-6mae v3 nawr .col-lg-6yn v4).
    • xsmae dosbarthiadau grid wedi'u haddasu i sicrhau nad oes angen i'r mewnddos gynrychioli'n fwy cywir eu bod yn dechrau cymhwyso arddulliau ar min-width: 0werth picsel penodol ac nid arno. Yn lle .col-xs-6, mae nawr .col-6. Mae angen y mewnfodiad (ee, sm) ar bob haen grid arall.
  • Meintiau grid wedi'u diweddaru, cymysgeddau a newidynnau.
    • Bellach mae gan gwteri grid fap Sass felly gallwch chi nodi lled cwteri penodol ym mhob torbwynt.
    • Cymysgeddau grid wedi'u diweddaru i ddefnyddio make-col-readymixin prep ac a make-coli osod y flexac max-widthar gyfer maint colofnau unigol.
    • Torbwyntiau ymholiad cyfryngau system grid wedi'u newid a lled cynwysyddion i gyfrif am haen grid newydd a sicrhau bod colofnau'n rhanadwy'n gyfartal â 12nhw ar eu lled mwyaf.
    • Mae torbwyntiau grid a lled cynwysyddion bellach yn cael eu trin trwy fapiau Sass ( $grid-breakpointsa $container-max-widths) yn hytrach na llond llaw o newidynnau ar wahân. Mae'r rhain yn disodli'r @screen-*newidynnau yn gyfan gwbl ac yn caniatáu ichi addasu'r haenau grid yn llawn.
    • Mae ymholiadau gan y cyfryngau hefyd wedi newid. Yn lle ailadrodd ein datganiadau ymholiad cyfryngau gyda'r un gwerth bob tro, mae gennym ni nawr @include media-breakpoint-up/down/only. Nawr , yn lle ysgrifennu @media (min-width: @screen-sm-min) { ... }, gallwch chi ysgrifennu @include media-breakpoint-up(sm) { ... }.

Cydrannau

  • Paneli wedi'u gollwng, mân-luniau, a ffynhonnau ar gyfer cydran hollgynhwysol newydd, cardiau .
  • Wedi gollwng ffont eicon Glyphicons. Os oes angen eiconau arnoch, dyma rai opsiynau:
  • Wedi gollwng yr ategyn Affix jQuery.
    • Rydym yn argymell defnyddio position: stickyyn lle hynny. Gweler y cofnod HTML5 Please am fanylion ac argymhellion polyfill penodol. Un awgrym yw defnyddio @supportsrheol ar gyfer ei gweithredu (ee, @supports (position: sticky) { ... })
    • Pe baech yn defnyddio Affix i gymhwyso arddulliau ychwanegol nad ydynt positionyn arddulliau, efallai na fyddai'r polyfills yn cefnogi eich achos defnydd. Un opsiwn ar gyfer defnyddiau o'r fath yw'r llyfrgell ScrollPos-Styler trydydd parti .
  • Gollyngwyd y gydran galwr gan ei fod yn ei hanfod botymau addasu ychydig.
  • Wedi ailffactorio bron pob cydran i ddefnyddio mwy o ddetholwyr dosbarth heb eu nythu yn lle detholwyr plant gor-benodol.

Yn ôl cydran

Mae'r rhestr hon yn amlygu newidiadau allweddol fesul cydran rhwng v3.xx a v4.0.0.

Ailgychwyn

Yn newydd i Bootstrap 4 mae'r Reboot , dalen arddull newydd sy'n adeiladu ar Normalize gyda'n harddulliau ailosod braidd yn farn ein hunain. Dim ond elfennau y mae dewiswyr sy'n ymddangos yn y ffeil hon yn eu defnyddio - nid oes unrhyw ddosbarthiadau yma. Mae hyn yn ynysu ein harddulliau ailosod o'n harddulliau cydrannau ar gyfer dull mwy modiwlaidd. Rhai o'r ailosodiadau pwysicaf y mae hyn yn eu cynnwys yw'r box-sizing: border-boxnewid, symud o emunedau remar lawer o elfennau, arddulliau cyswllt, a llawer o ailosodiadau elfen ffurf.

Teipograffeg

  • Wedi symud yr holl .text-gyfleustodau i'r _utilities.scssffeil.
  • Wedi'i ollwng .page-headergan y gellir cymhwyso ei arddulliau trwy gyfleustodau.
  • .dl-horizontalwedi ei ollwng. Yn lle hynny, defnyddiwch .rowymlaen <dl>a defnyddiwch ddosbarthiadau colofn grid (neu gymysgeddau) ar ei <dt>a <dd>phlant.
  • Dyfyniadau bloc wedi'u hailgynllunio, gan symud eu harddulliau o'r <blockquote>elfen i ddosbarth sengl, .blockquote. Gollwng y .blockquote-reverseaddasydd ar gyfer cyfleustodau testun.
  • .list-inlineyn awr yn mynnu bod ei eitemau rhestr plant yn cael y .list-inline-itemdosbarth newydd yn berthnasol iddynt.

Delweddau

  • Wedi'i ail-enwi .img-responsivei .img-fluid.
  • Ailenwyd .img-roundedi.rounded
  • Ailenwyd .img-circlei.rounded-circle

Byrddau

  • Mae bron pob achos o'r >dewiswr wedi'i ddileu, sy'n golygu y bydd byrddau nythu bellach yn etifeddu arddulliau gan eu rhieni yn awtomatig. Mae hyn yn symleiddio ein detholwyr a'n haddasiadau posibl yn fawr.
  • Wedi'i ail-enwi .table-condensedi .table-smam gysondeb.
  • Ychwanegwyd .table-inverseopsiwn newydd.
  • Addasyddion penawdau tabl wedi'u hychwanegu: .thead-defaulta .thead-inverse.
  • Dosbarthiadau cyd-destunol wedi'u hail-enwi i gael .table-- rhagddodiad. Felly .active, .success, .warning, .dangerac .infoi .table-active, .table-success, .table-warning, .table-dangera .table-info.

Ffurflenni

  • Mae elfen wedi'i symud yn ailosod i'r _reboot.scssffeil.
  • Wedi'i ail-enwi .control-labeli .col-form-label.
  • Wedi'i ailenwi .input-lgac .input-smi .form-control-lga .form-control-sm, yn y drefn honno.
  • Gollwng .form-group-*dosbarthiadau er mwyn symlrwydd. Defnyddiwch .form-control-*ddosbarthiadau yn lle nawr.
  • Wedi'i ollwng .help-blocka'i ddisodli ag .form-textar gyfer testun cymorth lefel bloc. Ar gyfer testun cymorth mewnol ac opsiynau hyblyg eraill, defnyddiwch ddosbarthiadau cyfleustodau fel .text-muted.
  • Gollwng .radio-inlinea .checkbox-inline.
  • Cyfunol .checkboxac .radioi mewn .form-checka'r dosbarthiadau amrywiol .form-check-*.
  • Ffurfiau llorweddol wedi'u hailwampio:
    • Gollwng .form-horizontalgofyniad y dosbarth.
    • .form-groupnid yw bellach yn cymhwyso arddulliau o'r .rowvia mixin, felly .rowmae ei angen bellach ar gyfer cynlluniau grid llorweddol (ee, <div class="form-group row">).
    • Ychwanegwyd .col-form-labeldosbarth newydd at labeli canol fertigol gydag .form-controls.
    • Ychwanegwyd newydd .form-rowar gyfer cynlluniau ffurf gryno gyda'r dosbarthiadau grid (cyfnewidiwch .rowam .form-rowa mynd).
  • Ychwanegwyd cefnogaeth ffurflenni arfer (ar gyfer blychau ticio, radios, dewis, a mewnbynnau ffeil).
  • Disodlwyd .has-error, .has-warning, a .has-successdosbarthiadau gyda dilysiad ffurflen HTML5 trwy CSS :invalida :validffug-ddosbarthiadau.
  • Wedi'i ail-enwi .form-control-statici .form-control-plaintext.

Botymau

  • Wedi'i ail-enwi .btn-defaulti .btn-secondary.
  • Gollwng y .btn-xsdosbarth yn gyfan gwbl fel .btn-smsy'n gymesur yn llawer llai na v3's.
  • Mae nodwedd botwmbutton.js wladwriaethol yr ategyn jQuery wedi'i ollwng. Mae hyn yn cynnwys y dulliau $().button(string)a . $().button('reset')Rydym yn cynghori defnyddio ychydig bach o JavaScript wedi'i deilwra yn lle, a fydd â'r fantais o ymddwyn yn union y ffordd rydych chi ei eisiau.
    • Sylwch fod nodweddion eraill yr ategyn (bocsys ticio botwm, radios botwm, botymau un togl) wedi'u cadw yn v4.
  • Newid botymau [disabled]i :disabledfel y mae IE9+ yn cefnogi :disabled. Fodd bynnag fieldset[disabled], mae'n dal i fod yn angenrheidiol oherwydd bod setiau maes anabl brodorol yn dal i fod yn bygi yn IE11 .

Grŵp botwm

  • Ailysgrifennu'r gydran gyda flexbox.
  • Wedi'i ddileu .btn-group-justified. Fel amnewidiad gallwch ei ddefnyddio <div class="btn-group d-flex" role="group"></div>fel deunydd lapio o amgylch elfennau gyda .w-100.
  • Gollwng y .btn-group-xsdosbarth yn gyfan gwbl oherwydd tynnu .btn-xs.
  • Dileu bylchau amlwg rhwng grwpiau botwm mewn bariau offer botwm; defnyddio cyfleustodau ymyl nawr.
  • Gwell dogfennaeth i'w defnyddio gyda chydrannau eraill.
  • Wedi'i newid o ddewiswyr rhiant i ddosbarthiadau unigol ar gyfer yr holl gydrannau, addaswyr, ac ati.
  • Arddulliau cwymplen symlach i beidio â llongio mwyach gyda saethau sy'n wynebu i fyny neu i lawr ynghlwm wrth y gwymplen.
  • Gellir adeiladu dropdowns gyda <div>s neu <ul>s nawr.
  • Ailadeiladu arddulliau cwymplen a marcio i ddarparu cefnogaeth hawdd, adeiledig ar gyfer eitemau cwymplen sy'n seiliedig arnynt <a>.<button>
  • Wedi'i ail-enwi .divideri .dropdown-divider.
  • Mae angen eitemau cwymplen nawr .dropdown-item.
  • Nid oes angen toglau cwymplen bellach <span class="caret"></span>; mae hwn bellach yn cael ei ddarparu'n awtomatig trwy CSS ::afterar .dropdown-toggle.

System grid

  • Ychwanegwyd 576pxtorbwynt grid newydd fel sm, sy'n golygu bod cyfanswm o bum haen erbyn hyn ( xs, sm, md, lg, a xl).
  • Wedi'i ailenwi'n ddosbarthiadau addasydd grid ymatebol o .col-{breakpoint}-{modifier}-{size}i .{modifier}-{breakpoint}-{size}ar gyfer dosbarthiadau grid symlach.
  • Dosbarthiadau addaswyr gwthio a thynnu wedi'u gollwng ar gyfer y dosbarthiadau flexbox newydd order. Er enghraifft, yn lle .col-8.push-4a .col-4.pull-8, byddech chi'n defnyddio .col-8.order-2a .col-4.order-1.
  • Ychwanegwyd dosbarthiadau cyfleustodau flexbox ar gyfer system grid a chydrannau.

Rhestrwch grwpiau

  • Ailysgrifennu'r gydran gyda flexbox.
  • Wedi'i ddisodli a.list-group-itemgan ddosbarth penodol, .list-group-item-action, ar gyfer arddull dolen a fersiynau botwm o eitemau grŵp rhestr.
  • Dosbarth ychwanegol .list-group-flushi'w ddefnyddio gyda chardiau.
  • Ailysgrifennu'r gydran gyda flexbox.
  • O ystyried y symudiad i flexbox, mae aliniad yr eiconau diswyddo yn y pennyn yn debygol o dorri gan nad ydym yn defnyddio fflotiau mwyach. Cynnwys wedi'i arnofio sy'n dod gyntaf, ond gyda flexbox nid yw hynny'n wir bellach. Diweddarwch eich eiconau diswyddo i ddod ar ôl teitlau moddol i'w trwsio.
  • Tynnwyd yr remoteopsiwn (y gellid ei ddefnyddio i lwytho a chwistrellu cynnwys allanol yn awtomatig i fodel) a'r loaded.bs.modaldigwyddiad cyfatebol. Rydym yn argymell yn lle hynny defnyddio templedi ochr y cleient neu fframwaith rhwymo data, neu ffonio jQuery.load eich hun.
  • Ailysgrifennu'r gydran gyda flexbox.
  • Gostyngodd bron pob >dewiswr ar gyfer steilio symlach trwy ddosbarthiadau heb eu nythu.
  • Yn lle dewiswyr HTML-benodol fel .nav > li > a, rydym yn defnyddio dosbarthiadau ar wahân ar gyfer .navs, .nav-items, ac .nav-links. Mae hyn yn gwneud eich HTML yn fwy hyblyg tra'n dod â mwy o estynadwyedd.

Mae'r bar llywio wedi'i ailysgrifennu'n gyfan gwbl mewn flexbox gyda chefnogaeth well ar gyfer aliniad, ymatebolrwydd ac addasu.

  • Mae ymddygiadau bar llywio ymatebol bellach yn cael eu cymhwyso i'r .navbardosbarth trwy'r cyfeiriad gofynnol .navbar-expand-{breakpoint} lle rydych chi'n dewis ble i ddymchwel y bar llywio. Yn flaenorol roedd hwn yn addasiad Llai amrywiol ac roedd angen ei ail-grynhoi.
  • .navbar-defaultyn awr .navbar-light, er .navbar-darkyn aros yr un fath. Mae angen un o'r rhain ar bob bar llywio. Fodd bynnag, nid yw'r dosbarthiadau hyn bellach yn gosod background-colors; yn hytrach maent yn ei hanfod yn effeithio yn unig color.
  • Mae Navbars bellach angen datganiad cefndir o ryw fath. Dewiswch o'n cyfleustodau cefndir ( .bg-*) neu gosodwch eich un eich hun gyda'r dosbarthiadau golau / gwrthdro uchod ar gyfer addasu gwallgof .
  • O ystyried arddulliau flexbox, gall navbars bellach ddefnyddio cyfleustodau flexbox ar gyfer opsiynau alinio hawdd.
  • .navbar-toggleyn awr .navbar-togglerac mae ganddo wahanol arddulliau a marcio mewnol (dim mwy o dri <span>).
  • Gollwng y .navbar-formdosbarth yn gyfan gwbl. Nid yw'n angenrheidiol mwyach; yn lle hynny, dim ond defnyddio .form-inlinea chymhwyso cyfleustodau ymyl yn ôl yr angen.
  • Nid yw Navbars bellach yn cynnwys margin-bottomneu border-radiusyn ddiofyn. Defnyddiwch gyfleustodau yn ôl yr angen.
  • Mae'r holl enghreifftiau sy'n cynnwys bariau llywio wedi'u diweddaru i gynnwys marcio newydd.

Tudaleniad

  • Ailysgrifennu'r gydran gyda flexbox.
  • Mae angen dosbarthiadau penodol ( .page-item, .page-link) yn awr ar ddisgynyddion .paginationa
  • Gollyngwyd y .pagergydran yn gyfan gwbl gan nad oedd fawr mwy na botymau amlinellol wedi'u haddasu.
  • Mae angen dosbarth penodol, .breadcrumb-item, yn awr ar ddisgynyddion .breadcrumba

Labeli a bathodynnau

  • Wedi'i gyfuno .labelac .badgei ddadamwyso'r <label>elfen a symleiddio cydrannau cysylltiedig.
  • Ychwanegwyd .badge-pillfel addasydd ar gyfer edrychiad “bilsen” crwn.
  • Nid yw bathodynnau bellach yn cael eu arnofio'n awtomatig mewn grwpiau rhestr a chydrannau eraill. Bellach mae angen dosbarthiadau cyfleustodau ar gyfer hynny.
  • .badge-defaultwedi'i ollwng a'i .badge-secondaryychwanegu i gyfateb â dosbarthiadau addasu cydrannau a ddefnyddir mewn mannau eraill.

Paneli, mân-luniau, a ffynhonnau

Wedi'i ollwng yn gyfan gwbl ar gyfer y gydran cerdyn newydd.

Paneli

  • .paneli .card, sydd bellach wedi'i adeiladu gyda flexbox.
  • .panel-defaulttynnu a dim un yn ei le.
  • .panel-grouptynnu a dim un yn ei le. .card-groupnid yw'n disodli, mae'n wahanol.
  • .panel-headingi.card-header
  • .panel-titlei .card-title. Yn dibynnu ar yr edrychiad a ddymunir, efallai y byddwch hefyd am ddefnyddio elfennau neu ddosbarthiadau pennawd (ee <h3>, .h3) neu elfennau neu ddosbarthiadau beiddgar (ee <strong>, <b>, .font-weight-bold). Sylwch fod .card-title, er ei fod wedi'i enwi'n debyg, yn cynhyrchu golwg wahanol i .panel-title.
  • .panel-bodyi.card-body
  • .panel-footeri.card-footer
  • .panel-primary, .panel-success, , .panel-info, .panel-warning, ac .panel-dangerwedi'u gollwng ar gyfer .bg-, .text-, , a .borderchyfleustodau a gynhyrchwyd o'n $theme-colorsmap Sass.

Cynnydd

  • Disodlwyd dosbarthiadau cyd-destunol .progress-bar-*gyda .bg-*chyfleustodau. Er enghraifft, class="progress-bar progress-bar-danger"yn dod yn class="progress-bar bg-danger".
  • Wedi'i ddisodli .activeam fariau cynnydd animeiddiedig gyda .progress-bar-animated.
  • Ailwampio'r gydran gyfan i symleiddio'r dyluniad a'r steilio. Mae gennym lai o arddulliau i chi eu diystyru, dangosyddion newydd ac eiconau newydd.
  • Nid yw pob CSS wedi'i nythu a'i hailenwi, gan sicrhau bod pob dosbarth wedi'i ragnodi â .carousel-.
    • Ar gyfer eitemau carwsél, .next, .prev, .left, ac .rightmaent yn awr .carousel-item-next, .carousel-item-prev, .carousel-item-left, a .carousel-item-right.
    • .itemyn awr hefyd .carousel-item.
    • Ar gyfer rheolaethau blaenorol/nesaf, .carousel-control.rightac .carousel-control.leftmaent yn awr .carousel-control-nextac .carousel-control-prev, sy'n golygu nad oes angen dosbarth sylfaen penodol arnynt mwyach.
  • Wedi dileu'r holl steilio ymatebol, gan ohirio i gyfleustodau (ee, dangos capsiynau ar olygfannau penodol) ac arddulliau arfer yn ôl yr angen.
  • Mae delwedd wedi'i dileu yn gwrthwneud delweddau mewn eitemau carwsél, gan ohirio i gyfleustodau.
  • Wedi addasu'r enghraifft Carousel i gynnwys y marcio a'r arddulliau newydd.

Byrddau

  • Cefnogaeth wedi'i dynnu ar gyfer byrddau nythu â steil. Mae pob arddull bwrdd bellach wedi'i etifeddu yn v4 ar gyfer detholwyr symlach.
  • Ychwanegwyd amrywiad tabl gwrthdro.

Cyfleustodau

  • Arddangos, cudd, a mwy:
    • Wedi gwneud cyfleustodau arddangos yn ymatebol (ee, .d-nonea d-{sm,md,lg,xl}-none).
    • Gollwng y rhan fwyaf o .hidden-*gyfleustodau ar gyfer cyfleustodau arddangos newydd . Er enghraifft, yn lle .hidden-sm-up, defnyddiwch .d-sm-none. Wedi ail- .hidden-printenwi'r cyfleustodau i ddefnyddio'r cynllun enwi cyfleustodau arddangos. Mwy o wybodaeth o dan yr adran Cyfleustodau Ymatebol ar y dudalen hon.
    • Ychwanegwyd .float-{sm,md,lg,xl}-{left,right,none}dosbarthiadau ar gyfer fflotiau ymatebol a'u tynnu .pull-lefta .pull-rightchan nad oes eu hangen .float-lefta .float-right.
  • Math:
    • Ychwanegwyd amrywiadau ymatebol i'n dosbarthiadau alinio testun .text-{sm,md,lg,xl}-{left,center,right}.
  • Aliniad a bylchau:
  • Diweddarwyd Clearfix i ollwng cefnogaeth ar gyfer fersiynau porwr hŷn.

Mixins rhagddodiad gwerthwr

Mae cymysgeddau rhagddodiad gwerthwr Bootstrap 3 , a anghymeradwywyd yn v3.2.0, wedi'u dileu yn Bootstrap 4. Gan ein bod yn defnyddio Autoprefixer , nid oes eu hangen mwyach.

Wedi dileu'r cymysgeddau canlynol : 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-property, transition-timing-function,transition-transformtranslatetranslate3duser-select

Dogfennaeth

Derbyniodd ein dogfennaeth uwchraddiad cyffredinol hefyd. Dyma'r isel i lawr:

  • Rydyn ni'n dal i ddefnyddio Jekyll, ond mae gennym ni ategion yn y gymysgedd:
    • bugify.rbyn cael ei ddefnyddio i restru'r cofnodion ar ein tudalen chwilod porwr yn effeithlon.
    • example.rbyn fforch arfer o'r highlight.rbategyn rhagosodedig, gan ganiatáu ar gyfer trin enghraifft-cod haws.
    • callout.rbyn fforch arfer tebyg o hynny, ond wedi'i gynllunio ar gyfer ein galwadau dogfennau arbennig.
    • Defnyddir jekyll-toc i gynhyrchu ein tabl cynnwys.
  • Mae holl gynnwys docs wedi'i ailysgrifennu yn Markdown (yn lle HTML) i'w olygu'n haws.
  • Mae tudalennau wedi'u had-drefnu ar gyfer cynnwys symlach a hierarchaeth haws mynd atynt.
  • Fe symudon ni o CSS rheolaidd i SCSS i fanteisio'n llawn ar newidynnau Bootstrap, cymysgeddau, a mwy.

Cyfleustodau ymatebol

Mae'r holl @screen-newidynnau wedi'u dileu yn v4.0.0. Defnyddiwch y cymysgeddau media-breakpoint-up(), media-breakpoint-down(), neu Sass neu'r map Sass yn lle hynny.media-breakpoint-only()$grid-breakpoints

Mae ein dosbarthiadau cyfleustodau ymatebol wedi'u dileu i raddau helaeth o blaid displaycyfleustodau penodol.

  • Mae'r .hiddena .showdosbarthiadau wedi'u dileu oherwydd eu bod yn gwrthdaro â dulliau $(...).hide()a $(...).show()dulliau jQuery. Yn lle hynny, ceisiwch toglo'r [hidden]nodwedd neu ddefnyddio arddulliau mewnol fel style="display: none;"a style="display: block;".
  • Mae pob .hidden-dosbarth wedi'i ddileu, heblaw am y cyfleustodau argraffu sydd wedi'u hailenwi.
    • Wedi'i dynnu o 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
    • Wedi'i dynnu o 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
  • Nid yw cyfleustodau argraffu bellach yn dechrau gyda .hidden-neu .visible-, ond gyda .d-print-.
    • Hen enwau: .visible-print-block, .visible-print-inline, , .visible-print-inline-block,.hidden-print
    • Dosbarthiadau newydd: .d-print-block, .d-print-inline, , .d-print-inline-block,.d-print-none

Yn hytrach na defnyddio .visible-*dosbarthiadau penodol, rydych chi'n gwneud elfen yn weladwy trwy beidio â'i chuddio ar y maint sgrin hwnnw. Gallwch gyfuno un .d-*-nonedosbarth ag un .d-*-blockdosbarth i ddangos elfen yn unig ar gyfwng penodol o feintiau sgrin (ee .d-none.d-md-block.d-xl-noneyn dangos yr elfen ar ddyfeisiau canolig a mawr yn unig).

Sylwch fod y newidiadau i'r torbwyntiau grid yn v4 yn golygu y bydd angen i chi fynd un torbwynt yn fwy i gael yr un canlyniadau. Nid yw'r dosbarthiadau cyfleustodau ymatebol newydd yn ceisio darparu ar gyfer achosion llai cyffredin lle na ellir mynegi gwelededd elfen fel un ystod gyffiniol o feintiau porth golygfa; yn lle hynny bydd angen i chi ddefnyddio CSS personol mewn achosion o'r fath.