އަވަހަށް ފެށޭ މިސާލުތައް

އަވަސް ޓެމްޕްލޭޓްތަކެއް ބޭނުންވޭތޯ؟ އަޅުގަނޑުމެން އެއްކޮށްލާފައިވާ މި އަސާސީ މިސާލުތައް ބައްލަވާލައްވާށެވެ:

ޑިފޯލްޓް ގްރިޑް

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

މިސާލު ގްރިޑް މާކަޕް

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

<div ކްލާސް = "ރޯ" > 
  <div ކްލާސް = "ސްޕަން6" > 
    ...
  </div> އެވެ
  <div ކްލާސް = "ސްޕަން10" > 
    ...
  </div> އެވެ
</div> އެވެ

ނެސްޓިންގ ކޮލަމްތައް

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

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

<div ކްލާސް = "ރޯ" > 
  <div ކްލާސް = "ސްޕަން12" > 
    ކޮލަމްގެ ލެވެލް 1
    <div ކްލާސް = "ރޯ" > 
      <div ކްލާސް = "ސްޕަން6" > 
        ލެވެލް 2
      </div> އެވެ
      <div ކްލާސް = "ސްޕަން6" > 
        ލެވެލް 2
      </div> އެވެ
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

އަމިއްލައަށް ގްރިޑް ރޯލް ކޮށްލާށެވެ

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

ގްރިޑްގެ އެތެރޭގައެވެ

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

މިހާރު ކަސްޓަމައިޒް ކުރަން

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

ބޫޓްސްޓްރެޕް އަންނަނީ 24 ކޮލަމް އާއި ހަމައަށް ގްރިޑް ސިސްޓަމެއް ހެންޑްލް ކުރެވޭ ގޮތަށް ތައްޔާރުކޮށްފައި؛ the default is just 16. މިއީ 24 ކޮލަމްގެ ގްރިޑަކަށް ކަސްޓަމައިޒް ކޮށްފައި ތިބާގެ ގްރިޑް ވެރިއޭބަލްތައް ފެންނާނެ ގޮތެވެ.

@gridކޮލަމްސް : 24 ;       
@gridކޮލަމްވިޑްތް : 20px ;   
@gridGutterވިޑްތް : 20px ;   

އެއްފަހަރު ރީކޮމްޕައިލް ކޮށްލުމުން ސެޓް ވާނެ!

ފިކްސްޑް ލޭއައުޓް

ޑިފޯލްޓް އަދި ސާދާ 940px ފުޅާ، މަރުކަޒުކޮށްފައިވާ ލޭއައުޓް ގާތްގަނޑަކަށް ކޮންމެ ވެބްސައިޓަކަށް ނުވަތަ ޕޭޖަކަށް ފޯރުކޮށްދޭ އެއް <div.container>.

<ހަށިގަނޑު> އެވެ
  <div ކްލާސް = "ކޮންޓެއިނަރ" > 
    ...
  </div> އެވެ
</body> އެވެ

ފްލޫޑް ލޭއައުޓް

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

<ހަށިގަނޑު> އެވެ
  <div class = "ކޮންޓެއިނަރ-ފްލޫޑް" > 
    <div ކްލާސް = "ސައިޑްބާރ" > 
      ...
    </div> އެވެ
    <div ކްލާސް = "ކޮންޓެންޓް" > 
      ...
    </div> އެވެ
  </div> އެވެ
</body> އެވެ

ހެޑިންގސް & ކޮޕީ

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

މުޅި ޓައިޕޮގްރަފިކް ގްރިޑް ބިނާވެފައިވަނީ އަޅުގަނޑުމެންގެ ޕްރީބޫޓް.ލެސް ފައިލްގައިވާ ދެ ލެސް ވެރިއޭބަލްއެއްގެ މައްޗަށެވެ: @basefontއަދި @baseline. ފުރަތަމަ ކަމަކީ މުޅިން ބޭނުންކުރާ ބޭސް ފޮންޓް-ސައިޒް އަދި ދެވަނަ ކަމަކީ ބޭސް ލައިން-ހައިޓް އެވެ.

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

ހ1. ސުރުޚީ 1

ހ2. ސުރުޚީ 2

ހ3. ސުރުޚީ 3

