އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. މޯރބީ ލިއޯ ރިސަސް، ޕޯޓާ އޭސީ ކޮންސެކްޓެޓަރ އޭސީ، ވެސްޓިބިއުލަމް އެޓް އެރޯސް.
ބޫޓްސްޓްރެޕް އަކީ ވެބްއެޕްތަކާއި ސައިޓްތައް ޑިވެލޮޕްމަންޓް ކިކްސްޓާޓް ކުރުމަށް ފަރުމާކޮށްފައިވާ ޓްވިޓާގެ ޓޫލްކިޓެކެވެ.
އެއީ ޓައިޕޮގްރަފީ، ފޯމް، ބަޓަން، ޓޭބަލް، ގްރިޑް، ނެވިގޭޝަން، އަދި އެހެނިހެން ކަންކަމަށް ބޭނުންވާ ބޭސް ސީއެސްއެސް އަދި އެޗްޓީއެމްއެލް ހިމެނެއެވެ.
ނެރޑް އެލާޓް: ބޫޓްސްޓްރެޕް ބިލްޑްކޮށްފައިވަނީ ލެސް އިން ކަމަށާއި، މިއީ ޒަމާނީ ބްރައުޒާތަކަށް ވިސްނައިގެން ގޭޓުން ބޭރުގައި މަސައްކަތް ކުރުމަށް ފަރުމާކޮށްފައިވާ އެއްޗެކެވެ.
އެންމެ އަވަހަށް އަދި އެންމެ ފަސޭހައިން ފެށުމަށްޓަކައި ހަމައެކަނި މި ސްނިޕެޓް ވެބްޕޭޖަށް ކޮޕީކޮށްލާށެވެ.
ލެސް ބޭނުން ކުރުމުގެ ފޭނެއް ހެއްޔެވެ؟ މައްސަލައެއް ނެތް، ހަމައެކަނި ރެޕޯ ކްލޯންކޮށް މި ލައިންތައް އިތުރުކޮށްލާށެވެ:
ގިތަބްގައި އޮފިޝަލް ބޫޓްސްޓްރެޕް ރެޕޯ އާއި އެކު ޑައުންލޯޑް، ފޯކް، ޕުލް، ފައިލް މައްސަލަތަކާއި، އަދިވެސް އެތައް ކަމެއް.
ޓްވިޓާގެ ކުރީގެ ދުވަސްވަރު އިންޖިނިއަރުން ފްރަންޓް އެންޑް ޝަރުތުތައް ފުރިހަމަ ކުރުމަށްޓަކައި އެމީހުންނަށް އަހުލުވެރި ކޮންމެ ލައިބްރަރީއެއް ގާތްގަނޑަކަށް ބޭނުންކުރި އެވެ. ބޫޓްސްޓްރެޕް ފެށިގެން އައީ ޓްވިޓާގެ ފުރަތަމަ ހެކްވީކްގައި ކުރިމަތިވި ގޮންޖެހުންތަކުގެ ޖަވާބެއްގެ ގޮތުގައި ކަމަށާއި ތަރައްގީ އަވަހަށް އަވަސްވި ކަމަށެވެ.
ޓްވިޓާގެ ގިނަ އިންޖިނިއަރުންގެ އެހީތެރިކަމާއި ފީޑްބެކާއެކު ބޫޓްސްޓްރެޕް ވަނީ ހަމައެކަނި އަސާސީ ސްޓައިލްތައް ނޫން ކަމަށާއި، އިތުރަށް އެލިގަންޓް އަދި ދިގުދެމިގެންދާ ފްރަންޓް އެންޑް ޑިޒައިން ޕެޓަރންތައް ހިމެނޭ ގޮތަށް ވަރަށް ބޮޑަށް ކުރިއަރާފައެވެ.
އިތުރަށް ކިޔައިލައްވާ dev.twitter.com ›
ބޫޓްސްޓްރެޕް އަކީ ކްރޯމް، ސަފާރީ، އިންޓަނެޓް އެކްސްޕްލޯރަރ، އަދި ފަޔަރފޮކްސް ފަދަ ޒަމާނީ ބޮޑެތި ބްރައުޒާތަކުގައި ޓެސްޓްކޮށް ސަޕޯޓްކުރާ އެއްޗެކެވެ.
ބޫޓްސްޓްރެޕް ފުރިހަމައަށް އަންނަނީ ކޮމްޕައިލްޑް ސީއެސްއެސް، އަންކޮމްޕައިލްޑް، އަދި މިސާލު ޓެމްޕްލޭޓްތަކާއެކުގައެވެ.
ބޫޓްސްޓްރެޕްގެ ބައެއްގެ ގޮތުގައި ފޯރުކޮށްދޭ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމަކީ 940px ފުޅާމިނުގައި 16 ކޮލަމްގެ ގްރިޑެކެވެ. އެއީ މަޝްހޫރު 960 ގްރިޑް ސިސްޓަމްގެ ރަހައެއް ނަމަވެސް ކަނާތް ފަރާތާއި ވާތު ފަރާތުގައި އިތުރު މާރޖިން/ޕެޑިންގ އެއް ނެތިއެވެ.
މިތަނުގައި ދައްކާފައިވާ ފަދައިން، އަޅުގަނޑުމެންގެ ގްރިޑް ސިސްޓަމްގެ ބައެއްގެ ގޮތުގައި އަޅުގަނޑުމެން މާނަކުރި 16 ފައުންޑޭޝަނަލް ކޮލަމްގެ ތެރެއިން ކޮންމެ ކޮލަމެއްގައި ހިމެނޭ ދެ "ކޮލަމް" އާއެކު އަސާސީ ލޭއައުޓެއް އުފެއްދިދާނެއެވެ. އިތުރު ތަފާތުތަކަށް ތިރީގައިވާ މިސާލުތައް ބައްލަވާށެވެ.
- <div ކްލާސް = "ރޯ" >
- <div class = "span6 ކޮލަމްސް" >
- ...
- </div> އެވެ
- <div class = "span10 ކޮލަމް" >
- ...
- </div> އެވެ
- </div> އެވެ
ޑިފޯލްޓް އަދި ސާދާ 940px ފުޅާ، މަރުކަޒުކޮށްފައިވާ ލޭއައުޓް ގާތްގަނޑަކަށް ކޮންމެ ވެބްސައިޓަކަށް ނުވަތަ ޕޭޖަކަށް ފޯރުކޮށްދޭ އެއް <div.container>
.
- <ހަށިގަނޑު> އެވެ
- <div ކްލާސް = "ކޮންޓެއިނަރ" >
- ...
- </div> އެވެ
- </body> އެވެ
މިން- އަދި މެކްސް-ވިޑްތްތަކާއި ކަނާތްފަރާތުގައިވާ ސައިޑްބާރ އެއް އެކުލެވޭ ބަދަލު، ފްލެކްސިބަލް ފްލޫޑް ޕޭޖް ސްޓްރަކްޗަރެކެވެ. އެޕްސް އަދި ޑޮކްސް އަށް ވެސް މޮޅު.
- <ހަށިގަނޑު> އެވެ
- <div class = "ކޮންޓެއިނަރ-ފްލޫޑް" >
- <div ކްލާސް = "ސައިޑްބާރ" >
- ...
- </div> އެވެ
- <div ކްލާސް = "ކޮންޓެންޓް" >
- ...
- </div> އެވެ
- </div> އެވެ
- </body> އެވެ
ތިމާގެ ވެބްޕޭޖްތައް ސްޓްރަކްޗަރ ކުރުމަށް ބޭނުންކުރާ ސްޓޭންޑަރޑް ޓައިޕޮގްރަފިކް ހައިރާކީއެކެވެ.
މުޅި ޓައިޕޮގްރަފިކް ގްރިޑް ބިނާވެފައިވަނީ އަޅުގަނޑުމެންގެ ޕްރީބޫޓް.ލެސް ފައިލްގައިވާ ދެ ލެސް ވެރިއޭބަލްއެއްގެ މައްޗަށެވެ: @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>
ތިމާގެ ސޯސް ނަކަލުކޮށްލުމުން އޭގެ —
ކުރިން އެމް ޑޭޝް އެއް ލިބޭނެއެވެ.
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް ޑަޕިބަސް ޕޮސުއެރެ ވެލިޓް އެލިކެޓް.
ޖޫލިއަސް ހިބަރޓް ޑރ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
މޭޒުތަކަކީ މޮޅު އެއްޗެހި- ވަރަށް ގިނަ ކަންކަމަށް. ނަމަވެސް މޮޅު ޓޭބަލްތައް ބޭނުންތެރި، ސްކޭލް ކުރެވޭ، އަދި ކިޔަން ފަސޭހަ (ކޯޑް ލެވެލްގައި) ވުމަށްޓަކައި ތަންކޮޅެއް މާކަޕް ލޯބި ބޭނުންވެއެވެ. މިއީ އެހީތެރިވެދޭނެ މަދު އިރުޝާދުތަކެކެވެ.
އަބަދުވެސް ތިމާގެ ކޮލަމް ހެޑަރުތައް އޮޅާލާނީ <thead>
ހައިރާކީ <thead>
> <tr>
> ވާނެ ގޮތަކަށެވެ <th>
.
ކޮލަމް ހެޑަރސް އާއި އެއްގޮތަށް، ތިބާގެ ޓޭބަލްގެ ހުރިހާ ބޮޑީ ކޮންޓެންޓެއް އޮޅާފައި އޮންނަންވާނީ އެއް އެއްގެ ގޮތުގައި <tbody>
ކަމުން ތިބާގެ ހައިރާކީ އަކީ <tbody>
> <tr>
> <td>
އެވެ.
ހުރިހާ ޓޭބަލްތަކެއް އޮޓޮމެޓިކުން ސްޓައިލް ކުރެވޭނީ ހަމައެކަނި ކޮންމެހެން ބޭނުންވާ ބޯޑަރުތަކާއެކު ކިޔެވޭނެ ގޮތް ކަށަވަރުކޮށް ސްޓްރަކްޗަރ ބެލެހެއްޓުމަށްޓަކައެވެ. އިތުރު ކްލާސް ނުވަތަ އެޓްރިބިއުޓްތައް އިތުރު ކުރަން ނުޖެހެއެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
- <މޭޒު> އެވެ
- ...
- </ޓޭބަލް> އެވެ
ޒީބްރާ-ސްޓްރައިޕިންގ އިތުރުކޮށްގެން ތިބާގެ މޭޒުތަކާއެކު ކުޑަކޮށް ފެންސީ ކޮށްލައްވާ- ހަމައެކަނި .zebra-striped
ކްލާސް އިތުރުކޮށްލާށެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ބައެއް | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
ނޯޓް: ޒީބްރާ-ސްޓްރައިޕިންގ އަކީ IE8 އަދި ތިރީގައިވާ ފަދަ ދުވަސްވީ ބްރައުޒާތަކަށް ނުލިބޭ ޕްރޮގްރެސިވް އެންހެންސްމަންޓެކެވެ.
- <ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" >
- ...
- </ޓޭބަލް> އެވެ
ކުރީގެ މިސާލު ނަގައިގެން، ޖޭކުއަރީ އާއި ޓޭބަލްސޯޓަރ ޕްލަގިން މެދުވެރިކޮށް ސޯރޓިންގ ފަންކްޝަނަލިޓީ ފޯރުކޮށްދީގެން އަޅުގަނޑުމެންގެ ޓޭބަލްތަކުގެ ބޭނުންތެރިކަން އިތުރުކުރަމެވެ . ސޯރޓް ބަދަލުކުރުމަށްޓަކައި ކޮންމެ ކޮލަމެއްގެ ހެޑަރ އަށް ފިތާލާށެވެ.
# | ފުރަތަމަ ނަން | ފަހު ނަން | ބަސް |
---|---|---|---|
1 | ތިބާގެ | އެކެއް | އިނގިރޭސި |
2 | ޖޯ އެވެ | ސިކްސްޕެކް އެވެ | އިނގިރޭސި |
3 | ސްޓޫ | ޑެންޓް | ކޯޑް |
- <script src = "ޖޭއެސް/ޖޭކުއަރީ/ޖޭކިއުރީ.ޓޭބަލްސޯޓަރ.މިން.ޖޭއެސް" ></script>
- <ސްކްރިޕްޓް > އެވެ
- $ ( ފަންކްޝަން () {
- $ ( "ޓޭބަލް#ސޯޓްޓޭބަލްއެކްސްމްޕްލް" ). ޓޭބަލްސޯޓަރ ({ ސޯރޓްލިސްޓް : [[ 1 , 0 ]] });
- });
- </script> އެވެ
- <ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" >
- ...
- </ޓޭބަލް> އެވެ
ހުރިހާ ފޯމްތަކަށް ވެސް ކިޔަން ފަސޭހަ އަދި ސްކޭލް ކުރެވޭ ގޮތަށް ހުށަހެޅުމަށް ޑިފޯލްޓް ސްޓައިލްތައް ދީފައިވެ އެވެ. ޓެކްސްޓް އިންޕުޓްތަކާއި، ސެލެކްޓް ލިސްޓްތަކާއި، ޓެކްސްޓްއޭރިއާތަކާއި، ރޭޑިއޯ ބަޓަންތަކާއި ޗެކްބޮކްސްތަކާއި، ބަޓަންތަކަށް ސްޓައިލްތައް ފޯރުކޮށްދެއެވެ.
ފޯމުގެ އެޗްޓީއެމްއެލްއަށް އިތުރުކޮށްލުމުން .form-stacked
އެމީހުންގެ ފީލްޑްތަކުގެ ކަނާތްފަރާތުގައި ލޭބަލްތައް ބެހެއްޓުމުގެ ބަދަލުގައި އެމީހުންގެ ފީލްޑްތަކުގެ މަތީގައި ލޭބަލްތައް ހުންނާނެއެވެ. މިއީ ތިބާގެ ފޯމްތައް ކުރުނަމަ ނުވަތަ ތިބާގެ އަތުގައި ބަރު ފޯމްތަކަށް އިންޕުޓްގެ ދެ ކޮލަމް ހުރިނަމަ ވަރަށް ރަނގަޅަށް މަސައްކަތް ކުރާ ކަމެކެވެ.
ކޮންވެންޝަނެއްގެ ގޮތުގައި ބަޓަންތައް ބޭނުންކުރަނީ ޢަމަލުތަކަށް ކަމަށާއި ލިންކްތައް ބޭނުންކުރަނީ އެއްޗެހިތަކަށެވެ. މިސާލަކަށް "ޑައުންލޯޑް" އަކީ ބަޓަނަކަށް ވެދާނެ ކަމަށާއި "ފަހުގެ ހަރަކާތެއް" އަކީ ލިންކަކަށް ވެދާނެ ކަމަށް ވެސް ވިދާޅުވި އެވެ.
ހުރިހާ ބަޓަންތަކެއް ޑިފޯލްޓްކޮށް ފަނޑު އަޅިކުލައިގެ ސްޓައިލަކަށް ނަމަވެސް ތަފާތު ކުލަ ސްޓައިލްތަކަށް ގިނަ އަދަދެއްގެ ފަންކްޝަނަލް ކްލާސްތައް އެޕްލައި ކުރެވިދާނެއެވެ. މި ކްލާސްތަކުގެ ތެރޭގައި ބްލޫ .primary
ކްލާހަކާއި، ލައިޓް ބްލޫ .info
ކްލާހަކާއި، ފެހި .success
ކްލާހަކާއި، ރެޑް .danger
ކްލާހެއް ހިމެނެއެވެ. ޕްލަސް، އަމިއްލަ ސްޓައިލްތައް ރޯލް ކުރުމަކީ ފަސޭހަ ޕީޒީ ކަމެކެވެ.
ބަޓަން ސްޓައިލްތައް ކޮންމެ އެއްޗަކަށް ވެސް .btn
ޖަހާލެވޭނެ އެވެ. އާންމުކޮށް މިކަންކަން ތަންފީޒު ކުރަން ބޭނުންވާނީ ހަމައެކަނި <a>
, <button>
, އަދި ސެލެކްޓް <input>
އެލިމެންޓްތަކަށެވެ. މިއޮތީ ފެންނަ ގޮތް:
ފެންސީ ބޮޑެތި ނުވަތަ ކުދި ބަޓަންތަކެއް ހެއްޔެވެ؟ ހޭވް އެޓް އިޓް!
އެކްޓިވް ނުވާ ނުވަތަ އެއް ސަބަބަކާހުރެ ނުވަތަ އަނެއް ސަބަބަކާހުރެ އެޕް އިން ޑިސެބިލް ކޮށްފައިވާ ބަޓަންތަކަށް ޑިސެބިލް ސްޓޭޓް ބޭނުން ކުރާށެވެ. އެއީ .disabled
ލިންކްތަކަށް އަދި :disabled
އެލިމެންޓްތަކަށްޓަކައެވެ <button>
.
div.alert-message
ޢަމަލެއްގެ ނާކާމިޔާބީ، ކުރިމަތިވެދާނެ ނާކާމިޔާބީ، ނުވަތަ ކާމިޔާބީ ފާހަގަކުރުމަށްޓަކައި އެއް ސަފުހާގެ މެސެޖުތައް. ޚާއްޞަކޮށް ފޯމްތަކަށް ބޭނުންތެރި އެއްޗެކެވެ.
div.alert-message.block-message
ތަންކޮޅެއް ވިސްނައިދޭން ޖެހޭ މެސެޖުތަކަށް އަޅުގަނޑުމެންގެ ޕެރެގްރާފް ސްޓައިލް އެލާޓްތައް ހުރެއެވެ. މިއީ ދިގު އެރަރ މެސެޖުތައް ބަބްލް އަޕް ކުރުމަށާއި، ޕެންޑިންގ ފިޔަވަޅެއް ޔޫޒަރަކަށް އިންޒާރު ދިނުމަށާއި، ނުވަތަ ހަމައެކަނި ޕޭޖުގައި އިތުރަށް ބާރުއެޅުމަށްޓަކައި މައުލޫމާތު ހުށަހެޅުމަށް ފުރިހަމަ ކަންކަމެވެ.
މޮޑަލްސް-ޑައިލޮގްސް ނުވަތަ ލައިޓްބޮކްސް- އަކީ ބެކްގްރައުންޑް ކޮންޓެކްސްޓް ބެލެހެއްޓުން މުހިންމު ހާލަތްތަކުގައި ކޮންޓެކްސްޗުއަލް އެކްޝަންތަކަށް ވަރަށް ރަނގަޅު އެއްޗެކެވެ.
އެއް ރީތި ހަށިގަނޑެއް...
ޓްވިޕްސީ އަކީ އޮޅުން ބޮޅުން ވެފައިވާ ޔޫޒަރަކަށް އެހީތެރިވެދީ ރަނގަޅު ދިމާލަކަށް އިޝާރާތް ކުރުމަށް ސުޕަ ޔޫސްފުލް އެއްޗެކެވެ.
ލޮރެމް އިޕްސަމް ޑޮލަރު ސިޓް އަމެޓް އިލޯ އެރޯރ އިޕްސަމް ވެރިޓޭޓިސް އޮޓް އިސްޓޭ ޕަރސްޕިޝިއޭޓިސް އިސްޓޭ ވޮލޫޕްޓަސް ނެޓަސް އިލޯ ކުއާސީ އޮޑިޓް އޮޓް ނަޓަސް ކޮންސެކިއުންޓަރ ކޮންސެކިއުންޓަރ، އޮޓް ނަޓަސް އިލޯ ވޮލޫޕްޓޭޓެމް އޮޑިޓް ޕަރސްޕިޝިއޭޓިސް ލައުޑެންޓިއަމް ރެމް ޑޮލޮރެމްކޭ ޓޮޓަމް ވޮލޫޕްޓާސް. ވޮލޫޕްޓަސްޑިކްޓާ އީކޭ ބީޓޭ އެޕެރިއަމް އުޓް އެނިމް ވޮލޫޕްޓޭޓެމް އެކްސްޕްލިކާބޯ އެކްސްޕްލިކާބޯ، ވޮލޫޕްޓަސް ކުއާ އޮޑިޓް ފުގިޓް އެކިއުސަންޓިއަމް ޓޮޓަމް ޓޮޓަމް އާކިޓެކްޓޯ އެކްސްޕްލިކާބޯ ސިޓް ކުއާސީ ފުގިޓް ފުގިޓް، ޓޮޓަމް ޑޮލޮރެމްކޭ އުންޑޭ ސުންޓް ސެޑް ޑިކްޓާ ކުއޭ އެކިއުސަންޓިއަމް ފުގިޓް ވޮލޫޕްޓާސް ނޭމޯ ވޮލޫޕްޓާސް ވޮލޫޕްޓޭޓެމް ރެމް ކުއޭ އޮޓޯ ވެރިޓަޓިސް ކުއާޒީ ކުއޭ.
ލޭއައުޓަށް އަސަރު ނުކޮށް ޞަފްޙާއަކަށް ސަބްޓެކްސްޗުއަލް މަޢުލޫމާތު ފޯރުކޮށްދިނުމަށް ޕޮޕޯވަރސް ބޭނުން ކުރާށެވެ.
އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. މޯރބީ ލިއޯ ރިސަސް، ޕޯޓާ އޭސީ ކޮންސެކްޓެޓަރ އޭސީ، ވެސްޓިބިއުލަމް އެޓް އެރޯސް.
ބޫޓްސްޓްރެޕް އުފެއްދީ ޕްރީބޫޓް އިން ކަމަށްވާއިރު ، މިއީ އަވަހަށް އަދި ފަސޭހައިން ވެބް ޑިވެލޮޕް ކުރުމަށް ސީއެސްއެސް ޕްރީޕްރޮސެސަރެއް ކަމަށްވާ ލެސް އާއި ގުޅިގެން ބޭނުން ކުރުމަށް މިކްސިންތަކާއި ވެރިއޭބަލްތަކުގެ އޮޕަން ސޯސް ޕެކެއް ކަމަށްވާ ޕްރީބޫޓް އިންނެވެ .
އަޅުގަނޑުމެން ބޫޓްސްޓްރެޕްގައި ޕްރީބޫޓް ބޭނުންކުރި ގޮތާއި، ދެން އޮންނަ ޕްރޮޖެކްޓްގައި ލެސް ހިންގަން އިޚްތިޔާރު ކޮށްފިނަމަ އޭގެ ބޭނުން ހިފޭނެ ގޮތް ބައްލަވާށެވެ.
މި އިޚްތިޔާރު ބޭނުންކޮށްގެން ބޫޓްސްޓްރެޕްގެ ލެސް ވެރިއޭބަލްސް، މިކްސިންސް، އަދި ބްރައުޒާގައި ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ސީއެސްއެސްގައި ނެސްޓިންގ ގެ ފުރިހަމަ ބޭނުން ހިފޭނެއެވެ.
- <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؛
- @yellow : #ffc40d؛
- @އޮރެންޖް : #f89406 ؛
- @ޕިންކް : #c3325f ؛
- @ޕަރޕްލް : #7a43b6 ؛
- // ބޭސްލައިން ގްރިޑް
- @ބޭސްފޮންޓް : 13px ;
- @ ބޭސްލައިން : 18px ;
/* ... */
އަދި ސީއެސްއެސްގެ އާދައިގެ ސިންޓެކްސްގެ އިތުރުން ކޮމެންޓް ކުރުމުގެ އެހެން ސްޓައިލެއް ވެސް ލެސް އިން ފޯރުކޮށްދެ އެވެ .
- // މިއީ ކޮމެންޓެކެވެ
- /* މިއީ ވެސް ކޮމެންޓެއް */
މިކްސިންސް އަކީ އަސާސީ ގޮތުން ސީއެސްއެސް އަށް އިންކްލޫސް ނުވަތަ ޕާރޝިއަލްސް އެއް ކަމުން ކޯޑްގެ ބްލޮކެއް އެއްކޮށް އެއް ބްލޮކެއް ހެދުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ. އެއީ ވެންޑަރ ޕްރިފިކްސްޑް ޕްރޮޕަޓީސް ފަދަ box-shadow
, ކްރޮސް-ބްރައުޒަރ ގްރޭޑިއަންޓްސް، ފޮންޓް ސްޓޭކްސް، އަދި އެހެނިހެން ޕްރޮޕަޓީތަކަށް ވަރަށް ރަނގަޅު އެއްޗެހިތަކެކެވެ. ތިރީގައި މިވަނީ ބޫޓްސްޓްރެޕް އާއި އެކު ހިމެނޭ މިކްސިންތަކުގެ ނަމޫނާއެކެވެ.
- #ފޮންޓް {
- . ޝޯޓްހެންޑް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- . sans - serif ( @ބަރުދަން : އާދައިގެ ، @ސައިޒް : 14px ، @lineHeight : 20px ) {
- font - family : "ހެލްވެޓިކާ ނިއު" , ހެލްވެޓިކާ , އެރިއަލް , sans - serif ;
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- . serif ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {
- font - family : "ޖޯޖިއާ" , ޓައިމްސް ނިއު ރޯމަން , ޓައިމްސް , sans - serif ;
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- . މޮނޮސްޕޭސް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 12px , @lineHeight : 20px ) {
- font - family : "މޮނާކޯ" , ކުއަރިއަރ ނިއު , މޮނޮސްޕޭސް ;
- ފޮންޓް - ސައިޒް : @size ;
- ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
- ލައިން - އުސްމިން : @lineHeight ;
- } .
- } .
- #ގްރޭޑިއަންޓް {
- . ހޮރައިޒޮންޓަލް ( @ސްޓާޓްކުލަ : #555، @އެންޑްކަލަރ: #333) {
- ބެކްގްރައުންޑް - ކުލަ : @endColor ;
- ބެކްގްރައުންޑް - ރިޕީޓް : ރިޕީޓް - x ;
- ބެކްގްރައުންޑް - އިމޭޖް : - khtml - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ވާތް މަތީ , އިން ( @startColor ), އަށް ( @endColor )); // ކޮންކުއަރ
- ބެކްގްރައުންޑް - އިމޭޖް : - މޮޒް - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އެފްއެފް 3.6+
- ބެކްގްރައުންޑް - އިމޭޖް : - ms - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އައިއީ10
- ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ވާތް މަތީ , ކުލަ - ހުއްޓުވުން ( 0 %, @startColor ), ކުލަ - ހުއްޓުވުން ( 100 %, @endColor )); // ސަފާރީ 4+، ކްރޯމް 2+
- ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // ސަފާރީ 5.1+، ކްރޯމް 10+
- ބެކްގްރައުންޑް - އިމޭޖް : - o - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އޮޕެރާ 11.10
- ބެކްގްރައުންޑް - އިމޭޖް : ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // ލެ ސްޓޭންޑަރޑް
- } .
- . ވަރުގަދަ ( @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 ); // ސްޓޭންޑަރޑް
- } .
- . ޑިރެކްޝަނަލް ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- } .
- . ވަށައިގެން - ތިން - ކުލަ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- } .
- } .
ފެންސީ ހޯދައިގެން ކޮންމެވެސް ވަރަކަށް ހިސާބު ޕާފޯމްކޮށް ތިރީގައިވާ ފަދަ ފްލެކްސިބަލް އަދި ވަރުގަދަ މިކްސިންތައް އުފައްދާށެވެ.
- // ގްރިޑިޓިއުޑް
- @gridކޮލަމްސް : 16 ;
- @gridކޮލަމްވިޑްތް : 40px ;
- @gridGutterވިޑްތް : 20px ;
- @siteWidth : ( @ގްރިޑްކޮލަމްސް * @ގްރިޑްކޮލަމްވިޑްތް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ގްރިޑްކޮލަމްސް - 1 ));
- // ގްރިޑް ސިސްޓަމް
- . ކޮންޓެއިނަރ { .
- ފުޅާމިން : @ސައިޓްވިޑްތް ;
- މާރޖިން : 0 އޮޓޯ ;
- . ކްލިއަރފިކްސް ();
- } .
- . ކޮލަމްސް ( @columnSpan : 1 ) {
- width : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްސްޕަން ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްސްޕަން - 1 ));
- } .
- . އޮފްސެޓް ( @columnOffset : 1 ) {
- margin - left : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްއޮފްސެޓް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްއޮފްސެޓް - 1 )) + @extraSpace ;
- } .