އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. މޯރބީ ލިއޯ ރިސަސް، ޕޯޓާ އޭސީ ކޮންސެކްޓެޓަރ އޭސީ، ވެސްޓިބިއުލަމް އެޓް އެރޯސް.
ބޫޓްސްޓްރެޕް އަކީ ވެބްއެޕްތަކާއި ސައިޓްތައް ޑިވެލޮޕްމަންޓް ކިކްސްޓާޓް ކުރުމަށް ފަރުމާކޮށްފައިވާ ޓްވިޓާގެ ޓޫލްކިޓެކެވެ.
އެއީ ޓައިޕޮގްރަފީ، ފޯމް، ބަޓަން، ޓޭބަލް، ގްރިޑް، ނެވިގޭޝަން، އަދި އެހެނިހެން ކަންކަމަށް ބޭނުންވާ ބޭސް ސީއެސްއެސް އަދި އެޗްޓީއެމްއެލް ހިމެނެއެވެ.
ނެރޑް އެލާޓް: ބޫޓްސްޓްރެޕް ބިލްޑްކޮށްފައިވަނީ ލެސް އިން ކަމަށާއި، މިއީ ޒަމާނީ ބްރައުޒާތަކަށް ވިސްނައިގެން ގޭޓުން ބޭރުގައި މަސައްކަތް ކުރުމަށް ފަރުމާކޮށްފައިވާ އެއްޗެކެވެ.
އެންމެ އަވަހަށް އަދި އެންމެ ފަސޭހައިން ފެށުމަށްޓަކައި ހަމައެކަނި މި ސްނިޕެޓް ވެބްޕޭޖަށް ކޮޕީކޮށްލާށެވެ.
ލެސް ބޭނުން ކުރުމުގެ ފޭނެއް ހެއްޔެވެ؟ މައްސަލައެއް ނެތް، ހަމައެކަނި ރެޕޯ ކްލޯންކޮށް މި ލައިންތައް އިތުރުކޮށްލާށެވެ:
ގިތަބްގައި އޮފިޝަލް ބޫޓްސްޓްރެޕް ރެޕޯ އާއި އެކު ޑައުންލޯޑް، ފޯކް، ޕުލް، ފައިލް މައްސަލަތަކާއި، އަދިވެސް އެތައް ކަމެއް.
ގިޓްހަބްގައި ބޫޓްސްޓްރެޕް ކުރުން »
މިވަގުތު v1.3.0 އެވެ
ޓްވިޓާގެ އިންޖިނިއަރުން ވަނީ ތާރީޚީ ގޮތުން ފްރަންޓް އެންޑް ޝަރުތުތައް ފުރިހަމަ ކުރުމަށް އެމީހުންނަށް އަހުލުވެރި ކޮންމެ ލައިބްރަރީއެއް ވެސް ބޭނުންކޮށްފަ އެވެ. ބޫޓްސްޓްރެޕް ފެށުނީ ކުރިމަތިވި ގޮންޖެހުންތަކަށް ޖަވާބެއްގެ ގޮތުގައެވެ. ގިނަ އޯސަމް ފޯލްކްސްގެ އެހީތެރިކަމާއެކު ބޫޓްސްޓްރެޕް ވަނީ ވަރަށް ބޮޑަށް ކުރިއަރާފައެވެ.
އިތުރަށް ކިޔައިލައްވާ dev.twitter.com ›
ބޫޓްސްޓްރެޕް އަކީ ކްރޯމް، ސަފާރީ، އިންޓަނެޓް އެކްސްޕްލޯރަރ، އަދި ފަޔަރފޮކްސް ފަދަ ޒަމާނީ ބޮޑެތި ބްރައުޒާތަކުގައި ޓެސްޓްކޮށް ސަޕޯޓްކުރާ އެއްޗެކެވެ.
ބޫޓްސްޓްރެޕް ފުރިހަމައަށް އަންނަނީ ކޮމްޕައިލްޑް ސީއެސްއެސް، އަންކޮމްޕައިލްޑް، އަދި މިސާލު ޓެމްޕްލޭޓްތަކާއެކުގައެވެ.
ބޫޓްސްޓްރެޕްގެ ބައެއްގެ ގޮތުގައި ފޯރުކޮށްދޭ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމަކީ 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 ގްރިޑް ސިސްޓަމް ކަސްޓަމައިޒް ކުރުމަށް ބޭނުންކުރާ އަތްމަތި ދަތި ވެރިއޭބަލްތަކެކެވެ. ތަންކޮޅެއް ކަސްޓަމައިޒް ކޮށްގެން ކޮލަމްތަކުގެ ސައިޒާއި، އެތަކެތީގެ ގަޓަރުތަކާއި، އެ ކޮލަމްތައް ދިރިއުޅޭ ކޮންޓެއިނަރަށް ބަދަލު ގެނެވޭނެއެވެ.
ގްރިޑް ސިސްޓަމް ބަދަލުކުރުމަށް ބޭނުންވާ ވެރިއޭބަލްތައް މިވަގުތު ހުރިހާ އެއްޗެއް ދިރިއުޅެނީ variables.less
.
ވެރިއޭބަލް އެވެ | ޑިފޯލްޓް ވެލިއު | ތަފްޞީލު |
---|---|---|
@gridColumns |
16 | ގްރިޑްގެ ތެރޭގައި ހުންނަ ކޮލަމްތަކުގެ އަދަދު |
@gridColumnWidth |
40ޕީއެކްސް އެވެ | ގްރިޑްގެ ތެރޭގައިވާ ކޮންމެ ކޮލަމެއްގެ ފުޅާމިން |
@gridGutterWidth |
20ޕީއެކްސް އެވެ | ކޮންމެ ކޮލަމެއްގެ މެދުގައިވާ ނެގެޓިވް ސްޕޭސް އެވެ |
@siteWidth |
ހުރިހާ ކޮލަމްތަކާއި ގަޓަރުތަކުގެ ޖުމްލަ ގުނާފައިވުން | އަޅުގަނޑުމެން ކޮންމެވެސް އަސާސީ މެޗެއް ބޭނުންކޮށްގެން ކޮލަމްތަކާއި ގަޓަރުތަކުގެ އަދަދު ގުނާ މިކްސިންގެ ފުޅާމިން .fixed-container() ސެޓްކުރަމެވެ. |
ގްރިޑް ބަދަލުކުރުމުގެ މާނައަކީ ތިން @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> އެވެ
ތިމާގެ ވެބްޕޭޖްތައް ސްޓްރަކްޗަރ ކުރުމަށް ބޭނުންކުރާ ސްޓޭންޑަރޑް ޓައިޕޮގްރަފިކް ހައިރާކީއެކެވެ.
މުޅި ޓައިޕޮގްރަފިކް ގްރިޑް ބިނާވެފައިވަނީ އަޅުގަނޑުމެންގެ variables.less ފައިލްގައިވާ ދެ Less ވެރިއޭބަލްގެ މައްޗަށެވެ: @basefont
އަދި @baseline
. ފުރަތަމަ ކަމަކީ މުޅިން ބޭނުންކުރާ ބޭސް ފޮންޓް-ސައިޒް އަދި ދެވަނަ ކަމަކީ ބޭސް ލައިން-ހައިޓް އެވެ.
އަޅުގަނޑުމެން އެ ވެރިއޭބަލްތައް، އަދި ބައެއް ހިސާބުތައް ބޭނުންކޮށްގެން، އަޅުގަނޑުމެންގެ ހުރިހާ ވައްތަރެއްގެ މާރޖިންސް، ޕެޑިންގސް، އަދި ލައިން-ހައިޓްސް އުފެއްދުމަށް އަދި އެއަށްވުރެ ގިނަ ކަންތައްތަކެވެ.
ނޫލަމް ކުއިސް ރިސަސް އެގޭޓް އުރްނާ މޮލިސް އޮރްނާރޭ ވެލް އެއު ލިއޯ. ކަމް ސޯޝިއަސް ނަޓޯކް ޕެނަޓިބަސް އެޓް މެގްނިސް ޑިސް ޕާޗުރިއަންޓް މޮންޓެސް، ނަސްސެޓަރ ރިޑިކިއުލަސް މުސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.
ބާރުއެޅުން، އެޑްރެސް، & ކުރުކުރުންތައް ބޭނުންކޮށްގެން
<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>
dl
<code>
<pre>
އާދައިގެ ދެ ޓެގެއް ބޭނުންކޮށްގެން ސްޓައިލްގައި ތިމާގެ ކޯޑް ޕިމްޕް ކޮށްލާށެވެ. ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އިތުރު ބިރުވެރިކަމެއް ހޯދުމަށް ގޫގުލްގެ ކޯޑް ޕްރިޓިފައި ލައިބްރަރީއަށް ވައްދާލުމުން ތިބާ ސެޓް ވެއްޖެއެވެ.
ކޯޑް، ބްލޮކްސް އޮފް ނުވަތަ ހަމައެކަނި ސްނިޕެޓްސް އިންލައިން، ސްޓައިލް އާއި އެކު ދައްކާލެވޭނީ ހަމައެކަނި ރަނގަޅު ޓެގެއްގައި އޮޅާލުމުންނެވެ. އެތައް ރޮނގެއް ފުޅާކޮށްފައިވާ ކޯޑްގެ ބްލޮކްތަކަށް، <pre>
އެލިމެންޓް ބޭނުންކުރާށެވެ. އިންލައިން ކޯޑަށް ބޭނުންކުރާނީ <code>
އެލިމެންޓް އެވެ.
އެއްޗެއްގެ ބައެއް | ނަތީޖާ |
---|---|
<code> |
މިފަދަ ލިޔުމެއްގެ ސަފުހާއެއްގައި ތިބާގެ އޮޅާފައިވާ ކޯޑް މި <html> އެލިމެންޓް ފަދައިން ފެންނާނެއެވެ. |
<pre> |
<ޑިވް> އެވެ <h1>ސުރުޚީ</h1> <p>ކޮންމެވެސް ކަމެއް ހަމަ މިތާ...</p> </div> އެވެ ނޯޓް: |
<pre class="prettyprint"> |
ގޫގުލް-ކޯޑް-ޕްރެޓިފައި ލައިބްރަރީ ބޭނުންކޮށްގެން، ތިބާގެ ކޯޑް ބްލޮކްތަކަށް ތަންކޮޅެއް ތަފާތު ވިޝުއަލް ސްޓައިލަކާއި އޮޓޮމެޓިކް ސިންޓެކްސް ހައިލައިޓިންގ އެއް ލިބިގެންދެއެވެ. <div> <h1> ސުރުޚީ </h1> <p> ހަމަ މިތަނުގައި އެއްޗެއް... </p> </div> google-code-prettify ޑައުންލޯޑްކޮށް ބޭނުންކުރާނެ ގޮތް ރީޑްމީ ބަލާށެވެ. |
<span class="label">
ހަށިގަނޑުގެ ލިޔުމުގައިވާ އެއްވެސް ޢިބާރާތަކަށް ސަމާލުކަން ގޮވާ ނުވަތަ ދިދަ ޖަހާށެވެ.
އެވަރ ނީޑްޑް ވަން އޮފް ދަ ފެންސީ ނިއު! ނުވަތަ ކޯޑް ލިޔާއިރު މުހިންމު ދިދަތަކެއް؟ އާދެ، މިހާރު ތިޔަބޭފުޅުންނަށް އެބަތިބި. މިއީ ޑިފޯލްޓްކޮށް ހިމެނޭ ކަންތައްތަކެވެ:
ލޭބަލް | ނަތީޖާ |
---|---|
<span class="label">Default</span> |
ޑީފޯލްޓް |
<span class="label success">New</span> |
އާ |
<span class="label warning">Warning</span> |
އިންޒާރު |
<span class="label important">Important</span> |
މުހިންމު |
<span class="label notice">Notice</span> |
ނޯޓިސް |
އެޗްޓީއެމްއެލް ފުޓްޕްރިންޓް މަދު އަދި އެންމެ ކުޑަ ސްޓައިލްތަކެއް ހުންނަ ޞަފްޙާތަކުގައި ތަފާތު ސައިޒުގެ ތަމްބްނެއިލްތައް ދައްކާލުން.
ތަމްބްނެއިލްސް އިން ދަ .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>
އެވެ.
ހުރިހާ ޓޭބަލްތަކެއް އޮޓޮމެޓިކުން ސްޓައިލް ކުރެވޭނީ ހަމައެކަނި ކޮންމެހެން ބޭނުންވާ ބޯޑަރުތަކާއެކު ކިޔެވޭނެ ގޮތް ކަށަވަރުކޮށް ސްޓްރަކްޗަރ ބެލެހެއްޓުމަށްޓަކައެވެ. އިތުރު ކްލާސް ނުވަތަ އެޓްރިބިއުޓްތައް އިތުރު ކުރަން ނުޖެހެއެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
- <މޭޒު> އެވެ
- ...
- </ޓޭބަލް> އެވެ
ތަތް ޖާގަތަކުގައި އިތުރު ޑޭޓާ ބޭނުންވާ މޭޒުތަކަށް ޕެޑިން ދެބައިކުޅަ އެއްބައި ކަނޑާލާ ކޮންޑެންސްޑް ފްލޭވަރ ބޭނުން ކުރާށެވެ. އަދި ޑިފޯލްޓް ޓޭބަލް ސްޓައިލްތަކެކޭ އެއްފަދައިން ބޯޑަރސް އާއި ޒީބްރާ-ސްޓްރައިޕްސް އާއި ގުޅިގެން ބޭނުންކުރެވިދާނެއެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
މޭޒުތަކުގެ ކޮޅުތައް ވަށައިގެން ޖައްސައި ހުރިހާ ފަރާތަކަށް ބޯޑަރުތައް އިތުރުކޮށްގެން މޭޒުތައް ކުޑަކޮށް ސްލީކަރ ކޮށްލާށެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
- <ޓޭބަލް ކްލާސް = "ބޯޑަރޑް-ޓޭބަލް" >
- ...
- </ޓޭބަލް> އެވެ
ޒީބްރާ-ސްޓްރައިޕިންގ އިތުރުކޮށްގެން ތިބާގެ މޭޒުތަކާއެކު ކުޑަކޮށް ފެންސީ ކޮށްލައްވާ- ހަމައެކަނި .zebra-striped
ކްލާސް އިތުރުކޮށްލާށެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
ސްޕަން 4 ކޮލަމް | |||
ސްޕަން 2 ކޮލަމް | ސްޕަން 2 ކޮލަމް |
ނޯޓް: ޒީބްރާ-ސްޓްރައިޕިންގ އަކީ IE8 އަދި ތިރީގައިވާ ފަދަ ދުވަސްވީ ބްރައުޒާތަކަށް ނުލިބޭ ޕްރޮގްރެސިވް އެންހެންސްމަންޓެކެވެ.
- <ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" >
- ...
- </ޓޭބަލް> އެވެ
ކުރީގެ މިސާލު ނަގައިގެން، ޖޭކުއަރީ އާއި ޓޭބަލްސޯޓަރ ޕްލަގިން މެދުވެރިކޮށް ސޯރޓިންގ ފަންކްޝަނަލިޓީ ފޯރުކޮށްދީގެން އަޅުގަނޑުމެންގެ ޓޭބަލްތަކުގެ ބޭނުންތެރިކަން އިތުރުކުރަމެވެ . ސޯރޓް ބަދަލު ކުރުމަށް ކޮންމެ ކޮލަމެއްގެ ހެޑަރ އަށް ކްލިކް ކުރާށެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
1 | ތިބާގެ | އެކެއް | އިނގިރޭސި |
- <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>
.
.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> އެވެ
މޮޑަލްސް-ޑައިލޮގްސް ނުވަތަ ލައިޓްބޮކްސް- އަކީ ބެކްގްރައުންޑް ކޮންޓެކްސްޓް ބެލެހެއްޓުން މުހިންމު ހާލަތްތަކުގައި ކޮންޓެކްސްޗުއަލް އެކްޝަންތަކަށް ވަރަށް ރަނގަޅު އެއްޗެކެވެ.
އެއް ރީތި ހަށިގަނޑެއް...
ޓްވިޕްސީ އަކީ އޮޅުން ބޮޅުން ވެފައިވާ ޔޫޒަރަކަށް އެހީތެރިވެދީ ރަނގަޅު ދިމާލަކަށް އިޝާރާތް ކުރުމަށް ސުޕަ ޔޫސްފުލް އެއްޗެކެވެ.
ލޮރެމް އިޕްސަމް ޑޮލަރު ސިޓް އަމެޓް އިލޯ އެރޯރ އިޕްސަމް ވެރިޓޭޓިސް އޮޓް އިސްޓޭ ޕަރސްޕިޝިއޭޓިސް އިސްޓޭ ވޮލޫޕްޓަސް ނެޓަސް އިލޯ ކުއާސީ އޮޑިޓް އޮޓް ނަޓަސް ކޮންސެކިއުންޓަރ ކޮންސެކިއުންޓަރ، އޮޓް ނަޓަސް އިލޯ ވޮލޫޕްޓޭޓެމް އޮޑިޓް ޕަރސްޕިޝިއޭޓިސް ލައުޑެންޓިއަމް ރެމް ޑޮލޮރެމްކޭ ޓޮޓަމް ވޮލޫޕްޓާސް. ވޮލޫޕްޓަސްޑިކްޓާ އީކޭ ބީޓޭ އެޕެރިއަމް އުޓް އެނިމް ވޮލޫޕްޓޭޓެމް އެކްސްޕްލިކާބޯ އެކްސްޕްލިކާބޯ، ވޮލޫޕްޓަސް ކުއާ އޮޑިޓް ފުގިޓް އެކިއުސަންޓިއަމް ޓޮޓަމް ޓޮޓަމް އާކިޓެކްޓޯ އެކްސްޕްލިކާބޯ ސިޓް ކުއާސީ ފުގިޓް ފުގިޓް، ޓޮޓަމް ޑޮލޮރެމްކޭ އުންޑޭ ސުންޓް ސެޑް ޑިކްޓާ ކުއޭ އެކިއުސަންޓިއަމް ފުގިޓް ވޮލޫޕްޓާސް ނޭމޯ ވޮލޫޕްޓާސް ވޮލޫޕްޓޭޓެމް ރެމް ކުއޭ އޮޓޯ ވެރިޓަޓިސް ކުއާޒީ ކުއޭ.
ލޭއައުޓަށް އަސަރު ނުކޮށް ޞަފްޙާއަކަށް ސަބްޓެކްސްޗުއަލް މަޢުލޫމާތު ފޯރުކޮށްދިނުމަށް ޕޮޕޯވަރސް ބޭނުން ކުރާށެވެ.
އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. މޯރބީ ލިއޯ ރިސަސް، ޕޯޓާ އޭސީ ކޮންސެކްޓެޓަރ އޭސީ، ވެސްޓިބިއުލަމް އެޓް އެރޯސް.
ބޫޓްސްޓްރެޕް ލައިބްރަރީއާ ޖާވާސްކްރިޕްޓް އިންޓަގްރޭޓް ކުރުމަކީ ސުޕަ ފަސޭހަ ކަމެކެވެ. ތިރީގައި މިވަނީ އަސާސީ ކަންކަމަށް ބަލާލާފައި ތިޔަބޭފުޅުންނަށް ފަށައިގަތުމަށްޓަކައި ބައެއް މޮޅު ޕްލަގިންސްތައް ފޯރުކޮށްދީފައެވެ!
ޖީކުއަރީ އަދި އެންޑަރ އާއި އެކު މަސައްކަތްކުރާ އާ ކަސްޓަމް ޕްލަގިންސް ތަކުން ބޫޓްސްޓްރެޕްގެ ބައެއް ޕްރައިމަރީ ކޮމްޕޯނެންޓްތައް ދިރުވައިދޭށެވެ . ތިޔަބޭފުޅުންގެ ވަކި ތަރައްޤީގެ ބޭނުންތަކަށް އެކަންކަން ފުޅާކޮށް ބަދަލުކުރުމަށް އަޅުގަނޑުމެން ބާރުއަޅަމެވެ.
ފައިލް | ތަފްޞީލު |
---|---|
ބޫޓްސްޓްރެޕް-މޮޑަލް.ޖޭއެސް އެވެ | އަޅުގަނޑުމެންގެ މޮޑަލް ޕްލަގިން އަކީ ސަގާފީ މޮޑަލް ޖޭއެސް ޕްލަގިން އަށް ސުޕަ ސްލިމް ޓޭކެއް! އަޅުގަނޑުމެން ޚާއްޞަ ފަރުވާތެރިކަމެއް ކުރީ ޓްވިޓަރގައި އަޅުގަނޑުމެން ބޭނުންވާ ހަމައެކަނި ހުސް ފަންކްޝަނަލިޓީ ހިމަނައިދިނުމަށެވެ. |
ބޫޓްސްޓްރެޕް-އެލާޓްސް.ޖޭއެސް އެވެ | އެލާޓް ޕްލަގިން އަކީ އެލާޓްތަކަށް ކްލޯސް ފަންކްޝަނަލިޓީ އިތުރުކުރުމަށް ބޭނުންކުރާ ސުޕަ ޓައިނީ ކްލާހެކެވެ. |
ބޫޓްސްޓްރެޕް-ޑްރޮޕްޑައުން.ޖޭއެސް އެވެ | މި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާރ ނުވަތަ ޓެބްޑް ނެވިގޭޝަންތަކަށް ޑްރޮޕްޑައުން އިންޓަރެކްޝަން އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. |
ބޫޓްސްޓްރެޕް-ސްކްރޯލްސްޕީ.ޖޭއެސް އެވެ | ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާއަށް ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޯ އަޕްޑޭޓިން ނެވް އެއް އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. |
ބޫޓްސްޓްރެޕް-ބަޓަންސް.ޖޭއެސް އެވެ | ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާއަށް ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޯ އަޕްޑޭޓިން ނެވް އެއް އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ. |
ބޫޓްސްޓްރެޕް-ޓެބްސް.ޖޭއެސް އެވެ | މި ޕްލަގިން އިން ލޯކަލް ކޮންޓެންޓް މެދުވެރިކޮށް ސައިކަލް ކުރުމަށް އަވަސް، ޑައިނަމިކް ޓެބް އަދި ޕިލް ފަންކްޝަނަލިޓީ އިތުރުކޮށްދެއެވެ. |
ބޫޓްސްޓްރެޕް-ޓްވިޕްސީ.ޖޭއެސް އެވެ | ޖޭސަން ފްރޭމް ލިޔެފައިވާ މޮޅު jQuery.tipsy ޕްލަގިންގެ މައްޗަށް ބިނާކޮށް؛ twipsy އަކީ އަޕްޑޭޓް ކުރެވިފައިވާ ވަރޝަނެއް ކަމަށާއި، މިއީ ތަސްވީރުތަކަށް ބަރޯސާ ނުވާ، އެނިމޭޝަންތަކަށް css3 ބޭނުންކުރާ، އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް ބޭނުންކުރާ ވަރޝަނެކެވެ! |
ބޫޓްސްޓްރެޕް-ޕޮޕޯވަރ.ޖޭއެސް އެވެ | ޕޮޕޯވަރ ޕްލަގިން އިން ތިބާގެ އެޕްލިކޭޝަނަށް ޕޮޕޯވަރސް އިތުރުކުރުމަށް ފަސޭހަ އިންޓަރފޭސްއެއް ލިބިގެންދެއެވެ. އެއީ boostrap-twipsy.js ޕްލަގިން ފުޅާކޮށްދޭ އެއްޗެއް ކަމުން ޕްރޮޖެކްޓްގައި ޕޮޕޯވަރސް ހިމަނާއިރު އެ ފައިލް ވެސް ހިފެހެއްޓުން ޔަގީން ކުރައްވާށެވެ! |
ނޫން! ބޫޓްސްޓްރެޕް ފަރުމާކޮށްފައިވަނީ އެންމެ ފުރަތަމަ އަދި އެންމެ މުހިންމު ކަމަކީ ސީއެސްއެސް ލައިބްރަރީއަކަށް ހެދުމަށެވެ. މި ޖާވާސްކްރިޕްޓް އިން ހިމެނޭ ސްޓައިލްތަކުގެ މަތީގައި އަސާސީ އިންޓަރެކްޓިވް ލޭޔަރެއް ލިބިގެންދެއެވެ.
ނަމަވެސް ޖާވާސްކްރިޕްޓް ބޭނުންވާ ފަރާތްތަކަށް، ބޫޓްސްޓްރެޕް ޖާވާސްކްރިޕްޓާ އިންޓަގްރޭޓް ކުރާނެ ގޮތް ވިސްނައިދިނުމަށާއި، އަސާސީ ފަންކްޝަނަލިޓީއަށް ވަގުތުން އަވަސް، ލުއި އިޚްތިޔާރެއް ދިނުމަށްޓަކައި، މަތީގައިވާ ޕްލަގިންސްތައް އަޅުގަނޑުމެން ފޯރުކޮށްދެމެވެ.
އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަދި ބައެއް ލައިވް ޑެމޯތައް ބަލާލުމަށް އަޅުގަނޑުމެންގެ ޕްލަގިން ޑޮކިއުމަންޓޭޝަން ޕޭޖަށް ރިފަރ ކުރައްވާށެވެ .
ބޫޓްސްޓްރެޕް އުފެއްދީ ޕްރީބޫޓް އިން ކަމަށްވާއިރު، މިއީ އަވަހަށް އަދި ފަސޭހައިން ވެބް ޑިވެލޮޕް ކުރުމަށް ސީއެސްއެސް ޕްރީޕްރޮސެސަރެއް ކަމަށްވާ ލެސް އާއި ގުޅިގެން ބޭނުން ކުރުމަށް މިކްސިންތަކާއި ވެރިއޭބަލްތަކުގެ އޯޕަން ސޯސް ޕެކެކެވެ .
އަޅުގަނޑުމެން ބޫޓްސްޓްރެޕްގައި ޕްރީބޫޓް ބޭނުންކުރި ގޮތާއި، ދެން އޮންނަ ޕްރޮޖެކްޓްގައި ލެސް ހިންގަން އިޚްތިޔާރު ކޮށްފިނަމަ އޭގެ ބޭނުން ހިފޭނެ ގޮތް ބަލާށެވެ.
މި އިޚްތިޔާރު ބޭނުންކޮށްގެން ބޫޓްސްޓްރެޕްގެ ލެސް ވެރިއޭބަލްސް، މިކްސިންސް، އަދި ބްރައުޒާގައި ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސީއެސްއެސްގައި ނެސްޓިންގ ގެ ފުރިހަމަ ބޭނުން ހިފޭނެއެވެ.
- <link rel = "ސްޓައިލްޝީޓް/މަދު" href = "މަދު/ބޫޓްސްޓްރެޕް.ލެސް" media = "ހުރިހާ" />
- <script src = "ޖޭއެސް/ލެސް-1.1.3.މިނިޓް.ޖޭއެސް" ></script>
.js ގެ ހައްލު އިހުސާސް ނުކުރެވެނީ ހެއްޔެވެ؟ ކޯޑް ޑިޕްލޮއި ކުރާއިރު ކޮމްޕައިލް ކުރުމަށް ލެސް މެކް އެޕް ޓްރައިކޮށްލައްވާ ނުވަތަ Node.js ބޭނުން ކުރައްވާށެވެ.
މިއީ ބޫޓްސްޓްރެޕްގެ ބައެއްގެ ގޮތުގައި ޓްވިޓާ ބޫޓްސްޓްރެޕްގައި ހިމަނާފައިވާ ބައެއް ކަންތައްތަކުގެ ތެރެއިން ފާހަގަކޮށްލެވޭ ކަންތައްތަކެކެވެ. ޑައުންލޯޑްކޮށް އިތުރަށް ދަސްކުރުމަށް ބޫޓްސްޓްރެޕް ވެބްސައިޓަށް ނުވަތަ ގިތަބް ޕްރޮޖެކްޓް ޕޭޖަށް ބޯ ދިއްކޮށްލާށެވެ.
ލެސްގައި ހުންނަ ވެރިއޭބަލްސް އަކީ ސީއެސްއެސް ބޮލުގައި ރިއްސުން ނެތި ބެލެހެއްޓުމާއި އަޕްޑޭޓް ކުރުމަށް ފުރިހަމަ އެއްޗެކެވެ. ކުލަ އަގެއް ނުވަތަ ގިނައިން ބޭނުންކުރާ އަގެއް ބަދަލުކުރަން ބޭނުންވާ ވަގުތު އެއްތަނެއްގައި އަޕްޑޭޓްކޮށްލުމުން ސެޓް ވެއްޖެއެވެ.
- // ލިންކްތައް
- @linkColor : #8b59c2؛
- @linkColorHover : އަނދިރިވުން ( @linkColor , 10 );
- // ގްރޭސް
- @ކަޅު : #000؛
- @grayDark : އަލިކުރުން ( @black , 25 %)؛
- @gray : ލުއިކުރުން ( @black , 50 %)؛
- @grayLight : ލުއިކުރުން ( @ކަޅު , 70 %)؛
- @grayLighter : ލުއިކުރުން ( @black , 90 %)؛
- @ދޮން : #fff ؛
- // އެކްސެންޓް ކުލަތައް
- @ބްލޫ : #08b5fb ؛
- @ގްރީން : #46a546 ؛
- @red : #9d261d؛
- @ރީނދޫ : #ffc40d ؛
- @އޮރެންޖް : #f89406 ؛
- @ޕިންކް : #c3325f ؛
- @ޕަރޕްލް : #7a43b6 ؛
- // ބޭސްލައިން ގްރިޑް
- @ބޭސްފޮންޓް : 13px ;
- @ ބޭސްލައިން : 18px ;
/* ... */
އަދި ސީއެސްއެސްގެ އާދައިގެ ސިންޓެކްސްގެ އިތުރުން ކޮމެންޓް ކުރުމުގެ އެހެން ސްޓައިލެއް ވެސް ލެސް އިން ފޯރުކޮށްދެ އެވެ .
- // މިއީ ކޮމެންޓެކެވެ
- /* މިއީ ވެސް ކޮމެންޓެއް */
މިކްސިންސް އަކީ އަސާސީ ގޮތުން ސީއެސްއެސް އަށް އިންކްލޫޑްސް ނުވަތަ ޕާރޝިއަލްސް އެއް ކަމުން ކޯޑްގެ ބްލޮކެއް އެއްކޮށް އެއް ބްލޮކެއް ހެދުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ. އެއީ ވެންޑަރ ޕްރިފިކްސްޑް ޕްރޮޕަޓީސް ފަދަ box-shadow
, ކްރޮސް-ބްރައުޒަރ ގްރޭޑިއަންޓްސް، ފޮންޓް ސްޓޭކްސް، އަދި އެހެނިހެން ޕްރޮޕަޓީތަކަށް ވަރަށް ރަނގަޅު އެއްޗެހިތަކެކެވެ. ތިރީގައި މިވަނީ ބޫޓްސްޓްރެޕް އާއި އެކު ހިމެނޭ މިކްސިންތަކުގެ ނަމޫނާއެކެވެ.
- #ފޮންޓް {
- . ޝޯޓްހެންޑް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- . sans - serif ( @ބަރުދަން : އާދައިގެ ، @ސައިޒް : 14px ، @lineHeight : 20px ) {
- font - family : "ހެލްވެޓިކާ ނިއު" , ހެލްވެޓިކާ , އެރިއަލް , sans - serif ;
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- ...
- } .
- #ގްރޭޑިއަންޓް {
- ...
- . ވަރުގަދަ ( @startColor : #555, @endColor: #333) {
- ބެކްގްރައުންޑް - ކުލަ : @endColor ;
- ބެކްގްރައުންޑް - ރިޕީޓް : ރިޕީޓް - x ;
- ބެކްގްރައުންޑް - އިމޭޖް : - khtml - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , އިން ( @startColor ), އަށް ( @endColor )); // ކޮންކުއަރ
- ބެކްގްރައުންޑް - އިމޭޖް : - މޮޒް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އެފްއެފް 3.6+
- ބެކްގްރައުންޑް - އިމޭޖް : - އެމްއެސް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އައިއީ10
- ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , ކުލަ - ހުއްޓުވުން ( 0 %, @startColor ), ކުލަ - ހުއްޓުވުން ( 100 %, @endColor )); // ސަފާރީ 4+، ކްރޯމް 2+
- ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސަފާރީ 5.1+، ކްރޯމް 10+
- ބެކްގްރައުންޑް - އިމޭޖް : - o - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އޮޕެރާ 11.10
- ބެކްގްރައުންޑް - އިމޭޖް : ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސްޓޭންޑަރޑް
- } .
- ...
- } .
ފެންސީ ހޯދައިގެން ކޮންމެވެސް ވަރަކަށް ހިސާބު ޕާފޯމްކޮށް ތިރީގައިވާ ފަދަ ފްލެކްސިބަލް އަދި ވަރުގަދަ މިކްސިންތައް އުފައްދާށެވެ.
- // ގްރިޑިޓިއުޑް
- @gridކޮލަމްސް : 16 ;
- @gridކޮލަމްވިޑްތް : 40px ;
- @gridGutterވިޑްތް : 20px ;
- @siteWidth : ( @ގްރިޑްކޮލަމްސް * @ގްރިޑްކޮލަމްވިޑްތް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ގްރިޑްކޮލަމްސް - 1 ));
- // ބައެއް ކޮލަމްތައް ހަދާށެވެ
- . ކޮލަމްސް ( @columnSpan : 1 ) {
- width : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްސްޕަން ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްސްޕަން - 1 ));
- } .
.less
/lib/ ގައިވާ ފައިލްތައް ބަދަލުކުރުމަށްފަހު ، bootstrap-*.*.*.css އަދި bootstrap-*.*.*.min.css ފައިލްތައް އަލުން އުފެއްދުމަށްޓަކައި އެ ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރަން ޖެހޭނެއެވެ. ގިޓްހަބަށް ޕުލް ރިކުއެސްޓެއް ހުށަހަޅަމުންދާނަމަ އަބަދުވެސް އަލުން ކޮމްޕައިލް ކުރަން ޖެހެއެވެ.
ގޮތް | ފިޔަވަޅުތައް |
---|---|
މޭކްފައިލް އާއި އެކު ނޯޑް | ތިރީގައިވާ ކޮމާންޑް ހިންގައިގެން npm އާއެކު less ކޮމާންޑް ލައިން ކޮމްޕައިލަރ އިންސްޓޯލް ކުރާށެވެ. $ npm އިންސްޓޯލް ކުރުން lessc އެއްފަހަރު އިންސްޓޯލް ވުމުން ހަމައެކަނި މީގެ އިތުރުން watchr އިންސްޓޯލްކޮށްފައި އޮތްނަމަ، |
ޖާވާސްކްރިޕްޓް | އެންމެ ފަހުގެ Less.js ޑައުންލޯޑްކޮށް އެއަށް ދާނެ މަގު (އަދި Bootstrap) ގައި ހިމަނާށެވެ
.less ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރުމަށްޓަކައި ހަމައެކަނި ސޭވްކޮށް ޕޭޖް އަލުން ލޯޑް ކޮށްލާށެވެ. Less.js އިން އެތަކެތި ކޮމްޕައިލްކޮށް ލޯކަލް ސްޓޯރޭޖްގައި ރައްކާކުރެއެވެ. |
ކޮމާންޑް ލައިން | މިހާރުވެސް ލެސް ކޮމާންޑް ލައިން ޓޫލް އިންސްޓޯލްކޮށްފައި ހުރިނަމަ، ފަސޭހައިން ތިރީގައިވާ ކޮމާންޑް ހިންގާށެވެ. $ lessc ./lib/bootstrap.less > ބޫޓްސްޓްރެޕް.ސީއެސްއެސް
|
މަދު މެކް އެޕް | ނުރަސްމީ މެކް އެޕް އިން .ލެސް ފައިލްތަކުގެ ޑައިރެކްޓަރީތައް ބަލައި، ބަލާފައިވާ .ލެސް ފައިލް ސޭވް ކުރާ ކޮންމެ ސޭވް އަކަށް ފަހު ކޯޑް ލޯކަލް ފައިލްތަކަށް ކޮމްޕައިލް ކުރެ އެވެ. ކަމުދާނަމަ އެޕްގައި ހުންނަ ޕްރެފެރެންސްތައް އޮޓޮމެޓިކުން މިނިފައި ކުރުމަށް ޓޮގްލް ކުރެވޭނެ ކަމަށާއި ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތައް ނިމޭނީ ކޮން ޑައިރެކްޓަރީއެއްގައި ކަމަށް ވެސް ވިދާޅުވި އެވެ. |