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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  <a class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" href = "#" >   
    ޢަމަލު
    <span class = "ކެރެޓް" ></span> 
  </a> އެވެ
  <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
    <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  </ul> އެވެ
</div> އެވެ

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

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

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

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

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

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

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

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

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

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

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

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

<div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  <button class = "btn" > ޢަމަލު </button> 
  <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
    <span class = "ކެރެޓް" ></span> 
  </ބަޓަން> އެވެ
  <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
    <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  </ul> އެވެ
</div> އެވެ

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

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

<div class = "ބީޓީއެން-ގްރޫޕް ޑްރޮޕްއަޕް" > 
  <button class = "btn" > ޑްރޮޕްއަޕް </button> 
  <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
    <span class = "ކެރެޓް" ></span> 
  </ބަޓަން> އެވެ
  <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
    <!-- ޑްރޮޕްޑައުން މެނޫ ލިންކްސް -->
  </ul> އެވެ
</div> އެވެ

ވަރުގަދަ ބޭސް ކްލާހެކެވެ

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

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

ޓެބްތަކާއި ގިތެޔޮ ގިތެޔޮ އަކީ ކޮންޓެންޓްގެ ބައިތަކަށް ނުވަތަ ގުޅުންހުރި ކޮންޓެންޓްގެ ޞަފްޙާތަކުގެ މެދުގައި ދަތުރުކުރުމަށް ރަނގަޅު އެއްޗެކެވެ.

ކޮމްޕޮނެންޓް އެލައިންމަންޓް

nav ލިންކްތައް އެލައިން ކުރުމަށްޓަކައި، .pull-leftނުވަތަ .pull-rightޔުޓިލިޓީ ކްލާސްތައް ބޭނުން ކުރާށެވެ. ދެ ކްލާހުން ވެސް ކަނޑައެޅިފައިވާ ދިމާލަށް ސީއެސްއެސް ފްލޯޓެއް އިތުރުކުރާނެ އެވެ.

އަސާސީ ޓެބްތަކެވެ

<ul>ލިންކްތަކުގެ ރެގިއުލާއެއް ނަގައިގެން އެޑް ކުރާށެވެ .nav-tabs:

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް

<ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
  <li ކްލާސް = "އެކްޓިވް" > 
    <a href = "#" > ގެ </a> 
  </li> އެވެ
  <li><a href = "#" > ... </a></li> އެވެ 
  <li><a href = "#" > ... </a></li> އެވެ 
</ul> އެވެ

އަސާސީ ގިތެޔޮ ގިތެޔޮ

ހަމަ އެ އެޗްޓީއެމްއެލް ނަގާ ނަމަވެސް .nav-pillsއޭގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ:

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް

<ul class = "ނަވް ނަވް-ޕިލްސް" > 
  <li ކްލާސް = "އެކްޓިވް" > 
    <a href = "#" > ގެ </a> 
  </li> އެވެ
  <li><a href = "#" > ... </a></li> އެވެ 
  <li><a href = "#" > ... </a></li> އެވެ 
</ul> އެވެ

ސްޓޭކް ކުރާނެ ގޮތް

ޓެބްތަކާއި ގިތެޔޮ ގިތެޔޮ ޑިފޯލްޓްކޮށް ހޮރައިޒޮންޓަލް ކަމުން، ހަމައެކަނި ދެވަނަ ކްލާހެއް، .nav-stacked, އިތުރުކޮށް، އެތަކެތި ވަރުގަދައަށް ސްޓޭކްކޮށްފައި ހުންނަ ގޮތަށް ފެންނާނެއެވެ.

ސްޓޭކް ކޮށްފައިވާ ޓެބްތަކެވެ

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް

<ul class = "ނަވް ނަވް-ޓެބްސް ނަވް-ސްޓޭކްޑް" > 
  ...
</ul> އެވެ

ސްޓޭކްކޮށްފައި ހުންނަ ގިތެޔޮ ގިތެޔޮ

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް

<ul class = "ނަވް ނަވް-ޕިލްސް ނަވް-ސްޓޭކްޑް" > 
  ...
</ul> އެވެ

މުއްސަނދި މެނޫތައް ފަސޭހަކޮށްދިނެވެ

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

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

ޑްރޮޕްޑައުންތަކާއެކު ޓެބްތައް

• ގެ
• އެހީވުން
• ޑްރޮޕްޑައުން
  • ޢަމަލު
  • އަނެއްކާ އަމަލެއް
  • މިތާ އެހެން ކަމެއް
  • ވަކި ލިންކެއް

<ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
  <li class = "ޑްރޮޕްޑައުން" > 
    <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" އެވެ. 
       data-toggle = "ޑްރޮޕްޑައުން" އެވެ.
       href = "#" >
        ޑްރޮޕްޑައުން
        <b ކްލާސް = "ކެރެޓް" ></b> 
      </a> އެވެ
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      <!-- ލިންކްތައް -->
    </ul> އެވެ
  </li> އެވެ
</ul> އެވެ

ޑްރޮޕްޑައުންތަކާއެކު ގިތެޔޮ ގިތެޔޮ

• ގެ
• އެހީވުން
• ޑްރޮޕްޑައުން
  • ޢަމަލު
  • އަނެއްކާ އަމަލެއް
  • މިތާ އެހެން ކަމެއް
  • ވަކި ލިންކެއް

<ul class = "ނަވް ނަވް-ޕިލްސް" > 
  <li class = "ޑްރޮޕްޑައުން" > 
    <a class = "ޑްރޮޕްޑައުން-ޓޮގްލް" އެވެ. 
       data-toggle = "ޑްރޮޕްޑައުން" އެވެ.
       href = "#" >
        ޑްރޮޕްޑައުން
        <b ކްލާސް = "ކެރެޓް" ></b> 
      </a> އެވެ
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      <!-- ލިންކްތައް -->
    </ul> އެވެ
  </li> އެވެ
</ul> އެވެ

އެޕްލިކޭޝަން ސްޓައިލް ނެވިގޭޝަން

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

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

އައިކޮންތަކާއެކު

ނޭވް ލިސްޓްތަކުގައި ވެސް އައިކޮންތައް ފަސޭހައިން ތަރުތީބު ކުރެވޭނެ އެވެ. ކްލާސް އާއި އެކު ރަނގަޅު <i>ޓެގް އިތުރުކޮށްލުމުން ތިބާ ސެޓް ވެއްޖެއެވެ.

ހޮރައިޒޮންޓަލް ޑިވައިޑަރސް އެވެ

ކްލާސް އާއި އެކު ހުސް ލިސްޓް އައިޓަމެއް އުފައްދައިގެން ހޮރިޒޮންޓަލް ޑިވައިޑަރެއް އިތުރުކުރުން .divider, މިހެން:

<ul ކްލާސް = "ނަވް ނެވް-ލިސްޓް" > 
  ...
  <li ކްލާސް = "ޑިވައިޑަރ" </li> 
  ...
</ul> އެވެ

މިސާލު ނެވް ލިސްޓެވެ

ލިންކްތަކުގެ ލިސްޓެއް ނަގައިގެން އެޑް ކުރާށެވެ class="nav nav-list":

<ul ކްލާސް = "ނަވް ނެވް-ލިސްޓް" > 
  <li ކްލާސް = "ނޭވް-ހެޑަރ" > 
    ލިސްޓް ހެޑަރ
  </li> އެވެ
  <li ކްލާސް = "އެކްޓިވް" > 
    <a href = "#" > ގެ </a> 
  </li> އެވެ
  <li> އެވެ
    <a href = "#" > ލައިބްރަރީ </a> 
  </li> އެވެ
  ...
</ul> އެވެ

އައިކޮންތަކާއެކު މިސާލެއް

ހަމަ މިސާލެއް، އެކަމަކު <i>އައިކޮންތަކަށް ޓެގްތަކާއެކު.

<ul ކްލާސް = "ނަވް ނެވް-ލިސްޓް" > 
  ...
  <li> އެވެ
    <a href = "#" > 
      <i ކްލާސް = "އައިކޮން-ފޮތް" ></i> 
      ކުތުބުޚާނާ
    </a> އެވެ
  </li> އެވެ
  ...
</ul> އެވެ

ހިމެނޭ އެއްޗެއް

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

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

ޓެބްތަކުގައި ފޭޑް ކޮށްލާށެވެ

ޓެބްތައް ފޭޑް އިން ކޮށްލުމަށްޓަކައި، .fadeކޮންމެ ޓެބް އަކަށް އިތުރު ކުރާށެވެ .tab-pane.

ޖީކުއަރީ ޕްލަގިން ބޭނުންވެއެވެ

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

ޖާވާސްކްރިޕްޓް ހޯދާ →

ޓެބްބަލް މިސާލެވެ

