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

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

ބަޓަން ގްރޫޕްތަކެވެ

އެއް ކޮމްޕޮޒިޓް ކޮމްޕޮނެންޓެއްގެ ގޮތުގައި އެތައް ބަޓަންއެއް އެއްކޮށްލުމަށް ބަޓަން ގްރޫޕްތައް ބޭނުން ކުރާށެވެ. <a>އެއީ ނުވަތަ <button>އުފެއްދުންތަކެއްގެ ސިލްސިލާއަކާއެކު ބިނާކުރާށެވެ .

އެންމެ ރަނގަޅު ގޮތްތައް

ބަޓަން ގްރޫޕްތަކާއި ޓޫލްބާތައް ބޭނުންކުރުމަށް ތިރީގައިވާ ގައިޑްލައިންތަކަށް އަޅުގަނޑުމެން ލަފާދެމެވެ.

  • އަބަދުވެސް އެއް ބަޓަން ގްރޫޕެއްގައި އެއް އުނިއިތުރެއް ބޭނުންކުރާށެވެ، <a>ނުވަތަ <button>.
  • އެއް ބަޓަން ގްރޫޕެއްގައި ތަފާތު ކުލަތަކުގެ ބަޓަންތައް މިކްސް ނުކުރާށެވެ.
  • ޓެކްސްޓްގެ އިތުރުން ނުވަތަ އޭގެ ބަދަލުގައި އައިކޮންތައް ބޭނުންކުރާ ނަމަވެސް އެކަށީގެންވާ ތަންތަނުގައި alt އަދި ޓައިޓަލް ޓެކްސްޓް ހިމަނަން ޔަގީން ކުރަންވާނެއެވެ.

ޑްރޮޕްޑައުންތަކާއެކު ގުޅުންހުރި ބަޓަން ގްރޫޕްތަކަށް (ތިރީގައި ބައްލަވާ) ވަކިވަކިން ގޮވާލުމަށްފަހު އަބަދުވެސް ގަސްތުކުރާ ސުލޫކު ދައްކާލުމަށް ޑްރޮޕްޑައުން ކެރެޓް ހިމަނަންވާނެއެވެ.

ޑިފޯލްޓް މިސާލެވެ

މިއީ އެންކަރ ޓެގް ބަޓަންތަކާއެކު ބިނާކޮށްފައިވާ ސްޓޭންޑަރޑް ބަޓަން ގްރޫޕެއް އެޗްޓީއެމްއެލް އިން ހޯދާ ގޮތެވެ:

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  2. <ބަޓަން ކްލާސް = "ބީޓީއެން" > 1 </ބަޓަން>
  3. <ބަޓަން ކްލާސް = "ބީޓީއެން" > 2 </ބަޓަން>
  4. <ބަޓަން ކްލާސް = "ބީޓީއެން" > 3 </ބަޓަން>
  5. </div> އެވެ

ޓޫލްބާގެ މިސާލެވެ

ކޮމްބައިން ސެޓްސް އޮފް <div class="btn-group">އިންޓޯ އަ <div class="btn-toolbar">ފޯރ މޯރ ކޮމްޕްލެކްސް ކޮމްޕޮނެންޓްސް.

  1. <div ކްލާސް = "ބީޓީއެން-ޓޫލްބާ" >
  2. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  3. ...
  4. </div> އެވެ
  5. </div> އެވެ

ޗެކްބޮކްސް އާއި ރޭޑިއޯ ފްލޭވަރސް އެވެ

އަދި ބަޓަން ގްރޫޕްތައް ރޭޑިއޯއެއްގެ ގޮތުގައި ވެސް މަސައްކަތް ކުރެވިދާނެ، އެތަނުގައި އެކްޓިވް ވެދާނެ އެންމެ ބަޓަންއެއް، ނުވަތަ ޗެކްބޮކްސްތަކެއްގެ ގޮތުގައި، ކޮންމެ އަދަދެއްގެ ބަޓަން އެކްޓިވް ވެދާނެ އެވެ. އެކަމަށްޓަކައި ޖާވާސްކްރިޕްޓް ޑޮކްސް ބައްލަވާށެވެ .

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

ބަޓަން ގްރޫޕްތަކުގައި ޑްރޮޕްޑައުންތައް

