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

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

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

އަސާސީ ދެ އިޚްތިޔާރާއި، އިތުރު ދެ ވަކި ވައްތަރެއްގެ ގޮތުގައެވެ.

އެއް ބަޓަން ގްރޫޕެވެ

.btnއިން އިން ސިލްސިލާ ބަޓަންތަކެއް އޮޅާލާށެވެ .btn-group.

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

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

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

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

ވަރުގަދަ ބަޓަން ގްރޫޕްތައް

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

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

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

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

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

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

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

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

  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.

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

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

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


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

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

  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> އެވެ

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

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

  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" >
  2. <button class = "btn btn-mini" > ޢަމަލު </button>
  3. <ބަޓަން ކްލާސް = "ބީޓީއެން ބީޓީއެން-މިނީ ޑްރޮޕްޑައުން-ޓޮގްލް" 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> އެވެ

ސްޓޭންޑަރޑް ޕޭޖިނޭޝަން

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

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

އިޚްތިޔާރުތައް

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

އެކި ހާލަތްތަކަށް ލިންކްތައް ކަސްޓަމައިޒް ކުރެވޭނެ އެވެ. .disabledކްލިކް ނުކުރެވޭ ލިންކްތަކަށް އަދި .activeމިހާރު ހުރި ޞަފްޙާ ދައްކާލުމަށް ބޭނުން ކުރާށެވެ .

  1. <div ކްލާސް = "ޕޭޖިނޭޝަން" >
  2. <ul> އެވެ
  3. <li class = "ނުކުޅެދުންތެރިކަން ހުންނަ" ><a href = "#" > « </a></li> އެވެ
  4. <li ކްލާސް = "އެކްޓިވް" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul> އެވެ
  7. </div> އެވެ

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

  1. <div ކްލާސް = "ޕޭޖިނޭޝަން" >
  2. <ul> އެވެ
  3. <li class = "ނުކުޅެދުންތެރިކަން ހުންނަ" ><span> « </span></li> އެވެ
  4. <li ކްލާސް = "އެކްޓިވް" ><span> 1 </span></li>
  5. ...
  6. </ul> އެވެ
  7. </div> އެވެ

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

ފެންސީ ބޮޑު ނުވަތަ ކުޑަ ޕޭޖިނޭޝަން ހެއްޔެވެ؟ އިތުރު ސައިޒްތަކަށް .pagination-large, .pagination-small, ނުވަތަ އިތުރުކުރުން ..pagination-mini

  1. <div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-ބޮޑު" >
  2. <ul> އެވެ
  3. ...
  4. </ul> އެވެ
  5. </div> އެވެ
  6. <div ކްލާސް = "ޕޭޖިނޭޝަން" >
  7. <ul> އެވެ
  8. ...
  9. </ul> އެވެ
  10. </div> އެވެ
  11. <div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-ކުޑަ" >
  12. <ul> އެވެ
  13. ...
  14. </ul> އެވެ
  15. </div> އެވެ
  16. <div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-މިނީ" >
  17. <ul> އެވެ
  18. ...
  19. </ul> އެވެ
  20. </div> އެވެ

އެލައިންމަންޓް

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

  1. <div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން ސެންޓަރޑް" >
  2. ...
  3. </div> އެވެ
  1. <div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-ރައިޓް" >
  2. ...
  3. </div> އެވެ

ޕޭޖަރ އެވެ

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

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

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

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

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

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

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

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

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

  1. <ul ކްލާސް = "ޕޭޖަރ" >
  2. <li class = "ކުރިން ނުކުޅެދުންތެރިވެފައިވާ" >
  3. <a href = "#" > އުމުރުން ދުވަސްވީ </a>
  4. </li> އެވެ
  5. ...
  6. </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>

ފަސޭހައިން ކޮލެޕް ކުރެވޭ

ފަސޭހައިން ތަންފީޒުކުރުމަށްޓަކައި، ލޭބަލްތަކާއި ބެޖްތައް ފަސޭހައިން ކޮލެޕްސް ވާނީ (ސީއެސްއެސްގެ :emptyސެލެކްޓަރ މެދުވެރިކޮށް) އެތެރޭގައި އެއްވެސް ކޮންޓެންޓެއް ނެތް ވަގުތުތަކުގައެވެ.

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

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

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

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

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

  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> މިސާލު ޞަފްޙާ ހެޑަރ <small> ހެޑަރ އަށް ސަބްޓެކްސްޓް </small></h1>
  3. </div> އެވެ

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

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

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

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

  • 300x200 އެވެ

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

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

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

  • 300x200 އެވެ

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

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

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

  • 300x200 އެވެ

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

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

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

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

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

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

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

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

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