ޓެބްތައް ޓެބް ކުރެވޭ ގޮތަށް ހެދުމަށްޓަކައި، .tab-paneކޮންމެ ޓެބަކަށް ޔުނިކް އައިޑީ އެއް އުފައްދައި، އެތަކެތި ގައި އޮޅާލާށެވެ .tab-content.

ކަނާތް ނުވަތަ ވާތު ފަރާތަށް އެއްވަރުކޮށްފައިވާ ޓެބްތަކަށް، .nav-tabsއަދި .tab-contentގައި އޮޅާލާށެވެ .tabbable.

ސީދާ މާކަޕް

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

<div class = "tabbable" > <!-- ހަމައެކަނި ބޭނުންވަނީ ކަނާތް/ވާތް ޓެބްތަކަށް -->  
  <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
    <li class = "އެކްޓިވް" ><a href = "#tab1" data-toggle = "ޓެބް" > 1 ވަނަ ބައި </a></li>   
    <li><a href = "#tab2" data-toggle = "ޓެބް" > 2 ވަނަ ބައި </a></li>  
  </ul> އެވެ
  <div class = "ޓެބް-ކޮންޓެންޓް" > 
    <div class = "ޓެބް-ޕޭން އެކްޓިވް" id = "ޓެބް1" >  
      <p> އަހަރެން މިހުރީ 1 ވަނަ ބައިގައެވެ. </p>
    </div> އެވެ
    <div ކްލާސް = "ޓެބް-ޕޭން" id = "ޓެބް2" >  
      <p> ހައުޑީ، އަހަރެން މިހުރީ 2 ވަނަ ބައިގައި. </p>
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

ތިރީގައި ހުންނަ ޓެބްތަކެވެ

އެޗްޓީއެމްއެލްގެ ތަރުތީބު އަނބުރާލާފައި ތިރީގައި ޓެބްތައް ބެހެއްޓުމަށް ކްލާހެއް އިތުރުކޮށްލާށެވެ.

<div class = "ޓޭބަބަލް ޓެބްސް-ތިރީގައި" > 
  <div class = "ޓެބް-ކޮންޓެންޓް" > 
    ...
  </div> އެވެ
  <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
    ...
  </ul> އެވެ
</div> އެވެ

ކަނާތްފަރާތުގައި ހުންނަ ޓެބްތަކެވެ

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

<div class = "ޓެބަބަލް ޓެބްސް-ކަނާތް" > 
  <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
    ...
  </ul> އެވެ
  <div class = "ޓެބް-ކޮންޓެންޓް" > 
    ...
  </div> އެވެ
</div> އެވެ

ކަނާތްފަރާތުގައި ހުންނަ ޓެބްތަކެވެ

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

<div class = "ޓޭބަބަލް ޓެބްސް-ރައިޓް" > 
  <ul ކްލާސް = "ނަވް ނަވް-ޓެބްސް" > 
    ...
  </ul> އެވެ
  <div class = "ޓެބް-ކޮންޓެންޓް" > 
    ...
  </div> އެވެ
</div> އެވެ

ނަވްބާރު ސްކެފޯލްޑިންގ އެވެ

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

<div ކްލާސް = "ނަވްބާރ" > 
  <div class = "ނަވްބާރ-އެތެރޭ" > 
    <div ކްލާސް = "ކޮންޓެއިނަރ" > 
      ...
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

ފިކްސްޑް ނަވްބާރ

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

<div class = "ނަވްބާރ ނަވްބާރ-ފިކްސްޑް-ޓޮޕް" > 
  ...
</div> އެވެ

<div class = "ނަވްބާރ ނަވްބާރ-ފިކްސްޑް-ބޮޓޮމް" > 
  ...
</div> އެވެ

ނަވްބާ ޖަހާއިރު، އޭގެ ދަށުގައިވާ ފޮރުވިފައިވާ ސަރަހައްދު އެކައުންޓް ކުރަން ހަނދާން ކުރާށެވެ. އަށް 40px ނުވަތަ އެއަށްވުރެ ގިނަ ޕެޑިންގ އިތުރުކުރުން <body>. މިކަން ކޯރ ބޫޓްސްޓްރެޕް ސީއެސްއެސް އަށް ފަހު އަދި އިޚްތިޔާރީ ރެސްޕޮންސިވް ސީއެސްއެސް ގެ ކުރިން އިތުރުކުރުން ޔަގީން ކުރައްވާށެވެ.

ބްރޭންޑް ނަމެވެ

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

<a class = "ބްރޭންޑް" href = "#" >  
  ޕްރޮޖެކްޓްގެ ނަން
</a> އެވެ

