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.
Gan symud o Beta 3 i'n datganiad v4.0 sefydlog, nid oes unrhyw newidiadau torri, ond mae rhai newidiadau nodedig.
-
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
, anone
. Ychwanegodd stabl v4flex
,inline-flex
,table
,table-row
, atable-cell
. -
Rendro rhagolwg print sefydlog ar draws porwyr gydag arddulliau argraffu newydd sy'n nodi
@page
size
.
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.
$thumbnail-transition
Wedi 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_modules
ffolder, dylech addasu eich llif gwaith.
-
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'rdisabled
priodoledd (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-image
s ar flychau ticio ffurflenni arferol a radios. Yn flaenorol, roedd gan yr elfen sydd bellach wedi'i dileu.custom-control-indicator
liw 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::before
ar gyfer y llenwad a'r graddiant ac.custom-control-label::after
mae'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'rdata
priodoledd ar gyfer ymddygiadau JS yn unig ac yn dibynnu ar.btn-group-toggle
ddosbarth newydd ar gyfer steilio. -
Wedi'i ddileu
.col-form-legend
o blaid gwelliant ychydig.col-form-label
. Fel hyn.col-form-label-sm
a.col-form-label-lg
gellir ei ddefnyddio ar<legend>
elfennau yn rhwydd. -
Derbyniodd mewnbynnau ffeil personol newid i'w
$custom-file-text
newidyn Sass. Nid yw'n fap Sass wedi'i nythu bellach ac erbyn hyn dim ond un llinyn sy'n pweru - yBrowse
botwm gan mai hwnnw bellach yw'r unig ffug-elfen a gynhyrchir o'n Sass. Daw'rChoose file
testun yn awr o'r.custom-file-label
.
-
Mae ategion grŵp mewnbwn bellach yn benodol i'w lleoliad mewn perthynas â mewnbwn. Rydym wedi gollwng
.input-group-addon
ac.input-group-btn
ar gyfer dau ddosbarth newydd,.input-group-prepend
a.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-group
ac nid ar yr elfennau ffurf unigol.
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.
- Newidyn wedi'i dynnu
$badge-color
a'i ddefnydd ar.badge
. Rydym yn defnyddio swyddogaeth cyferbyniad lliw i ddewis yncolor
seiliedig ar ybackground-color
, felly mae'r newidyn yn ddiangen. grayscale()
Swyddogaeth wedi'i hail-enwigray()
er mwyn osgoi gwrthdaro âgrayscale
hidlydd brodorol CSS.- Wedi'i ailenwi
.table-inverse
,.thead-inverse
, ac.thead-default
i.*-dark
a.*-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-responsive
rydych chi wedi bod yn ei ddefnyddio yn debycach i.table-responsive-md
. Gallwch nawr ddefnyddio.table-responsive
neu.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-label
dosbarth a oedd wedi'i ganoli'n fertigol a<label>
gyda'i fewnbwn cysylltiedig mewn gosodiadau ffurf llorweddol. - Wedi newid y
color-yiq
cymysgedd a oedd yn cynnwys yrcolor
eiddo i swyddogaeth sy'n dychwelyd gwerth, sy'n eich galluogi i'w ddefnyddio ar gyfer unrhyw eiddo CSS. Er enghraifft, yn llecolor-yiq(#000)
, byddech chi'n ysgrifennucolor: color-yiq(#000);
.
- Cyflwyno
pointer-events
defnydd newydd o foddau. Mae'r allanol.modal-dialog
yn mynd trwy ddigwyddiadau agpointer-events: none
ar gyfer trin clic wedi'i deilwra (gan ei gwneud hi'n bosibl gwrando ar.modal-backdrop
unrhyw gliciau), ac yna'n ei wrthweithio ar gyfer y gwir.modal-content
gydapointer-events: auto
.
Dyma'r eitemau tocyn mawr y byddwch am fod yn ymwybodol ohonynt wrth symud o v3 i v4.
- 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.
- 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
px
irem
fel 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
14px
o16px
. - Haenau grid wedi'u hailwampio i ychwanegu pumed opsiwn (yn mynd i'r afael â dyfeisiau llai ar
576px
ac oddi tano) a thynnu'r-xs
mewnfodiad 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.json
yr 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.
- 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
sm
haen grid newydd isod768px
ar gyfer mwy o reolaeth gronynnog. Mae gennym ni nawrxs
,sm
,md
,lg
, axl
. Mae hyn hefyd yn golygu bod pob haen wedi'i tharo i fyny un lefel (felly.col-md-6
mae v3 nawr.col-lg-6
yn v4). xs
mae dosbarthiadau grid wedi'u haddasu i sicrhau nad oes angen i'r mewnddos gynrychioli'n fwy cywir eu bod yn dechrau cymhwyso arddulliau armin-width: 0
werth 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.
- Ychwanegwyd
- 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-ready
mixin prep ac amake-col
i osod yflex
acmax-width
ar 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 â
12
nhw ar eu lled mwyaf. - Mae torbwyntiau grid a lled cynwysyddion bellach yn cael eu trin trwy fapiau Sass (
$grid-breakpoints
a$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) { ... }
.
- 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:
- y fersiwn i fyny'r afon o Glyphicons
- Octicons
- Ffont Awesome
- Gweler y dudalen Ymestyn am restr o ddewisiadau eraill. Oes gennych chi awgrymiadau ychwanegol? Os gwelwch yn dda agor rhifyn neu PR.
- Wedi gollwng yr ategyn Affix jQuery.
- Rydym yn argymell defnyddio
position: sticky
yn lle hynny. Gweler y cofnod HTML5 Please am fanylion ac argymhellion polyfill penodol. Un awgrym yw defnyddio@supports
rheol ar gyfer ei gweithredu (ee,@supports (position: sticky) { ... }
)/ - Pe baech yn defnyddio Affix i gymhwyso arddulliau ychwanegol nad ydynt
position
yn 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 .
- Rydym yn argymell defnyddio
- 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.
Mae'r rhestr hon yn amlygu newidiadau allweddol fesul cydran rhwng v3.xx a v4.0.0.
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-box
newid, symud o em
unedau rem
ar lawer o elfennau, arddulliau cyswllt, a llawer o ailosodiadau elfen ffurf.
- Wedi symud yr holl
.text-
gyfleustodau i'r_utilities.scss
ffeil. - Wedi'i ollwng
.page-header
oherwydd, ar wahân i'r ffin, gellir cymhwyso ei holl arddulliau trwy gyfleustodau. .dl-horizontal
wedi ei ollwng. Yn lle hynny, defnyddiwch.row
ymlaen<dl>
a defnyddiwch ddosbarthiadau colofn grid (neu gymysgeddau) ar ei<dt>
a<dd>
phlant.<blockquote>
Mae steilio personol wedi symud i ddosbarthiadau -.blockquote
a'r.blockquote-reverse
addasydd..list-inline
yn awr yn mynnu bod ei eitemau rhestr plant yn cael y.list-inline-item
dosbarth newydd yn berthnasol iddynt.
- Wedi'i ail-enwi
.img-responsive
i.img-fluid
. - Ailenwyd
.img-rounded
i.rounded
- Ailenwyd
.img-circle
i.rounded-circle
- 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. - Nid oes angen elfen lapio ar dablau ymatebol mwyach. Yn lle hynny, rhowch y
.table-responsive
dde ar y<table>
. - Wedi'i ail-enwi
.table-condensed
i.table-sm
am gysondeb. - Ychwanegwyd
.table-inverse
opsiwn newydd. - Addasyddion penawdau tabl wedi'u hychwanegu:
.thead-default
a.thead-inverse
. - Dosbarthiadau cyd-destunol wedi'u hail-enwi i gael
.table-
- rhagddodiad. Felly.active
,.success
,.warning
,.danger
ac.info
i.table-active
,.table-success
,.table-warning
,.table-danger
a.table-info
.
- Mae elfen wedi'i symud yn ailosod i'r
_reboot.scss
ffeil. - Wedi'i ail-enwi
.control-label
i.col-form-label
. - Wedi'i ailenwi
.input-lg
ac.input-sm
i.form-control-lg
a.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-block
a'i ddisodli ag.form-text
ar gyfer testun cymorth lefel bloc. Ar gyfer testun cymorth mewnol ac opsiynau hyblyg eraill, defnyddiwch ddosbarthiadau cyfleustodau fel.text-muted
. - Gollwng
.radio-inline
a.checkbox-inline
. - Cyfunol
.checkbox
ac.radio
i mewn.form-check
a'r dosbarthiadau amrywiol.form-check-*
. - Ffurfiau llorweddol wedi'u hailwampio:
- Gollwng
.form-horizontal
gofyniad y dosbarth. .form-group
nid yw bellach yn cymhwyso arddulliau o'r.row
via mixin, felly.row
mae ei angen bellach ar gyfer cynlluniau grid llorweddol (ee,<div class="form-group row">
).- Ychwanegwyd
.col-form-label
dosbarth newydd at labeli canol fertigol gydag.form-control
s. - Ychwanegwyd newydd
.form-row
ar gyfer cynlluniau ffurf gryno gyda'r dosbarthiadau grid (cyfnewidiwch.row
am.form-row
a mynd).
- Gollwng
- Ychwanegwyd cefnogaeth ffurflenni arfer (ar gyfer blychau ticio, radios, dewis, a mewnbynnau ffeil).
- Disodlwyd
.has-error
,.has-warning
, a.has-success
dosbarthiadau gyda dilysiad ffurflen HTML5 trwy CSS:invalid
a:valid
ffug-ddosbarthiadau. - Wedi'i ail-enwi
.form-control-static
i.form-control-plaintext
.
- Wedi'i ail-enwi
.btn-default
i.btn-secondary
. - Gollwng y
.btn-xs
dosbarth yn gyfan gwbl fel.btn-sm
sy'n gymesur yn llawer llai na v3's. - Mae nodwedd botwm
button.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:disabled
fel y mae IE9+ yn cefnogi:disabled
. Fodd bynnagfieldset[disabled]
, mae'n dal i fod yn angenrheidiol oherwydd bod setiau maes anabl brodorol yn dal i fod yn bygi yn IE11 .
- 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-xs
dosbarth 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 steiliau cwymplen a marcio i ddarparu cefnogaeth hawdd, adeiledig ar gyfer eitemau cwymplen sy'n seiliedig arnynt
<a>
.<button>
- Wedi'i ail-enwi
.divider
i.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::after
ar.dropdown-toggle
.
- Ychwanegwyd
576px
torbwynt grid newydd felsm
, sy'n golygu bod cyfanswm o bum haen erbyn hyn (xs
,sm
,md
,lg
, axl
). - 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-4
a.col-4.pull-8
, byddech chi'n defnyddio.col-8.order-2
a.col-4.order-1
. - Ychwanegwyd dosbarthiadau cyfleustodau flexbox ar gyfer system grid a chydrannau.
- Ailysgrifennu'r gydran gyda flexbox.
- Wedi'i ddisodli
a.list-group-item
gan ddosbarth penodol,.list-group-item-action
, ar gyfer arddull dolen a fersiynau botwm o eitemau grŵp rhestr. - Dosbarth ychwanegol
.list-group-flush
i'w ddefnyddio gyda chardiau.
- Ailysgrifennu'r gydran gyda flexbox.
- O ystyried y symud i flexbox, mae'n debygol y bydd aliniad yr eiconau diswyddo yn y pennyn wedi torri 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
remote
opsiwn (y gellid ei ddefnyddio i lwytho a chwistrellu cynnwys allanol yn awtomatig i fodel) a'rloaded.bs.modal
digwyddiad 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.nav
s,.nav-item
s, ac.nav-link
s. 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
.navbar
dosbarth 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-default
yn awr.navbar-light
, er.navbar-dark
yn aros yr un fath. Mae angen un o'r rhain ar bob bar llywio. Fodd bynnag, nid yw'r dosbarthiadau hyn bellach yn gosodbackground-color
s; yn hytrach maent yn ei hanfod yn effeithio yn unigcolor
.- 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-toggle
yn awr.navbar-toggler
ac mae ganddo wahanol arddulliau a marcio mewnol (dim mwy o dri<span>
).- Gollwng y
.navbar-form
dosbarth yn gyfan gwbl. Nid yw'n angenrheidiol mwyach; yn lle hynny, dim ond defnyddio.form-inline
a chymhwyso cyfleustodau ymyl yn ôl yr angen. - Nid yw Navbars bellach yn cynnwys
margin-bottom
neuborder-radius
yn ddiofyn. Defnyddiwch gyfleustodau yn ôl yr angen. - Mae'r holl enghreifftiau sy'n cynnwys bariau llywio wedi'u diweddaru i gynnwys marcio newydd.
- Ailysgrifennu'r gydran gyda flexbox.
- Mae angen dosbarthiadau penodol (
.page-item
,.page-link
) yn awr ar ddisgynyddion.pagination
a - Gollyngwyd y
.pager
gydran yn gyfan gwbl gan nad oedd fawr mwy na botymau amlinellol wedi'u haddasu.
- Mae angen dosbarth penodol,
.breadcrumb-item
, yn awr ar ddisgynyddion.breadcrumb
a
- Wedi'i ailenwi
.label
i.badge
i ddadamwys o'r<label>
elfen. - Gollwng y
.badge
gydran gan ei fod bron yn union yr un fath â labeli. Defnyddiwch y.badge-pill
addasydd ynghyd â'r gydran label yn lle hynny ar gyfer yr edrychiad crwn hwnnw. - 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-default
wedi'i ollwng a'i.badge-secondary
ychwanegu i gyfateb â dosbarthiadau addasu cydrannau a ddefnyddir mewn mannau eraill.
Wedi'i ollwng yn gyfan gwbl ar gyfer y gydran cerdyn newydd.
.panel
i.card
, sydd bellach wedi'i adeiladu gyda flexbox..panel-default
tynnu a dim un yn ei le..panel-group
tynnu a dim un yn ei le..card-group
nid yw'n disodli, mae'n wahanol..panel-heading
i.card-header
.panel-title
i.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-body
i.card-body
.panel-footer
i.card-footer
.panel-primary
,.panel-success
, ,.panel-info
,.panel-warning
, ac.panel-danger
wedi'u gollwng ar gyfer.bg-
,.text-
, , a.border
chyfleustodau a gynhyrchwyd o'n$theme-colors
map Sass.
- Disodlwyd dosbarthiadau cyd-destunol
.progress-bar-*
gyda.bg-*
chyfleustodau. Er enghraifft,class="progress-bar progress-bar-danger"
yn dod ynclass="progress-bar bg-danger"
. - Wedi'i ddisodli
.active
am 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.right
maent yn awr.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, a.carousel-item-right
. .item
yn awr hefyd.carousel-item
.- Ar gyfer rheolaethau blaenorol/nesaf,
.carousel-control.right
ac.carousel-control.left
maent yn awr.carousel-control-next
ac.carousel-control-prev
, sy'n golygu nad oes angen dosbarth sylfaen penodol arnynt mwyach.
- Ar gyfer eitemau carwsél,
- 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.
- 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.
- Arddangos, cudd, a mwy:
- Wedi gwneud cyfleustodau arddangos yn ymatebol (ee,
.d-none
ad-{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-print
enwi'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-left
a.pull-right
chan nad oes eu hangen.float-left
a.float-right
.
- Wedi gwneud cyfleustodau arddangos yn ymatebol (ee,
- Math:
- Ychwanegwyd amrywiadau ymatebol i'n dosbarthiadau alinio testun
.text-{sm,md,lg,xl}-{left,center,right}
.
- Ychwanegwyd amrywiadau ymatebol i'n dosbarthiadau alinio testun
- Aliniad a bylchau:
- Ychwanegwyd ymyl ymatebol newydd a chyfleustodau padin ar gyfer pob ochr, ynghyd â dwylo byr fertigol a llorweddol.
- Ychwanegwyd llwyth cychod o gyfleustodau flexbox .
- Wedi gollwng
.center-block
ar gyfer y.mx-auto
dosbarth newydd.
- Diweddarwyd Clearfix i ollwng cefnogaeth ar gyfer fersiynau porwr hŷn.
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-transform
translate
translate3d
user-select
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.rb
yn cael ei ddefnyddio i restru'r cofnodion ar ein tudalen chwilod porwr yn effeithlon.example.rb
yn fforch arfer o'rhighlight.rb
ategyn rhagosodedig, gan ganiatáu ar gyfer trin enghraifft-cod haws.callout.rb
yn fforch arfer tebyg o hynny, ond wedi'i gynllunio ar gyfer ein galwadau dogfennau arbennig.markdown-block.rb
yn cael ei ddefnyddio i wneud pytiau Markdown o fewn elfennau HTML fel tablau.- 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.
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 display
cyfleustodau penodol.
- Mae'r
.hidden
a.show
dosbarthiadau 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 felstyle="display: none;"
astyle="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
- Wedi'i dynnu o v3:
- 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
- Hen enwau:
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-*-none
dosbarth ag un .d-*-block
dosbarth i ddangos elfen yn unig ar gyfwng penodol o feintiau sgrin (ee .d-none.d-md-block.d-xl-none
yn 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.