މިސާލު

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

<ul class = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "ޑްރޮޕްޑައުން-މެނޫ" >   
  <li><a tabindex = "-1" href = "#" > ޢަމަލު </a></li>  
  <li><a tabindex = "-1" href = "#" > އަނެއް ޢަމަލެއް </a></li>  
  <li><a tabindex = "-1" href = "#" > މިތަނުގައި އެހެން އެއްޗެއް </a></li>  
  <li ކްލާސް = "ޑިވައިޑަރ" </li> 
  <li><a tabindex = "-1" href = "#" > ވަކިކޮށްފައިވާ ލިންކެއް </a></li>  
</ul> އެވެ

މާކަޕް

ހަމައެކަނި ޑްރޮޕްޑައުން މެނޫއަށް ބަލާއިރު، މިއޮތީ ބޭނުންވާ އެޗްޓީއެމްއެލް އެވެ. ޑްރޮޕްޑައުންގެ ޓްރިގަރ އާއި ޑްރޮޕްޑައުން މެނޫ ގެ ތެރޭގައި އޮޅާލަން ޖެހޭނެ .dropdown، ނުވަތަ ޑިކްލެއަރ ކުރާ އެހެން އެލިމެންޓެއް position: relative;. ދެން ހަމަ މެނޫ އުފައްދާށެވެ.

<div class = "ޑްރޮޕްޑައުން" > 
  <!-- ޑްރޮޕްޑައުން ޓޮގްލް ކުރުމަށް ލިންކް ނުވަތަ ބަޓަން -->
  <ul ކްލާސް = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > ޢަމަލު </a></li>  
    <li><a tabindex = "-1" href = "#" > އަނެއް ޢަމަލެއް </a></li>  
    <li><a tabindex = "-1" href = "#" > މިތަނުގައި އެހެން އެއްޗެއް </a></li>  
    <li ކްލާސް = "ޑިވައިޑަރ" </li> 
    <li><a tabindex = "-1" href = "#" > ވަކިކޮށްފައިވާ ލިންކެއް </a></li>  
  </ul> އެވެ
</div> އެވެ

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

ކަނާތްފަރާތަށް މެނޫތައް އެލައިންކޮށް އިތުރުކޮށް ޑްރޮޕްޑައުންތަކުގެ އިތުރު ލެވެލްތައް ހިމެނެއެވެ.

މެނޫތައް އެލައިން ކުރުން

ޑްރޮޕްޑައުން މެނޫ އަށް ކަނާތްފަރާތަށް .pull-rightއެޑް ކޮށްލާށެވެ ..dropdown-menu

<ul class = "ޑްރޮޕްޑައުން-މެނޫ ޕުލް-ރައިޓް" ރޯލް = "މެނޫ" aria-labelledby = "dLabel" >   
  ...
</ul> އެވެ

ޑިސެބިލް ކޮށްފައިވާ މެނޫ އޮޕްޝަންސް

ލިންކް ޑިސެބިލް ކުރުމަށް ޑްރޮޕްޑައުންގައިވާ .disableda އަށް އެޑް ކުރާށެވެ .<li>

<ul class = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "ޑްރޮޕްޑައުން-މެނޫ" >   
  <li><a tabindex = "-1" href = "#" > ގަވާއިދުން ލިންކް </a></li>  
  <li class = "ޑިސެބަލްޑް" ><a tabindex = "-1" href = "#" > ޑިސެބިލްޑް ލިންކް </a></li>   
  <li><a tabindex = "-1" href = "#" > އެހެން ލިންކެއް </a></li>  
</ul> އެވެ

ޑްރޮޕްޑައުންތަކުގައި ހުންނަ ސަބް މެނޫތައް

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

<ul ކްލާސް = "ޑްރޮޕްޑައުން-މެނޫ" ރޯލް = "މެނޫ" aria-labelledby = "dLabel" >   
  ...
  <li class = "ޑްރޮޕްޑައުން-ސަބްމެނޫ" > 
    <a tabindex = "-1" href = "#" > އިތުރު އިޚްތިޔާރުތައް </a>  
    <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
      ...
    </ul> އެވެ
  </li> އެވެ
</ul> އެވެ

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

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

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

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

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

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

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

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

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

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

<div class = "ބީޓީއެން-ގްރޫޕް ބީޓީއެން-ގްރޫޕް-ވަރޓިކަލް" > 
  ...
</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.

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

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

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

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

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

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

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

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

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

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

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

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

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

<ul class = "ނަވް ނަވް-ޕިލްސް" > 
  ...
  <li class = "ނުކުޅެދުންތެރިކަން ހުންނަ" ><a href = "#" > ގެ </a> </li>  
  ...
</ul> އެވެ

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

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