ހެޑްސް އަޕް! ޑްރޮޕްޑައުންތަކާއެކު ހުންނަ ބަޓަންތައް ރަނގަޅަށް ރެންޑަރިންގ އަށްޓަކައި ވަކިވަކިން އަމިއްލައަށް .btn-groupވަށާލަން ޖެހޭނެއެވެ..btn-toolbar

ބަޓަން ޑްރޮޕްޑައުންސް

މިސާލު މާކަޕް

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

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  2. <a class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" href = "#" >
  3. ޢަމަލު
  4. <span class = "ކެރެޓް" ></span>
  5. </a> އެވެ
  6. <ul class = "ޑްރޮޕްޑައުން-މެނޫ" >
  7. <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  8. </ul> އެވެ
  9. </div> އެވެ

ހުރިހާ ބަޓަން ސައިޒަކާއެކު މަސައްކަތް ކުރެއެވެ

ބަޓަން ޑްރޮޕްޑައުންތައް ކޮންމެ ސައިޒެއްގައި ވެސް މަސައްކަތް ކުރެ އެވެ. ތިބާގެ ބަޓަން ސައިޒްތައް .btn-large, .btn-small, ނުވަތަ .btn-mini.

ޖާވާސްކްރިޕްޓް ބޭނުންވެއެވެ

ބަޓަން ޑްރޮޕްޑައުންތަކުގައި މަސައްކަތް ކުރުމަށް ބޫޓްސްޓްރެޕް ޑްރޮޕްޑައުން ޕްލަގިން ބޭނުންވެއެވެ.

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


ސްޕްލިޓް ބަޓަން ޑްރޮޕްޑައުންސް

އޯވަރވިއު އާއި މިސާލުތައް

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

ސައިޒްތަކެވެ

އިތުރު ބަޓަން ކްލާސްތައް ބޭނުންކުރުން .btn-mini, .btn-small, ނުވަތަ .btn-largeސައިޒިންގ އަށް.

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  2. ...
  3. <ul class = "ޑްރޮޕްޑައުން-މެނޫ ޕުލް-ރައިޓް" >
  4. <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  5. </ul> އެވެ
  6. </div> އެވެ

މިސާލު މާކަޕް

އަޅުގަނޑުމެން އާދައިގެ ބަޓަން ޑްރޮޕްޑައުންތައް ފުޅާކޮށް، ވަކި ޑްރޮޕްޑައުން ޓްރިގަރެއްގެ ގޮތުގައި އޮޕަރޭޓްކުރާ ދެވަނަ ބަޓަން އެކްޝަން ފޯރުކޮށްދެމެވެ.

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  2. <button class = "btn" > ޢަމަލު </button>
  3. <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >
  4. <span class = "ކެރެޓް" ></span>
  5. </ބަޓަން> އެވެ
  6. <ul class = "ޑްރޮޕްޑައުން-މެނޫ" >
  7. <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  8. </ul> އެވެ
  9. </div> އެވެ

ޑްރޮޕްއަޕް މެނޫތަކެވެ

އަދި ޑްރޮޕްޑައުން މެނޫތައް ތިރިން މައްޗަށް ޓޮގްލް ކުރެވޭނީ ގެ ވަގުތީ ބެލެނިވެރިޔާއަށް އެއް ކްލާހެއް އިތުރުކޮށްގެންނެވެ .dropdown-menu. .caretއެއީ މަތިން ތިރިއަށް ދިއުމުގެ ބަދަލުގައި ތިރިން މައްޗަށް ދިއުމަށްޓަކައި މެނޫގެ މިސްރާބު ފްލިޕްކޮށް ޚުދު މެނޫ އަލުން ޕޮޒިޝަން ކުރާނެ އެއްޗެކެވެ.

  1. <div class = "ބީޓީއެން-ގްރޫޕް ޑްރޮޕްއަޕް" >
  2. <button class = "btn" > ޑްރޮޕްއަޕް </button>
  3. <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >
  4. <span class = "ކެރެޓް" ></span>
  5. </ބަޓަން> އެވެ
  6. <ul class = "ޑްރޮޕްޑައުން-މެނޫ" >
  7. <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  8. </ul> އެވެ
  9. </div> އެވެ

މަލްޓިކޮން-ޕޭޖް ޕޭޖިނޭޝަން

