v4 އަށް މައިގްރޭޓް ކުރަނީ

ބޫޓްސްޓްރެޕް 4 އަކީ މުޅި ޕްރޮޖެކްޓްގެ ބޮޑު ރީރައިޓެކެވެ. އެންމެ ފާހަގަކޮށްލެވޭ ބަދަލުތައް ތިރީގައި ޚުލާޞާކޮށްފައިވާއިރު، އޭގެ ފަހުން ކަމާބެހޭ ކޮމްޕޯނެންޓްތަކަށް އިތުރު ވަކި ބަދަލުތަކެއް ގެނެސްފައިވެއެވެ.

ސްޓޭބަލް ބަދަލުތަކެއް

ބީޓާ 3 އިން އަޅުގަނޑުމެންގެ ސްޓޭބަލް v4.x ރިލީޒަށް ބަދަލުވުމުން، އެއްވެސް ބްރޭކިން ބަދަލެއް ނާންނަ ނަމަވެސް ފާހަގަކޮށްލެވޭ ބައެއް ބަދަލުތައް އެބަހުއްޓެވެ.

ޕްރިންޓް ކުރުން

• ޕްރިންޓް ޔުޓިލިޓީސް ފަޅައިގެން ގޮސްފައިވާކަން ހައްލުކޮށްފިއެވެ. ކުރިން .d-print-*ކްލާހެއް ބޭނުން ކުރުމަކީ ހީވެސް ނުކުރާ ގޮތަކަށް އެހެން .d-*ކްލާހެއް އޯވަރރޫލް ވާނެ ކަމެކެވެ. މިހާރު، އެމީހުން އަޅުގަނޑުމެންގެ އެހެން ޑިސްޕްލޭ ޔުޓިލިޓީތަކާ އެއްގޮތްވެ، ހަމައެކަނި އެ މީޑިއާއަށް އަމަލުކުރަނީ ( @media print).

• އެހެން ޔުޓިލިޓީތަކާ އެއްގޮތަށް ލިބެންހުރި ޕްރިންޓް ޑިސްޕްލޭ ޔުޓިލިޓީސް ފުޅާކޮށްފައިވުން. ބީޓާ 3 އަހަރުން މަތީގެ މީހުންނަށް އެކަނި ހުރީ block, inline-block, inline, އަދި none. ސްޓޭބަލް v4 އިތުރުކޮށްފައިވަނީ flex, inline-flex, table, table-row, އަދި table-cell.

• ކަނޑައެޅިފައިވާ އާ ޕްރިންޓް ސްޓައިލްތަކާއެކު ބްރައުޒާތަކުގެ މެދުގައި ޕްރިންޓް ޕްރިވިއު ރެންޑަރިންގ ހައްލުކޮށްފިއެވެ @page size.

ބީޓާ 3 އަށް ބަދަލު އަންނަނީ

ބީޓާ 2 އަށް އަޅުގަނޑުމެންގެ ބްރޭކިން ބަދަލުތަކުގެ ބޮޑު ބައެއް ބީޓާ ފޭސްގައި ފެނުނު ނަމަވެސް، އަދިވެސް އަޅުގަނޑުމެންގެ އަތުގައި ބީޓާ 3 ރިލީޒްގައި ޙައްލުކުރަންޖެހޭ މަދު ބަދަލުތަކެއް އެބަހުއްޓެވެ. މި ބަދަލުތައް އަންނަނީ ބީޓާ 2 އިން ނުވަތަ ބޫޓްސްޓްރެޕްގެ އެއްވެސް ދުވަސްވީ ވަރޝަނަކުން ބީޓާ 3 އަށް އަޕްޑޭޓް ކުރަމުންދާނަމަ އެވެ.

ވަކި ބާވަތަކަށް ނުފެތޭ

• ބޭނުން ނުކުރާ $thumbnail-transitionވެރިއޭބަލް ނައްތާލެވިއްޖެއެވެ. އަޅުގަނޑުމެން އެއްވެސް ކަމެއް ޓްރާންސިޝަން ނުކުރަމުން ދިޔައީ، އެހެންވީމާ އެއީ ހަމައެކަނި އިތުރު ކޯޑެއް.
• npm ޕެކޭޖުގައި އަޅުގަނޑުމެންގެ ސޯސް އަދި ޑިސްޓް ފައިލްތައް ނޫން އެހެން ފައިލްތަކެއް މިހާރު ނުހިމެނޭ؛ އެމީހުންނަށް ބަރޯސާވެ، އަޅުގަނޑުމެންގެ ސްކްރިޕްޓްތައް node_modulesފޯލްޑަރ މެދުވެރިކޮށް ހިންގަމުން ދިޔަނަމަ، ތިޔަބޭފުޅުންގެ ވޯކްފްލޯ އެޑެޕްޓް ކުރަން ޖެހެއެވެ.

ފޯމުތައް

• ކަސްޓަމް އަދި ޑިފޯލްޓް ޗެކްބޮކްސް އާއި ރޭޑިއޯ ވެސް އަލުން ލިޔެފައިވެއެވެ. މިހާރު، ދެމީހުންވެސް މެޗިންގ އެޗްޓީއެމްއެލް ސްޓްރަކްޗަރ (އައުޓަރ <div>ވިތު ސިބްލިންގ <input>އަދި <label>) އަދި އެއް ލޭއައުޓް ސްޓައިލްސް (ސްޓޭކްޑް ޑިފޯލްޓް، އިންލައިން ވިތު މޮޑިފައިއަރ ކްލާސް) ހުރެއެވެ. މިއީ އިންޕުޓްގެ ހާލަތަށް ބަލައިގެން ލޭބަލް ސްޓައިލްކޮށް، disabledއެޓްރިބިއުޓަށް ސަޕޯޓް ފަސޭހަކޮށްދީ (ކުރިން ބެލެނިވެރި ކްލާހެއް ބޭނުންވާ) އަދި އަޅުގަނޑުމެންގެ ފޯމް ވެލިޑޭޝަނަށް ރަނގަޅަށް ސަޕޯޓް ކުރެވޭނެ ގޮތެކެވެ.

  މިކަމުގެ ބައެއްގެ ގޮތުގައި، އަޅުގަނޑުމެން މިވަނީ background-imageކަސްޓަމް ފޯމް ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތަކުގައި ގިނަ s މެނޭޖްކުރުމަށް ސީއެސްއެސް ބަދަލުކޮށްފައެވެ. ކުރިން މިހާރު ނައްތާލާފައިވާ .custom-control-indicatorއެލިމެންޓްގައި ބެކްގްރައުންޑް ކުލައާއި ގްރޭޑިއަންޓް އަދި އެސްވީޖީ އައިކޮން ހުއްޓެވެ. ބެކްގްރައުންޑް ގްރޭޑިއަންޓް ކަސްޓަމައިޒް ކުރުމުގެ މާނައަކީ އެންމެ އެއްޗެއް ބަދަލު ކުރަން ޖެހޭ ކޮންމެ ފަހަރަކު އެ ހުރިހާ އެއްޗެއް ބަދަލު ކުރުމެވެ. މިހާރު، އަޅުގަނޑުމެންނަށް ލިބިފައިވަނީ .custom-control-label::beforeފިލް އަދި ގްރޭޑިއަންޓަށްޓަކައި އަދި .custom-control-label::afterއައިކޮން ހެންޑްލްސް ކުރުމެވެ.

  ކަސްޓަމް ޗެކް އިންލައިން ހެދުމަށްޓަކައި، އެޑް ކުރާށެވެ .custom-control-inline.

• އިންޕުޓް ބެސްޓް ބަޓަން ގްރޫޕްތަކަށް އަޕްޑޭޓް ކުރެވިފައިވާ ސެލެކްޓަރ. [data-toggle="buttons"] { }ސްޓައިލާއި ސުލޫކަށް ދިނުމުގެ ބަދަލުގައި އަޅުގަނޑުމެން އެޓްރިބިއުޓް ބޭނުންކުރަނީ ހަމައެކަނި ޖޭއެސް ސުލޫކުތަކަށް ކަމަށާއި ސްޓައިލިންގ އަށް dataބަރޯސާވަނީ އާ ކްލާހަކަށް ކަމަށެވެ..btn-group-toggle

• އުނިކޮށްފައިވަނީ .col-form-legendކުޑަކޮށް ރަނގަޅު ކުރެވިފައިވާ ފަރާތެއްގެ ފަރާތުންނެވެ .col-form-label. މިގޮތަށް .col-form-label-smއަދި ފަސޭހައިން އުފެއްދުންތަކުގެ .col-form-label-lgމައްޗަށް ބޭނުންކުރެވިދާނެއެވެ .<legend>