ސްޓޭކް ކުރެވޭ

ޓެބްތަކާއި ގިތެޔޮ ގިތެޔޮ ޑިފޯލްޓްކޮށް ހޮރައިޒޮންޓަލް ކަމުން، ހަމައެކަނި ދެވަނަ ކްލާހެއް، .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> އެވެ

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

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

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

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

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

ނޯޓްނޭވް ލިސްޓެއްގެ ތެރޭގައި ނެސް ކުރުމަށްޓަކައި، class="nav nav-list"ކޮންމެ ނެސްޓް އެއްގައި ވެސް ހިމަނާށެވެ <ul>.

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

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

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

ތަބްބާބްލް ނަވް

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

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

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

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

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

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

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

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

ކޮންމެ ދިމާލަކުން ވެސް ޓެބްބަލް ކުރެވޭނެއެވެ

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

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

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

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

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

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

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

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

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

އަސާސީ ނަވްބާރ

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

<div ކްލާސް = "ނަވްބާރ" > 
  <div class = "ނަވްބާރ-އެތެރޭ" > 
    <a class = "brand" href = "#" > ސުރުޚީ </a>  
    <ul ކްލާސް = "ނަވް" > 
      <li class = "އެކްޓިވް" ><a href = "#" > ގެ </a> </li>  
      <li><a href = "#" > ލިންކް </a></li> 
      <li><a href = "#" > ލިންކް </a></li> 
    </ul> އެވެ
  </div> އެވެ
</div> އެވެ

ނަވްބާރުގެ ކޮމްޕޯނެންޓްތަކެވެ

ބްރޭންޑް

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

<a class = "brand" href = "#" > ޕްރޮޖެކްޓް ނަން </a>  

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

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

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

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

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

ފޯމުތައް

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

<ފޯމް ކްލާސް = "ނަވްބާރ-ފޯމް ޕުލް-ލެފްޓް" > 
  <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "ސްޕަން2" >  
  <button type = "ހުށަހެޅުން" class = "btn" > ހުށަހެޅުން </button>  
</form> އެވެ

ސަރޗް ފޯމް

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

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

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

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

ޑްރޮޕްޑައުންތައް ބޭނުންކޮށްގެންނެވެ

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

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

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

ލިޔުންކޮޅު

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

އިޚްތިޔާރީ ޑިސްޕްލޭ ވައްތަރުތައް

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

މައްޗަށް ފިކްސްކޮށްފައި

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

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

ތިރިއަށް ފިކްސްކޮށްފައި

އޭގެ .navbar-fixed-bottomބަދަލުގައި އިތުރުކޮށްލާށެވެ.

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

ސްޓޭޓިކް ޓޮޕް ނަވްބާރ

އިތުރުކޮށްގެން ޞަފްޙާއާއެކު ސްކްރޯލްވާ ފުލް ވިޑްތް ނެވްބާރެއް އުފައްދާށެވެ .navbar-static-top. ކްލާހާ ހިލާފަށް .navbar-fixed-topއެއްވެސް ޕެޑިންގއެއް ބަދަލުކުރަން ނުޖެހޭނެ body.

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

ރެސްޕޮންސިވް ނަވްބާރ

ކޮލެޕްސިންގ ރެސްޕޮންސިވް ނެވްބާރ އެއް ތަންފީޒުކުރުމަށްޓަކައި، ތިބާގެ ނަވްބާރ ކޮންޓެންޓް ހިމެނޭ ޑިވް، .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 = "nav-ކޮލަޕްސް ކޮލަޕްސް" > 
        <!-- .ނަވް، .ނަވްބާރ-ސަރޗް، .ނަވްބާރ-ފޯމް، ފަދަ -->
      </div> އެވެ
 
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

އިންވާޓްޑް ވެރިއޭޝަން

އިތުރުކޮށްގެން ނަވްބާރގެ ލޫކް ބަދަލުކުރާށެވެ .navbar-inverse.

<div class = "ނަވްބާރ ނަވްބާރ-އިންވާސް" > 
  ...
</div> އެވެ

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

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

<ul class = "ރޮށި ކޮތަޅު" > 
  <li><a href = "#" > ހޯމް </a> <ސްޕަން ކްލާސް = "ޑިވައިޑަރ" > / </span></li>   
  <li><a href = "#" > ލައިބްރަރީ </a> <span class = "ޑިވައިޑަރ" > / </span></li>   
  <li class = "އެކްޓިވް" > ޑޭޓާ </li> 
</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 = "#" > 5 </a></li> 
    <li><a href = "#" > ދެން </a></li> 
  </ul> އެވެ
</div> އެވެ

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

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

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

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

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

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

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

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

<div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-ބޮޑު" > 
  <ul> އެވެ
    ...
  </ul> އެވެ