ހ4. ސުރުޚީ 4

ހ5. ސުރުޚީ 5

ހ6. ސުރުޚީ 6

މިސާލު ޕެރެގްރާފް

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

މިސާލު ސުރުޚީ ސަބް ހެޑިންގ އެއް ހުރެއެވެ...

މިސްކް. އުނިއިތުރުތަކެވެ

ބާރުއެޅުން، އެޑްރެސް، & ކުރުކުރުންތައް ބޭނުންކޮށްގެން

<strong> <em> <address> <abbr>

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

ބާރުއަޅާ ޓެގް ( <strong>އަދި <em>) ބޭނުންކުރަންވާނީ ލަފުޒެއް ނުވަތަ ޢިބާރާތެއްގެ ވަށައިގެންވާ ކޮޕީއަށް ނިސްބަތްކޮށް އިތުރު މުހިންމުކަމެއް ނުވަތަ ބާރުއެޅުން ދައްކުވައިދިނުމަށެވެ. <strong>މުހިންމުކަމަށްޓަކައި އަދި <em>ސްޓްރެސްއަށް ބާރުއެޅުމަށް ބޭނުންކުރުން .

ޕެރެގްރާފެއްގައި ބާރުއެޅުން

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

ނޯޓް: އަދިވެސް އެޗްޓީއެމްއެލް5 ގައި <b>އަދި <i>ޓެގްތައް ބޭނުންކުރުމަކީ އޯކޭ ކަމެއް ކަމަށާއި އެއީ ބޮލްޑް އަދި އިޓަލިކް ސްޓައިލް ކޮށްފައި ހުންނަން ނުޖެހޭނެ ކަމަށް ވެސް ވިދާޅުވި އެވެ (އެއަށްވުރެ މާނަހުރި އުނިއިތުރެއް އޮތް ނަމަވެސް ބޭނުންކުރައްވާށެވެ). <b>އިތުރު މުހިންމުކަމެއް ނުދީ ލަފުޒުތައް ނުވަތަ ޢިބާރާތްތައް އަލިއަޅުވާލުމަށް މާނަކޮށްފައިވާއިރު، <i>ގިނައިން ވާހަކަ ދައްކާފައިވަނީ އަޑާއި، ފަންނީ ޝަރުޠުތަކާއި، ފަދަ ކަންކަމަށެވެ.

އެޑްރެސްތަކެވެ

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

ނޯޓް: ކޮންޓެންޓް ރަނގަޅަށް ސްޓްރަކްޗަރ ކުރުމަށްޓަކައި ލައިން-ބްރޭކް ( ) އިން ނުވަތަ ބްލޮކް ލެވެލް ޓެގެއް (އެބަހީ، ) ގައި <address>އޮޅާލަން <br />ޖެހޭނެއެވެ .<p>

ކުރުކުރުންތަކެވެ

ކުރުކުރުންތަކާއި ކުޑަކުޑަ ނަންތަކަށް، <abbr>ޓެގް ބޭނުންކުރައްވާ ( HTML5<acronym> ގައި ޑިޕްރެކޭޓެޑް ވެއެވެ ). ޓެގްގެ ތެރޭގައި ޝޯޓްހެންޑް ފޯމް ޖައްސައި ފުރިހަމަ ނަމަށް ސުރުޚީއެއް ސެޓް ކުރާށެވެ.

ބްލޮކްކޯޓްސް އެވެ

<blockquote> <p> <small>

ކޯޓް ކުރާނެ ގޮތް

ބްލޮކްކޯޓެއް ހިމެނުމަށްޓަކައި <blockquote>ވަށައިގެން ވަށާލާ ޓެގް ޖަހާށެވެ <p>. <small>އެލިމެންޓް ބޭނުންކޮށްގެން <small>ތިމާގެ ސޯސް ނަކަލުކޮށްލުމުން އޭގެ —ކުރިން އެމް ޑޭޝް އެއް ލިބޭނެއެވެ.

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

ޖޫލިއަސް ހިބަރޓް ޑރ

<ބްލޮކްކޯޓް> އެވެ
  <p> ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް ޑަޕިބަސް ޕޮސުއެރެ ވެލިޓް އެލިކެޓް. </p> އެވެ
  <small> ޑރ.ޖޫލިއަސް ހިބަރޓް </small>