މާކަޕް

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

  1. <ul class = "ތަމްބްނެއިލްސް" >
  2. <li ކްލާސް = "ސްޕަން4" >
  3. <a href = "#" ކްލާސް = "ތަމްބްނެއިލް" >
  4. <img data-src = "ހޯލްޑަރ.ޖޭއެސް/300x200" alt = "" >
  5. </a> އެވެ
  6. </li> އެވެ
  7. ...
  8. </ul> އެވެ

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

  1. <ul class = "ތަމްބްނެއިލްސް" >
  2. <li ކްލާސް = "ސްޕަން4" >
  3. <div class = "ތަމްބްނެއިލް" >
  4. <img data-src = "ހޯލްޑަރ.ޖޭއެސް/300x200" alt = "" >
  5. <h3> ތަމްބްނެއިލް ލޭބަލް </h3>
  6. <p> ތަމްބްނެއިލް ކެޕްޝަން... </p>
  7. </div> އެވެ
  8. </li> އެވެ
  9. ...
  10. </ul> އެވެ

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

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

ޑިފޯލްޓް އެލާޓް

.alertއަސާސީ އިންޒާރު އެލާޓް މެސެޖަކަށް އެއްވެސް ލިޔުމަކާއި އިޚްތިޔާރީ ޑިސްމިސް ބަޓަންއެއް ވަށާލާށެވެ .

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

ޑިސްމިސް ކުރާ ބަޓަންތަކެވެ

މޮބައިލް ސަފާރީ އަދި މޮބައިލް އޮޕެރާ ބްރައުޒާތަކުގައި، data-dismiss="alert"އެޓްރިބިއުޓްގެ އިތުރުން، ޓެގެއް href="#"ބޭނުންކުރާއިރު އެލާޓްތައް ބާތިލް ކުރުމަށް އަންގަން ޖެހެ އެވެ.<a>

  1. <a href = "#" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" > × </a> އެވެ

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

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

ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެލާޓްތައް ބާތިލްކުރުން

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


އިޚްތިޔާރުތައް

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

އިންޒާރު!

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

  1. <div class = "އެލާޓް އެލާޓް-ބްލޮކް" >
  2. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބަންދުކުރުން" data-dismiss = "އެލާޓް" > × </ބަޓަން> އެވެ
  3. <h4> އިންޒާރު! </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 ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 60 %; " ></div>
  3. </div> އެވެ

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

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

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

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

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

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

ސްޓޭކް ކޮށްފައި

.progressއެތަކެތި ސްޓޭކް ކުރުމަށްޓަކައި އެއް ބާރެއްގެ ތެރެއަށް އެތައް ބާރެއް ބަހައްޓާށެވެ .

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

އިޚްތިޔާރުތައް

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

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

  1. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންފޯ" >
  2. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 20 % " ></div>
  3. </div> އެވެ
  4. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ސަކްސެސް" >
  5. <div ކްލާސް = "ބާ" ސްޓައިލް = " ފުޅާމިން : 40 % " ></div>
  6. </div> އެވެ
  7. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންޒާރު" >
  8. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 60 % " ></div>
  9. </div> އެވެ
  10. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ނުރައްކާ" >
  11. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 80 % " ></div>
  12. </div> އެވެ

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

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

  1. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންފޯ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" >
  2. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 20 % " ></div>
  3. </div> އެވެ
  4. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ކާމިޔާބީ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" >
  5. <div ކްލާސް = "ބާ" ސްޓައިލް = " ފުޅާމިން : 40 % " ></div>
  6. </div> އެވެ
  7. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންޒާރު ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" >
  8. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 60 % " ></div>
  9. </div> އެވެ
  10. <div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ނުރައްކާ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" >
  11. <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 80 % " ></div>
  12. </div> އެވެ

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

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

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

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

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

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

64x64 އެވެ

މީޑިއާ ހެޑިންގ އެވެ

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

މީޑިއާ ހެޑިންގ އެވެ

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

މީޑިއާ ހެޑިންގ އެވެ

ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ، އިން ގްރެވިޑާ ނޫލާ. ނޫލާ ވެލް މެޓަސް ސެލެރިސްކް އެންޓޭ ސޮލިސިޓިއުޑިން ކޮމޮޑޯ. ކްރާސް ޕިއުރަސް އޮޑިއޯ، ވެސްޓިބިއުލަމް އިން ވަލްޕުޓޭޓް އެޓް، ޓެމްޕަސް ވިވެރާ ޓަރޕިސް. ފުސް ކޮންޑިމެންޓަމް ނަންކް އޭސީ ނިސީ ވަލްޕުޓޭޓް ފްރިންޖިލާ އެވެ. ޑޮނެކް ލެސިނިއާ ކޮންގް ފެލިސް އިން ފޯސިބަސް އެވެ.
  1. <div class = "މީޑިއާ" >
  2. <a ކްލާސް = "ދަމައި-ކަނާތް" href = "#" >
  3. <img ކްލާސް = "މީޑިއާ-އޮބްޖެކްޓް" data-src = "ހޯލްޑަރ.ޖޭއެސް/64x64" >
  4. </a> އެވެ
  5. <div class = "މީޑިއާ-ބޮޑީ" >
  6. <h4 class = "މީޑިއާ-ހެޑިންގ" > މީޑިއާ ހެޑިންގ </h4>
  7. ...
  8.  
  9. <!-- ނެސްޓް ކުރެވިފައިވާ މީޑިއާ އޮބްޖެކްޓް -->
  10. <div class = "މީޑިއާ" >
  11. ...
  12. </div> އެވެ
  13. </div> އެވެ
  14. </div> އެވެ