</div> އެވެ
<div ކްލާސް = "ޕޭޖިނޭޝަން" > 
  <ul> އެވެ
    ...
  </ul> އެވެ
</div> އެވެ
<div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-ކުޑަ" > 
  <ul> އެވެ
    ...
  </ul> އެވެ
</div> އެވެ
<div class = "ޕޭޖިނޭޝަން ޕޭޖިނޭޝަން-މިނީ" > 
  <ul> އެވެ
    ...
  </ul> އެވެ
</div> އެވެ

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

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

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

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

ޕޭޖަރ އެވެ

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

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

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

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

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

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

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

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

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

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

ލޭބަލްތައް

ބެޖްތައް

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

މާކަޕް

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެވެ

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

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

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

ކާމިޔާބު

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

މަޢުލޫމާތު

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

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

އާދައިގެ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންފޯ" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 20 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ސަކްސެސް" > 
  <div ކްލާސް = "ބާ" ސްޓައިލް = " ފުޅާމިން : 40 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންޒާރު" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 60 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ނުރައްކާ" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 80 % " ></div>   
</div> އެވެ

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

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

<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންފޯ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 20 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ކާމިޔާބީ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" > 
  <div ކްލާސް = "ބާ" ސްޓައިލް = " ފުޅާމިން : 40 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-އިންޒާރު ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 60 % " ></div>   
</div> އެވެ
<div class = "ޕްރޮގްރެސް ޕްރޮގްރެސް-ނުރައްކާ ޕްރޮގްރެސް-ސްޓްރައިޕްޑް" > 
  <div ކްލާސް = "ބާރ" ސްޓައިލް = " ފުޅާމިން : 80 % " ></div>   
</div> އެވެ

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

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

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

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

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

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

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

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

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

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

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

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

<div class = "މީޑިއާ" > 
  <a ކްލާސް = "ދަމައި-ކަނާތް" href = "#" >  
    <img ކްލާސް = "މީޑިއާ-އޮބްޖެކްޓް" data-src = "ހޯލްޑަރ.ޖޭއެސް/64x64" >  
  </a> އެވެ
  <div class = "މީޑިއާ-ބޮޑީ" > 
    <h4 class = "މީޑިއާ-ހެޑިންގ" > މީޑިއާ ހެޑިންގ </h4> 
    ...
 
    <!-- ނެސްޓް ކުރެވިފައިވާ މީޑިއާ އޮބްޖެކްޓް -->
    <div class = "މީޑިއާ" > 
      ...
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

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

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

<ul class = "މީޑިއާ-ލިސްޓް" > 
  <li ކްލާސް = "މީޑިއާ" > 
    <a ކްލާސް = "ދަމައި-ކަނާތް" href = "#" >  
      <img ކްލާސް = "މީޑިއާ-އޮބްޖެކްޓް" data-src = "ހޯލްޑަރ.ޖޭއެސް/64x64" >  
    </a> އެވެ
    <div class = "މީޑިއާ-ބޮޑީ" > 
      <h4 class = "މީޑިއާ-ހެޑިންގ" > މީޑިއާ ހެޑިންގ </h4> 
      ...
 
      <!-- ނެސްޓް ކުރެވިފައިވާ މީޑިއާ އޮބްޖެކްޓް -->
      <div class = "މީޑިއާ" > 
        ...
     </div> އެވެ
    </div> އެވެ
  </li> އެވެ
</ul> އެވެ

ވެލްސް އެވެ

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

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

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

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

<div class = "ރަނގަޅަށް ރަނގަޅަށް ބޮޑު" > 
  ...
</div> އެވެ

<div class = "ރަނގަޅަށް ރަނގަޅަށް-ކުޑަ" > 
  ...
</div> އެވެ

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

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

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

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

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

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

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

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

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

class = "ދަމައި-ކަނާތް" އެވެ.

. ދަމައިގަންނަން - ކަނާތް { .
  float : ކަނާތްފަރާތުގައި ;
} .

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

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

class = "ދަމައި-ކަނާތް" އެވެ.

. ދަމައިގަންނަން - ކަނާތް { .
  float : ކަނާތް ;
} .

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

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

class = "މިއުޓްކޮށްފައި" އެވެ.

. މުއުޓްކޮށްފައި {
  ކުލަ : #999؛ 
} .

.ސާފުކުރުން

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

class = "ސާފުކުރުން".

. ކްލިއަރފިކްސް {
  * ޒޫމް : 1 ; 
  &: ކުރިން ,
  &: ފަހުން {
    ޑިސްޕްލޭ : މޭޒު ;
    ކޮންޓެންޓް : "" ; 
  } .
  &: ފަހުން {
    ސާފު : ދެ ;
  } .
} .