</blockquote> އެވެ

އޯޑަރު ނުކުރެވިގެންނެވެ<ul>

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

ސްޓައިލް ނުކުރެވިގެންނެވެ<ul.unstyled>

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

އަމުރުކޮށްފިއެވެ<ol>

1. ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
2. ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
3. އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
4. ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
5. ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
6. ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
7. އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
8. އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް

ތަފްޞީލުdl

ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ

ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.

ޔޫއިސްމޮޑް އެވެ

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

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

މަލެސުއަދާ ޕޯޓާ އެވެ

އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް.

ކޯޑް

<code> <pre>

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

ކޯޑް ހުށަހެޅުން

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

<ޑިވް> އެވެ
  <h1>ސުރުޚީ</h1>
  <p>ކޮންމެވެސް ކަމެއް ހަމަ މިތާ...</p>
</div> އެވެ

<div> <h1> ސުރުޚީ </h1> <p> ހަމަ މިތަނުގައި އެއްޗެއް... </p> </div>
  
  

އިންލައިން ލޭބަލްތަކެވެ

<span class="label">

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

އެއްވެސް އެއްޗެއް ލޭބަލް ކުރާށެވެ

އެވަރ ނީޑްޑް ވަން އޮފް ދަ ފެންސީ ނިއު! ނުވަތަ ކޯޑް ލިޔާއިރު މުހިންމު ދިދަތަކެއް؟ އާދެ، މިހާރު ތިޔަބޭފުޅުންނަށް އެބަތިބި. މިއީ ޑިފޯލްޓްކޮށް ހިމެނޭ ކަންތައްތަކެވެ:

މީޑިއާ ގްރިޑް

އެޗްޓީއެމްއެލް ފުޓްޕްރިންޓް މަދު އަދި އެންމެ ކުޑަ ސްޓައިލްތަކެއް ހުންނަ ޞަފްޙާތަކުގައި ތަފާތު ސައިޒުގެ ތަމްބްނެއިލްތައް ދައްކާލުން.

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

ތަމްބްނެއިލްސް އިން ދަ .media-gridކޮންމެ ސައިޒެއްގެ ވެސް ވެދާނެ ނަމަވެސް އެއީ ސީދާ ބިލްޓް-އިން ބޫޓްސްޓްރެޕް ގްރިޑް ސިސްޓަމަށް މެޕް ކުރުމުން އެންމެ ރަނގަޅަށް މަސައްކަތް ކުރާ އެއްޗެކެވެ. 90، 210، އަދި 330 ފަދަ ތަސްވީރުގެ ފުޅާމިންތައް މަދު ޕިކްސެލްތަކެއްގެ ޕެޑިންގ އާއި ގުޅިގެން .span2, .span4, އަދި .span6ކޮލަމް ސައިޒްތަކާ އެއްވަރު ވެއެވެ.

ވަރަށް ބޮޑު

މީޑިއަމް

ކުޑަ

އެމީހުންނަށް ކޯޑް ކުރުން

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

<ul class = "މީޑިއާ-ގްރިޑް" > 
  <li> އެވެ
    <a href = "#" > 
      <img class = "ތަމްބްނެއިލް" src = "https://placehold.it/330x230" alt = "" >   
    </a> އެވެ
  </li> އެވެ
  <li> އެވެ
    <a href = "#" > 
      <img class = "ތަމްބްނެއިލް" src = "https://placehold.it/330x230" alt = "" >   
    </a> އެވެ
  </li> އެވެ
</ul> އެވެ

މޭޒުތައް ބިނާކުރުން

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

އަބަދުވެސް ތިމާގެ ކޮލަމް ހެޑަރުތައް އޮޅާލާނީ <thead>ހައިރާކީ <thead>> <tr>> ވާނެ ގޮތަކަށެވެ <th>.

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

މިސާލު: ޑިފޯލްޓް ޓޭބަލް ސްޓައިލްސް

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

<މޭޒު> އެވެ
  ...
</ޓޭބަލް> އެވެ

މިސާލު: ޒީބްރާ ސްޓްރައިޕްޑް

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