މީޑިއާ ލިސްޓެވެ

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

  • 64x64 އެވެ

    މީޑިއާ ހެޑިންގ އެވެ

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

    64x64 އެވެ

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

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

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

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

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

    ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ، އިން ގްރެވިޑާ ނޫލާ. ނޫލާ ވެލް މެޓަސް ސެލެރިސްކް އެންޓޭ ސޮލިސިޓިއުޑިން ކޮމޮޑޯ. ކްރާސް ޕިއުރަސް އޮޑިއޯ، ވެސްޓިބިއުލަމް އިން ވަލްޕުޓޭޓް އެޓް، ޓެމްޕަސް ވިވެރާ ޓަރޕިސް.
  • 64x64 އެވެ

    މީޑިއާ ހެޑިންގ އެވެ

    ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ، އިން ގްރެވިޑާ ނޫލާ. ނޫލާ ވެލް މެޓަސް ސެލެރިސްކް އެންޓޭ ސޮލިސިޓިއުޑިން ކޮމޮޑޯ. ކްރާސް ޕިއުރަސް އޮޑިއޯ، ވެސްޓިބިއުލަމް އިން ވަލްޕުޓޭޓް އެޓް، ޓެމްޕަސް ވިވެރާ ޓަރޕިސް.
  1. <ul class = "މީޑިއާ-ލިސްޓް" >
  2. <li ކްލާސް = "މީޑިއާ" >
  3. <a ކްލާސް = "ދަމައި-ކަނާތް" href = "#" >
  4. <img ކްލާސް = "މީޑިއާ-އޮބްޖެކްޓް" data-src = "ހޯލްޑަރ.ޖޭއެސް/64x64" >
  5. </a> އެވެ
  6. <div class = "މީޑިއާ-ބޮޑީ" >
  7. <h4 class = "މީޑިއާ-ހެޑިންގ" > މީޑިއާ ހެޑިންގ </h4>
  8. ...
  9.  
  10. <!-- ނެސްޓް ކުރެވިފައިވާ މީޑިއާ އޮބްޖެކްޓް -->
  11. <div class = "މީޑިއާ" >
  12. ...
  13. </div> އެވެ
  14. </div> އެވެ
  15. </li> އެވެ
  16. </ul> އެވެ

ވެލްސް އެވެ

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

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

އިޚްތިޔާރީ ކްލާސްތަކެވެ

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

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

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

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

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

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

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

ހެލްޕަރ ކްލާސްތަކެވެ

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

.ދަމައި-ކަނާތް

ކަނާތްފަރާތުގައި އެލިމެންޓެއް ފްލޯޓް ކުރާށެވެ

  1. class = "ދަމައި-ކަނާތް" އެވެ.
  1. . ދަމައިގަންނަން - ކަނާތް { .
  2. float : ކަނާތްފަރާތުގައި ;
  3. } .

.ޕުލް-ރައިޓް

އެލިމެންޓެއް ފްލޯޓް ރައިޓް

  1. class = "ދަމައި-ކަނާތް" އެވެ.
  1. . ދަމައިގަންނަން - ކަނާތް { .
  2. float : ކަނާތް ;
  3. } .

.މަޑުކޮށްލާފައި

އެލިމެންޓެއްގެ ކުލަ ބަދަލުކޮށްލާށެވެ#999

  1. class = "މިއުޓްކޮށްފައި" އެވެ.
  1. . މުއުޓްކޮށްފައި {
  2. ކުލަ : #999؛
  3. } .

.ސާފުކުރުން

ކްލިއަރ ދަ floatއޮން އެނީ އެލިމެންޓް

  1. class = "ސާފުކުރުން".
  1. . ކްލިއަރފިކްސް {
  2. * ޒޫމް : 1 ;
  3. &: ކުރިން ,
  4. &: ފަހުން {
  5. ޑިސްޕްލޭ : މޭޒު ;
  6. ކޮންޓެންޓް : "" ;
  7. } .
  8. &: ފަހުން {
  9. ސާފު : ދެ ;
  10. } .
  11. } .