ބޭނުންކުރާނީ ކޮން އިރަކުތޯއެވެ

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

ސްޓޭޓްފުލް ޕޭޖް ލިންކްސް

ލިންކްތަކަކީ ކަސްޓަމައިޒް ކުރެވޭ އަދި ރަނގަޅު ކްލާހަކާއެކު ގިނަ ހާލަތްތަކެއްގައި މަސައްކަތް ކުރާ އެއްޗެކެވެ. .disabledކްލިކް ނުކުރެވޭ ލިންކްތަކަށް އަދި .activeމިހާރު ހުރި ޕޭޖަށް ވެސް މެއެވެ.

ފްލެކްސިބަލް އެލައިންމަންޓެއް

ޕޭޖިނޭޝަން ލިންކްތަކުގެ އެލައިންމަންޓް ބަދަލުކުރުމަށްޓަކައި އިޚްތިޔާރީ ދެ ކްލާސްގެ ތެރެއިން އެއްވެސް ކްލާހެއް އިތުރުކުރުން: .pagination-centeredއަދި .pagination-right.

މިސާލުތަކެވެ

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

މާކަޕް

އެއްގެ <div>ގޮތުގައި އޮޅާލާފައި , ޕޭޖިނޭޝަން އަކީ ހަމައެކަނި <ul>.

  1. <div ކްލާސް = "ޕޭޖިނޭޝަން" >
  2. <ul> އެވެ
  3. <li><a href = "#" > ކުރީގެ </a></li>
  4. <li ކްލާސް = "އެކްޓިވް" >
  5. <a href = "#" > 1 </a> އެވެ
  6. </li> އެވެ
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > ދެން </a></li>
  11. </ul> އެވެ
  12. </div> އެވެ

ޕޭޖަރ އަވަސް ކުރީގެ އަދި ދެން އަންނަ ލިންކްތަކަށް

ޕޭޖަރ އާއި ބެހޭގޮތުން

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

އިޚްތިޔާރީ ނުކުޅެދުންތެރިކަން ހުންނަ ޙާލަތެވެ

ޕޭޖަރ ލިންކްތަކުގައި ވެސް ޕޭޖިނޭޝަން އިން ޖެނެރަލް .disabledކްލާސް ބޭނުން ކުރެއެވެ.

ޑިފޯލްޓް މިސާލެވެ

ބައި ޑިފޯލްޓްކޮށް، ޕޭޖަރ ސެންޓަރ ލިންކްތައް.

  1. <ul ކްލާސް = "ޕޭޖަރ" >
  2. <li> އެވެ
  3. <a href = "#" > ކުރީގެ </a>
  4. </li> އެވެ
  5. <li> އެވެ
  6. <a href = "#" > ދެން </a>
  7. </li> އެވެ
  8. </ul> އެވެ

އެލައިން ކުރެވިފައިވާ ލިންކްތަކެވެ

ނުވަތަ ކޮންމެ ލިންކެއް އެއްފަރާތްތަކަށް އެލައިން ކުރެވިދާނެއެވެ:

  1. <ul ކްލާސް = "ޕޭޖަރ" >
  2. <li ކްލާސް = "ކުރިން" >
  3. <a href = "#" > އުމުރުން ދުވަސްވީ </a>
  4. </li> އެވެ
  5. <li ކްލާސް = "ދެން" >
  6. <a href = "#" > އައު → </a> އެވެ
  7. </li> އެވެ
  8. </ul> އެވެ
ލޭބަލްތައް މާކަޕް
ޑީފޯލްޓް <span class="label">Default</span>
ކާމިޔާބު <span class="label label-success">Success</span>
އިންޒާރު <span class="label label-warning">Warning</span>
މުހިންމު <span class="label label-important">Important</span>
އިންފޯ <span class="label label-info">Info</span>
އިންވާސް އެވެ <span class="label label-inverse">Inverse</span>

ގުޅިގެން

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

ލިބެން ހުރި ކްލާސްތަކެވެ

ނަން މިސާލު މާކަޕް
ޑީފޯލްޓް 1 <span class="badge">1</span>
ކާމިޔާބު 2 <span class="badge badge-success">2</span>
އިންޒާރު 4 <span class="badge badge-warning">4</span>
މުހިންމު 6 <span class="badge badge-important">6</span>
އިންފޯ 8 <span class="badge badge-info">8</span>
އިންވާސް އެވެ 10 <span class="badge badge-inverse">10</span>