ނޯޓް: ޒީބްރާ-ސްޓްރައިޕިންގ އަކީ IE8 ​​އަދި ތިރީގައިވާ ފަދަ ދުވަސްވީ ބްރައުޒާތަކަށް ނުލިބޭ ޕްރޮގްރެސިވް އެންހެންސްމަންޓެކެވެ.

<ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" > 
...
</ޓޭބަލް> އެވެ

މިސާލު: ޒީބްރާ-ސްޓްރައިޕްޑް w/ TableSorter.js

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

<script src = "ޖޭއެސް/ޖޭކުއަރީ/ޖޭކިއުރީ.ޓޭބަލްސޯޓަރ.މިން.ޖޭއެސް" ></script> 
<ސްކްރިޕްޓް > އެވެ 
  $ ( ފަންކްޝަން () { 
    $ ( "ޓޭބަލް#ސޯޓްޓޭބަލްއެކްސްމްޕްލް" ). ޓޭބަލްސޯޓަރ ({ ސޯރޓްލިސްޓް : [[ 1 , 0 ]] });  
  });
</script> އެވެ
<ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" > 
  ...
</ޓޭބަލް> އެވެ

ޑިފޯލްޓް ސްޓައިލްތައް

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

ސްޓޭކްކޮށްފައިވާ ފޯމުތަކެވެ

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

ފޯމް ފީލްޑް ސައިޒްތައް

ކޮންމެ ފޯމެއް input, select, ނުވަތަ textareaފުޅާމިނެއް ކަސްޓަމައިޒް ކުރާނީ މާކަޕް އަށް މަދު ކްލާސްތަކެއް އިތުރުކޮށްގެންނެވެ.

v1.3.0 އިން ފެށިގެން އަޅުގަނޑުމެން މިވަނީ ފޯމް އެލިމެންޓްތަކަށް ގްރިޑް ބެސްޓް ސައިޒިންގ ކްލާސްތައް އިތުރުކޮށްފައެވެ. މިހާރު ހުރި , , ފަދަ ކްލާސްތަކުގެ މައްޗަށް މިކަންކަން ބޭނުން ކުރައްވާށެވެ ..mini.small

ބަޓަންތަކެވެ

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

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

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

ބަޓަން ސްޓައިލްތައް ކޮންމެ އެއްޗަކަށް ވެސް .btnޖަހާލެވޭނެ އެވެ. އާންމުކޮށް މިކަންކަން ތަންފީޒު ކުރަން ބޭނުންވާނީ ހަމައެކަނި <a>, <button>, އަދި ސެލެކްޓް <input>އެލިމެންޓްތަކަށެވެ. މިއޮތީ ފެންނަ ގޮތް:

ބަދަލު ސައިޒްތައް ހެދުން

ފެންސީ ބޮޑެތި ނުވަތަ ކުދި ބަޓަންތަކެއް ހެއްޔެވެ؟ ހޭވް އެޓް އިޓް!

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

އެކްޓިވް ނުވާ ނުވަތަ އެއް ސަބަބަކާހުރެ ނުވަތަ އަނެއް ސަބަބަކާހުރެ އެޕް އިން ޑިސެބިލް ކޮށްފައިވާ ބަޓަންތަކަށް ޑިސެބިލް ސްޓޭޓް ބޭނުން ކުރާށެވެ. އެއީ .disabledލިންކްތަކަށް އަދި :disabledއެލިމެންޓްތަކަށްޓަކައެވެ <button>.

ލިންކްތައް

ބަޓަންތަކެވެ

އެއީ ކޮންކަމެއް

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

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

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

ޑްރޮޕްޑައުންސް ހިމެނޭ

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

ޓެބްތަކާއި ގިތެޔޮ ގިތެޔޮ

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

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

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް
• ސެޓިންގސް
• ކޮންޓެކްޓް
• ޑްރޮޕްޑައުން
  • ސެކަންޑަރީ ލިންކެއް
  • މިތާ އެހެން ކަމެއް
  • އަނެއްކާ ލިންކެއް

<ul ކްލާސް = "ޓެބްސް" > 
  <li class = "އެކްޓިވް" ><a href = "#" > ގެ </a> </li>  
  <li><a href = "#" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#" > މެސެޖުތައް </a></li> 
  <li><a href = "#" > ސެޓިންގސް </a></li> 
  <li><a href = "#" > ގުޅުން </a></li> 