• ކަސްޓަމް ފައިލް އިންޕުޓްތަކަށް އެމީހުންގެ $custom-file-textސާސް ވެރިއޭބަލްއަށް ބަދަލެއް ލިބުނެވެ. އެއީ މިހާރު ނެސްޓް ކޮށްފައިވާ ސާސް މެޕެއް ނޫން އަދި މިހާރު ޕަވަރ ކުރަނީ ހަމައެކަނި އެއް ސްޓްރިންގް އަށް- އެއީ Browseބަޓަން ކަމުން އެއީ މިހާރު އަހަރެމެންގެ ސާސް އިން އުފައްދާ ހަމައެކަނި ސޫޑޯ އެލިމެންޓެވެ. އެ Choose fileލިޔުން މިހާރު އަންނަނީ .custom-file-label.

އިންޕުޓް ގްރޫޕްތަކެވެ

• އިންޕުޓް ގްރޫޕް އެޑޮންތަކަކީ މިހާރު އިންޕުޓަކަށް ނިސްބަތްކޮށް އެތަކެތި ޕްލޭސްމަންޓަށް ޚާއްޞަ އެއްޗެކެވެ. އަޅުގަނޑުމެން ދޫކޮށްލާފައި މިވަނީ .input-group-addonއަދި .input-group-btnއާ ދެ ކްލާހަކަށް، .input-group-prependއަދި .input-group-append. އަޅުގަނޑުމެންގެ ސީއެސްއެސްގެ ބޮޑު ބައެއް ފަސޭހަކޮށް، މިހާރު ސާފުކޮށް އެޕެންޑެއް ނުވަތަ ޕްރީޕެންޑެއް ބޭނުން ކުރަން ޖެހެއެވެ. އެޕެންޑް ނުވަތަ ޕްރީޕެންޑް އެއްގެ ތެރޭގައި، ތިބާގެ ބަޓަންތައް އެހެން ތަނެއްގައި ހުންނަ ގޮތަށް ބަހައްޓާ، އެކަމަކު ޓެކްސްޓް އޮޅާލާށެވެ .input-group-text.

• ވެލިޑޭޝަން ސްޓައިލްތަކަށް މިހާރު ސަޕޯޓް ކުރެވޭއިރު، އެތައް އިންޕުޓެއް ވެސް ސަޕޯޓް ކުރެވެއެވެ (ގްރޫޕަކަށް ވެލިޑޭޓް ކުރެވޭނީ އެންމެ އިންޕުޓެއް ނަމަވެސް) އެވެ.

• ސައިޒިންގ ކްލާސްތައް ހުންނަންވާނީ ބެލެނިވެރިޔާގެ މައްޗަށް .input-groupކަމަށާއި ވަކިވަކި ފޯމް އެލިމެންޓްތަކުގެ މައްޗަށް ނޫން ކަމަށެވެ.

ބީޓާ 2 އަށް ބަދަލު އަންނަނީ

ބީޓާގައި ހުންނައިރު އަޅުގަނޑުމެންގެ އަމާޒަކީ އެއްވެސް ބްރޭކިން ބަދަލެއް ނެތުމެވެ. ނަމަވެސް އަބަދު ކަންކަން ރާވާފައިވާ ގޮތަށް ނުހިނގައެވެ. ތިރީގައި މިވަނީ ބީޓާ 1 އިން ބީޓާ 2 އަށް ބަދަލުވާއިރު ވިސްނަންޖެހޭ ބްރޭކިން ބަދަލުތަކެވެ.

ފަޅައިގެން ދިއުމެވެ