ނަވްބާރުގައި ފޯމްތައް

ނަވްބާރުގެ ތެރޭގައި ފޯމެއް ރަނގަޅަށް ސްޓައިލްކޮށް ޕޮޒިޝަން ކުރުމަށްޓަކައި، ތިރީގައިވާ ގޮތަށް އެކަށީގެންވާ ކްލާސްތައް އިތުރުކޮށްލާށެވެ. ޑިފޯލްޓް ފޯމަކަށް، ހިމަނާ .navbar-formއަދި ނުވަތަ .pull-leftނުވަތަ .pull-rightރަނގަޅަށް އެލައިން ކުރުމަށް.

<ފޯމް ކްލާސް = "ނަވްބާރ-ފޯމް ޕުލް-ލެފްޓް" > 
  <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "ސްޕަން2" >  
</form> އެވެ

އިތުރަށް ކަސްޓަމައިޒް ކުރެވިފައިވާ ސަރޗް ފޯމަކަށް، ނެވްބާރގައިވާ ޚާއްޞަ ސްޓައިލްތަކަށް އިންޕުޓަށް .navbar-searchއަދި formއިތުރުކުރައްވާށެވެ ..search-query

<form class = "ނަވްބާރ-ސަރޗް ޕުލް-ލެފްޓް" > 
  <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "ސަރޗް-ކުއަރީ" ޕްލޭސްހޯލްޑަރ = "ސަރޗް" >   
</form> އެވެ

އިޚްތިޔާރީ ރެސްޕޮންސިވް ވެރިއޭޝަން

ޓޮޕްބާރގައި ހުންނަ ކޮންޓެންޓްގެ މިންވަރަށް ބަލާއިރު، ރެސްޕޮންސިވް އޮޕްޝަންތައް ތަންފީޒު ކުރަން ބޭނުންވެދާނެއެވެ. އެކަން ކުރުމަށްޓަކައި، ތިބާގެ ނެވް ކޮންޓެންޓް ހިމެނޭ ޑިވް، .nav-collapse.collapse, އެއްގައި އޮޅާލުމަށްފަހު، ނެވްބާރ ޓޮގްލް ބަޓަން، .btn-navbar.

<div ކްލާސް = "ނަވްބާރ" > 
  <div class = "ނަވްބާރ-އެތެރޭ" > 
    <div ކްލާސް = "ކޮންޓެއިނަރ" > 
 
      <!-- .btn-navbar ބޭނުންކުރަނީ ކޮލެޕްސް ކޮށްފައިވާ ނަވްބާރ ކޮންޓެންޓް --> އަށް ޓޮގްލްގެ ގޮތުގައެވެ
      <a class = "btn btn-navbar" data-toggle = "ކޮލަޕްސް" ޑޭޓާ-ޓާގެޓް = ".nav-ކޮލަޕްސް" >   
        <span class = "އައިކޮން-ބާ" ></span> 
        <span class = "އައިކޮން-ބާ" ></span> 
        <span class = "އައިކޮން-ބާ" ></span> 
      </a> އެވެ
 
      <!-- ބްރޭންޑް ދައްކަން ބޭނުންނަމަ އެތަނުން ބޭރުގައި ދޫކޮށްލުން ޔަގީން ކުރައްވާ -->
      <a class = "brand" href = "#" > ޕްރޮޖެކްޓް ނަން </a>  
 
      <!-- ބޭނުންވާ ހުރިހާ އެއްޗެއް 940px ނުވަތަ އެއަށްވުރެ މަދުގައި ފޮރުވާފައި، މިތަނުގެ ތެރޭގައި ބަހައްޓާ -->
      <div class = "ނޭވް-ކޮލަޕްސް" > 
        <!-- .ނަވް، .ނަވްބާރ-ސަރޗް، .ނަވްބާރ-ފޯމް، ފަދަ -->
      </div> އެވެ
 
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

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

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

<ul ކްލާސް = "ނަވް" > 
  <li ކްލާސް = "އެކްޓިވް" > 
    <a href = "#" > ގެ </a> 
  </li> އެވެ
  <li><a href = "#" > ލިންކް </a></li> 
  <li><a href = "#" > ލިންކް </a></li> 
</ul> އެވެ

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

<ul ކްލާސް = "ނަވް" > 
  ...
  <li class = "ޑިވައިޑަރ-ވަރޓިކަލް" </li> 
  ...
</ul> އެވެ

ކޮމްޕޮނެންޓް އެލައިންމަންޓް