</ul> އެވެ

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

<ul class = "ގިތެޔޮ" > 
  <li class = "އެކްޓިވް" ><a href = "#" > ގެ </a> </li>  
  <li><a href = "#" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#" > މެސެޖުތައް </a></li> 
  <li><a href = "#" > ސެޓިންގސް </a></li> 
  <li><a href = "#" > ގުޅުން </a></li> 
</ul> އެވެ

ރޮށި ކޮތަޅުތަކެވެ

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

• ގެ

• ހޯމް /
• މެދު ޞަފްޙާ

• ހޯމް /
• މެދު ޞަފްޙާ /
• އަނެއްކާ

• ހޯމް /
• މެދު ޞަފްޙާ /
• އަނެއްކާ /
• ތިޔަ ތިއްބެވީ މިތާ

<ul class = "ރޮށި ކޮތަޅު" > 
  <li><a href = "#" > ހޯމް </a> <ސްޕަން ކްލާސް = "ޑިވައިޑަރ" > / </span></li>   
  <li><a href = "#" > މެދު ޞަފްޙާ </a> <span class = "ޑިވައިޑަރ" > / </span></li>   
  <li><a href = "#" > އަނެއް އެއްޗެއް </a> <span class = "ޑިވައިޑަރ" > / </span></li>   
  <li class = "active" > ތިޔަ ތިއްބެވީ މިތާ </li> 
</ul> އެވެ

ޕޭޖިނޭޝަން

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

<div ކްލާސް = "ޕޭޖިނޭޝަން" > 
  <ul> އެވެ
    <li class = "ކުރިން ނުކުޅެދިފައިވާ" ><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 class = "ދެން" ><a href = "#" > ކުރިއަށް → </a></li> އެވެ  
  </ul> އެވެ
</div> އެވެ

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

.alert-message

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

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

މިސާލު ކޯޑެވެ

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

މެސެޖުތައް ބްލޮކް ކުރާށެވެ

.alert-message.block-message

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

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

މިސާލު ކޯޑެވެ

<div class = "އެލާޓް-މެސެޖް ބްލޮކް-މެސެޖް އިންޒާރު" > 
  <a class = "ބަންދުކުރުން" href = "#" > × </a>  
  <p><strong> މާތް ގުއަކަމޯލް! މިއީ އިންޒާރެއް! </strong> ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް. ޕްރެސެންޓް ކޮމޮޑޯ ކަރސަސް މެގްނާ، ވެލް ސެލެރިސްކް ނިސްލް ކޮންސެކްޓެޓަރ އެޓް. </p> އެވެ
  <div class = "އެލާޓް-އެކްޝަންސް" > 
    <a class = "btn small" href = "#" > މި ފިޔަވަޅު އަޅާ </a> <a class = "btn small" href = "#" > ނުވަތަ މިކަން ކުރައްވާ </a>     
  </div> އެވެ
</div> އެވެ

މޮޑަލްސް އެވެ

މޮޑަލްސް-ޑައިލޮގްސް ނުވަތަ ލައިޓްބޮކްސް- އަކީ ބެކްގްރައުންޑް ކޮންޓެކްސްޓް ބެލެހެއްޓުން މުހިންމު ހާލަތްތަކުގައި ކޮންޓެކްސްޗުއަލް އެކްޝަންތަކަށް ވަރަށް ރަނގަޅު އެއްޗެކެވެ.

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

ޓޫލްޓިޕްސް އެވެ

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

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

ޕޮޕޯވަރސް އެވެ

ލޭއައުޓަށް އަސަރު ނުކޮށް ޞަފްޙާއަކަށް ސަބްޓެކްސްޗުއަލް މަޢުލޫމާތު ފޯރުކޮށްދިނުމަށް ޕޮޕޯވަރސް ބޭނުން ކުރާށެވެ.

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

ފަށަންވީ ގޮތް

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

ޖާވާސްކްރިޕްޓް ޑޮކްސް ބަލާ »

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

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

ޖާވާސްކްރިޕްޓް ކޮންމެހެން ބޭނުންވޭ ހެއްޔެވެ؟

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

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

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