ހީރޯ ޔުނިޓެވެ

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

މާކަޕް

ތިމާގެ ކޮންޓެންޓް divލައިކް އެއްގައި އޮޅާލާށެވެ ސޯ:

  1. <div ކްލާސް = "ހީރޯ-ޔުނިޓް" >
  2. <h1> ސުރުޚީ </h1>
  3. <p> ޓެގްލައިން </p> އެވެ
  4. <p> އެވެ
  5. <a class = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ ބީޓީއެން-ބޮޑު" >
  6. އިތުރަށް ދަސްކުރައްވާ
  7. </a> އެވެ
  8. </p> އެވެ
  9. </div> އެވެ

ހެލޯ، ދުނިޔެ!

މިއީ ފީޗާ ކޮންޓެންޓް ނުވަތަ މައުލޫމާތަށް އިތުރު ސަމާލުކަން ދިނުމަށްޓަކައި ސާދާ ޖަމްބޮޓްރޯން ސްޓައިލް ކޮމްޕޮނެންޓެއް ކަމަށްވާ ސާދާ ހީރޯ ޔުނިޓެކެވެ.

އިތުރަށް ދަސްކުރައްވާ

ޞަފްޙާގެ ހެޑަރ

h1ޞަފްޙާއެއްގައި ހުންނަ ކޮންޓެންޓްގެ ބައިތައް އެކަށީގެންވާ ގޮތެއްގައި ސްޕޭސް އައުޓްކޮށް ސެގްމެންޓް ކުރުމަށް ފަސޭހަ ޝެލްއެކެވެ . އެއީ h1's default small, އެލިމެންޓްގެ އިތުރުން ގިނަ އެހެން ކޮމްޕޯނެންޓްތައް (އިތުރު ސްޓައިލްތަކާއެކު) ބޭނުންކުރެވޭނެ އެއްޗެކެވެ.

  1. <div class = "ޞަފްޙާ-ހެޑަރ" >
  2. <h1> މިސާލު ޞަފްޙާގެ ހެޑަރ </h1>
  3. </div> އެވެ

ޑިފޯލްޓް ތަމްބްނެއިލްސް

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

ވަރަށް ކަސްޓަމައިޒް ކުރެވޭ

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

  • ތަމްބްނެއިލް ލޭބަލް

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

    ޢަމަލު ޢަމަލު

  • ތަމްބްނެއިލް ލޭބަލް

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

    ޢަމަލު ޢަމަލު

ތަމްބްނެއިލް ބޭނުން ކުރަންވީ ކީއްވެގެން ހެއްޔެވެ

ތަމްބްނެއިލްސް (ކުރިން .media-gridv1.4 އާ ހަމައަށް) އަކީ ފޮޓޯ ނުވަތަ ވީޑިއޯގެ ގްރިޑްތަކާއި، އިމޭޖް ސަރޗް ނަތީޖާތަކާއި، ރީޓެއިލް ޕްރޮޑަކްޓްތަކާއި، ޕޯޓްފޯލިއޯތަކާއި، އަދިވެސް އެތައް ކަމެއް ކުރުމަށް ވަރަށް ރަނގަޅު އެއްޗެކެވެ. އެއީ ލިންކް ނުވަތަ ސްޓޭޓިކް ކޮންޓެންޓަކަށް ވެދާނެއެވެ.

ސާދާ، ފްލެކްސިބަލް މާކަޕް

ތަމްބްނެއިލް މާކަޕް އަކީ ސާދާ އެއްޗެއް- ulކޮންމެ އަދަދަކަށް liއެލިމެންޓްތަކެއް އެކުލެވޭ އެއް އަކީ ބޭނުންވާ ހުރިހާ އެއްޗެކެވެ. އަދި ސުޕަ ފްލެކްސިބަލް ކަމުން ކޮންމެ ވައްތަރެއްގެ ކޮންޓެންޓެއް ވެސް ކޮންޓެންޓްތައް ވަށާލުމަށް ތަންކޮޅެއް އިތުރު މާކަޕް އެއް ލިބިގެންދާނެ އެވެ.