ނެވް، ސަރޗް ފޯމެއް، ނުވަތަ ޓެކްސްޓެއް އެލައިން ކުރުމަށްޓަކައި، .pull-leftނުވަތަ .pull-rightޔުޓިލިޓީ ކްލާސްތައް ބޭނުން ކުރާށެވެ. ދެ ކްލާހުން ވެސް ކަނޑައެޅިފައިވާ ދިމާލަށް ސީއެސްއެސް ފްލޯޓެއް އިތުރުކުރާނެ އެވެ.

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

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

<ul ކްލާސް = "ނަވް" > 
  <li class = "ޑްރޮޕްޑައުން" > 
    <a href = "#" އެވެ. 
          class = "ޑްރޮޕްޑައުން-ޓޮގްލް"
          data-toggle = "ޑްރޮޕްޑައުން" >
          އެކައުންޓު
          <b ކްލާސް = "ކެރެޓް" ></b> 
    </a> އެވެ
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      ...
    </ul> އެވެ
  </li> އެވެ
</ul> އެވެ

ޖާވާސްކްރިޕްޓް ހޯދާ →

ނަވްބާރުގައިވާ ލިޔުން

ޓެކްސްޓްގެ ސްޓްރިންގްސް އެއް ގައި އޮޅާލާށެވެ <.navbar-text>، އާންމުކޮށް <p>ޓެގެއްގައި ރަނގަޅަށް ލީޑިންގ އާއި ކުލަ ޖަހާށެވެ.

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

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

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

އެތައް ޞަފްޙާއެއް ހުރަސްކޮށް ދައްކާލެވޭނެ ގޮތަށް ދައްކާފައިވާ އެއް މިސާލެކެވެ.

• ގެ

• ހޯމް /
• ކުތުބުޚާނާ

• ހޯމް /
• ލައިބްރަރީ / 1 .
• މަޢުލޫމާތު

މާކަޕް

އެޗްޓީއެމްއެލް އަކީ ލިންކްތަކާއެކު ތިބާގެ ސްޓޭންޑަރޑް އަންއޯޑަރޑް ލިސްޓެވެ.

<ul class = "ރޮށި ކޮތަޅު" > 
  <li> އެވެ
    <a href = "#" > ހޯމް </a> <span class = "ޑިވައިޑަރ" > / </span>   
  </li> އެވެ
  <li> އެވެ
    <a href = "#" > ލައިބްރަރީ </a> <span class = "ޑިވައިޑަރ" > / </span>   
  </li> އެވެ
  <li class = "އެކްޓިވް" > ޑޭޓާ </li> 
</ul> އެވެ

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

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

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

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

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

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

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

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

މާކަޕް

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

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

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

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

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

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

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

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

• ކުރީގެ
• ދެން

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

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

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

• ← އުމުރުން ދުވަސްވީ
• އައު →

<ul ކްލާސް = "ޕޭޖަރ" > 
  <li ކްލާސް = "ކުރިން" > 
    <a href = "#" > ← އުމުރުން ދުވަސްވީ </a> 
  </li> އެވެ
  <li ކްލާސް = "ދެން" > 
    <a href = "#" > އައު → </a> އެވެ 
  </li> އެވެ
</ul> އެވެ

ގުޅިގެން

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

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

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

މާކަޕް

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

<div ކްލާސް = "ހީރޯ-ޔުނިޓް" > 
  <h1> ސުރުޚީ </h1>
  <p> ޓެގްލައިން </p> އެވެ
  <p> އެވެ
    <a class = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ ބީޓީއެން-ބޮޑު" > 
      އިތުރަށް ދަސްކުރައްވާ
    </a> އެވެ
  </p> އެވެ
</div> އެވެ

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

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

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

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

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

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

• 

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

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

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

• 

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

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

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

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

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

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

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

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

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

އެ މާކަޕް...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "އެލާޓް އެލާޓް-އެރޯރ" > 
  ...
</div> އެވެ

ކާމިޔާބު

<div class = "އެލާޓް އެލާޓް-ކާމިޔާބީ" > 
  ...
</div> އެވެ

މަޢުލޫމާތު

<div class = "އެލާޓް އެލާޓް-އިންފޯ" > 
  ...
</div> އެވެ

އާދައިގެ

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

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

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

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

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

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

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

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

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

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

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

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

އުޅުން

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

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

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

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

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

ވެލްސް އެވެ

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

<div ކްލާސް = "ރަނގަޅު" > 
  ...
</div> އެވެ

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

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

×

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

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

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