ލިބެން ހުރި ގްލައިފްތަކެވެ
ގްލައިފިކޮން ހާފްލިންގްސް ސެޓުން ފޮންޓް ފޯމެޓުގައި 250 އަށް ވުރެ ގިނަ ގްލައިފް ހިމެނެ އެވެ. ގްލިފިކޮންސް ހާފްލިންގްސް އަކީ އާންމުކޮށް ހިލޭ ލިބޭ އެއްޗެއް ނޫން ނަމަވެސް އެ ހަފްލިންގްސް އުފެއްދި ފަރާތުން ވަނީ ބޫޓްސްޓްރެޕް އަށް ހިލޭ ލިބޭނެ ގޮތް ހަދައިދީފަ އެވެ. ޝުކުރުގެ ގޮތުން އަޅުގަނޑުމެން ހަމައެކަނި އެދެނީ ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި ގްލައިފިކޮންސް އަށް އަނބުރާ ލިންކެއް ހިމަނައިދިނުމަށެވެ .
ބޭނުންކުރާނެ ގޮތް
ޕާފޯމަންސް ސަބަބުތަކަށްޓަކައި ހުރިހާ އައިކޮންތަކަށް ވެސް ބޭނުންވަނީ ބޭސް ކްލާހަކާއި ވަކިވަކި އައިކޮން ކްލާހެކެވެ. ބޭނުން ކުރުމަށްޓަކައި ތިރީގައިވާ ކޯޑް ގާތްގަނޑަކަށް ކޮންމެ ތަނެއްގައި ވެސް ބަހައްޓާށެވެ. ރަނގަޅަށް ޕެޑިންގ ހެދުމަށްޓަކައި އައިކޮން އާއި ޓެކްސްޓާ ދެމެދު ޖާގައެއް ދޫކޮށްލުން ޔަގީން ކުރައްވާށެވެ.
އެހެން ކޮމްޕޯނެންޓްތަކާ އެއްކޮށް ނުލާށެވެ
އައިކޮން ކްލާސްތައް ސީދާ އެހެން ކޮމްޕޯނެންޓްތަކާ ގުޅުވައި ނުލެވޭނެއެވެ. އެއީ އެއް އުނިއިތުރެއްގެ މައްޗަށް އެހެން ކްލާސްތަކާއެކު ބޭނުންކޮށްގެން ނުވާނެއެވެ. އޭގެ ބަދަލުގައި ނެސްޓް އެއް އިތުރުކޮށް <span>
އައިކޮން ކްލާސްތައް އަށް އެޕްލައި ކުރާށެވެ <span>
.
ހަމައެކަނި ހުސް އުފެއްދުންތަކުގައި ބޭނުންކުރުމަށްޓަކައެވެ
އައިކޮން ކްލާސްތައް ބޭނުންކުރަންވާނީ ހަމައެކަނި ޓެކްސްޓް ކޮންޓެންޓެއް ނުހިމެނޭ އަދި ޗައިލްޑް އެލިމެންޓްތަކެއް ނެތް އެލިމެންޓްތަކުގައެވެ.
އައިކޮން ފޮންޓް ހުންނަ ތަން ބަދަލުކުރުން
ބޫޓްސްޓްރެޕް އިން ގަބޫލުކުރާ ގޮތުގައި އައިކޮން ފޮންޓް ފައިލްތައް ../fonts/
ޑައިރެކްޓަރީގައި ހުންނާނެ ކަމަށް، ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސް ފައިލްތަކާ އަޅާބަލާއިރު. އެ ފޮންޓް ފައިލްތައް ބަދަލުކުރުމުގެ ނުވަތަ ނަން ބަދަލުކުރުމުގެ މާނައަކީ ތިން ގޮތަކުން ސީއެސްއެސް އަޕްޑޭޓްކުރުން:
- ސޯސް ލެސް ފައިލްތަކުގައިވާ
@icon-font-path
އަދި/ނުވަތަ ވެރިއޭބަލްތައް ބަދަލުކުރުން .@icon-font-name
- ލެސް ކޮމްޕައިލަރ އިން ފޯރުކޮށްދޭ ރިލޭޓިވް ޔޫއާރްއެލްސް އޮޕްޝަން ބޭނުން ކުރާށެވެ .
url()
ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައިވާ މަގުތައް ބަދަލުކުރުން .
ތިމާގެ ވަކި ޑިވެލޮޕްމަންޓް ސެޓަޕް އަށް އެންމެ އެކަށީގެންވާ ކޮންމެ ގޮތެއް ބޭނުން ކުރާށެވެ.
އެކްސެސިބަލް އައިކޮންތަކެވެ
އެސިސްޓިވް ޓެކްނޮލޮޖީތަކުގެ ޒަމާނީ ވަރޝަންތަކުގައި ސީއެސްއެސް އިން އުފައްދާ ކޮންޓެންޓްގެ އިތުރުން ވަކި ޔުނިކޯޑް އަކުރުތައް އިއުލާން ކުރާނެ އެވެ. ސްކްރީން ރީޑަރސްގައި ނޭދެވޭ އަދި އޮޅުން ބޮޅުން ބޮޑު އައުޓްޕުޓެއް ނުލިބުމަށްޓަކައި (ޚާއްޞަކޮށް އައިކޮންތައް ޚުދު ޒީނަތްތެރި ކުރުމަށް ބޭނުންކުރާއިރު) އަޅުގަނޑުމެން އެތަކެތި ފޮރުވަނީ aria-hidden="true"
އެޓްރިބިއުޓާއެކުގައެވެ.
މާނަ ފޯރުކޮށްދިނުމަށް އައިކޮނެއް ބޭނުންކުރާނަމަ (އެކަނި ޒީނަތްތެރި އުނިއިތުރެއްގެ ގޮތުގައި ނޫން)، މި މާނަ އެހީތެރި ޓެކްނޮލޮޖީތަކަށް ވެސް ފޯރުކޮށްދޭކަން ޔަގީންކުރައްވާ – މިސާލަކަށް، ކްލާހާއެކު ލޮލުން ފޮރުވިފައިވާ އިތުރު ކޮންޓެންޓް ހިމަނާށެވެ .sr-only
.
އެހެން ލިޔުމެއް ނެތި ކޮންޓްރޯލްތައް އުފައްދަމުންދާނަމަ ( <button>
އެއީ ހަމައެކަނި އައިކޮން ހިމެނޭ ފަދަ) ކޮންޓްރޯލްގެ މަގުސަދު ދެނެގަތުމަށް އަބަދުވެސް ބަދަލު ކޮންޓެންޓް ފޯރުކޮށްދޭން ޖެހޭނީ، އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް މާނަ ކުރެވޭނެ ގޮތަކަށެވެ. މި ހާލަތުގައި aria-label
ޚުދު ކޮންޓްރޯލްގެ މައްޗަށް އެޓްރިބިއުޓެއް އިތުރުކުރެވިދާނެއެވެ.
މިސާލުތަކެވެ
އެއީ ބަޓަންތަކުގައި، ޓޫލްބާރަކަށް ބަޓަން ގްރޫޕްތަކުގައި، ނޭވިގޭޝަން ނުވަތަ ޕްރީޕެންޑް ފޯމް އިންޕުޓްތަކުގައި ބޭނުން ކުރާށެވެ.
އެއީ އެރަރ މެސެޖެއްކަން ފޯރުކޮށްދިނުމަށް އެލާޓެއްގައި ބޭނުންކުރާ އައިކޮނެއް ، .sr-only
އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް މި އިޝާރާތް ފޯރުކޮށްދިނުމަށް އިތުރު ޓެކްސްޓެއް އެކުލެވިގެންވެއެވެ.
ކުށް:ސައްހަ އީމެއިލް އެޑްރެހެއް ލިޔެލާށެވެ
ލިންކްތަކުގެ ލިސްޓްތައް ދައްކާލުމަށްޓަކައި ޓޮގްލް ކުރެވޭ، ކޮންޓެކްސްޗުއަލް މެނޫ. ޑްރޮޕްޑައުން ޖާވާސްކްރިޕްޓް ޕްލަގިން އާއި އެކު އިންޓަރެކްޓިވް ކޮށްފިއެވެ .
މިސާލު
ޑްރޮޕްޑައުންގެ ޓްރިގަރ އާއި ޑްރޮޕްޑައުން މެނޫ ގެ ތެރޭގައި އޮޅާލާށެވެ .dropdown
، ނުވަތަ ޑިކްލެއަރ ކުރާ އެހެން އެލިމެންޓެއް position: relative;
. ދެން މެނޫގެ އެޗްޓީއެމްއެލް އެޑް ކުރާށެވެ.
ޑްރޮޕްޑައުން މެނޫތައް ބަދަލުކޮށް މައްޗަށް (ތިރިއަށް ވުމުގެ ބަދަލުގައި) ފުޅާކުރެވޭނީ .dropup
ބެލެނިވެރިޔާއަށް އިތުރުކޮށްގެންނެވެ.
އެލައިންމަންޓް
ބައި ޑިފޯލްޓްކޮށް، ޑްރޮޕްޑައުން މެނޫއެއް އޮޓޮމެޓިކުން %100 މަތިންނާއި އޭގެ ބެލެނިވެރިޔާގެ ކަނާތްފަރާތުގައި ބެހެއްޓިފައި ހުރެއެވެ. ޑްރޮޕްޑައުން މެނޫ އަށް ކަނާތްފަރާތަށް .dropdown-menu-right
އެޑް ކޮށްލާށެވެ ..dropdown-menu
އިތުރު ޕޮޒިޝަނިންގ ބޭނުންވެދާނެއެވެ
ޑްރޮޕްޑައުންތައް އޮޓޮމެޓިކުން ސީއެސްއެސް މެދުވެރިކޮށް ޑޮކިއުމަންޓްގެ އާދައިގެ ފްލޯގެ ތެރޭގައި ޕޮޒިޝަން ކުރެވެއެވެ. މާނައަކީ ޑްރޮޕްޑައުންތައް ވަކި overflow
ޕްރޮޕަޓީތަކެއް ހުރި ބެލެނިވެރިން ކްރޮޕް ކުރެވިދާނެ ނުވަތަ ވިއުޕޯޓްގެ ބައުންޑްސް އިން ބޭރުގައި ފެނިދާނެ އެވެ. މިކަންކަން ކުރިމަތިވާ ވަރަކަށް އަމިއްލައަށް ޙައްލު ހޯދާށެވެ.
ޑިޕްރިކޭޓެޑް .pull-right
އެލައިންމަންޓް
v3.1.0 އިން ފެށިގެން އަޅުގަނޑުމެން .pull-right
ޑްރޮޕްޑައުން މެނޫތަކުގައި ޑިޕްރެކޭޓް ކޮށްފިން. މެނޫއެއް ރަނގަޅަށް އެލައިން ކުރުމަށްޓަކައި، ބޭނުން ކުރާށެވެ .dropdown-menu-right
. ނަވްބާރގައި ހުންނަ ރަނގަޅަށް އެލައިން ކުރެވިފައިވާ ނޭވް ކޮމްޕޯނެންޓްތަކުގައި މި ކްލާހުގެ މިކްސިން ވަރޝަނެއް ބޭނުންކޮށްގެން އޮޓޮމެޓިކުން މެނޫ އެލައިން ކުރެވެއެވެ. އެކަން އޯވަރރައިޑް ކުރުމަށްޓަކައި، ބޭނުން ކުރާށެވެ .dropdown-menu-left
.
ކޮންމެ ޑްރޮޕްޑައުން މެނޫއެއްގައި ވެސް ޢަމަލުތަކުގެ ބައިތައް ލޭބަލް ކުރުމަށް ހެޑަރެއް އިތުރުކުރުން.
ޑިވައިޑަރ އެވެ
ޑްރޮޕްޑައުން މެނޫއެއްގައި ވަކި ސިލްސިލާ ލިންކްތަކަށް ޑިވައިޑަރެއް އިތުރުކުރުން.
ޑިސެބިލް ކޮށްފައިވާ މެނޫ އައިޓަމްތައް
ލިންކް ޑިސެބިލް ކުރުމަށް ޑްރޮޕްޑައުންގައިވާ .disabled
a އަށް އެޑް ކުރާށެވެ .<li>
ބަޓަން ގްރޫޕާއެކު އެއް ލައިނެއްގައި ސިލްސިލާ ބަޓަންތަކެއް އެއްކޮށް ގްރޫޕް ކުރާށެވެ. އަޅުގަނޑުމެންގެ ބަޓަންސް ޕްލަގިން އާއި އެކު އިޚްތިޔާރީ ޖާވާސްކްރިޕްޓް ރޭޑިއޯ އަދި ޗެކްބޮކްސް ސްޓައިލް ބިހޭވިއަރ އަށް އިތުރުކުރުން .
ރަނގަޅުކަން ކަށަވަރުކޮށް role
ލޭބަލް ފޯރުކޮށްދިނުން
އެހީތެރި ޓެކްނޮލޮޖީތަކުން – ސްކްރީން ރީޑަރ ފަދަ – ސިލްސިލާ ބަޓަންތަކެއް ގްރޫޕްކޮށްފައިވާކަން ފޯރުކޮށްދިނުމަށްޓަކައި، އެކަށީގެންވާ role
ސިފައެއް ފޯރުކޮށްދޭންޖެހެއެވެ. ބަޓަން ގްރޫޕްތަކަށް މިއީ ވާނެ ކަމަށާއި role="group"
، ޓޫލްބާރތަކުގައި ހުންނަންވާނީ role="toolbar"
.
އެއް އިސްތިސްނާއަކީ ހަމައެކަނި އެއް ކޮންޓްރޯލެއް ހިމެނޭ ގްރޫޕްތައް (މިސާލަކަށް އެލިމެންޓްތަކާއެކު ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕްތައް ) <button>
ނުވަތަ ޑްރޮޕްޑައުންއެކެވެ.
މީގެ އިތުރުން ގްރޫޕްތަކާއި ޓޫލްބާތަކަށް ސާފުކޮށް ލޭބަލް ދޭން ޖެހޭނީ، ގިނަ އެހީތެރި ޓެކްނޮލޮޖީތަކުން އެހެން ގޮތަކަށް އެކަންކަން އިއުލާން ނުކުރާނެތީ، ރަނގަޅު role
ސިފައެއް ހުރި ނަމަވެސް. މިތަނުގައި ދީފައިވާ މިސާލުތަކުގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ aria-label
, އެކަމަކު ފަދަ ބަދަލުތައް aria-labelledby
ވެސް ބޭނުންކުރެވިދާނެއެވެ.
އަސާސީ މިސާލެވެ
.btn
އިން އިން ސިލްސިލާ ބަޓަންތަކެއް އޮޅާލާށެވެ .btn-group
.
ކޮމްބައިން ސެޓްސް އޮފް <div class="btn-group">
އިންޓޯ އަ <div class="btn-toolbar">
ފޯރ މޯރ ކޮމްޕްލެކްސް ކޮމްޕޮނެންޓްސް.
ސައިޒް ކުރުން
ގްރޫޕެއްގެ ކޮންމެ ބަޓަނަކަށް ބަޓަން ސައިޒިންގ ކްލާސްތައް އެޕްލައި ކުރުމުގެ ބަދަލުގައި، ހަމައެކަނި ކޮންމެ ބަޓަނަކަށް އިތުރުކުރުން .btn-group-*
, .btn-group
އެތައް ގްރޫޕެއް ނެސްޓް ކުރާއިރު ހިމެނޭ ގޮތަށް.
ވަޅުލުން
ޑްރޮޕްޑައުން މެނޫތައް ސިލްސިލާ ބަޓަންތަކަކާއެކު މިކްސްކޮށްފައި ބޭނުންވާ ވަގުތު .btn-group
އަނެއް އެއްޗެއްގެ ތެރޭގައި އެއް ބަހައްޓާށެވެ ..btn-group
ވަރުގަދަ ތަފާތުވުން
ބަޓަންތަކުގެ ސެޓެއް ހޮރޮޒޮންޓަލީއަށް ވުރެ ވަށައިގެން ސްޓޭކްކޮށްފައި ހުންނަ ގޮތަށް ހަދާށެވެ. މިތަނުގައި ސްޕްލިޓް ބަޓަން ޑްރޮޕްޑައުންތަކަށް ސަޕޯޓް ނުކުރެއެވެ.
ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕްތަކެވެ
ބަޓަންތަކުގެ ގްރޫޕެއް އޭގެ ބެލެނިވެރިޔާގެ މުޅި ފުޅާމިނުގައި ފުޅާކުރުމަށްޓަކައި އެއް ސައިޒެއްގައި ފޮޅިގެންދާ ގޮތަށް ހަދާށެވެ. އަދި ބަޓަން ގްރޫޕްގެ ތެރޭގައި ހުންނަ ބަޓަން ޑްރޮޕްޑައުންތަކާއެކުވެސް މަސައްކަތް ކުރެއެވެ.
ބޯޑަރުތައް ބެލެހެއްޓުން
ބަޓަންތައް ޖަސްޓިފައި ކުރުމަށް ބޭނުންކުރާ ވަކި އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް ގެ ސަބަބުން (އެއީ display: table-cell
)، އެ ބަޓަންތަކުގެ މެދުގައިވާ ބޯޑަރުތައް ދެގުނައަށް އިތުރުވެގެންދެއެވެ. ގަވާއިދުން ބަޓަން ގްރޫޕްތަކުގައި، margin-left: -1px
ބޭނުންކުރަނީ ބޯޑަރުތައް ނައްތާލުމުގެ ބަދަލުގައި ސްޓޭކް ކުރުމަށެވެ. އެހެންނަމަވެސް، margin
އާއެކު މަސައްކަތް ނުކުރެއެވެ display: table-cell
. ނަތީޖާއެއްގެ ގޮތުން، ބޫޓްސްޓްރެޕް އަށް ކަސްޓަމައިޒޭޝަންތަކަށް ބަލާއިރު، ބޯޑަރުތައް ނައްތާލަން ނުވަތަ އަލުން ކުލަ ޖައްސަން ބޭނުންވެދާނެއެވެ.
އައިއީ8 އަދި ބޯޑަރސް އެވެ
އިންޓަރނެޓް އެކްސްޕްލޯރަރ 8 އިން ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕެއްގައި ހުންނަ ބަޓަންތަކުގައި ބޯޑަރުތައް ރެންޑަރ ނުކުރަނީ، އެއީ އޮން ވިޔަސް <a>
ނުވަތަ <button>
އެލިމެންޓްތަކެއް ވިޔަސް މެއެވެ. އެކަމުން ސަލާމަތްވުމަށްޓަކައި ކޮންމެ ބަޓަނެއް އަނެއް ބަޓަނެއްގައި އޮޅާލާށެވެ .btn-group
.
އިތުރު މަޢުލޫމާތު ހޯދުމަށް #12476 ބައްލަވާށެވެ .
<a>
އުފެއްދުންތަކާއެކު _
ހަމައެކަނި ސިލްސިލާ .btn
ސ އެއް އޮޅާލާށެވެ .btn-group.btn-group-justified
.
ބަޓަންތަކެއްގެ ގޮތުގައި ހަރަކާތްތެރިވާ ލިންކްތައް
އެލިމެންޓްތައް ބަޓަންތަކެއްގެ ގޮތުގައި މަސައްކަތް ކުރުމަށް <a>
ބޭނުންކުރާނަމަ – އިން-ޕޭޖް ފަންކްޝަނަލިޓީ ޓްރިގަރ ކުރުން، މިހާރު ހުރި ޞަފްޙާގެ ތެރޭގައިވާ އެހެން ލިޔުމަކަށް ނުވަތަ ބަޔަކަށް ދިއުމަށްވުރެ – އެއަށް އެކަށީގެންވާ role="button"
.
<button>
އެލިމެންޓްތަކާއެކު ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕްތައް ބޭނުންކުރުމަށްޓަކައި ، ކޮންމެ ބަޓަނެއް ބަޓަން ގްރޫޕެއްގައި އޮޅާލަން ޖެހެއެވެ . ގިނަ ބްރައުޒާތަކުން އެލިމެންޓްތަކަށް ޖަސްޓިފިކޭޝަން ދިނުމަށްޓަކައި އަޅުގަނޑުމެންގެ ސީއެސްއެސް ރަނގަޅަށް އެޕްލައި ނުކުރާ <button>
ނަމަވެސް، އަޅުގަނޑުމެން ބަޓަން ޑްރޮޕްޑައުންތަކަށް ސަޕޯޓްކުރާތީ، އެކަން ހައްލުކުރެވޭނެއެވެ.
ޑްރޮޕްޑައުން މެނޫއެއް ޓްރިގަރ ކުރުމަށް ކޮންމެ ބަޓަނެއް ބޭނުން ކުރާނީ އޭގެ ތެރޭގައި ބަހައްޓައިގެން .btn-group
ރަނގަޅު މެނޫ މާކަޕް ފޯރުކޮށްދީގެންނެވެ.
ޕްލަގިން ޑިޕެންޑެންސީ
ބަޓަން ޑްރޮޕްޑައުންތަކުގައި ޑްރޮޕްޑައުން ޕްލަގިން ތިބާގެ ބޫޓްސްޓްރެޕްގެ ވަރޝަންގައި ހިމަނަން ޖެހެއެވެ.
އެއް ބަޓަން ޑްރޮޕްޑައުންސް
މާކަޕްގެ ބައެއް އަސާސީ ބަދަލުތަކާއެކު ބަޓަނެއް ޑްރޮޕްޑައުން ޓޮގްލަކަށް ބަދަލުކޮށްލާށެވެ.
ސްޕްލިޓް ބަޓަން ޑްރޮޕްޑައުންސް
ހަމައެފަދައިން، އެއް މާކަޕް ބަދަލުތަކާއެކު، ހަމައެކަނި ވަކި ބަޓަނަކާއެކު ސްޕްލިޓް ބަޓަން ޑްރޮޕްޑައުންތައް އުފައްދާށެވެ.
ސައިޒް ކުރުން
ބަޓަން ޑްރޮޕްޑައުންތައް މަސައްކަތް ކުރަނީ ހުރިހާ ސައިޒެއްގެ ބަޓަންތަކާއެކުގައެވެ.
ޑްރޮޕްއަޕް ވެރިއޭޝަން
ޕޭރެންޓަށް އިތުރުކޮށްގެން އެލިމެންޓްތަކުގެ މަތީގައިވާ ޑްރޮޕްޑައުން މެނޫތައް ޓްރިގަރ ކުރާށެވެ .dropup
.
އެއްވެސް ޓެކްސްޓެއް ބިނާކޮށްފައިވާ ލިޔުމެއްގެ ކުރިން، ފަހުން ނުވަތަ ދެފަރާތުގައި ލިޔުމެއް ނުވަތަ ބަޓަންތައް އިތުރުކޮށްގެން ފޯމް ކޮންޓްރޯލްތައް ފުޅާކުރުން <input>
. .input-group
އެއް ނުވަތަ އެއް އެއްޗަކަށް އުނިއިތުރުތައް ޕްރީޕެންޑް ކުރުމަށް ނުވަތަ އެޕެންޑް ކުރުމަށް .input-group-addon
ބޭނުން ކުރާށެވެ ..input-group-btn
.form-control
ޓެކްސްޗުއަލް <input>
ސ އެކަނި
<select>
ވެބްކިޓް ބްރައުޒާތަކުގައި އެލިމެންޓްތައް ފުރިހަމައަށް ސްޓައިލް ނުކުރެވޭތީ މިތަނުގައި އެލިމެންޓްތައް ބޭނުންކުރުމުން ދުރުހެލިވާށެވެ .
<textarea>
މިތަނުގައި އުފެއްދުންތައް ބޭނުންކުރުމުން ދުރުހެލިވާށެވެ ، ސަބަބަކީ rows
ބައެއް ހާލަތްތަކުގައި އެ އުފެއްދުންތަކުގެ ސިފައަށް އިޙްތިރާމް ނުކުރެވޭނެއެވެ.
އިންޕުޓް ގްރޫޕްތަކުގައި ހުންނަ ޓޫލްޓިޕްސް & ޕޮޕޯވަރސް އަށް ޚާއްޞަ ސެޓިންގ އެއް ބޭނުންވެއެވެ
އެއްގެ ތެރޭގައިވާ އެލިމެންޓްތަކުގައި ޓޫލްޓިޕްސް ނުވަތަ ޕޮޕޯވަރސް ބޭނުންކުރާއިރު .input-group
، ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށް އިޚްތިޔާރު ކަނޑައަޅަން ޖެހޭނެއެވެ container: 'body'
(އެލިމެންޓް ފުޅާވުމާއި/ނުވަތަ ޓޫލްޓިޕް ނުވަތަ ޕޮޕޯވަރ ޓްރިގަރ ކުރުމުން ވަށައިގެންވާ ކޮޅުތައް ގެއްލޭ ފަދަ) އެވެ.
އިންޕުޓެއްގެ ދެފަރާތުގައި އެއް އެޑްއޮން ނުވަތަ ބަޓަން ބަހައްޓާށެވެ. އަދި އިންޕުޓެއްގެ ދެފަރާތުގައި ވެސް އެއްޗެއް ބަހައްޓާލެވިދާނެއެވެ.
.input-group-addon
އަޅުގަނޑުމެން އެއް ފަރާތެއްގައި ގިނަ އެޑް-އޮންތަކެއް ( ނުވަތަ .input-group-btn
) އަށް ސަޕޯޓް ނުކުރަމެވެ .
އަޅުގަނޑުމެން އެއް އިންޕުޓް ގްރޫޕެއްގައި ގިނަ ފޯމް-ކޮންޓްރޯލްތަކަށް ސަޕޯޓް ނުކުރަމެވެ.
ރިލޭޓިވް ފޯމް ސައިޒިންގ ކްލާސްތައް .input-group
އަމިއްލައަށް އިތުރުކޮށް އެތެރޭގައިވާ ކޮންޓެންޓްތައް އޮޓޮމެޓިކުން ސައިޒް ބަދަލުވާނެ- ކޮންމެ އެލިމެންޓެއްގައި ފޯމް ކޮންޓްރޯލް ސައިޒް ކްލާސްތައް ތަކުރާރު ކުރުމުގެ ބޭނުމެއް ނެތެވެ.
ޓެކްސްޓްގެ ބަދަލުގައި އިންޕުޓް ގްރޫޕެއްގެ އެޑޮންގެ ތެރޭގައި އެއްވެސް ޗެކްބޮކްސް ނުވަތަ ރޭޑިއޯ އޮޕްޝަނެއް ބަހައްޓާށެވެ.
އިންޕުޓް ގްރޫޕްތަކުގައި ހުންނަ ބަޓަންތަކަކީ ތަންކޮޅެއް ތަފާތު ބަޓަންތަކެއް ކަމުން ނެސްޓިންގ އަށް އިތުރު އެއް ލެވެލްއެއް ބޭނުންވެއެވެ. ގެ ބަދަލުގައި ބަޓަންތައް އޮޅާލުމަށް .input-group-addon
ބޭނުން ކުރަން ޖެހޭނެއެވެ. .input-group-btn
މިކަން ބޭނުންވަނީ އޯވަރރައިޑް ނުކުރެވޭ ޑިފޯލްޓް ބްރައުޒާ ސްޓައިލްތަކުގެ ސަބަބުންނެވެ.
ކޮންމެ ފަރާތަކަށް އެންމެ އެޑްއޮން އެއް ބެހެއްޓޭއިރު، އެއް ބަޓަންއެއްގެ ތެރޭގައި އެތައް ބަޓަންއެއް ހުރެދާނެއެވެ .input-group-btn
.
ބޫޓްސްޓްރެޕްގައި ލިބެން ހުންނަ ނޭވްތަކުގައި ޝެއަރޑް މާކަޕް، ބޭސް .nav
ކްލާހުން ފެށިގެން، ޝެއަރޑް ސްޓޭޓްސް ވެސް ހިމެނެއެވެ. ކޮންމެ ސްޓައިލެއްގެ މެދުގައި ބަދަލުވުމަށް މޮޑިފައި ކްލާސްތައް ބަދަލުކުރުން.
ޓެބް ޕެނަލްތަކަށް navs ބޭނުންކުރުމަށް ޖާވާސްކްރިޕްޓް ޓެބްސް ޕްލަގިން ބޭނުންވެއެވެ
ޓެބް ކުރެވޭ ސަރަހައްދުތައް ހުންނަ ޓެބްތަކަށް، ޓެބްތައް ބޭނުން ކުރަން ޖެހޭނީ ޖާވާސްކްރިޕްޓް ޕްލަގިން އެވެ. އަދި މާކަޕް އަށް އިތުރު role
އަދި އޭރިއާ އެޓްރިބިއުޓްތައް ވެސް ބޭނުންވާނެ – އިތުރު ތަފްސީލަށް ޕްލަގިންގެ މިސާލު މާކަޕް ބައްލަވާށެވެ.
ނޭވިގޭޝަންގެ ގޮތުގައި ބޭނުންކުރާ ނަވްސް އަށް ވަދެވޭނެ ގޮތް ހަދާށެވެ
role="navigation"
ނޭވިގޭޝަން ބާރ އެއް ފޯރުކޮށްދިނުމަށް navs ބޭނުންކުރާނަމަ، ގެ އެންމެ ލޮޖިކަލް ޕޭރެންޓް ކޮންޓެއިނަރަށް a އިތުރުކުރުން ޔަޤީންކުރައްވާ <ul>
، ނުވަތަ <nav>
މުޅި ނެވިގޭޝަންގެ ވަށައިގެން އެލިމެންޓެއް އޮޅާލާށެވެ. އެ ރޯލު އަމިއްލައަށް އިތުރު ނުކުރައްވާ <ul>
، މިއީ އެހީތެރި ޓެކްނޮލޮޖީތަކުން ހަގީގީ ލިސްޓެއްގެ ގޮތުގައި އިއުލާން ނުކުރެވޭނެތީ އެވެ.
ޓެބްސް
ނޯޓް .nav-tabs
ކްލާހަށް ބޭނުންވަނީ .nav
ބޭސް ކްލާސް އެވެ.
ގިތެޔޮ ގިތެޔޮ
ހަމަ އެ އެޗްޓީއެމްއެލް ނަގާ ނަމަވެސް .nav-pills
އޭގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ:
ގިތެޔޮ ގިތެޔޮ ވެސް ވަރުގަދައަށް ސްޓޭކް ކުރެވޭނެ އެވެ. ހަމައެކަނި އެޑް ކޮށްލާށެވެ .nav-stacked
.
ޖަސްޓިފައިޑް
ފަސޭހައިން ޓެބް ނުވަތަ ގިތެޔޮ 768px އަށް ވުރެ ފުޅާ ސްކްރީންތަކުގައި އެމީހުންގެ ބެލެނިވެރިޔާއާ އެއްވަރު ފުޅާމިނެއްގައި ހަދާށެވެ .nav-justified
. ކުދި ސްކްރީންތަކުގައި ނެވް ލިންކްތައް ސްޓޭކްކޮށްފައި ހުރެއެވެ.
ޖަސްޓިފައިޑް ނަވްބާރ ނެވް ލިންކްތަކަށް މިވަގުތު ސަޕޯޓް ނުކުރެއެވެ.
ސަފާރީ އާއި ރެސްޕޮންސިވް ޖަސްޓިފައިޑް ނަވްސް
v9.1.2 އިން ފެށިގެން، ސަފާރީން ދައްކާ ބަގެއްގައި ބްރައުޒާ ހޮރައިޒޮންޓަލީ ރީސައިޒް ކުރުމުން ޖަސްޓިފައިޑް ނެވްގައި ރެންޑަރިންގ އެރަރސް އުފެދި ރިފްރެޝް ކުރުމުން ސާފުވެއެވެ. މި ބަގް ވެސް ޖަސްޓިފައިޑް ނެވް މިސާލުގައި ދައްކާފައިވެއެވެ .
ޑިސެބިލް ކޮށްފައިވާ ލިންކްތަކެވެ
އެއްވެސް ނޭވް ކޮމްޕޮނެންޓަކަށް (ޓެބް ނުވަތަ ގިތެޔޮ)، ގްރޭ ލިންކްސް.disabled
އަށް އެޑް ކުރާށެވެ އަދި ނޯ ހޯވަރ އިފެކްޓްސް އެއް ނުވާނެއެވެ .
ލިންކް ފަންކްޝަނަލިޓީއަށް އަސަރެއް ނުކުރެއެވެ
މި ކްލާހުން ބަދަލުވާނީ ހަމައެކަނި <a>
' ގެ ސިފައަށް، އޭގެ ފަންކްޝަނަލިޓީއަށް ނޫނެވެ. މިތަނުގައި ލިންކްތައް ޑިސެބިލް ކުރުމަށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރާށެވެ.
ޑްރޮޕްޑައުންތައް ބޭނުންކޮށްގެންނެވެ
ކުޑަކޮށް އިތުރު އެޗްޓީއެމްއެލް އާއި ޑްރޮޕްޑައުންސް ޖާވާސްކްރިޕްޓް ޕްލަގިން އާއި އެކު ޑްރޮޕްޑައުން މެނޫތައް އިތުރުކުރުން .
ޑްރޮޕްޑައުންތަކާއެކު ޓެބްތައް
ޑްރޮޕްޑައުންސް އާއި އެކު ގިތެޔޮ ގިތެޔޮ
ޑިފޯލްޓް ނަވްބާރ
ނޭވްބާރސް އަކީ ތިބާގެ އެޕްލިކޭޝަން ނުވަތަ ސައިޓަށް ނެވިގޭޝަން ހެޑަރސްގެ ގޮތުގައި ހިދުމަތްދޭ ރެސްޕޮންސިވް މެޓާ ކޮމްޕޯނެންޓްތަކެކެވެ. އެއީ މޯބައިލް ވިއުތަކުގައި ކޮލެޕްސް ވެގެން (އަދި ޓޮގްލް ކުރެވޭ) އެއްޗެހި ކަމުގައި ވާއިރު، ލިބެން ހުރި ވިއުޕޯޓް ފުޅާމިން އިތުރުވުމުން ހޮރައިޒޮންޓަލް ވެގެންދެއެވެ.
ޖަސްޓިފައިޑް ނަވްބާރ ނެވް ލިންކްތަކަށް މިވަގުތު ސަޕޯޓް ނުކުރެއެވެ.
ފުރިފައިވާ ކޮންޓެންޓް
ބޫޓްސްޓްރެޕް އަށް ނޭވްބާރުގައި ހުންނަ ކޮންޓެންޓަށް ބޭނުންވާ ޖާގަ ނޭނގޭތީ، ދެވަނަ ސަފެއްގައި ކޮންޓެންޓް ރެޕް ކުރުމުގައި މައްސަލަތަކެއް ދިމާވެދާނެ އެވެ. މިކަން ހައްލުކުރުމަށްޓަކައި ކުރެވިދާނެ ކަންތައްތައް:
- ނަވްބާރ ތަކެތީގެ މިންވަރު ނުވަތަ ފުޅާމިން މަދުކުރުން.
- ރެސްޕޮންސިވް ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންކޮށްގެން ވަކި ސްކްރީން ސައިޒްތަކެއްގައި ވަކި ނެވްބާރ ތަކެތި ފޮރުވުން .
- ތިބާގެ ނެވްބާ ކޮލެޕްސްޑް މޯޑާއި ހޮރައިޒޮންޓަލް މޯޑާ ދެމެދު ބަދަލުވާ ހިސާބު ބަދަލުކޮށްލާށެވެ. ވެރިއޭބަލް ކަސްޓަމައިޒް
@grid-float-breakpoint
ނުވަތަ އަމިއްލަ މީޑިއާ ކިއުއަރީ އިތުރުކުރުން.
ޖާވާސްކްރިޕްޓް ޕްލަގިން ބޭނުންވެއެވެ
ޖާވާސްކްރިޕްޓް ޑިސެބިލްކޮށް، ވިއުޕޯޓް ހަނިވެ، ނެވްބާ ކޮލެޕްސް ވާވަރަށް، ނޭވްބާ ފުޅާކޮށް، ގެ ތެރޭގައި ހުންނަ ކޮންޓެންޓް ބަލާލުމަކީ ކުރެވޭނެ ކަމެއް ނޫނެވެ .navbar-collapse
.
ރެސްޕޮންސިވް ނެވްބާރ ގައި ކޮލަޕްސް ޕްލަގިން ތިބާގެ ބޫޓްސްޓްރެޕްގެ ވަރޝަންގައި ހިމަނަން ޖެހެއެވެ.
ވެއްޓިފައިވާ މޯބައިލް ނަވްބާ ބްރޭކްޕޮއިންޓް ބަދަލުކުރުން
ވިއުޕޯޓް އަށް ވުރެ ހަނިވުމުން ނެވްބާ އޭގެ ވަރުގަދަ މޮބައިލް ވިއުއަށް ކޮލެޕްސްވެ، @grid-float-breakpoint
ވިއުޕޯޓް މަދުވެގެން @grid-float-breakpoint
ފުޅާމިނުގައި ހުންނައިރު އޭގެ ހޮރައިޒޮންޓަލް ނޮން މޮބައިލް ވިއުއަށް ފުޅާވެގެންދެއެވެ. ނެވްބާ ކޮލެޕްސް/އެކްސްޕެންޑް ވާ ވަގުތު ކޮންޓްރޯލް ކުރުމަށްޓަކައި ލެސް ސޯސްގައި މި ވެރިއޭބަލް އެޖެސްޓް ކުރާށެވެ. ޑިފޯލްޓް ވެލިއު އަކީ 768px
(އެންމެ ކުޑަ "ކުޑަ" ނުވަތަ "ޓެބްލެޓް" ސްކްރީން) އެވެ.
ނަވްބާރސް އަށް ވަދެވޭނެ ގޮތް ހަދާށެވެ
އެލިމެންޓެއް ބޭނުންކުރުން <nav>
ނުވަތަ، a ފަދަ މާ ޖެނެރިކް އެލިމެންޓެއް ބޭނުންކުރާނަމަ، އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް ލޭންޑްމާކް ރީޖަނެއްގެ ގޮތުގައި ސާފުކޮށް ދެނެގަތުމަށްޓަކައި، ކޮންމެ ނަވްބާރއަކަށް <div>
a އިތުރުކުރުން .role="navigation"
ބްރޭންޑް އިމޭޖް
ނަވްބާރ ބްރޭންޑް ބަދަލުކޮށް އަމިއްލަ ތަސްވީރަކުން ޓެކްސްޓް ބަދަލުކޮށް <img>
. ގެ .navbar-brand
އަމިއްލަ ޕެޑިންގ އާއި އުސްމިން ހުންނަ ކަމުން، ތިމާގެ އިމޭޖަށް ބަލާފައި ބައެއް ސީއެސްއެސްތައް އޯވަރރައިޑް ކުރަން ޖެހިދާނެއެވެ.
.navbar-form
ހަނި ވިއުޕޯޓްތަކުގައި ރަނގަޅަށް ވަރުގަދަ އެލައިންމަންޓާއި ކޮލަޕްސްޑް ބިހޭވިއަރ އަށް ފޯމް ކޮންޓެންޓް އެތެރޭގައި ބަހައްޓާށެވެ . ނެވްބާ ކޮންޓެންޓްގެ ތެރޭގައި އެއީ ކޮންތާކުކަން ނިންމުމަށް އެލައިންމަންޓް އޮޕްޝަންސް ބޭނުން ކުރާށެވެ.
ހެޑްސް އަޕް އެއްގެ ގޮތުގައި، ވިއާ މިކްސިން .navbar-form
އާއި އެކު އޭގެ ގިނަ ކޯޑް ހިއްސާ ކުރެ އެވެ. ބައެއް ފޯމް ކޮންޓްރޯލްތައް، އިންޕުޓް ގްރޫޕްތައް ފަދައިން، ނެވްބާރެއްގެ ތެރޭގައި ރަނގަޅަށް ދައްކާލަން ފިކްސްޑް ވިޑްތްތައް ބޭނުންވެދާނެއެވެ..form-inline
.navbar-btn
ކްލާސް އަށް <button>
ރެސިޑެންޓް ނުވާ އެލިމެންޓްތަކަށް އެޑްކޮށް <form>
ނަވްބާރގައި ވަރުގަދައަށް ސެންޓަރ ކޮށްލާށެވެ.
ކޮންޓެކްސްޓަށް ޚާއްޞަ ބޭނުންކުރުމެވެ
ސްޓޭންޑަރޑް ބަޓަން ކްލާސްތައް ފަދައިން , .navbar-btn
ބޭނުންކުރެވިދާނެ އޮން <a>
އަދި <input>
އެލިމެންޓްސް. ނަމަވެސް ގެ ތެރޭގައިވާ އެލިމެންޓްތަކުގެ .navbar-btn
މައްޗަށް އެއްވެސް ކްލާސްތަކެއްވެސް އަދި ސްޓޭންޑަރޑް ބަޓަން ކްލާސްތައްވެސް ބޭނުންކޮށްގެން ނުވާނެއެވެ .<a>
.navbar-nav
ލިޔުންކޮޅު
.navbar-text
އާންމުކޮށް <p>
ރަނގަޅަށް ލީޑިންގ އާއި ކުލަ ހޯދުމަށް ޓެގެއްގައި ލިޔެފައިވާ އެލިމެންޓެއްގައި ލިޔުމުގެ ސްޓްރިންގްތައް އޮޅާލާށެވެ .
ނޮން ނޭވް ލިންކްތަކެވެ
ގަވާއިދުން ނެވްބާރ ނެވިގޭޝަން ކޮމްޕޮނެންޓްގެ ތެރޭގައި ނުހިމެނޭ ސްޓޭންޑަރޑް ލިންކްތައް ބޭނުންކުރާ .navbar-link
މީހުންނަށް، ޑިފޯލްޓް އަދި އިންވާސް ނެވްބާރ އޮޕްޝަންތަކަށް ރަނގަޅު ކުލަތައް އިތުރުކުރުމަށް ކްލާސް ބޭނުންކުރައްވާށެވެ.
ކޮމްޕޮނެންޓް އެލައިންމަންޓް
.navbar-left
ނުވަތަ .navbar-right
ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންކޮށްގެން، nav ލިންކްތައް، ފޯމްތައް، ބަޓަންތައް، ނުވަތަ ލިޔުންތައް އެލައިންކުރުން . ދެ ކްލާހުން ވެސް ކަނޑައެޅިފައިވާ ދިމާލަށް ސީއެސްއެސް ފްލޯޓެއް އިތުރުކުރާނެ އެވެ. މިސާލަކަށް nav ލިންކްތައް އެލައިން ކުރުމަށްޓަކައި، އެ ލިންކްތައް ވަކި <ul>
ޔުޓިލިޓީ ކްލާހެއް އެޕްލައިކޮށްފައި ހުންނަ ތަނެއްގައި ބަހައްޓާށެވެ.
މި ކްލާސްތަކަކީ އަދި ގެ މިކްސިން-އެޑް ވަރޝަންތަކެއް .pull-left
ނަމަވެސް .pull-right
، ޑިވައިސް ސައިޒްތަކުގެ ތެރެއިން ނަވްބާ ކޮމްޕޯނެންޓްތައް ފަސޭހައިން ބެލެހެއްޓުމަށްޓަކައި މީޑިއާ ކިއުއަރީތަކަށް ސްކޯޕް ކުރެވިފައިވެއެވެ.
އެތައް ކޮމްޕޯނެންޓެއް ރަނގަޅަށް އެލައިން ކުރުން
ނަވްބާރުތަކުގައި މިވަގުތު ގިނަ .navbar-right
ކްލާސްތަކެއް ހުރުމުން ލިމިޓެޝަނެއް އެބަހުއްޓެވެ. ކޮންޓެންޓް ރަނގަޅަށް ޖާގަ ދިނުމަށްޓަކައި، އެންމެ ފަހު .navbar-right
އެލިމެންޓްގައި ނެގެޓިވް މާރޖިން ބޭނުންކުރަމެވެ. އެ ކްލާސް ބޭނުންކުރާ އެތައް އުފެއްދުންތަކެއް ހުންނައިރު، މި މާރޖިންތައް ގަސްތުކުރި ގޮތަށް މަސައްކަތް ނުކުރެއެވެ.
އަޅުގަނޑުމެން މިކަމަށް އަލުން ބަލާލާނީ v4 ގައި އެ ކޮމްޕޮނެންޓް އަލުން ލިޔެވޭނެ ވަގުތުގައެވެ.
މައްޗަށް ފިކްސްކޮށްފައި
ސެންޓަރ އަދި ޕެޑް ނަވްބާ ކޮންޓެންޓް އަށް ނުވަތަ އެއް އިތުރުކޮށް .navbar-fixed-top
ހިމަނާށެވެ ..container
.container-fluid
ބޮޑީ ޕެޑިންގ ބޭނުންވެއެވެ
padding
ފިކްސްޑް ނެވްބާރ އިން ތިބާގެ އެހެން ކޮންޓެންޓް އޯވަރލޭ ކުރާނެ، ތިބާ ގެ މައްޗަށް އިތުރުކޮށްފިނަމަ ނޫނީ <body>
. އަމިއްލަ އަގުތައް ޓްރައިކޮށްލައްވާ ނުވަތަ ތިރީގައިވާ އަޅުގަނޑުމެންގެ ސްނިޕެޓް ބޭނުން ކުރައްވާށެވެ. އިރުޝާދު: ޑިފޯލްޓްކޮށް ނަވްބާރުގެ އުސްމިނަކީ 50px އެވެ.
މިކަން ކޯރ ބޫޓްސްޓްރެޕް ސީއެސްއެސް އަށް ފަހު ހިމަނާކަން ޔަގީން ކުރައްވާށެވެ .
ތިރިއަށް ފިކްސްކޮށްފައި
ސެންޓަރ އަދި ޕެޑް ނަވްބާ ކޮންޓެންޓް އަށް ނުވަތަ އެއް އިތުރުކޮށް .navbar-fixed-bottom
ހިމަނާށެވެ ..container
.container-fluid
ބޮޑީ ޕެޑިންގ ބޭނުންވެއެވެ
padding
ފިކްސްޑް ނެވްބާރ އިން ތިބާގެ އެހެން ކޮންޓެންޓް އޯވަރލޭ ކުރާނެ، ތިބާ ގެ ތިރީއަށް އިތުރުކޮށްފިނަމަ ނޫނީ <body>
. އަމިއްލަ އަގުތައް ޓްރައިކޮށްލައްވާ ނުވަތަ ތިރީގައިވާ އަޅުގަނޑުމެންގެ ސްނިޕެޓް ބޭނުން ކުރައްވާށެވެ. އިރުޝާދު: ޑިފޯލްޓްކޮށް ނަވްބާރުގެ އުސްމިނަކީ 50px އެވެ.
މިކަން ކޯރ ބޫޓްސްޓްރެޕް ސީއެސްއެސް އަށް ފަހު ހިމަނާކަން ޔަގީން ކުރައްވާށެވެ .
ސްޓޭޓިކް ޓޮޕް
ޕޭޖާ އެކު ސްކްރޯލް ކުރާ ފުލް ވިޑްތް ނެވްބާރެއް އުފައްދައިގެން ނުވަތަ ސެންޓަރަށް އިތުރުކޮށް އަދި ޕެޑް ނެވްބާ ކޮންޓެންޓް ހިމަނާށެވެ .navbar-static-top
..container
.container-fluid
ކްލާސްތަކާ ހިލާފަށް .navbar-fixed-*
އެއްވެސް ޕެޑިންގއެއް ބަދަލުކުރަން ނުޖެހޭ body
.
އިންވާޓް ކޮށްފައިވާ ނަވްބާރ އެވެ
އިތުރުކޮށްގެން ނަވްބާރގެ ލޫކް ބަދަލުކުރާށެވެ .navbar-inverse
.
ނޭވިގޭޝަނަލް ހައިރާކީއެއްގެ ތެރޭގައި މިހާރު ހުރި ޞަފްޙާ ހުރި ތަން ދައްކާށެވެ.
ސީއެސްއެސް އަށް ސެޕަރޭޓަރުތައް އޮޓޮމެޓިކުން އިތުރުކުރެވެނީ :before
އަދި content
.
މަލްޓި ޕޭޖް ޕޭޖިނޭޝަން ކޮމްޕޮނެންޓާއެކު ތިމާގެ ސައިޓަށް ނުވަތަ އެޕްއަށް ޕޭޖިނޭޝަން ލިންކްތައް ފޯރުކޮށްދިނުން، ނުވަތަ ސާދާ ޕޭޖަރ އަލްޓަރނޭޓިވް .
އާރްޑީއޯ އިން އިންސްޕަޔަރ ކޮށްފައިވާ ސާދާ ޕޭޖިނޭޝަން، އެޕްތަކާއި ސަރޗް ނަތީޖާތަކަށް މޮޅު. ބޮޑު ބްލޮކަކީ ގެއްލިގެން ދާން އުނދަގޫ، ފަސޭހައިން ސްކޭލް ކުރެވޭ، އަދި ބޮޑެތި ކްލިކް އޭރިއާތައް ލިބޭ ބްލޮކެކެވެ.
ނުކުޅެދުންތެރިކަން ހުންނަ އަދި ހަރަކާތްތެރި ދައުލަތްތަކެވެ
އެކި ހާލަތްތަކަށް ލިންކްތައް ކަސްޓަމައިޒް ކުރެވޭނެ އެވެ. .disabled
ކްލިކް ނުކުރެވޭ ލިންކްތަކަށް އަދި .active
މިހާރު ހުރި ޞަފްޙާ ދައްކާލުމަށް ބޭނުން ކުރާށެވެ .
އަޅުގަނޑުމެން ލަފާދެނީ <span>
، ކްލިކް ފަންކްޝަނަލިޓީ ނައްތާލުމަށްޓަކައި، ކްލިކް ފަންކްޝަނަލިޓީ ނައްތާލުމަށްޓަކައި، އަށް އެކްޓިވް ނުވަތަ ޑިސެބިލްޑް އެންކަރސް ސްވޮޕް އައުޓް ކުރުމަށް، ނުވަތަ ކުރީގެ/ދެން އޮތް ތިރިތަކުގެ ހާލަތުގައި އެންކަރ ދޫކޮށްލުމަށެވެ.
ސައިޒް ކުރުން
ފެންސީ ބޮޑު ނުވަތަ ކުޑަ ޕޭޖިނޭޝަން ހެއްޔެވެ؟ އިތުރުކުރުން .pagination-lg
ނުވަތަ .pagination-sm
އިތުރު ސައިޒްތަކަށް.
ލައިޓް މާކަޕް އަދި ސްޓައިލްތަކާއެކު ސާދާ ޕޭޖިނޭޝަން އިމްޕްލިމެންޓޭޝަންތަކަށް އަވަސް ކުރީގެ އަދި ކުރިއަށް އޮތް ލިންކްތައް. ބްލޮގް ނުވަތަ މަޖައްލާ ފަދަ ސާދާ ސައިޓްތަކަށް ވަރަށް ރަނގަޅެވެ.
ޑިފޯލްޓް މިސާލެވެ
ބައި ޑިފޯލްޓްކޮށް، ޕޭޖަރ ސެންޓަރ ލިންކްތައް.
އެލައިން ކުރެވިފައިވާ ލިންކްތަކެވެ
ނުވަތަ ކޮންމެ ލިންކެއް އެއްފަރާތްތަކަށް އެލައިން ކުރެވިދާނެއެވެ:
އިޚްތިޔާރީ ނުކުޅެދުންތެރިކަން ހުންނަ ޙާލަތެވެ
ޕޭޖަރ ލިންކްތަކުގައި ވެސް ޕޭޖިނޭޝަން އިން ޖެނެރަލް .disabled
ޔުޓިލިޓީ ކްލާސް ބޭނުން ކުރެއެވެ.
މިސާލު
މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
ލިބެން ހުރި ވައްތަރުތައް
ލޭބަލެއްގެ ސިފަ ބަދަލުކުރުމަށްޓަކައި ތިރީގައިވާ މޮޑިފައިޓަރ ކްލާސްތަކުގެ ތެރެއިން އެއްވެސް ކްލާހެއް އިތުރުކުރުން.
ޑިފޯލްޓް
ޕްރައިމަރީ
ސަކްސެސް
އިންފޯ
ވާނިންގ
ޑޭންޖަރ
ޓަނުން ޓަނަށް ލޭބަލް ޖަހާފައިވޭތޯ؟
ރެންޑަރިންގ މައްސަލަތައް ދިމާވެދާނެ، ހަނި ކޮންޓެއިނަރެއްގެ ތެރޭގައި ދިހަވަރަކަށް އިންލައިން ލޭބަލް ހުންނައިރު، ކޮންމެ ކޮންޓެއިނަރެއްގައިވެސް އޭގެ އަމިއްލަ inline-block
އެލިމެންޓެއް (އައިކޮން އެއް ފަދައިން) ހުރެއެވެ. މިކަމާ ކުރިމަތިލާން ޖެހޭ ގޮތަކީ ސެޓިންގ display: inline-block;
އެވެ . ކޮންޓެކްސްޓާއި މިސާލަކަށް ބަލާއިރު #13219 ބައްލަވާށެވެ .
<span class="badge">
ލިންކްތަކާއި، ބޫޓްސްޓްރެޕް ނެވްސް، އަދި އެހެނިހެން ކަންކަމަށް އެއް އިތުރުކޮށްގެން އާ ނުވަތަ ނުކިޔާ ތަކެތި ފަސޭހައިން ހައިލައިޓް ކުރެވޭނެއެވެ.
އަމިއްލައަށް ވެއްޓިގެން ދިއުމެވެ
އައު ނުވަތަ ނުކިޔާ އެއްޗެއް ނެތް އިރު، ބެޖްތައް ފަސޭހައިން ކޮލެޕްސް ވާނީ (ސީއެސްއެސްގެ :empty
ސެލެކްޓަރ މެދުވެރިކޮށް) އެތެރޭގައި އެއްވެސް ކޮންޓެންޓެއް ނެތް ނަމައެވެ.
ކްރޮސް ބްރައުޒާ ކޮމްޕެޓިބިލިޓީ
އިންޓަނެޓް އެކްސްޕްލޯރަރ 8 ގައި ބެޖްތައް ސެލްފް ކޮލަޕްސް ނުވާނެ ސަބަބަކީ :empty
ސެލެކްޓަރަށް ސަޕޯޓް ނެތުމުންނެވެ.
އެކްޓިވް ނެވް ސްޓޭޓްތަކަށް އެޑެޕްޓް ވެއެވެ
ގިތެޔޮ ނޭވިގޭޝަންތަކުގައި އެކްޓިވް ސްޓޭޓްތަކުގައި ބެޖް ބެހެއްޓުމަށް ބިލްޓް-އިން ސްޓައިލްތައް ހިމަނާފައިވެ އެވެ.
ސައިޓްގައި މުހިއްމު ކޮންޓެންޓް ދައްކާލުމަށްޓަކައި އިޚްތިޔާރީ ގޮތެއްގައި މުޅި ވިއުޕޯޓް ދިގުކޮށްލެވޭނެ ލުއި، ފްލެކްސިބަލް ކޮމްޕޮނެންޓެކެވެ.
ހެލޯ، ދުނިޔެ!
މިއީ ފީޗާ ކޮންޓެންޓް ނުވަތަ މައުލޫމާތަށް އިތުރު ސަމާލުކަން ދިނުމަށްޓަކައި ސާދާ ޖަމްބޮޓްރޯން ސްޓައިލް ކޮމްޕޮނެންޓެއް ކަމަށްވާ ސާދާ ހީރޯ ޔުނިޓެކެވެ.
އިތުރަށް ދަސްކުރައްވާ
ޖަމްބޮޓްރޯން ފުރިހަމަ ފުޅާމިނުގައި ހެދުމަށްޓަކައި، އަދި ވަށައިގެންވާ ކޮޅުތަކެއް ނެތި، ހުރިހާ .container
s ގެ ބޭރުގައި ބަހައްޓައި، އޭގެ ބަދަލުގައި އެތެރެއަށް އިތުރު ކުރާށެވެ .container
.
h1
ޞަފްޙާއެއްގައި ހުންނަ ކޮންޓެންޓްގެ ބައިތައް އެކަށީގެންވާ ގޮތެއްގައި ސްޕޭސް އައުޓްކޮށް ސެގްމެންޓް ކުރުމަށް ފަސޭހަ ޝެލްއެކެވެ . އެއީ h1
's ޑިފޯލްޓް small
އެލިމެންޓްގެ އިތުރުން އެހެން ގިނަ ކޮމްޕޯނެންޓްތައް (އިތުރު ސްޓައިލްތަކާއެކު) ބޭނުންކުރެވޭނެ އެއްޗެކެވެ.
ބޫޓްސްޓްރެޕްގެ ގްރިޑް ސިސްޓަމް ތަމްބްނެއިލް ކޮމްޕޮނެންޓާއެކު ފުޅާކޮށް، ތަސްވީރުތަކާއި ވީޑިއޯތަކާއި ލިޔުންތަކާއި އަދިވެސް އެތައް ކަމެއްގެ ގްރިޑްތައް ފަސޭހައިން ދައްކާލެވޭނެ އެވެ.
ތަފާތު އުސްމިނާއި/ނުވަތަ ފުޅާމިނުގެ ތަމްބްނެއިލްތަކުގެ ޕިންޓްރެސްޓް ފަދަ ތަމްބްނެއިލްތައް ޕްރެޒެންޓޭޝަން ހޯދަން ބޭނުންނަމަ، މެސަންރީ , އައިސޮޓޮޕް , ނުވަތަ ސަލްވަޓޯރ ފަދަ ތިންވަނަ ފަރާތެއްގެ ޕްލަގިންއެއް ބޭނުންކުރަން ޖެހޭނެއެވެ .
ޑިފޯލްޓް މިސާލެވެ
ބައި ޑިފޯލްޓްކޮށް، ބޫޓްސްޓްރެޕްގެ ތަމްބްނެއިލްތައް ފަރުމާކޮށްފައިވަނީ ލިންކް ކުރެވިފައިވާ ތަސްވީރުތައް އެންމެ ކުޑަމިނުން ބޭނުންވާ މާކަޕް އާއި އެކު ދައްކާލުމަށްޓަކައެވެ.
ކަސްޓަމް ކޮންޓެންޓް
ތަންކޮޅެއް އިތުރު މާކަޕް ކުރުމުން، ސުރުޚީ، ޕެރެގްރާފް، ނުވަތަ ބަޓަން ފަދަ ކޮންމެ ބާވަތެއްގެ އެޗްޓީއެމްއެލް ކޮންޓެންޓެއް ތަމްބްނެއިލްތަކަށް އިތުރު ކުރެވޭނެ އެވެ.
ތަމްބްނެއިލް ލޭބަލް
ކްރާސް ޖަސްޓޯ އޮޑިއޯ، ޑަޕިބަސް އެސިސިސް ފެސިލިސިސް އިން، އެޖެސްޓާސް އެގޭޓް ކުއަމް. ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
ގޮށް ގޮށް
ތަމްބްނެއިލް ލޭބަލް
ކްރާސް ޖަސްޓޯ އޮޑިއޯ، ޑަޕިބަސް އެސިސިސް ފެސިލިސިސް އިން، އެޖެސްޓާސް އެގޭޓް ކުއަމް. ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
ގޮށް ގޮށް
ތަމްބްނެއިލް ލޭބަލް
ކްރާސް ޖަސްޓޯ އޮޑިއޯ، ޑަޕިބަސް އެސިސިސް ފެސިލިސިސް އިން، އެޖެސްޓާސް އެގޭޓް ކުއަމް. ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
ގޮށް ގޮށް
އާންމު ޔޫޒަރ އެކްޝަންތަކަށް ކޮންޓެކްސްޗުއަލް ފީޑްބެކް މެސެޖުތައް ފޯރުކޮށްދިނުން، ލިބެންހުރި އަދި ފްލެކްސިބަލް އެލާޓް މެސެޖުތަކުގެ ތެރެއިން އަތްމަތި ދަތި މެސެޖުތަކާއެކު ފޯރުކޮށްދިނުން.
މިސާލުތަކެވެ
އަސާސީ އެލާޓް މެސެޖުތަކަށް ކޮންމެ ލިޔުމަކާއި އިޚްތިޔާރީ ޑިސްމިސް ބަޓަން .alert
އެއް އަދި ހަތަރު ކޮންޓެކްސްޗުއަލް ކްލާސްގެ ތެރެއިން އެއް ކްލާސް (އެބަހީ، ) ވަށާލާށެވެ..alert-success
ޑިފޯލްޓް ކްލާހެއް ނެތެވެ
އެލާޓްތަކުގައި ޑިފޯލްޓް ކްލާސްތަކެއް ނެތް، ހަމައެކަނި ބޭސް އަދި މޮޑިފައިޓަރ ކްލާސްތައް ހުރެއެވެ. ޑިފޯލްޓް ގްރޭ އެލާޓަކީ މާ ބޮޑު މާނައެއް ނެތް އެއްޗެއް ކަމުން ކޮންޓެކްސްޗުއަލް ކްލާސް މެދުވެރިކޮށް ވައްތަރެއް ކަނޑައަޅަން ޖެހެ އެވެ. ކާމިޔާބީ، މައުލޫމާތު، އިންޒާރު، ނުވަތަ ނުރައްކަލުން ޚިޔާރުކުރައްވާށެވެ.
ވަރަށް ފުރިހަމަ! މި މުހިންމު އެލާޓް މެސެޖު ކާމިޔާބުކަމާއެކު ކިޔައިފިއެވެ.
ހެޑްސް އަޕް! މި އެލާޓަށް ތިބާގެ ސަމާލުކަން ބޭނުންވާ ނަމަވެސް މިއީ ސުޕަ މުހިންމު އެލާޓެއް ނޫނެވެ.
އިންޒާރު! ރަނގަޅީ އަމިއްލައަށް ޗެކް ކޮށްލަން، ތިޔަ ފެންނަނީ މާ ރަނގަޅަކަށް ނޫން.
އޯ ސްނެޕް! ދެތިން އެއްޗެއް ބަދަލުކޮށްފައި އަނެއްކާވެސް ހުށަހަޅަން މަސައްކަތް ކުރާށެވެ.
ޑިސްމިސިބަލް އެލާޓްތައް
.alert-dismissible
އިޚްތިޔާރީ އަދި ކްލޯޒް ބަޓަން އިތުރުކޮށްގެން ކޮންމެ އެލާޓެއްގެ މައްޗަށް ބިލްޑް ކުރާށެވެ.
ޖާވާސްކްރިޕްޓް އެލާޓް ޕްލަގިން ބޭނުންވެއެވެ
ފުރިހަމައަށް މަސައްކަތްކުރާ، ޑިސްމިސިބަލް އެލާޓްތަކަށްޓަކައި، އެލާޓްތައް ބޭނުންކުރަން ޖެހޭނީ ޖާވާސްކްރިޕްޓް ޕްލަގިން އެވެ.
އިންޒާރު! ރަނގަޅީ އަމިއްލައަށް ޗެކް ކޮށްލަން، ތިޔަ ފެންނަނީ މާ ރަނގަޅަކަށް ނޫން.
އެލާޓްތަކުގައި ލިންކްތައް
.alert-link
ކޮންމެ އެލާޓެއްގެ ތެރޭގައި ވެސް މެޗިންގ ކުލަކުލައިގެ ލިންކްތައް އަވަހަށް ފޯރުކޮށްދިނުމަށް ޔުޓިލިޓީ ކްލާސް ބޭނުން ކުރާށެވެ .
ސާދާ އަދިވެސް ފަސޭހަ ޕްރޮގްރެސް ބާރތަކާއެކު ވޯކްފްލޯއެއް ނުވަތަ ފިޔަވަޅެއް ކުރިއަށްދާ ގޮތާ ބެހޭގޮތުން ތާރީޚީ ފީޑްބެކް ފޯރުކޮށްދިނުން.
ކްރޮސް ބްރައުޒާ ކޮމްޕެޓިބިލިޓީ
ޕްރޮގްރެސް ބާރތަކުގައި ސީއެސްއެސް3 ޓްރާންސިޝަންތަކާއި އެނިމޭޝަންތައް ބޭނުންކޮށްގެން އެމީހުންގެ ބައެއް އިފެކްޓްތައް ހާސިލް ކުރެވެއެވެ. މި ފީޗާސްތައް އިންޓަރނެޓް އެކްސްޕްލޯރަރ 9 އަދި އޭގެ ދަށުގައިވާ ނުވަތަ ފަޔަރފޮކްސްގެ ކުރީގެ ވަރޝަންތަކުގައި ސަޕޯޓް ނުކުރެއެވެ. އޮޕެރާ 12 އިން އެނިމޭޝަންތަކަށް ސަޕޯޓް ނުކުރެއެވެ.
ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީ (ސީއެސްޕީ) ކޮމްޕެޓިބިލިޓީ
ތިޔަ ވެބްސައިޓުގައި ހުއްދަ ނުދޭ ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީ (ސީއެސްޕީ) އެއް އޮތްނަމަ، ތިރީގައިވާ އަޅުގަނޑުމެންގެ މިސާލުތަކުގައިވާ ގޮތަށް ޕްރޮގްރެސް ބާރ ވިޑްތްސް ސެޓް style-src 'unsafe-inline'
ކުރުމަށް އިންލައިން އެޓްރިބިއުޓްސް ބޭނުން ނުކުރެވޭނެއެވެ . style
ހަރުކަށި ސީއެސްޕީތަކާ އެއްގޮތްވާ ފުޅާމިންތައް ސެޓްކުރުމަށް ބޭނުންކުރާ ބަދަލު ގޮތްތަކުގެ ތެރޭގައި ކުޑަކޮށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުންކުރުން (އެއީ ސެޓްކުރާ element.style.width
) ނުވަތަ ކަސްޓަމް ސީއެސްއެސް ކްލާސްތައް ބޭނުންކުރުން ހިމެނެއެވެ.
އަސާސީ މިސާލެވެ
ޑިފޯލްޓް ޕްރޮގްރެސް ބާރ.
ލޭބަލް އާއި އެކު
ފެންނަ ޕަސެންޓެއް ދައްކާލުމަށްޓަކައި ޕްރޮގްރެސް ބާރ ގެ ތެރެއިން <span>
ވިތު ކްލާސް ނައްތާލާށެވެ ..sr-only
ދަށް ޕަސެންޓްތަކުގައި ވެސް ލޭބަލް ޓެކްސްޓް ކިޔޭނެ ގޮތަށް ހުރިކަން ކަށަވަރުކުރުމަށްޓަކައި، min-width
ޕްރޮގްރެސް ބާރަށް a އިތުރުކުރުމަށް ވިސްނާށެވެ.
ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެވެ
ޕްރޮގްރެސް ބާރތަކުގައި އެއްގޮތް ސްޓައިލްތަކަށް ބޭނުންކުރަނީ އެއް ބަޓަންގެ ބައެއް އަދި އެލާޓް ކްލާސްތަކެވެ.
ސްޓްރައިޕްޑް އެވެ
ސްޓްރައިޕްޑް އިފެކްޓެއް އުފެއްދުމަށް ގްރޭޑިއަންޓެއް ބޭނުންކުރެއެވެ. އައިއީ9 އާއި އޭގެ ދަށުގައި ލިބެން ނެތެވެ.
އެނިމޭޓެޑް އެވެ
ކަނާތުން ވާތް ފަރާތަށް ސްޓްރައިޕްތައް އެނިމޭޓް ކުރުމަށް ޓު އަށް .active
އިތުރު ކުރާށެވެ . .progress-bar-striped
އައިއީ9 އާއި އޭގެ ދަށުގައި ލިބެން ނެތެވެ.
ސްޓޭކް ކޮށްފައި
.progress
އެތަކެތި ސްޓޭކް ކުރުމަށްޓަކައި އެއް ބާރެއްގެ ތެރެއަށް އެތައް ބާރެއް ބަހައްޓާށެވެ .
35% ފުރިހަމަ (ކާމިޔާބު)
20% ފުރިހަމަ (އިންޒާރު)
10% ފުރިހަމަ (ނުރައްކާ)
ޓެކްސްޗުއަލް ކޮންޓެންޓާއެކު ކަނާތް ނުވަތަ ވާތްފަރާތަށް އެލައިންކޮށްފައިވާ ތަސްވީރެއް ހިމެނޭ އެކި ވައްތަރުގެ ކޮމްޕޯނެންޓްތައް (ބްލޮގް ކޮމެންޓްސް، ޓްވީޓް ފަދަ) ބިނާކުރުމަށް ބޭނުންކުރާ އެބްސްޓްރެކްޓް އޮބްޖެކްޓް ސްޓައިލްސް.
ޑިފޯލްޓް މީޑިއާ އިން ކޮންޓެންޓް ބްލޮކެއްގެ ކަނާތް ނުވަތަ ވާތްފަރާތުގައި މީޑިއާ އޮބްޖެކްޓެއް (އިމޭޖް، ވީޑިއޯ، އޯޑިއޯ) ދައްކާނެއެވެ.
އެ ކްލާސްތައް .pull-left
އަދި .pull-right
ވެސް އުފެދިފައިވާ އަދި ކުރިން މީޑިއާ ކޮމްޕޮނެންޓްގެ ބައެއްގެ ގޮތުގައި ބޭނުންކުރި ނަމަވެސް v3.3.0 ގެ ނިޔަލަށް އެ ބޭނުންކުރުމަށް ޑިޕްރެކޭޓް ކުރެވިފައިވެއެވެ. އެއީ ގާތްގަނޑަކަށް .media-left
އަދި އާއި އެއްވަރު އެއްޗެހި .media-right
ކަމުގައި ވިޔަސް، އެކަން ފިޔަވައި އެއަށްފަހު html ގައި .media-right
ބަހައްޓަން ޖެހެއެވެ ..media-body
އެ ތަސްވީރުތައް ނުވަތަ އެހެން މީޑިއާތައް މަތީގައި، މެދުން ނުވަތަ ތިރީގައި އެލައިން ކުރެވިދާނެ އެވެ. ޑިފޯލްޓް ކޮށްފައި ހުންނަނީ ޓޮޕް އެލައިން ކޮށްގެންނެވެ.
ތަންކޮޅެއް އިތުރު މާކަޕް ކޮށްގެން ލިސްޓުގެ ތެރޭގައި މީޑިއާ ބޭނުން ކުރެވިދާނެ (ކޮމެންޓް ތްރެޑް ނުވަތަ އާޓިކަލް ލިސްޓްތަކަށް ބޭނުންތެރި) އެވެ.
ލިސްޓް ގްރޫޕްތަކަކީ ހަމައެކަނި އެލިމެންޓްތަކުގެ ސާދާ ލިސްޓްތަކެއް ނޫން ކަމަށާއި، ކަސްޓަމް ކޮންޓެންޓާއެކު ކޮމްޕްލެކްސް ލިސްޓްތައް ދައްކާލުމަށް ބޭނުންކުރާ ފްލެކްސިބަލް އަދި ވަރުގަދަ ކޮމްޕޮނެންޓެކެވެ.
އަސާސީ މިސާލެވެ
އެންމެ އަސާސީ ލިސްޓް ގްރޫޕަކީ ހަމައެކަނި ލިސްޓް އައިޓަމްތަކާއެކު، އަދި އެކަށީގެންވާ ކްލާސްތަކާއެކު ތަރުތީބު ނުކުރެވި ހުންނަ ލިސްޓެކެވެ. އެއަށްފަހު އަންނަ އިޚްތިޔާރުތަކާއެކު، ނުވަތަ ބޭނުންވާ ގޮތަށް އަމިއްލަ ސީއެސްއެސް އާއި އެކު ބިލްޑް ކުރާށެވެ.
- ކްރާސް ޖަސްޓޯ އޮޑިއޯ
- ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
- މޯރބީ ލިއޯ ރިސަސް އެވެ
- ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
- ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
ބެޖްތައް
ކޮންމެ ލިސްޓް ގްރޫޕް އައިޓަމަކަށް ބެޖްސް ކޮމްޕޮނެންޓް އިތުރުކޮށްލުމުން އޮޓޮމެޓިކުން ކަނާތްފަރާތުގައި ބެހެއްޓޭނެއެވެ.
- 14ކްރާސް ޖަސްޓޯ އޮޑިއޯ
- 2ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
- 1މޯރބީ ލިއޯ ރިސަސް އެވެ
ލިންކް ކުރެވިފައިވާ ތަކެތި
ލިސްޓް ގްރޫޕް އައިޓަމްތައް ލިންކްފައި ކުރާނީ ލިސްޓް އައިޓަމްތަކުގެ ބަދަލުގައި އެންކަރ ޓެގް ބޭނުންކޮށްގެން (އެއީ ވެސް ޕޭރެންޓެއްގެ <div>
ބަދަލުގައި ބެލެނިވެރިއެއް <ul>
) އެވެ. ކޮންމެ އުނިއިތުރެއްގެ ވަށައިގެން ވަކިވަކި ބެލެނިވެރިންގެ ބޭނުމެއް ނެތެވެ.
ލިސްޓް ގްރޫޕް އައިޓަމްތަކަކީ ލިސްޓް އައިޓަމްތަކުގެ ބަދަލުގައި ބަޓަންތަކަކަށް ވެދާނެއެވެ (އެއީ ވެސް މާނައަކީ އެއްގެ <div>
ބަދަލުގައި ބެލެނިވެރިއެއް <ul>
). ކޮންމެ އުނިއިތުރެއްގެ ވަށައިގެން ވަކިވަކި ބެލެނިވެރިންގެ ބޭނުމެއް ނެތެވެ. މިތަނުގައި ސްޓޭންޑަރޑް ކްލާސްތައް ބޭނުން ނުކުރައްވާށެވެ ..btn
ނުކުޅެދުންތެރިކަން ހުންނަ ތަކެތި
ނުކުޅެދުންތެރިކަން ހުންނަ ގޮތަށް ފެންނަން ގްރޭ އައުޓް ކުރުމަށް .disabled
a އަށް އެޑް ކުރާށެވެ ..list-group-item
ކޮންޓެކްސްޗުއަލް ކްލާސްތަކެވެ
ޑިފޯލްޓް ނުވަތަ ލިންކްކޮށްފައިވާ ތަކެތި ސްޓައިލް ކުރުމަށް ކޮންޓެކްސްޗުއަލް ކްލާސްތައް ބޭނުންކުރުން. އަދި .active
ދައުލަތުގެ...
- ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
- ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ
- ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
- ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
ކަސްޓަމް ކޮންޓެންޓް
ތިރީގައިވާ ފަދަ ލިންކް ކުރެވިފައިވާ ލިސްޓް ގްރޫޕްތަކަށް ވެސް އެތެރޭގައި ގާތްގަނޑަކަށް ކޮންމެ އެޗްޓީއެމްއެލްއެއް އިތުރު ކުރާށެވެ.
އަބަދުވެސް ކޮންމެހެން ކުރަންޖެހޭ ކަމެއް ނޫން ނަމަވެސް ބައެއް ފަހަރު ޑީއޯއެމް ފޮށިގަނޑެއްގައި ބަހައްޓަން ޖެހެއެވެ. އެ ހާލަތްތަކަށް ޕެނަލް ކޮމްޕޮނެންޓް ޓްރައި ކޮށްލައްވާށެވެ.
އަސާސީ މިސާލެވެ
ބައި ޑިފޯލްޓްކޮށް .panel
ކުރާ ހުރިހާ ކަމަކީ ކޮންމެވެސް އަސާސީ ބޯޑަރެއް ޖަހައިގެން ކޮންމެވެސް ކޮންޓެންޓެއް ހިމެނޭ ގޮތަށް ޕެޑިންގ އެއް ކުރުމެވެ.
ސުރުޚީ ޖަހާފައިވާ ޕެނަލް
ފަސޭހައިން ތިބާގެ ޕެނަލަށް ހެޑިންގ ކޮންޓެއިނަރެއް އިތުރުކޮށްލާށެވެ .panel-heading
. އަދި ކުރިން ސްޓައިލްކޮށްފައިވާ ސުރުޚީއެއް އިތުރުކުރުމަށްޓަކައި ކްލާހަކާއެކު އެއްވެސް <h1>
- <h6>
އެއް ހިމަނާލެވިދާނެއެވެ . .panel-title
ނަމަވެސް <h1>
- ގެ ފޮންޓް ސައިޒްތައް <h6>
އޯވަރރައިޑް ކުރެވެނީ .panel-heading
.
ރަނގަޅަށް ލިންކް ކުލަ ޖައްސަން ބޭނުންނަމަ، ގެ ތެރޭގައި ހުންނަ ސުރުޚީތަކުގައި ލިންކްތައް ބެހެއްޓުން ޔަގީން ކުރައްވާށެވެ .panel-title
.
ސުރުޚީއެއް ނެތި ޕެނަލް ހެޑިންގ
ޕެނަލް ކޮންޓެންޓް
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
ގައި ބަޓަން ނުވަތަ ސެކަންޑަރީ ޓެކްސްޓް އޮޅާލާށެވެ .panel-footer
. ޕެނަލް ފޫޓަރސް ކޮންޓެކްސްޗުއަލް ވެރިއޭޝަންސް ބޭނުންކުރާއިރު ކުލަތަކާއި ބޯޑަރުތައް ވާރުތަ ނުވާކަން ފާހަގަކޮށްލަން ޖެހެނީ އެއީ ފޯގްރައުންޑްގައި ހުންނަން ނިންމާފައި ނުވާތީއެވެ.
ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެވެ
އެހެން ކޮމްޕޯނެންޓްތަކެކޭ އެއްފަދައިން، ކޮންޓެކްސްޗުއަލް ސްޓޭޓް ކްލާސްތަކުގެ ތެރެއިން އެއްވެސް ކްލާހެއް އިތުރުކޮށްގެން، ޕެނަލެއް ވަކި ކޮންޓެކްސްޓަކަށް މާ މާނަހުރި ގޮތަކަށް ފަސޭހައިން ހަދާށެވެ.
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
ޕެނަލްގެ ސުރުޚީ
ޕެނަލް ކޮންޓެންޓް
މޭޒުތަކާއެކުގައެވެ
.table
ސީމްލޭސް ޑިޒައިންއަކަށް ޕެނަލެއްގެ ތެރެއަށް އެއްވެސް ނޮން ބޯޑަރެއް އިތުރުކޮށްލާށެވެ . އެއް އޮތްނަމަ .panel-body
، ވަކިކުރުމަށްޓަކައި އަޅުގަނޑުމެން ތާވަލުގެ މައްޗަށް އިތުރު ބޯޑަރެއް އިތުރުކުރަމެވެ.
ޕެނަލް ހެޑިންގ
މިތަނުގައި ބައެއް ޑިފޯލްޓް ޕެނަލް ކޮންޓެންޓް. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް. އެނިއަން ލެސިނިއާ ބައިބެންޑަމް ނޫލާ ސެޑް ކޮންސެކްޓެޓަރ. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
# |
ފުރަތަމަ ނަން |
ފަހު ނަން |
ޔޫޒަރނޭމް |
1 |
މާކިން އެވެ |
އޮޓޯ އެވެ |
@mdo |
2 |
ޔަޢުޤޫބުވެ |
ތޯންޓަން އެވެ |
@ފަލަ |
3 |
ލާރީ އެވެ |
ދަ ބާރޑް އެވެ |
@twitter އިން ލިބޭނެއެވެ |
ޕެނަލް ބޮޑީއެއް ނެތްނަމަ ކޮމްޕޮނެންޓް ޕެނަލް ހެޑަރ އިން ޓޭބަލް އަށް މެދުކެނޑުމެއް ނެތި ބަދަލުވެއެވެ.
ޕެނަލް ހެޑިންގ
# |
ފުރަތަމަ ނަން |
ފަހު ނަން |
ޔޫޒަރނޭމް |
1 |
މާކިން އެވެ |
އޮޓޯ އެވެ |
@mdo |
2 |
ޔަޢުޤޫބުވެ |
ތޯންޓަން އެވެ |
@ފަލަ |
3 |
ލާރީ އެވެ |
ދަ ބާރޑް އެވެ |
@twitter އިން ލިބޭނެއެވެ |
ލިސްޓް ގްރޫޕްތަކާއެކު
ކޮންމެ ޕެނަލެއްގެ ތެރޭގައި ވެސް ފުލް ވިޑްތް ލިސްޓް ގްރޫޕްތައް ފަސޭހައިން ހިމަނާށެވެ.
ޕެނަލް ހެޑިންގ
މިތަނުގައި ބައެއް ޑިފޯލްޓް ޕެނަލް ކޮންޓެންޓް. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް. އެނިއަން ލެސިނިއާ ބައިބެންޑަމް ނޫލާ ސެޑް ކޮންސެކްޓެޓަރ. އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް ވެސްޓިބިއުލަމް އެވެ. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
- ކްރާސް ޖަސްޓޯ އޮޑިއޯ
- ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
- މޯރބީ ލިއޯ ރިސަސް އެވެ
- ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
- ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
ކޮންމެ ޑިވައިސްއެއްގައި ވެސް ރަނގަޅަށް ސްކޭލް ކުރާނެ އިންޓްރިންސިކް ރޭޝިއޯއެއް އުފައްދައިގެން އެމީހުންގެ ކޮންޓެއިން ބްލޮކްގެ ފުޅާމިނަށް ބަލައިގެން ވީޑިއޯ ނުވަތަ ސްލައިޑްޝޯ ޑިމައިންސްތައް ކަނޑައެޅުމުގެ ފުރުސަތު ބްރައުޒާތަކަށް ދިނުން.
ޤަވާޢިދުތައް ސީދާ ޢަމަލުކުރެވެނީ <iframe>
, <embed>
, <video>
, އަދި <object>
އުފެއްދުންތަކަށް؛ .embed-responsive-item
އިޚްތިޔާރީ ގޮތެއްގައި އެހެން އެޓްރިބިއުޓްތަކަށް ސްޓައިލިންގ އެއްގޮތް ކުރަން ބޭނުންވާ ވަގުތު އެކްސްޕްލިސިޓް ޑިސެންޑެންޓް ކްލާހެއް ބޭނުން ކުރާށެވެ.
ޕްރޯ ޓިޕް! އަޅުގަނޑުމެން ތިޔަބޭފުޅުންނަށްޓަކައި އެކަން އޯވަރރައިޑް ކުރާތީ frameborder="0"
ތިޔަބޭފުޅުންގެ s ގައި ހިމަނަން ނުޖެހޭނެ .<iframe>
ޑިފޯލްޓް ރަނގަޅަށް
އިންސެޓް އިފެކްޓެއް ދިނުމަށްޓަކައި އެލިމެންޓަކަށް ސާދާ އިފެކްޓެއްގެ ގޮތުގައި ވަޅު ބޭނުން ކުރާށެވެ.
ބަލަ އަހަރެން މިހުރީ ވަޅެއްގައި!
އިޚްތިޔާރީ ކްލާސްތަކެވެ
ކޮންޓްރޯލް ޕެޑިންގ އާއި ވަށައިގެންވާ ކޮޅުތަކުގައި އިޚްތިޔާރީ ދެ މޮޑިފައި ކްލާހެއް ހުރެއެވެ.
ބަލަ އަހަރެން މިހުރީ ބޮޑު ވަޅެއްގައި!
ބަލަ އަހަރެން މިހުރީ ކުޑަ ވަޅުގަނޑެއްގަ!