ގްރިޑް ކޮލަމް ސައިޒްތައް ބޭނުންކުރެއެވެ

އެންމެ ފަހުން، ތަމްބްނެއިލްސް ކޮމްޕޮނެންޓުން ބޭނުންކުރަނީ މިހާރު ހުރި ގްރިޑް ސިސްޓަމް ކްލާސްތައް- ފަދަ .span2ނުވަތަ - .span3ތަމްބްނެއިލް ޑިމައިންޝަންތައް ކޮންޓްރޯލް ކުރުމަށްޓަކައެވެ.

އެ މާކަޕް...

ކުރިން ދެންނެވި ފަދައިން ތަމްބްނެއިލްތަކަށް ބޭނުންވާ މާކަޕަކީ ލުއި އަދި ސީދާ މާކަޕް އެކެވެ. މިއީ ލިންކް ކުރެވިފައިވާ ތަސްވީރުތަކަށް ޑިފޯލްޓް ސެޓަޕް އަށް ބަލާލާނަމެވެ :

  1. <ul class = "ތަމްބްނެއިލްސް" >
  2. <li ކްލާސް = "ސްޕަން3" >
  3. <a href = "#" ކްލާސް = "ތަމްބްނެއިލް" >
  4. <img src = "https://ޕްލޭސްހޯލްޑް.އިޓް/260x180" alt = "" >
  5. </a> އެވެ
  6. </li> އެވެ
  7. ...
  8. </ul> އެވެ

ތަމްބްނެއިލްތަކުގައި ހުންނަ ކަސްޓަމް އެޗްޓީއެމްއެލް ކޮންޓެންޓަށް މާކަޕް ކުޑަކޮށް ބަދަލުވެއެވެ. ބްލޮކް ލެވެލް ކޮންޓެންޓް ކޮންމެ ތަނެއްގައި ވެސް ހުއްދަ ދިނުމަށްޓަކައި، އަޅުގަނޑުމެން ސްވޮޕް ދަ <a>ފޯ އަ <div>ލައިކް ސޯ:

  1. <ul class = "ތަމްބްނެއިލްސް" >
  2. <li ކްލާސް = "ސްޕަން3" >
  3. <div class = "ތަމްބްނެއިލް" >
  4. <img src = "https://ޕްލޭސްހޯލްޑް.އިޓް/260x180" alt = "" >
  5. <h5> ތަމްބްނެއިލް ލޭބަލް </h5>
  6. <p> ތަމްބްނެއިލް ކެޕްޝަން ހަމަ މިތާނގައި... </p>
  7. </div> އެވެ
  8. </li> އެވެ
  9. ...
  10. </ul> އެވެ

އިތުރު މިސާލުތަކެވެ

ތިބާއަށް ލިބިފައިވާ އެކިއެކި ގްރިޑް ކްލާސްތަކާއެކު ތިބާގެ ހުރިހާ އިޚްތިޔާރުތަކެއް ހޯދާށެވެ. އަދި ތަފާތު ސައިޒްތައް މިކްސްކޮށް މެޗް ވެސް ކުރެވިދާނެ އެވެ.

ލުއި ޑިފޯލްޓްތަކެވެ

އަލުން ލިޔެފައިވާ ބޭސް ކްލާސް

ބޫޓްސްޓްރެޕް 2 އާއެކު، އަޅުގަނޑުމެން މިވަނީ ބޭސް ކްލާސް ފަސޭހަކޮށްދީފައި: .alertގެ ބަދަލުގައި .alert-message. އަޅުގަނޑުމެންނަށް ވެސް އެންމެ ކުޑަމިނުން ބޭނުންވާ މާކަޕް މަދުކޮށްފިން-ނޯ <p>ޑިފޯލްޓްކޮށް ބޭނުން ނުވާ، ހަމައެކަނި ބޭރު <div>.

އެއް އެލާޓް މެސެޖެވެ

މަދު ކޯޑަކާއެކު ދިގުދެމިގެންދާ ކޮމްޕޮނެންޓަކަށްޓަކައި، ބްލޮކް އެލާޓްތަކާއި، އިތުރު ޕެޑިންގ އާއި އެކު އަންނަ މެސެޖުތަކާއި، އާންމުކޮށް އިތުރު ޓެކްސްޓްތަކަށް ތަފާތު ކުރާ ލޫކް އަޅުގަނޑުމެން މިވަނީ ނައްތާލާފައެވެ. ކްލާސް ވެސް ވަނީ ބަދަލުވެފަ އެވެ .alert-block.