• ރިމޫވްޑް $badge-colorވެރިއޭބަލް އާއި އޭގެ ބޭނުން ކުރުން .badge. colorއަޅުގަނޑުމެން ކަލަރ ކޮންޓްރެސްޓް ފަންކްޝަނެއް ބޭނުންކުރަނީ އަށް ބިނާކޮށް އެއް ހޮވަން background-color، އެހެންކަމުން ވެރިއޭބަލް ކޮންމެހެން ބޭނުން ނުވާތީއެވެ.
• ސީއެސްއެސް ނެޓިވް ފިލްޓަރާއި ކޮންފްލިކްޓް ފަޅާނުލުމަށްޓަކައި grayscale()ފަންކްޝަން އަށް ނަން ބަދަލުކޮށްފި އެވެ.gray()grayscale
• ނަން ބަދަލުކޮށްފައިވަނީ .table-inverse, .thead-inverse, އަދި .thead-defaultއަށް .*-darkއަދި އަށް .*-light، އެހެން ތަންތަނުގައި ބޭނުންކުރާ އަޅުގަނޑުމެންގެ ކުލަ ސްކީމްތަކާ އެއްގޮތަށެވެ.
• ރެސްޕޮންސިވް ޓޭބަލްތަކުން މިހާރު ކޮންމެ ގްރިޑް ބްރޭކްޕޮއިންޓަކަށް ކްލާސްތައް އުފައްދައެވެ. މިއީ ބީޓާ 1 އިން ފަޅައިގެންދާ އެއްޗެއް ކަމުގައި ވާތީ .table-responsiveތިބާ ބޭނުން ކުރަމުން އަންނަނީ މާ ވައްތަރު .table-responsive-mdކަމެވެ. މިހާރު ބޭނުން ކުރެވިދާނެ .table-responsiveނުވަތަ .table-responsive-{sm,md,lg,xl}ބޭނުންވާ ގޮތަށް.
• ޕެކޭޖް މެނޭޖަރު ބަދަލުތަކަށް (އެބަހީ، ޔާން ނުވަތަ npm) ޑިޕްރެކޭޓް ކުރެވިފައިވާތީ ބަވަރ ސަޕޯޓް ދޫކޮށްލާފައިވެއެވެ. ތަފްސީލު ހޯދުމަށް bower/bower#2298 ބައްލަވާށެވެ .
• ބޫޓްސްޓްރެޕް އަށް އަދިވެސް ޖީކުއަރީ 1.9.1 ނުވަތަ އެއަށްވުރެ މަތީގެ އެއްޗެއް ބޭނުންވާ ނަމަވެސް v3.x އިން ސަޕޯޓްކުރާ ބްރައުޒާތަކަކީ ބޫޓްސްޓްރެޕް ސަޕޯޓްކުރާ ބްރައުޒާތަކަށް ވާތީ ޕްލަސް v3.x ގައި ބައެއް ސެކިއުރިޓީ ފިކްސްތައް ހުރުމުން ވަރޝަން 3.x ބޭނުން ކުރުމަށް ލަފާދެމެވެ.
• ބޭނުން ނުކުރާ .form-control-labelކްލާސް އުނިކޮށްފިއެވެ. މި ކްލާސްގެ ބޭނުން ކުރިނަމަ، އެއީ ހޮރައިޒޮންޓަލް ފޯމް ލޭއައުޓްތަކުގައި އޭގެ އެސޯސިއޭޓެޑް އިންޕުޓާއެކު .col-form-labelވަރުގަދަކޮށް ސެންޓަރ ކުރި ކްލާސްގެ ޑޫޕްލިކޭޓެކެވެ.<label>
• color-yiqޕްރޮޕަޓީ ހިމެނޭ މިކްސިން އިން ވެލިއުއެއް ރިޓަރން ކުރާ ފަންކްޝަނަކަށް ބަދަލުކޮށް color، އެއްވެސް ސީއެސްއެސް ޕްރޮޕަޓީއަކަށް ބޭނުން ކުރުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ. މިސާލަކަށް ގެ ބަދަލުގައި color-yiq(#000)ލިޔެވޭނެއެވެ color: color-yiq(#000);.

ހައިލައިޓްސް

• މޮޑަލްތަކުގައި އާ pointer-eventsބޭނުންތަކެއް ތައާރަފްކޮށްފި އެވެ. އައުޓަރ .modal-dialogޕާސް ތްރޫ އިވެންޓްސް ވިތު pointer-events: noneފޯރ ކަސްޓަމް ކްލިކް ހެންޑްލިންގ (މެއިކިންގ ޕޮސިބަލް ޓު ޖަސްޓް ލިސް އޮން ދަ .modal-backdropފޯރ އެނީ ކްލިކްސް)، އެންޑް ދެން ކައުންޓަރއެކްޓްސް އިޓް ފޯރ ދަ އެކްޗުއަލް .modal-contentވިތު pointer-events: auto.

ޚުލާސާ

މިއީ v3 އިން v4 އަށް ބަދަލުވާއިރު ސަމާލުވާން ބޭނުންވާނެ ބޮޑެތި ޓިކެޓް ތަކެތި.

ބްރައުޒާ ސަޕޯޓް ދިނުން

• އައިއީ8، އައިއީ9، އަދި އައިއޯއެސް 6 އަށް ސަޕޯޓް ދޫކޮށްފި އެވެ. v4 އަކީ މިހާރު ހަމައެކަނި IE10+ އަދި iOS 7+ އެވެ. އެއިން އެއްވެސް ސައިޓެއް ބޭނުންވާ ސައިޓްތަކަށް v3 ބޭނުން ކުރާށެވެ.
• އެންޑްރޮއިޑް v5.0 ލޮލީޕޮޕްގެ ބްރައުޒާ އަދި ވެބްވިއު އަށް ރަސްމީ ސަޕޯޓް އިތުރުކޮށްފި އެވެ. އެންޑްރޮއިޑް ބްރައުޒާ އާއި ވެބްވިއުގެ ކުރީގެ ވަރޝަންތަކަށް ސަޕޯޓް ކުރެވެނީ ހަމައެކަނި ނުރަސްމީ ގޮތަކަށެވެ.

ދުނިޔެއަށް އަންނަ ބަދަލުތަކެވެ

• ފްލެކްސްބޮކްސް ޑިފޯލްޓްކޮށް އެނެބަލް ކޮށްފައި ހުރެއެވެ. އާންމު ގޮތެއްގައި މިކަމުގެ މާނައަކީ ފްލޯޓްތަކާ ދުރަށް ދިއުމާއި އަޅުގަނޑުމެންގެ ކޮމްޕޯނެންޓްތައް ހުރަސްކޮށް އިތުރަށް ކުރިއަށް ދިއުމެވެ.
• އަޅުގަނޑުމެންގެ ސޯސް ސީއެސްއެސް ފައިލްތަކަށް ލެސް އިން ސާސް އަށް ބަދަލުވެއްޖެއެވެ.
• އަޅުގަނޑުމެންގެ ޕްރައިމަރީ ސީއެސްއެސް ޔުނިޓެއްގެ ގޮތުގައި އިން pxއަށް ބަދަލުވި remނަމަވެސް، ޑިވައިސް ވިއުޕޯޓްތަކަށް ޓައިޕް ސައިޒުން އަސަރު ނުކުރާތީ މީޑިއާ ކިއުއަރީތަކާއި ގްރިޑް ބިހޭވިއަރ އަށް އަދިވެސް ޕިކްސެލްތައް ބޭނުން ކުރެވެއެވެ.
• ގްލޯބަލް ފޮންޓް-ސައިޒް އިތުރުވެފައިވަނީ އިން 14pxފެށިގެން 16px.
• ފަސްވަނަ އިޚްތިޔާރެއް އިތުރުކުރުމަށް ގްރިޑް ޓިއަރސް ރީއެމްޕްކޮށް (އެޓް އަދި ތިރީގައި ހުރި ކުދި ޑިވައިސްތަކަށް އެޑްރެސްކޮށް ) އެ ކްލާސްތަކުން އިންފިކްސް 576pxނައްތާލާފައިވެއެވެ . -xsމިސާލު: .col-6.col-sm-4.col-md-3.
• އެސްސީއެސްއެސް ވެރިއޭބަލްސް މެދުވެރިކޮށް ކޮންފިގްރޭޓް ކުރެވޭ އިޚްތިޔާރުތަކުން ވަކި އިޚްތިޔާރީ ތީމް ބަދަލުކޮށްފިއެވެ (އެބަހީ، $enable-gradients: true).
• ގްރަންޓްގެ ބަދަލުގައި npm ސްކްރިޕްޓްތަކުގެ ސިލްސިލާއެއް ބޭނުން ކުރުމަށް ބިލްޑް ސިސްޓަމް އޯވަހޯލް ކޮށްފި އެވެ. ހުރިހާ ސްކްރިޕްޓެއް ބައްލަވާ package.json، ނުވަތަ ލޯކަލް ޑިވެލޮޕްމަންޓް ބޭނުންތަކަށް އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓް ރީޑްމީ ބައްލަވާށެވެ.
• ބޫޓްސްޓްރެޕްގެ ނޮން ރެސްޕޮންސިވް ބޭނުންތަކަށް މިހާރު ސަޕޯޓް ނުކުރެވެއެވެ.
• އޮންލައިން ކަސްޓަމައިޒާ ދޫކޮށްލީ އިތުރަށް ފުޅާ ސެޓަޕް ޑޮކިއުމަންޓޭޝަން އާއި ކަސްޓަމައިޒް ބިލްޑްތަކުގެ ފަރާތުންނެވެ.
• އާންމު ސީއެސްއެސް ޕްރޮޕަޓީ-ވެލިއު ޖޯޑުތަކާއި މާރޖިން/ޕެޑިންގ ސްޕޭސިންގ ޝޯޓްކަޓްތަކަށް ގިނަ އަދަދެއްގެ އާ ޔުޓިލިޓީ ކްލާސް އިތުރުކޮށްފިއެވެ.

ގްރިޑް ސިސްޓަމް

• ފްލެކްސްބޮކްސް އަށް ބަދަލުވެއްޖެއެވެ.
  • ގްރިޑް މިކްސިންސް އާއި ކުރިން ކަނޑައެޅިފައިވާ ކްލާސްތަކުގައި ފްލެކްސްބޮކްސް އަށް ސަޕޯޓް އިތުރުކޮށްފި އެވެ.
  • ފްލެކްސްބޮކްސްގެ ބައެއްގެ ގޮތުގައި، ވަރުގަދަ އަދި ހޮރައިޒޮންޓަލް އެލައިންމަންޓް ކްލާސްތަކަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ.
• އަޕްޑޭޓް ކުރެވިފައިވާ ގްރިޑް ކްލާސް ނަންތަކާއި އާ ގްރިޑް ޓިއަރ އެއް.
  • އިތުރު ގްރެނިއުލަރ ކޮންޓްރޯލް ކުރުމަށްޓަކައި ތިރީގައި އާ smގްރިޑް ޓިއަރެއް އިތުރުކޮށްފައިވެއެވެ. 768pxއަޅުގަނޑުމެންނަށް މިހާރު ލިބިފައިވަނީ xs, sm, md, lg, އަދި xl. މިކަމުގެ މާނައަކީ ވެސް ކޮންމެ ޓިއަރެއް އެއް ލެވެލްއެއްގައި ބަމްޕްކޮށްފައި އޮތް ކަމެވެ (އެހެންވީމަ .col-md-6v3 ގައި މިހާރު .col-lg-6އޮތީ v4 ގައެވެ).
  • xsގްރިޑް ކްލާސްތަކަށް ބަދަލު ގެނެސްފައިވަނީ އިންފިކްސް އިން ސްޓައިލްތައް އެޕްލައި ކުރަން ފެށޭ min-width: 0ސެޓް ޕިކްސެލް ވެލިއުއެއްގައި ނޫންކަން އިތުރަށް ޞަރީޙަކޮށް ތަމްސީލު ކުރަން ނުޖެހޭނެ ގޮތަކަށެވެ. ގެ ބަދަލުގައި .col-xs-6, އެއީ މިހާރު .col-6. އެހެން ހުރިހާ ގްރިޑް ޓިއަރެއްގައި އިންފިކްސް ބޭނުންވެއެވެ (އެބަހީ، sm).
• އަޕްޑޭޓް ކުރެވިފައިވާ ގްރިޑް ސައިޒްތަކާއި، މިކްސިންސްތަކާއި، ވެރިއޭބަލްތައް.
  • ގްރިޑް ގަޓަރުތަކުގައި މިހާރު ސާސް މެޕެއް ހުރުމުން ކޮންމެ ބްރޭކްޕޮއިންޓެއްގައި ވަކި ގަޓަރު ފުޅާމިންތަކެއް ކަނޑައެޅިދާނެ އެވެ.
  • make-col-readyޕްރެޕް މިކްސިން އެއް ބޭނުން ކުރުމަށް އަޕްޑޭޓް ކުރެވިފައިވާ ގްރިޑް މިކްސިންސް އާއި ވަކިވަކި ކޮލަމް ސައިޒިންގ އަށް އަދި make-colސެޓް ކުރުމަށް އޭ.flexmax-width
  • އާ ގްރިޑް ޓިއަރ އަށް އެކައުންޓް ކުރުމަށްޓަކައި ގްރިޑް ސިސްޓަމް މީޑިއާ ކިއުއަރީ ބްރޭކްޕޮއިންޓްތަކާއި ކޮންޓެއިނަރ ވިޑްތްތައް ބަދަލުކޮށް، ކޮލަމްތައް 12އެމީހުންގެ މެކްސް ވިޑްތްގައި އެއްވަރަކަށް ބަހާލެވޭނެކަން ކަށަވަރުކުރުން.
  • ގްރިޑް ބްރޭކްޕޮއިންޓްތަކާއި ކޮންޓެއިނަރ ވިޑްތްތައް މިހާރު ޙައްލުކުރަނީ ވަކިވަކި ވެރިއޭބަލްތަކެއްގެ ބަދަލުގައި ސާސް މެޕްސް ( $grid-breakpointsއަދި ) މެދުވެރިކޮށެވެ. $container-max-widthsމިއީ މުޅިން ވެރިއޭބަލްތަކުގެ ބަދަލުގައި @screen-*ގްރިޑް ޓިއަރސް ފުރިހަމައަށް ކަސްޓަމައިޒް ކުރެވޭނެ އެއްޗެހިތަކެކެވެ.
  • މީޑިއާގެ ސުވާލުތަކަށް ވެސް ވަނީ ބަދަލުތަކެއް އައިސްފަ އެވެ. ކޮންމެ ފަހަރަކުވެސް އެއް އަގެއްގައި އަޅުގަނޑުމެންގެ މީޑިއާ ކިއުއަރީ ޑިކްލެރޭޝަންތައް ތަކުރާރު ކުރުމުގެ ބަދަލުގައި، މިހާރު އަޅުގަނޑުމެންނަށް ލިބިފައިވަނީ @include media-breakpoint-up/down/only. މިހާރު ލިޔުމުގެ ބަދަލުގައި @media (min-width: @screen-sm-min) { ... }ލިޔެވޭނެއެވެ @include media-breakpoint-up(sm) { ... }.

ކޮމްޕޯނެންޓްސް

• ވެއްޓިފައިވާ ޕެނަލްތަކާއި، ތަމްބްނެއިލްތަކާއި، ވަޅުތައް އާ ހުރިހާ ކަމެއް ހިމެނޭ ކޮމްޕޮނެންޓަކަށް، ކާޑުތައް .
• ގްލިފިކޮންސް އައިކޮން ފޮންޓް ވައްޓާލިއެވެ. އައިކޮން ބޭނުންވާނަމަ ބައެއް ގޮތްތަކަކީ:
  • ގްލިފިކޮންސްގެ އަޕްސްޓްރީމް ވާޝަން އެވެ
  • އޮކްޓިކޮންސް އެވެ
  • ފޮންޓް އޯސަމް
  • ބަދަލު ގޮތްތަކުގެ ލިސްޓަކަށް އެކްސްޓެންޑް ޕޭޖް ބައްލަވާށެވެ . އިތުރު ހުށަހެޅުންތަކެއް ލިބިފައިވޭތޯ؟ އިޝޫއެއް ނުވަތަ ޕީއާރު ހުޅުވާލައްވާ.
• އެފިކްސް ޖޭކުއަރީ ޕްލަގިން ބާކީކޮށްފިއެވެ.
  • position: stickyއޭގެ ބަދަލުގައި ބޭނުން ކުރުމަށް އަޅުގަނޑުމެން ލަފާދެމެވެ . ތަފްސީލާއި ވަކި ޕޮލިފިލް ރެކޮމެންޑޭޝަންތަކަށް އެޗްޓީއެމްއެލް5 ޕްލީޒް އެންޓްރީ ބައްލަވާށެވެ . އެއް ހުށަހެޅުމަކީ @supportsއެކަން ތަންފީޒުކުރުމަށްޓަކައި އުސޫލެއް ބޭނުންކުރުމެވެ (އެބަހީ، @supports (position: sticky) { ... })/
  • އިތުރު، ނޮން positionސްޓައިލްތައް އެޕްލައި ކުރުމަށް އެފިކްސް ބޭނުން ކުރަމުން ދިޔަނަމަ، ޕޮލިފިލްސް އިން ތިބާގެ ޔޫސް ކޭސް އަށް ސަޕޯޓް ނުކުރެވިދާނެއެވެ. މިފަދަ ބޭނުންތަކަށް ބޭނުންވާ އެއް ގޮތަކީ ތިންވަނަ ފަރާތެއްގެ ސްކްރޯލްޕޮސް-ސްޓައިލަރ ލައިބްރަރީ އެވެ.
• ޕޭޖަރ ކޮމްޕޮނެންޓް ވައްޓާލީ އެއީ މުހިންމު ގޮތެއްގައި ކުޑަކޮށް ކަސްޓަމައިޒް ކޮށްފައިވާ ބަޓަންތަކަކަށް ވާތީއެވެ.
• އޯވަރ ސްޕެސިފިކް ޗިލްޑްރަންސް ސެލެކްޓަރސްގެ ބަދަލުގައި އިތުރު އަން-ނެސްޓް ކްލާސް ސެލެކްޓަރސް ބޭނުންކުރުމަށް ގާތްގަނޑަކަށް ހުރިހާ ކޮމްޕޯނެންޓްތަކެއް ރީފެކްޓަރ ކޮށްފައިވެއެވެ.

ކޮމްޕޮނެންޓުންނެވެ

މި ލިސްޓުގައި v3.xx އާއި v4.0.0 އާއި ދެމެދު ކޮމްޕޮނެންޓުން އަންނަ މުހިއްމު ބަދަލުތައް ފާހަގަކޮށްފައިވެއެވެ.

ރީބޫޓް ކުރާށެވެ

ބޫޓްސްޓްރެޕް 4 އަށް އަލަށް ގެނައީ ރީބޫޓް , އަޅުގަނޑުމެންގެ އަމިއްލަ ކޮންމެވެސް ވަރަކަށް ޚިޔާލު ފާޅުކުރާ ރީސެޓް ސްޓައިލްތަކާއެކު ނޯމަލައިޒްގެ މައްޗަށް ބިނާކޮށްފައިވާ އާ ސްޓައިލްޝީޓެކެވެ. މި ފައިލްގައި ފެންނަ ސެލެކްޓަރުތަކުގައި ބޭނުންކުރަނީ ހަމައެކަނި އެލިމެންޓްތައް- މިތަނުގައި އެއްވެސް ކްލާހެއް ނެތެވެ. މިއީ އަޅުގަނޑުމެންގެ ރީސެޓް ސްޓައިލްތައް އަޅުގަނޑުމެންގެ ކޮމްޕޮނެންޓް ސްޓައިލްތަކުން އެކަހެރިކޮށް، އިތުރަށް މޮޑިއުލާ ގޮތަކަށް ކަންތައް ކުރެވޭނެ ގޮތެކެވެ. މިކަމުގައި ހިމެނޭ އެންމެ މުހިންމު ބައެއް ރީސެޓްތަކަކީ box-sizing: border-boxބަދަލުވުމާއި، ގިނަ އެލިމެންޓްތަކެއްގެ މައްޗަށް ޔުނިޓްތަކަށް ބަދަލުވުމާއި em، remލިންކް ސްޓައިލްތަކާއި، ގިނަ ފޯމް އެލިމެންޓް ރީސެޓްތަކެވެ.

ޓައިޕޮގްރަފީ އެވެ

• ހުރިހާ .text-ޔުޓިލިޓީސް _utilities.scssފައިލަށް ބަދަލުކޮށްފިއެވެ.
• .page-headerއޭގެ ސްޓައިލްތަކަށް ޔުޓިލިޓީސް މެދުވެރިކޮށް އެޕްލައި ކުރެވޭނެ ގޮތަށް ވައްޓާލާފައިވެ އެވެ.
• .dl-horizontalވަނީ ބާތިލްކޮށްފަ އެވެ. އޭގެ ބަދަލުގައި، އޭގެ އަދި ކުދިންގެ .rowމައްޗަށް <dl>ގްރިޑް ކޮލަމް ކްލާސްތައް (ނުވަތަ މިކްސިންސް) ބޭނުންކޮށް ބޭނުންކުރުން .<dt><dd>
• ބްލޮކްކޯޓްތައް އަލުން ޑިޒައިންކޮށް، އެމީހުންގެ ސްޓައިލްތައް <blockquote>އެލިމެންޓުން އެއް ކްލާހަކަށް ބަދަލުކޮށް، .blockquote. .blockquote-reverseޓެކްސްޓް ޔުޓިލިޓީސް އަށް މޮޑިފައި ވައްޓާލިއެވެ .
• .list-inlineމިހާރު ލާޒިމުކުރަނީ އެ ކުންފުނީގެ ކުދިން ލިސްޓްކުރާ ތަކެތި އެއަށް އާ .list-inline-itemކްލާސް އެޕްލައިކޮށްފައި ހުރުމަށެވެ.

ތަސްވީރުތަކެވެ

• ނަން .img-responsiveބަދަލުކޮށްފައިވަނީ .img-fluid.
• ނަން .img-roundedބަދަލުކޮށްފިއެވެ.rounded
• ނަން .img-circleބަދަލުކޮށްފިއެވެ.rounded-circle

މޭޒުތަކެވެ

• ސެލެކްޓަރުގެ ގާތްގަނޑަކަށް ހުރިހާ އިންސްޓޭންސްތަކެއް >ނައްތާލާފައިވާއިރު، މާނައަކީ ނެސްޓް ޓޭބަލްތަކުން މިހާރު އޮޓޮމެޓިކުން އެމީހުންގެ ބެލެނިވެރިންގެ އަތުން ސްޓައިލްތައް ވާރުތަވާނެ އެވެ. މިއީ އަޅުގަނޑުމެންގެ ސެލެކްޓަރުތަކާއި ޕޮޓެންޝަލް ކަސްޓަމައިޒޭޝަންތައް ވަރަށް ބޮޑަށް ފަސޭހަކޮށްދޭ ކަމެކެވެ.
• ކޮންސިސްޓެންސީއަށްޓަކައި ނަން .table-condensedބަދަލުކޮށްފިއެވެ .table-sm.
• އާ .table-inverseއިޚްތިޔާރެއް އިތުރުކޮށްފިއެވެ.
• އިތުރުކޮށްފައިވަނީ ޓޭބަލް ހެޑަރ މޮޑިފައިޓަރސް: .thead-defaultއަދި .thead-inverse.
• ކޮންޓެކްސްޗުއަލް ކްލާސްތަކަށް ނަން ބަދަލުކޮށްފައިވަނީ .table--ޕްރިފިކްސް އެއް ބެހެއްޓުމަށެވެ. އެހެންކަމުން .active, .success, .warning, .dangerއަދި .infoއަށް .table-active, .table-success, .table-warning, .table-dangerއަދި .table-info.

ފޯމުތައް

• ބަދަލުކޮށްފައިވާ އެލިމެންޓް _reboot.scssފައިލަށް ރީސެޓް ވެއެވެ.
• ނަން .control-labelބަދަލުކޮށްފައިވަނީ .col-form-label.
• ނަން ބަދަލުކޮށް .input-lgއަދި .input-smއަށް .form-control-lgއަދި .form-control-sm.
• ސާދާކަމަށްޓަކައި .form-group-*ކްލާސްތައް ދޫކޮށްލީ. .form-control-*މިހާރު އޭގެ ބަދަލުގައި ކްލާސްތައް ބޭނުން ކުރާށެވެ .
• ދޫކޮށްލާފައި .help-blockއޭގެ ބަދަލުގައި .form-textފޯ ބްލޮކް ލެވެލް ހެލްޕް ޓެކްސްޓް ޖަހާފައި ވެއެވެ. އިންލައިން ހެލްޕް ޓެކްސްޓާއި އެހެނިހެން ފްލެކްސިބަލް އޮޕްޝަންތަކަށް، ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންކުރާށެވެ .text-muted.
• ވެއްޓިފައި .radio-inlineއަދި .checkbox-inline.
• ކޮންސޮލިޑޭޓެޑް .checkboxއަދި .radioއިންޓޯ .form-checkއަދި އެކި .form-check-*ކްލާސްތަކެވެ.
• ހޮރައިޒޮންޓަލް ފޯމްތައް އޯވަހޯލް ކޮށްފައި:
  • .form-horizontalކްލާސް ޝަރުޠު ބާތިލްކޮށްފިއެވެ .
  • .form-group.rowވިއާ މިކްސިން އިން ސްޓައިލްތައް މިހާރު އަމަލު ނުކުރާތީ، .rowމިހާރު ހޮރިޒޮންޓަލް ގްރިޑް ލޭއައުޓްތަކަށް ބޭނުންވެއެވެ (އެބަހީ، <div class="form-group row">).
  • s .col-form-labelއާއެކު ވަރުގަދައަށް ސެންޓަރ ލޭބަލްތަކަށް އާ ކްލާހެއް އިތުރުކޮށްފިއެވެ ..form-control
  • .form-rowގްރިޑް ކްލާސްތަކާއެކު ކޮމްޕެކްޓް ފޯމް ލޭއައުޓްތަކަށް އާ އިތުރުކޮށްފި (ސްވޮޕް ޔޫއާރ .rowފޯރ އަ .form-rowއެންޑް ގޯ) .
• ކަސްޓަމް ފޯމްސް ސަޕޯޓް އިތުރުކޮށްފި (ޗެކްބޮކްސް، ރޭޑިއޯ، ސެލެކްޓްސް، އަދި ފައިލް އިންޕުޓްސް އަށް).
• .has-error, .has-warning, އަދި ކްލާސްތަކުގެ ބަދަލުގައި ސީއެސްއެސް އާއި ސޫޑޯ ކްލާސް .has-successމެދުވެރިކޮށް އެޗްޓީއެމްއެލް5 ފޯމް ވެލިޑޭޝަން ގެނެސްފައިވެއެވެ .:invalid:valid
• ނަން .form-control-staticބަދަލުކޮށްފައިވަނީ .form-control-plaintext.

ބަޓަންތަކެވެ

• ނަން .btn-defaultބަދަލުކޮށްފައިވަނީ .btn-secondary.
• .btn-xsކްލާސް މުޅިން ވައްޓާލީ .btn-smv3 އަށް ވުރެ ނިސްބަތުން ވަރަށް ކުޑަ ގޮތަކަށެވެ.
• ޖޭކުއަރީ ޕްލަގިންގެ ސްޓޭޓްފުލް ބަޓަން ފީޗާ button.jsބާކީކޮށްފި އެވެ. މީގެ ތެރޭގައި $().button(string)އަދި $().button('reset')ގޮތްތައް ހިމެނެއެވެ. އަޅުގަނޑުމެން ލަފާދެނީ އޭގެ ބަދަލުގައި ކަސްޓަމް ޖާވާސްކްރިޕްޓްގެ ކުޑަކުޑަ ބިޓެއް ބޭނުންކުރުމަށެވެ، އެއީ ތިބާ ބޭނުންވާ ގޮތަށް ސީދާ ކަންތައް ކުރުމުގެ ފައިދާ ލިބޭނެ ކަމެކެވެ.
  • ޕްލަގިންގެ އެހެން ފީޗާސްތައް (ބަޓަން ޗެކްބޮކްސް، ބަޓަން ރޭޑިއޯ، ސިންގަލް ޓޮގްލް ބަޓަން) v4 ގައި ހިފެހެއްޓިފައިވާކަން ފާހަގަކޮށްލެވެއެވެ.
• ބަޓަންތައް' [disabled]އަށް :disabledIE9+ ސަޕޯޓްކުރާ ގޮތަށް ބަދަލުކުރުން :disabled. އެހެންނަމަވެސް fieldset[disabled]އަދިވެސް ކޮންމެހެން ބޭނުންވާ ސަބަބަކީ ނެޓިވް ޑިސެބަލްޑް ފީލްޑްސެޓްތައް އަދިވެސް IE11 ގައި ބަގީ ވެފައި ހުރުމުންނެވެ .

ބަޓަން ގްރޫޕް

• ފްލެކްސްބޮކްސް އިން ކޮމްޕޮނެންޓް އަލުން ލިޔެފައިވެއެވެ.
• ނައްތާލެވިއްޖެ .btn-group-justified. ބަދަލެއްގެ ގޮތުގައި ތިބާއަށް ބޭނުންކުރެވިދާނެ <div class="btn-group d-flex" role="group"></div>އުނިއިތުރުތަކުގެ ވަށައިގެން ރެޕަރެއްގެ ގޮތުގައި .w-100.
• ކްލާސް .btn-group-xsމުޅިން ދޫކޮށްލީ ރިމޫވް ކޮށްގެން .btn-xs.
• ބަޓަން ޓޫލްބާރތަކުގައި ހުންނަ ބަޓަން ގްރޫޕްތަކުގެ މެދުގައިވާ ސާފު ދުރުމިން ނައްތާލާފައިވުން؛ މިހާރު މާރޖިން ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ.
• އެހެން ކޮމްޕޯނެންޓްތަކާއެކު ބޭނުންކުރުމަށް ރަނގަޅު ލިޔެކިޔުންތައް ހެދުން.

ޑްރޮޕްޑައުންސް އެވެ

• ހުރިހާ ކޮމްޕޯނެންޓްތަކާއި، މޮޑިފައިޓަރސް ފަދަ ތަކެތި ބެލެނިވެރި ސެލެކްޓަރތަކުން ސިންގަލް ކްލާސްތަކަށް ބަދަލުކޮށްފިއެވެ.
• ޑްރޮޕްޑައުން މެނޫގައި މައްޗަށް ނުވަތަ ތިރިއަށް ވާގޮތަށް ހުންނަ ތިރިތަކާއެކު ދެން ޝިޕް ނުކުރުމަށް ފަސޭހަކޮށްފައިވާ ޑްރޮޕްޑައުން ސްޓައިލްތައް.
• ޑްރޮޕްޑައުންތައް މިހާރު <div>s ނުވަތަ s އިން ބިނާކުރެވިދާނެއެވެ .<ul>
• ޑްރޮޕްޑައުން ސްޓައިލްތަކާއި މާކަޕް އަލުން ބިނާކޮށްފައި ހުރުމުން ޑްރޮޕްޑައުން އައިޓަމްތަކަށް ފަސޭހަ، ބިލްޓް-އިން ސަޕޯޓް ފޯރުކޮށްދިނުމާއި <a>އަދި އެއަށް ބިނާކޮށްފައިވާ ތަކެތި ފޯރުކޮށްދިނުން.<button>
• ނަން .dividerބަދަލުކޮށްފައިވަނީ .dropdown-divider.
• ޑްރޮޕްޑައުން ތަކެތި މިހާރު ބޭނުންވަނީ .dropdown-item.
• ޑްރޮޕްޑައުން ޓޮގްލްސް އަށް މިހާރު އެކްސްޕްލިސިޓް <span class="caret"></span>; މިއީ މިހާރު ސީއެސްއެސް މެދުވެރިކޮށް އޮޓޮމެޓިކުން ފޯރުކޮށްދެވޭ ::afteron .dropdown-toggle.

ގްރިޑް ސިސްޓަމް

• ގެ ގޮތުގައި އާ 576pxގްރިޑް ބްރޭކްޕޮއިނ��ޓެއް އިތުރުކޮށްފި sm, މާނައަކީ މިހާރު ޖުމްލަ ފަސް ޓިއަރ ( xs, sm, md, lg, އަދި xl) އެބަހުރި.
• ސާދާ ގްރިޑް ކްލާސްތަކަށް ރެސްޕޮންސިވް ގްރިޑް މޮޑިފައި ކްލާސްތަކަށް އިން .col-{breakpoint}-{modifier}-{size}އަށް ބަދަލުކޮށްފިއެވެ..{modifier}-{breakpoint}-{size}
• އާ ފްލެކްސްބޮކްސް އިން ކަރަންޓް ދޭ orderކްލާސްތަކަށް ޕުޝް އެންޑް ޕުލް މޮޑިފައި ކްލާސްތައް ބާކީކޮށްފި އެވެ. މިސާލަކަށް .col-8.push-4އަދި ގެ ބަދަލުގައި .col-4.pull-8ބޭނުންކުރާނީ .col-8.order-2އަދި .col-4.order-1އެވެ.
• ގްރިޑް ސިސްޓަމާއި ކޮމްޕޯނެންޓްތަކަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީ ކްލާސްތައް އިތުރުކޮށްފިއެވެ.

ގްރޫޕްތައް ލިސްޓްކުރުން

• ފްލެކްސްބޮކްސް އިން ކޮމްޕޮނެންޓް އަލުން ލިޔެފައިވެއެވެ.
• ލިސްޓް ގްރޫޕް އައިޓަމްތަކުގެ ސްޓައިލިންގ ލިންކާއި ބަޓަން ވަރޝަންތަކަށް a.list-group-itemސާފު ކްލާހެއް، , އިން ބަދަލުކޮށްފިއެވެ ..list-group-item-action
• .list-group-flushކާޑުތަކާއެކު ބޭނުންކުރުމަށް ކްލާސް އިތުރުކޮށްފިއެވެ .

މޮޑަލް އެވެ

• ފްލެކްސްބޮކްސް އިން ކޮމްޕޮނެންޓް އަލުން ލިޔެފައިވެއެވެ.
• ފްލެކްސްބޮކްސްއަށް ބަދަލުވުމުން، އަޅުގަނޑުމެން ފްލޯޓްސް ބޭނުން ނުކުރާތީ، ހެޑަރގައި ހުންނަ ޑިސްމިސް އައިކޮންތަކުގެ އެލައިންމަންޓް ފަޅައިގެން ދިއުން އެކަށީގެންވެއެވެ. ފްލޯޓެޑް ކޮންޓެންޓް ފުރަތަމަ އަންނަ ނަމަވެސް ފްލެކްސްބޮކްސް އާއި އެކު އެއީ މިހާރު އެގޮތެއް ނޫނެވެ. ރަނގަޅު ކުރަން މޮޑަލް ޓައިޓަލްތަކަށް ފަހު އަންނަން ތިބާގެ ޑިސްމިސް އައިކޮންތައް އަޕްޑޭޓް ކުރާށެވެ.
• އެ remoteއޮޕްޝަން (އެއީ ބޭރުގެ ކޮންޓެންޓް އޮޓޮމެޓިކުން ލޯޑްކޮށް މޮޑަލްއަކަށް އިންޖެކްޓް ކުރުމަށް ބޭނުންކުރެވިދާނެ އެއްޗެއް) އާއި އެއާ ގުޅޭ loaded.bs.modalއިވެންޓް ނައްތާލެވުނެވެ. އަޅުގަނޑުމެން ލަފާދެނީ އޭގެ ބަދަލުގައި ކްލައިންޓް ސައިޑް ޓެމްޕްލޭޓިންގ ނުވަތަ ޑޭޓާ ބައިންޑިންގ ފްރޭމްވޯކެއް ބޭނުންކުރުމަށާއި، ނުވަތަ އަމިއްލައަށް jQuery.load އަށް ގޮވާލުމަށެވެ .

ނަވްސް އެވެ

• ފްލެކްސްބޮކްސް އިން ކޮމްޕޮނެންޓް އަލުން ލިޔެފައިވެއެވެ.
• >އަން ނެސްޓް ކްލާސްތަކުގެ ޒަރީއާއިން ސާދާ ސްޓައިލިންގ އަށް ގާތްގަނޑަކަށް ހުރިހާ ސެލެކްޓަރެއް ބާލާފައިވެއެވެ.
• އެޗްޓީއެމްއެލް އަށް ޚާއްޞަ ސެލެކްޓަރސް ފަދަ ސެލެކްޓަރސްގެ ބަދަލުގައި .nav > li > aއަޅުގަނޑުމެން ބޭނުންކުރަނީ .navs، .nav-items، އަދި .nav-links އަށް ވަކި ކްލާސްތަކެކެވެ. މިއީ ތިބާގެ އެޗްޓީއެމްއެލް އަށް މާ ފްލެކްސިބަލް ވެގެންދާއިރު އިތުރު އެކްސްޓެންސިބިލިޓީ ގެނެސްދޭ ކަމެކެވެ.

ނަވްބާރެވެ

ނަވްބާ މުޅިން ވެސް ފްލެކްސްބޮކްސްގައި އަލުން ލިޔެފައިވާއިރު، އެލައިންމަންޓާއި، ރެސްޕޮންސިވިޓީއާއި، ކަސްޓަމައިޒޭޝަން އަށް ސަޕޯޓް ރަނގަޅުކޮށްފައިވާ ކަމަށް ވެސް ބުންޏެވެ.

• ރެސްޕޮންސިވް ނަވްބާ ބިހޭވިއަރސް މިހާރު .navbarކްލާހަށް އެޕްލައި ކުރެވެނީ ނަވްބާ ކޮލެޕްސް ކުރާނެ ތަނެއް ހޮވާ ބޭނުންވާ ތަން މެދުވެރިކޮށެވެ. .navbar-expand-{breakpoint}ކުރިން މިއީ ލެސް ވެރިއޭބަލް މޮޑިފިކޭޝަނެއް ކަމުން ރީކޮމްޕައިލް ކުރަން ޖެހުނެވެ.
• .navbar-defaultis now .navbar-light, ނަމަވެސް .navbar-darkއަދިވެސް އޮތީ ހަމަ އެގޮތަށެވެ. ކޮންމެ ނަވްބާރެއްގައި މިއިން އެއް އެއްޗެއް ބޭނުންވެއެވެ. ނަމަވެސް މި ކްލާސްތަކުން މިހާރު background-colors ސެޓް ނުކުރެއެވެ؛ އޭގެ ބަދަލުގައި އެމީހުން މުހިންމު ގޮތެއްގައި އަސަރުކުރަނީ ހަމައެކަނި color.
• ނަވްބާރސް އަށް މިހާރު ބޭނުންވަނީ ކޮންމެވެސް ވަރެއްގެ ބެކްގްރައުންޑް ޑިކްލެރޭޝަނެކެވެ. އަޅުގަނޑުމެންގެ ބެކްގްރައުންޑް ޔުޓިލިޓީސް ( ) އިން ޚިޔާރުކުރައްވާ ނުވަތަ މޮޔަ ކަސްޓަމައިޒޭޝަން އަށް.bg-* މަތީގައިވާ ލައިޓް/އިންވާސް ކްލާސްތަކާއެކު އަމިއްލައަށް ސެޓް ކުރައްވާށެވެ .
• ފްލެކްސްބޮކްސް ސްޓައިލްތަކަށް ދީފައިވާތީ، ނަވްބާރސް އަށް މިހާރު ފަސޭހައިން އެލައިންމަންޓް އޮޕްޝަންތަކަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް ބޭނުންކުރެވޭނެއެވެ.
• .navbar-toggleއަކީ މިހާރު .navbar-togglerއަދި ތަފާތު ސްޓައިލްތަކާއި އެތެރޭގެ މާކަޕް (އިތުރު ތިން <span>ސ) އެއް ލިބިފައިވާ އެއްޗެކެވެ.
• .navbar-formމުޅިންވެސް ކްލާސް ދޫކޮށްލީ . އެއީ މިހާރު ކޮންމެހެން ކުރަންޖެހޭ ކަމެއް ނޫން؛ އޭގެ ބަދަލުގައި ހަމައެކަނި .form-inlineބޭނުންވާ ގޮތަށް މާރޖިން ޔުޓިލިޓީސް ބޭނުންކޮށް އެޕްލައި ކުރާށެވެ.
• ނަވްބާރސް ތަކުގައި މިހާރު ނުހިމެނޭ margin-bottomނުވަތަ border-radiusޑިފޯލްޓްކޮށް ނުހިމެނެއެވެ. ބޭނުންވާ ގޮތަށް ޔުޓިލިޓީސް ބޭނުންކުރުން.
• ނެވްބާރސް ހިމެނޭ ހުރިހާ މިސާލުތަކެއް އަޕްޑޭޓްކޮށްފައިވަނީ އާ މާކަޕް އެއް ހިމަނައިގެންނެވެ.

ޕޭޖިނޭޝަން

• ފްލެކްސްބޮކްސް އިން ކޮމްޕޮނެންޓް އަލުން ލިޔެފައިވެއެވެ.
• ސ ގެ ދަރިފަސްކޮޅުގެ މައްޗަށް މިހާރު ސާފު ކްލާސްތައް ( .page-item, ) ބޭނުންވެއެވެ.page-link.pagination
• ކޮމްޕޮނެންޓް މުޅިން ވައްޓާލީ .pagerކަސްޓަމައިޒް ކޮށްފައިވާ އައުޓްލައިން ބަޓަންތަކަށް ވުރެ ކުޑަކޮށް ބޮޑު އެއްޗަކަށް ވާތީ އެވެ.

ރޮށި ކޮތަޅުތަކެވެ

• ސ ގެ .breadcrumb-itemދަރިފަސްކޮޅުގެ މައްޗަށް މިހާރު ބޭނުންވަނީ ސާފު ކްލާހެއް، , އެވެ.breadcrumb

ލޭބަލްތަކާއި ބެޖްތަކެވެ

• ކޮންސޮލިޑޭޓްކޮށް .labelއަދި އެލިމެންޓުން .badgeޑިސަމްބިގްއޭޓްކޮށް، <label>ގުޅުންހުރި ކޮމްޕޯނެންޓްތައް ފަސޭހަކޮށްދިނުން.
• .badge-pillވަށައިގެންވާ “ޕިލް” ލޫކަށް މޮޑިފައިޓަރެއްގެ ގޮތުގައި އިތުރުކޮށްފައިވެއެވެ .
• ލިސްޓް ގްރޫޕްތަކާއި އެހެނިހެން ކޮމްޕޯނެންޓްތަކުގައި ބެޖްތައް އޮޓޮމެޓިކުން ފްލޯޓް ނުކުރެވެއެވެ. އެކަމަށް ޔުޓިލިޓީ ކްލާސްތައް މިހާރު ބޭނުންވެއެވެ.
• .badge-defaultއެހެން ތަންތަނުގައި ބޭނުންކުރާ ކޮމްޕޮނެންޓް މޮޑިފައި ކްލާސްތަކާ އެއްގޮތްވާ ގޮތަށް ބާކީކޮށް .badge-secondaryއިތުރުކޮށްފައިވެ އެވެ.

ޕެނަލްތަކާއި، ތަމްބްނެއިލްތަކާއި، ވަޅުތަކެވެ

އާ ކާޑު ކޮމްޕޮނެންޓަށް މުޅިން ވެސް ވައްޓާލާފައިވެ އެވެ.

ޕެނަލްތަކެވެ

• .panelto .card, މިހާރު ފްލެކްސްބޮކްސް އާއި އެކު ހަދާފައިވެއެވެ.
• .panel-defaultނައްތާލާފައި ބަދަލެއް ނެތެވެ.
• .panel-groupނައްތާލާފައި ބަދަލެއް ނެތެވެ. .card-groupއަކީ ބަދަލެއް ނޫން، އެއީ ތަފާތު ކަމެއް.
• .panel-headingއަށް.card-header
• .panel-titleއަށް .card-title. ބޭނުންވާ ލޫކަށް ބަލާއިރު، ހެޑިންގ އެލިމެންޓްސް ނުވަތަ ކްލާސްތައް (އެބަހީ <h3>, .h3) ނުވަތަ ބޯލްޑް އެލިމެންޓްސް ނުވަތަ ކްލާސްތައް (އެބަހީ <strong>, <b>, .font-weight-bold) ވެސް ބޭނުންކުރެވިދާނެއެވެ. ފާހަގަކޮށްލަންޖެހޭ ކަމަކީ .card-title, އެއްގޮތަކަށް ނަން ދީފައިވީނަމަވެސް، އުފެދެނީ އާއި ތަފާތު ލޫކެކެވެ .panel-title.
• .panel-bodyއަށް.card-body
• .panel-footerއަށް.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, އަދި އަޅުގަނޑުމެންގެ ސާސް މެޕުން ޖެނެރޭޓް ކުރެވިފައިވާ , , އަދި ޔުޓިލިޓީސް .panel-dangerއަށް ވައްޓާލާފައިވެއެވެ ..bg-.text-.border$theme-colors

ކުރިއެރުން

• ކޮންޓެކްސްޗުއަލް .progress-bar-*ކްލާސްތަކުގެ ބަދަލުގައި .bg-*ޔުޓިލިޓީސް ގެނައުން. މިސާލަކަށް class="progress-bar progress-bar-danger"ވެގެން ދަނީ class="progress-bar bg-danger".
• .activeއެނިމޭޓެޑް ޕްރޮގްރެސް ބާރތަކަށް ބަދަލުކޮށްފައިވަނީ .progress-bar-animated.

ކެރޮސެލް އެވެ

• ޑިޒައިން އާއި ސްޓައިލިންގ ފަސޭހަ ކުރުމަށް މުޅި ކޮމްޕޮނެންޓް އޯވަހޯލް ކޮށްފައިވެއެވެ. އަޅުގަނޑުމެންގެ އަތުގައި ތިޔަބޭފުޅުންނަށް އޯވަރރައިޑް ކުރަން ބޭނުންވާ ސްޓައިލްތަކާއި، އާ އިންޑިކޭޓަރުތަކާއި، އާ އައިކޮންތައް މަދުވެއެވެ.
• ހުރިހާ ސީއެސްއެސްއެއް ވަނީ އަން-ނެސްޓްކޮށް ނަން ބަދަލުކޮށް، ކޮންމެ ކްލާހެއްގެ ކުރިއަށް ޖައްސާފައިވާކަން ކަށަވަރުކޮށްދީފައެވެ .carousel-.
  • ކެރޮސެލް ތަކެއްޗަށް، .next, .prev, .left, އަދި .rightމިހާރު .carousel-item-next, .carousel-item-prev, .carousel-item-left, އަދި .carousel-item-right.
  • .itemވެސް މިހާރު .carousel-item.
  • Prev/next ކޮންޓްރޯލްތަކަށް، .carousel-control.rightއަދި .carousel-control.leftމިހާރު .carousel-control-nextއަދި .carousel-control-prev, މާނައަކީ އެމީހުންނަށް ވަކި ބޭސް ކްލާހެއް ދެން ބޭނުން ނުވާތީއެވެ.
• ހުރިހާ ރެސްޕޮންސިވް ސްޓައިލިންގ އެއް ނައްތާލައި، ޔުޓިލިޓީސް އަށް ޑިފެރ ކުރުން (އެބަހީ، ވަކި ވިއުޕޯޓްތަކުގައި ކެޕްޝަންތައް ދައްކާލުން) އަދި ބޭނުންވާ ގޮތަށް ކަސްޓަމް ސްޓައިލްތައް ނައްތާލާފައިވެއެވެ.
• ކެރޮސެލް ތަކެތީގައި ހުންނަ ތަސްވީރުތަކަށް އިމޭޖް އޮވަރރައިޑްސް ނައްތާލާފައި، ޔުޓިލިޓީސް އަށް ފަސްކޮށްފިއެވެ.
• ކެރޮސެލްގެ މިސާލު ޓްވީކްކޮށް އާ މާކަޕް އާއި ސްޓައިލްތައް ހިމަނާފައިވެއެވެ.

މޭޒުތަކެވެ

• ސްޓައިލް ކުރެވިފައިވާ ނެސްޓް ޓޭބަލްތަކަށް ސަޕޯޓް ނައްތާލެވިއްޖެއެވެ. ހުރިހާ ޓޭބަލް ސްޓައިލްތަކެއް މިހާރު އިންހެރިޓް ކުރެވިފައިވަނީ v4 ގައި ސާދާ ސެލެކްޓަރ ތަކަކަށެވެ.
• އިތުރުކޮށްފައިވަނީ އިންވާސް ޓޭބަލް ވެރިއަންޓެވެ.

ޔުޓިލިޓީސް އެވެ

• ޑިސްޕްލޭ، ފޮރުވިފައިވާ، އަދި އެހެނިހެން ކަންތައްތައް:
  • ޑިސްޕްލޭ ޔުޓިލިޓީސް ރެސްޕޮންސިވް ކޮށްދިނެވެ (އެބަހީ، .d-noneއަދި d-{sm,md,lg,xl}-none).
  • .hidden-*އާ ޑިސްޕްލޭ ޔުޓިލިޓީތަކަށް ޔުޓިލިޓީސްގެ ބޮޑު ބައެއް ބާކީކޮށްފި އެވެ . މިސާލަކަށް ގެ ބަދަލުގައި .hidden-sm-upބޭނުން ކުރާށެވެ .d-sm-none. ޑިސްޕްލޭ .hidden-printޔުޓިލިޓީ ނަން ދިނުމުގެ ސްކީމް ބޭނުން ކުރުމަށް ޔުޓިލިޓީތަކަށް ނަން ބަދަލުކޮށްފިއެވެ. އިތުރު މަޢުލޫމާތު މި ޕޭޖުގެ ރެސްޕޮންސިވް ޔުޓިލިޓީސް ބައިގެ ދަށުން ލިބޭނެއެވެ.
  • .float-{sm,md,lg,xl}-{left,right,none}ރެސްޕޮންސިވް ފްލޯޓްތަކަށް ކްލާސްތައް އިތުރުކޮށް ނައްތާލާފައި .pull-leftއަދި .pull-rightއެއީ ރިޑަންޑަންޓް ކަމުން .float-leftއަދި .float-right.
• ވައްތަރު:
  • އަޅުގަނޑުމެންގެ ޓެކްސްޓް އެލައިންމަންޓް ކްލާސްތަކަށް ރެސްޕޮންސިވް ވެރިއޭޝަންތައް އިތުރުކޮށްފިން .text-{sm,md,lg,xl}-{left,center,right}.
• އެލައިންމަންޓާއި ސްޕޭސިންގ:
  • ހުރިހާ ފަރާތަކަށް އާ ރެސްޕޮންސިވް މާރޖިން އަދި ޕެޑިންގ ޔުޓިލިޓީސް އިތުރުކޮށް، ވަރޓިކަލް އަދި ހޮރައިޒޮންޓަލް ޝޯޓްހެންޑްސް އިތުރުކޮށްފިއެވެ.
  • ފްލެކްސްބޮކްސް ޔުޓިލިޓީސްގެ ބޯޓްލޯޑް އިތުރުކޮށްފި .
  • .center-blockއާ .mx-autoކްލާހަށް ވައްޓާލީ .
• ކުރީގެ ބްރައުޒާ ވަރޝަންތަކަށް ސަޕޯޓް ދޫކޮށްލުމަށް ކްލިއަރފިކްސް އަޕްޑޭޓް ކޮށްފި އެވެ.

ވެންޑަރ ޕްރިފިކްސް މިކްސިންސް

v3.2.0 ގައި ޑިޕްރިކޭޓް ކުރެވުނު ބޫޓްސްޓްރެޕް 3 ގެ ވެންޑަރ ޕްރިފިކްސް މިކްސިންސް ބޫޓްސްޓްރެޕް 4 ގައި ނައްތާލާފައިވެއެވެ .

ތިރީގައިވާ މިކްސިންތައް ނައްތާލެވިއްޖެއެވެ : 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

ލިޔެކިޔުންތައް ހެދުން

އަޅުގަނޑުމެންގެ ޑޮކިއުމަންޓޭޝަން އަށް މުޅި ބޯޑުގައި ވެސް އަޕްގްރޭޑް ލިބުނެވެ. މިއޮތީ ލޯ ޑައުން:

• އަޅުގަނޑުމެން އަދިވެސް ބޭނުންކުރަނީ ޖެކިލް، އެކަމަކު މިކްސްގައި އަޅުގަނޑުމެންގެ ޕްލަގިންސްތައް އެބަހުރި:
  • bugify.rbއަޅުގަނޑުމެންގެ ބްރައުޒާ ބަގްސް ޕޭޖުގައިވާ އެންޓްރީތައް ރަނގަޅަށް ލިސްޓް ކުރުމަށް ބޭނުން ކުރެވެއެވެ .
  • example.rbއަކީ ޑިފޯލްޓް highlight.rbޕްލަގިންގެ ކަސްޓަމް ފޯކެއް ކަމުން، މިސާލު-ކޯޑް ފަސޭހައިން ބެލެހެއްޓޭނެ އެވެ.
  • callout.rbއެއީ އެކަމުގެ އެއްގޮތް ކަސްޓަމް ފޯކެއް ނަމަވެސް އަޅުގަނޑުމެންގެ ޚާއްޞަ ޑޮކްސް ކޯލްއައުޓްތަކަށް ފަރުމާކޮށްފައިވާ އެއްޗެކެވެ.
  • jekyll-toc ބޭނުންކުރަނީ އަޅުގަނޑުމެންގެ ޓޭބަލް އޮފް ކޮންޓެންޓްސް އުފެއްދުމަށެވެ.
• ހުރިހާ ޑޮކްސް ކޮންޓެންޓެއް އަލުން ލިޔެފައިވަނީ މާކްޑައުން އިން (އެޗްޓީއެމްއެލްގެ ބަދަލުގައި) ފަސޭހައިން އެޑިޓް ކުރެވޭނެ ގޮތަކަށެވެ.
• ޕޭޖްތައް އަލުން އިންތިޒާމުކޮށްފައިވަނީ ސާދާ ކޮންޓެންޓާއި ގާތްކުރެވޭ ހައިރާކީއެއް ހެދުމަށެވެ.
• އަޅުގަނޑުމެން ރެގިއުލާ ސީއެސްއެސް އިން އެސްސީއެސްއެސް އަށް ބަދަލުވީ ބޫޓްސްޓްރަޕްގެ ވެރިއޭބަލްސް، މިކްސިންސް، އަދި އެހެނިހެން ކަންކަމުގެ ފުރިހަމަ ފައިދާ ނަގަން.

ރެސްޕޮންސިވް ޔުޓިލިޓީސް

@screen-v4.0.0 ގައި ހުރިހާ ވެރިއޭބަލްތަކެއް ނައްތާލެވިފައިވެއެވެ. media-breakpoint-up()އޭގެ ބަދަލުގައި , media-breakpoint-down(), ނުވަތަ media-breakpoint-only()ސާސް މިކްސިންސް ނުވަތަ $grid-breakpointsސާސް މެޕް ބޭނުން ކުރާށެވެ .

އަޅުގަނޑުމެންގެ ރެސްޕޮންސިވް ޔުޓިލިޓީ ކްލާސްތައް ބޮޑުތަނުން އުނިކޮށްފައިވަނީ، ފާޅުކަން ބޮޑު ގޮތެއްގައި displayޔުޓިލިޓީސް އަށް ތާއީދުކޮށް.

• އަދި ކްލާސްތައް ނައްތާލާފައިވަނީ ޖީކުއަރީ .hiddenއާއި މެތޯޑްތަކާ ފުށުއަރާތީއެވެ . އޭގެ ބަދަލުގައި އެޓްރިބިއުޓް ޓޮގްލް ކުރަން މަސައްކަތް ކުރާށެވެ ނުވަތަ އަދި އިންލައިން ސްޓައިލްތައް ބޭނުން ކުރާށެވެ ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• .hidden-ނަން ބަދަލުކޮށްފައިވާ ޕްރިންޓް ޔުޓިލިޓީސް ފިޔަވައި ހުރިހާ ކްލާސްތަކެއް ނައްތާލެވިއްޖެއެވެ.
  • 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
  • v4 އަލްފާސް އިން ނައްތާލެވިއްޖެ:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ޕްރިންޓް ޔުޓިލިޓީސް މިހާރު ފެށެނީ .hidden-ނުވަތަ .visible-އިން ނޫން ކަމަށާއި، ނަމަވެސް .d-print-.
  • މުސްކުޅި ނަންތައް: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • އައު ކްލާސްތައް: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

އެކްސްޕްލިސިޓް ކްލާސްތައް ބޭނުންކުރުމުގެ ބަދަލުގައި .visible-*، އެލިމެންޓެއް ފެންނަން ހުންނަނީ، ހަމައެކަނި އެ ސްކްރީން ސައިޒުގައި ފޮރުވައިގެން ނޫނެވެ. .d-*-noneއެއް ކްލާހާއި އެއް ކްލާސް އެއްކޮށްލައިގެން .d-*-blockއެލިމެންޓެއް ދައްކާލެވޭނީ ހަމައެކަނި ސްކްރީން ސައިޒްތަކުގެ ދީފައިވާ އިންޓަވަލެއްގައި (މިސާލަކަށް .d-none.d-md-block.d-xl-noneއެލިމެންޓް ދައްކާނީ ހަމައެކަނި މެދު އަދި ބޮޑެތި ޑިވައިސްތަކުގައި) އެވެ.

v4 ގައިވާ ގްރިޑް ބްރޭކްޕޮއިންޓްތަކަށް އަންނަ ބަދަލުތަކުގެ މާނައަކީ ހަމަ އެ ނަތީޖާ ހޯދުމަށްޓަކައި އެއް ބްރޭކްޕޮއިންޓް ބޮޑުކޮށް ދާން ޖެހޭނެކަން ފާހަގަކޮށްލެވެއެވެ. އާ ރެސްޕޮންސިވް ޔުޓިލިޓީ ކްލާސްތަކުން އެލިމެންޓެއްގެ ވިޒިބިލިޓީ އެއް ވިއުޕޯޓް ސައިޒްތަކުގެ އެއް ރޭންޖެއްގެ ގޮތުގައި ފާޅު ނުކުރެވޭ މަދު އާންމު ހާލަތްތަކަށް އެކޮމޮޑޭޓް ކުރަން މަސައްކަތް ނުކުރެއެވެ؛ މިފަދަ ހާލަތްތަކުގައި އޭގެ ބަދަލުގައި ކަސްޓަމް ސީއެސްއެސް ބޭނުން ކުރަން ޖެހޭނެ އެވެ.