ޖާވާސްކްރިޕްޓާއެކު ވަރަށް ރަނގަޅަށް ދެއެވެ

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

ޕްލަގިން ހޯއްދަވާ »

މިސާލު އެލާޓްތަކެވެ

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

އިންޒާރު! ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް.
  1. <div ކްލާސް = "އެލާޓް" >
  2. <ބަޓަން ކްލާސް = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" > × </button>
  3. <strong> އިންޒާރު! </strong> ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް.
  4. </div> އެވެ

ހެޑްސް އަޕް! އައިއޯއެސް ޑިވައިސްތަކުގައި href="#"އެލާޓްތައް ބާތިލް ކުރުމަށް އަންގައި ޖެހެ އެވެ. އެއާއި އެންކަރ ކްލޯޒް އައިކޮންތަކަށް ޑޭޓާ އެޓްރިބިއުޓް ހިމަނަން ޔަގީން ކުރައްވާށެވެ. ނުވަތަ، <button>ޑޭޓާ އެޓްރިބިއުޓް އެކުލެވޭ އެލިމެންޓެއް ބޭނުންކުރެވިދާނެ، އެއީ އަޅުގަނޑުމެންގެ ޑޮކްސްތަކަށް ކުރުމަށް އަޅުގަނޑުމެން ޚިޔާރުކޮށްފައިވާ ކަމެއް. ބޭނުންކުރާއިރު <button>، ހިމަނަންވާނެ type="button"ނުވަތަ ފޯމުތައް ހުށަނޭޅިދާނެއެވެ.

އިޚްތިޔާރީ ދެ ކްލާހަކާއެކު ފަސޭހައިން ސްޓޭންޑަރޑް އެލާޓް މެސެޖު ފުޅާކޮށްލެވޭނެ: .alert-blockއިތުރު ޕެޑިންގ އަދި ޓެކްސްޓް ކޮންޓްރޯލްތަކަށް އަދި .alert-headingއެއްގޮތްވާ ސުރުޚީއަކަށް.

އިންޒާރު!

ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް. ޕްރެސެންޓް ކޮމޮޑޯ ކަރސަސް މެގްނާ، ވެލް ސެލެރިސްކް ނިސްލް ކޮންސެކްޓެޓަރ އެޓް.

  1. <div class = "އެލާޓް އެލާޓް-ބްލޮކް" >
  2. <a class = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" href = "#" > × </a>
  3. <h4 class = "އެލާޓް-ހެޑިންގ" > އިންޒާރު! </h4> އެވެ
  4. ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ނޮޓް...
  5. </div> އެވެ

ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެލާޓެއްގެ ކޮނޮޓޭޝަން ބަދަލުކުރުމަށްޓަކައި އިޚްތިޔާރީ ކްލާސްތައް އިތުރުކުރުން

ގޯހެއް ނުވަތަ ނުރައްކަލެއް

އޯ ސްނެޕް! ދެތިން އެއްޗެއް ބަދަލުކޮށްފައި އަނެއްކާވެސް ހުށަހަޅަން މަސައްކަތް ކުރާށެވެ.
  1. <div class = "އެލާޓް އެލާޓް-އެރޯރ" >
  2. ...
  3. </div> އެވެ

ކާމިޔާބު

ވަރަށް ފުރިހަމަ! މި މުހިންމު އެލާޓް މެސެޖު ކާމިޔާބުކަމާއެކު ކިޔައިފިއެވެ.
  1. <div class = "އެލާޓް އެލާޓް-ކާމިޔާބީ" >
  2. ...
  3. </div> އެވެ

މަޢުލޫމާތު

ހެޑްސް އަޕް! މި އެލާޓަށް ތިބާގެ ސަމާލުކަން ބޭނުންވާ ނަމަވެސް މިއީ ސުޕަ މުހިންމު އެލާޓެއް ނޫނެވެ.
  1. <div class = "އެލާޓް އެލާޓް-އިންފޯ" >
  2. ...
  3. </div> އެވެ

މިސާލުތަކާއި މާކަޕް

އާދައިގެ

ވަރުގަދަ ގްރޭޑިއަންޓަކާއެކު ޑިފޯލްޓް ޕްރޮގްރެސް ބާރ.

  1. <div class = "ޕްރޮގްރެސް" >
  2. <div ކްލާސް = "ބާރ" އެވެ.
  3. style = " ފުޅާމިން : 60 " ></div>
  4. </div> އެވެ

ސްޓްރައިޕްޑް އެވެ

ސްޓްރައިޕްޑް އިފެކްޓެއް އުފެއްދުމަށް ގްރޭޑިއަންޓެއް ބޭނުންކުރެއެވެ (އައިއީއެއް ނެތް).

  1. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" >
  2. <div ކްލާސް = "ބާރ" އެވެ.
  3. style = " ފުޅާމިން : 20 " ></div>
  4. </div> އެވެ

އެނިމޭޓެޑް އެވެ

ސްޓްރައިޕްޑް މިސާލު ނަގައި އެނިމޭޓް ކުރަނީ (އައިއީއެއް ނެތް) އެވެ.

  1. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ސްޓްރައިޕްޑް."
  2. އެކްޓިވް" >
  3. <div ކްލާސް = "ބާރ" އެވެ.
  4. style = " ފުޅާމިން : 40 " ></div>
  5. </div> އެވެ

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

އިތުރު ކުލަތަކެވެ

ޕްރޮގްރެސް ބާރތަކުގައި އެއްގޮތް ސްޓައިލްތަކަށް ބޭނުންކުރަނީ އެއް ބަޓަންގެ ބައެއް އަދި އެލާޓް ކްލާސްތަކެވެ.

ސްޓްރައިޕްޑް ބާރސް އެވެ

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

އުޅުން

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

.activeކްލާސް ބޭނުންކުރާނަމަ ތިބާގެ .progress-stripedޕްރޮގްރެސް ބާރތަކުން ކަނާތުން ވާތްފަރާތަށް ސްޓްރައިޕްތައް އެނިމޭޓް ކުރެވޭނެއެވެ.

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

ޕްރޮގްރެސް ބާރތަކުގައި އެމީހުންގެ ހުރިހާ އިފެކްޓްތަކެއް ހާސިލްކުރުމަށްޓަކައި ސީއެސްއެސް3 ގްރޭޑިއަންޓްސް، ޓްރާންސިޝަންސް، އަދި އެނިމޭޝަންސް ބޭނުންކުރެއެވެ. މި ފީޗާސްތައް IE7-9 ނުވަތަ ފަޔަރފޮކްސްގެ ކުރީގެ ވަރޝަންތަކުގައި ސަޕޯޓް ނުކުރެއެވެ.

އޮޕެރާ އާއި އައިއީ އިން މިވަގުތު އެނިމޭޝަންތަކަށް ސަޕޯޓް ނުކުރެއެވެ.

ވެލްސް އެވެ

އިންސެޓް އިފެކްޓެއް ދިނުމަށްޓަކައި އެލިމެންޓަކަށް ސާދާ އިފެކްޓެއްގެ ގޮތުގައި ވަޅު ބޭނުން ކުރާށެވެ.

ބަލަ އަހަރެން މިހުރީ ވަޅެއްގައި!
  1. <div ކްލާސް = "ރަނގަޅު" >
  2. ...
  3. </div> އެވެ

ކްލޯޒް އައިކޮން

މޮޑަލްތަކާއި އެލާޓްތައް ފަދަ ކޮންޓެންޓް ޑިސްމިސް ކުރުމަށް ޖެނެރިކް ކްލޯޒް އައިކޮން ބޭނުން ކުރާށެވެ.

  1. <ބަޓަން ކްލާސް = "ބަންދުކުރުން" > × </ބަޓަން> އެވެ

އައިއޯއެސް ޑިވައިސްތަކުގައި ކްލިކް އިވެންޓްތަކަށް href="#" އެއް ބޭނުން ވާނީ އެންކަރެއް ބޭނުން ކުރަން ބޭނުން ނަމަ އެވެ.

  1. <a class = "ބަންދުކުރުން" href = "#" > × </a> އެވެ