ޓައިޕޮގްރަފީ އެވެ
ގްލޯބަލް ސެޓިންގސް، ހެޑިންގސް، ބޮޑީ ޓެކްސްޓް، ލިސްޓްސް، އަދި އެހެނިހެން ކަންކަން ހިމެނޭ ގޮތަށް ބޫޓްސްޓްރެޕް ޓައިޕޮގްރަފީއަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް.
ގްލޯބަލް ސެޓިންގްސް އެވެ
ބޫޓްސްޓްރަޕް އިން އަސާސީ ގްލޯބަލް ޑިސްޕްލޭ، ޓައިޕޮގްރަފީ، އަދި ލިންކް ސްޓައިލްތައް ސެޓްކުރެއެވެ. އިތުރު ކޮންޓްރޯލް ބޭނުންވާ ވަގުތުތަކުގައި ޓެކްސްޗުއަލް ޔުޓިލިޓީ ކްލާސްތައް ބައްލަވާށެވެ .
- ކޮންމެ އޮއެސްއަކާއި ޑިވައިސްއަކަށް އެންމެ ރަނގަޅު އެއްޗެއް ހޮވާ ނެޓިވް ފޮންޓް ސްޓޭކެއް ބޭނުން ކުރާށެވެ .
font-family
- އިތުރަށް ހިމެނޭ އަދި އެކްސެސިބަލް ޓައިޕް ސްކޭލަކަށްޓަކައި، އަޅުގަނޑުމެން ގަބޫލުކުރަނީ ބްރައުޒާ ޑިފޯލްޓް ރޫޓް
font-size
(އާންމުކޮށް 16px) ކަމުން ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ބޭނުންވާ ގޮތަށް ބްރައުޒާ ޑިފޯލްޓްތައް ކަސްޓަމައިޒް ކުރެވޭނެއެވެ. - އަށް އަމަލުކުރި އަޅުގަނޑުމެންގެ ޓައިޕޮގްރަފިކް ބޭސްގެ ގޮތުގައި
$font-family-base
,$font-size-base
, އަދި އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ .$line-height-base
<body>
- ގްލޯބަލް ލިންކް ކުލަ ވިއާ ސެޓްކޮށް
$link-color
ލިންކް އަންޑަލައިންސް އެކަނި 1 ގައި އެޕްލައި ކުރާށެވެ:hover
. - ( ބައި ޑިފޯލްޓް) ގައި
$body-bg
a ސެޓް ކުރުމަށް ބޭނުން ކުރާށެވެ .background-color
<body>
#fff
މި ސްޓައިލްތައް ގެ ތެރެއިން ފެނިދާނެ _reboot.scss
ކަމަށާއި، ގްލޯބަލް ވެރިއޭބަލްތައް ކަނޑައެޅިފައިވަނީ _variables.scss
. $font-size-base
ސެޓް އިން ކުރުން ޔަގީން ކުރައްވާށެވެ rem
.
ސުރުޚީތައް
ހުރިހާ އެޗްޓީއެމްއެލް ސުރުޚީތަކެއް، <h1>
މެދުވެރިކޮށް <h6>
، ލިބެން ހުރެއެވެ.
ސުރުޚީ | މިސާލު |
---|---|
|
ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
|
ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
|
ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
|
ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
|
ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
|
ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
.h1
through .h6
classes ވެސް ލިބެން ހުރެއެވެ، ސުރުޚީއެއްގެ ފޮންޓް ސްޓައިލިންގ އެއްގޮތް ކުރަން ބޭނުން ނަމަވެސް އެއާ ގުޅުންހުރި އެޗްޓީއެމްއެލް އެލިމެންޓް ބޭނުން ނުކުރެވޭ ވަގުތުތަކަށްޓަކައެވެ.
ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
ސުރުޚީތައް ކަސްޓަމައިޒް ކުރުން
ބޫޓްސްޓްރެޕް 3 އިން ކުޑަ ސެކަންޑަރީ ހެޑިންގ ޓެކްސްޓް އަލުން އުފެއްދުމަށްޓަކައި ހިމެނޭ ޔުޓިލިޓީ ކްލާސްތައް ބޭނުން ކުރާށެވެ.
ފެންސީ ޑިސްޕްލޭ ހެޑިންގ ފޭޑްވެފައިވާ ސެކަންޑަރީ ޓެކްސްޓާއެކު
ސުރުޚީތައް ދައްކާލުން
ސަގާފީ ހެޑިންގ އެލިމެންޓްތައް ފަރުމާކޮށްފައިވަނީ ތިބާގެ ޕޭޖް ކޮންޓެންޓްގެ މަހުގައި އެންމެ ރަނގަޅަށް މަސައްކަތް ކުރާ ގޮތަށެވެ. ފާހަގަކޮށްލެވޭ ސުރުޚީއެއް ބޭނުންވާ ވަގުތު، ޑިސްޕްލޭ ސުރުޚީއެއް ބޭނުން ކުރުމަށް ވިސްނާށެވެ — ބޮޑު، ތަންކޮޅެއް ޚިޔާލު ފާޅުކުރާ ސުރުޚީ ސްޓައިލެކެވެ. ހަނދާނުގައި ބަހައްޓަންވީ މި ސުރުޚީތަކަކީ ޑިފޯލްޓްކޮށް ޖަވާބުދާރީވާ ސުރުޚީތަކެއް ނޫން ނަމަވެސް ޖަވާބުދާރީވާ ފޮންޓް ސައިޒްތައް އެނެބަލް ކުރުމަކީ ކުރެވިދާނެ ކަމެކެވެ .
ޑިސްޕްލޭ 1 |
ޑިސްޕްލޭ 2 |
ޑިސްޕްލޭ 3 |
ޑިސްޕްލޭ 4 |
އިސްނެގުން
އިތުރުކޮށްގެން ޕެރެގްރާފެއް ވަކިން ފާހަގަކޮށްލާށެވެ .lead
.
ވިވަމަސް ސެޖިޓިސް ލެކަސް ވެލް އޮގް ލައޯރީޓް ރޫޓްރަމް ފޯސިބަސް ޑޮލޯރ އޮކްޓަރ. ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލަކްޓަސް އެވެ.
އިންލައިން ޓެކްސްޓް އެލިމެންޓްސް
އާންމު އިންލައިން އެޗްޓީއެމްއެލް5 އެލިމެންޓްތަކަށް ސްޓައިލިންގ ހެދުން.
މާކް ޓެގް ބޭނުންކޮށްގެން ވެސް ކުރެވޭނެ އެވެހައިލައިޓްލިޔުންކޮޅު.
މި ލިޔުމުގެ ސަފުހާއަކީ ޑިލީޓް ކުރެވިފައިވާ ލިޔުމެއްގެ ގޮތުގައި ބަލައިގަތުމަށް ނިންމާފައިވާ ސަފުހާއެކެވެ.
މި ލިޔުމުގެ ސަފުހާއަކީ މިހާރު ޞައްޙަ ނޫން ސަފުހާއެއްގެ ގޮތުގައި ބަލައިގަތުމަށް ނިންމާފައިވާ ސަފުހާއެކެވެ.
މި ލިޔުމުގެ ސަފުހާއަކީ ލިޔުމަށް އިތުރު އެއްޗެއްގެ ގޮތުގައި ބަލައިގަތުމަށް ނިންމާފައިވާ ސަފުހާއެކެވެ.
މި ލިޔުމުގެ ލައިން ރެންޑަރ ކުރާނީ އަންޑަލައިން ކޮށްފައިވާ ގޮތަށެވެ
މި ލިޔުމުގެ ސަފުހާއަކީ ފައިން ޕްރިންޓްގެ ގޮތުގައި ބަލަން ނިންމާފައިވާ ސަފުހާއެކެވެ.
މި ލައިން ރެންޑަރ ކޮށްފައިވަނީ ބޮލްޑް ޓެކްސްޓެއްގެ ގޮތުގައެވެ.
މި ސަފުހާ ރެންޑަރ ކޮށްފައިވަނީ އިޓަލިކްސް ކޮށްފައިވާ ލިޔުމެއްގެ ގޮތުގައެވެ.
.mark
އަދި ކްލާސްތައް ވެސް ޓެގްތަކުން ގެނެސްދޭނެ ނޭދެވޭ މާނަވީ މާނަތަކުން ސަލާމަތްވެ ، .small
އެއް ސްޓައިލްތައް ތަންފީޒު ކުރުމަށް ވެސް ލިބެން ހުރެ އެވެ .<mark>
<small>
މަތީގައި ނުދައްކާ ނަމަވެސް، ހިތްހަމަޖެހިގެން ބޭނުންކޮށް <b>
އަދި <i>
އެޗްޓީއެމްއެލް5 ގައި ވެސް ބޭނުން ކުރެވޭނެއެވެ. <b>
އިތުރު މުހިންމުކަމެއް ފޯރުކޮށްނުދީ ލަފުޒުތައް ނުވަތަ ޢިބާރާތްތައް އަލިއަޅުވާލުމަށް މާނަކޮށްފައިވާއިރު <i>
ގިނައިން އަޑާއި، ފަންނީ ލަފުޒުތައް ފަދަ ކަންކަމަށް ވެއެވެ.
ޓެކްސްޓް ޔުޓިލިޓީސް
އަޅުގަނޑުމެންގެ ޓެކްސްޓް ޔުޓިލިޓީސް އާއި ކުލަ ޔުޓިލިޓީސް އިން ޓެކްސްޓް އެލައިންމަންޓް، ޓްރާންސްފޯމް، ސްޓައިލް، ވެއިޓް، އަދި ކުލަ ބަދަލުކުރުން .
ކުރުކުރުންތަކެވެ
<abbr>
ހޯވަރގައި ފުޅާކޮށްފައިވާ ވަރޝަން ދައްކާލުމަށްޓަކައި ކުރުކުރުންތަކާއި ކުޑަކުޑަ ނަންތަކަށް އެޗްޓީއެމްއެލްގެ އެލިމެންޓް ސްޓައިލައިޒްޑް އިމްޕްލިމެންޓޭޝަން . އެބްބްރިވިއޭޝަންތަކުގައި ޑިފޯލްޓް އަންޑަލައިން އެއް ހުރެ، ހޯވަރ އާއި އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް އިތުރު ކޮންޓެކްސްޓް ފޯރުކޮށްދިނުމަށްޓަކައި ހެލްޕް ކަރސަރެއް ލިބިގެންދެއެވެ.
.initialism
ތަންކޮޅެއް ކުޑަ ފޮންޓް-ސައިޒަކަށް ކުރުކުރުމަކަށް އިތުރުކޮށްލާށެވެ .
attr
އެޗްޓީއެމްއެލް އެވެ
ބްލޮކްކޯޓްސް އެވެ
ތިބާގެ ލިޔުމުގެ ތެރޭގައިވާ އެހެން މަސްދަރަކުން ކޮންޓެންޓް ބްލޮކްތައް ކޯޓް ކުރުމަށްޓަކައެވެ. <blockquote class="blockquote">
ކޯޓްގެ ގޮތުގައި ކޮންމެ އެޗްޓީއެމްއެލްއެއްގެ ވަށައިގެން އޮޅާލާށެވެ .
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ.
މަސްދަރަކަށް ނަން ކިޔުން
<footer class="blockquote-footer">
މަސްދަރު ދެނެގަތުމަށްޓަކައި އެއް އިތުރުކުރުން . ސޯސް ވޯކްގެ ނަން އޮޅާލާށެވެ <cite>
.
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ.
އެލައިންމަންޓް
ބްލޮކްކޯޓްގެ އެލައިންމަންޓް ބަދަލުކުރުމަށް ބޭނުންވާ ގޮތަށް ޓެކްސްޓް ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ.
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ.
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ.
ލިސްޓްތައް
ސްޓައިލް ނުކުރެވިގެންނެވެ
list-style
ލިސްޓް އައިޓަމްތަކުގައި ހުންނަ ޑިފޯލްޓް އަދި ކަނާތު މާރޖިން ނައްތާލާ (ވަގުތީ ކުދިންނަށް އެކަނި). މިއީ ހަމައެކަނި ވަގުތުން ކުޑަކުދިން ލިސްޓް ކުރާ ތަކެތި , މާނައަކީ އެއްވެސް ނެސްޓް ލިސްޓަކަށް ވެސް ކްލާސް އިތުރު ކުރަން ޖެހޭނެ.
- ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
- ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
- އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
- ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
- ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
- ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
- ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
- ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
- އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
- ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
- އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
- އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް
އިންލައިން
ލިސްޓެއްގެ ބުލެޓްތައް ނަގައި margin
ދެ ކްލާހެއް އެއްކޮށްގެން ކޮންމެވެސް ވަރެއްގެ އަލިކަމެއް ޖައްސައި، .list-inline
އަދި .list-inline-item
.
- ލޮރެމް އިޕްސަމް އެވެ
- ފޭސެލަސް އިއަކުލިސް އެވެ
- ނޫއްލާ ވޮލޫޓްޕަޓް
ޑިސްކްރިޕްޝަން ލިސްޓް އެލައިންމަންޓް
އަޅުގަނޑުމެންގެ ގްރިޑް ސިސްޓަމްގެ ކުރިން ކަނޑައެޅިފައިވާ ކްލާސްތައް (ނުވަތަ ސެމެންޓިކް މިކްސިންސް) ބޭނުންކޮށްގެން ޓާރމްސް އާއި ޑިސްކްރިޕްޝަންތައް ހޮރައިޒޮންޓަލީ އެލައިން ކުރާށެވެ. ދިގު މުއްދަތަކަށް ބޭނުންނަމަ .text-truncate
، އެލިޕްސިސް އެއް ޖަހައިގެން ލިޔުން ކަނޑާލުމަށްޓަކައި އިޚްތިޔާރީ ގޮތެއްގައި ކްލާހެއް އިތުރު ކުރެވިދާނެއެވެ.
- ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ
- ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.
- ޔޫއިސްމޮޑް އެވެ
-
ވެސްޓިބިއުލަމް އައިޑީ ލިގުލާ ޕޯޓާ ފެލިސް ޔޫއިސްމޮޑް ސެމްޕަރ އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް.
ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް.
- މަލެސުއަދާ ޕޯޓާ އެވެ
- އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް.
- ކަނޑާލެވިފައިވާ ޓާރމް ކަނޑާލެވިފައިވެއެވެ
- ފުސް ޑަޕިބަސް، ޓެލަސް އެކް ކަރސަސް ކޮމޮޑޯ، ޓޯރޓޯރ މައުރިސް ކޮންޑިމެންޓަމް ނިބް، އުޓް ފަރމަންޓަމް މަސާ ޖަސްޓޯ ސިޓް އަމެޓް ރިސަސް.
- ވަޅުލުން
-
- ނެސްޓްޑް ޑެފިނިޝަން ލިސްޓް
- އެނިއަން ޕޮސުއެރޭ، ޓޯރޓޯރ ސެޑް ކަރސަސް ފޫޖިއަޓް، ނަންކް އޮގް ބްލަންޑިޓް ނަންކް.
ރެސްޕޮންސިވް ފޮންޓް ސައިޒްތަކެވެ
ބޫޓްސްޓްރެޕް v4.3 ފޮނުވަނީ ރެސްޕޮންސިވް ފޮންޓް ސައިޒްތައް އެނެބަލް ކުރުމުގެ އިޚްތިޔާރާއެކު، ޑިވައިސް އަދި ވިއުޕޯޓް ސައިޒްތަކުގެ ތެރެއިން ޓެކްސްޓް މާ ގުދުރަތީ ގޮތެއްގައި ސްކޭލް ކުރެވޭނެ ގޮތަކަށެވެ. އާރްއެފްއެސް އެނެބަލް ކުރެވޭނީ $enable-responsive-font-sizes
ސާސް ވެރިއޭބަލް true
ބޫޓްސްޓްރެޕް އަށް ބަދަލުކޮށް އަލުން ކޮމްޕައިލްކޮށްގެންނެވެ.
RFS އަށް ސަޕޯޓް ކުރުމަށްޓަކައި ، އަޅުގަނޑުމެންގެ އާދައިގެ font-size
ޕްރޮޕަޓީތަކުގެ ބަދަލުގައި ސާސް މިކްސިން ބޭނުން ކުރަމެވެ. ރެސްޕޮންސިވް ފޮންޓް ސައިޒްތައް ކޮމްޕައިލް ކުރެވޭނީ ރެސްޕޮންސިވް ސްކޭލިންގ ބިހޭވިއަރ އަށް ފުރުސަތު ދިނުމަށްޓަކައި calc()
މިކްސް އޮފް އަދި ވިއުޕޯޓް ޔުނިޓްތަކާއެކު ފަންކްޝަންތަކަކަށެވެ . އާރްއެފްއެސް އާއި އޭގެ ކޮންފިގްރޭޝަން އާއި rem
ބެހޭ އިތުރު މަޢުލޫމާތު އޭގެ ގިޓްހަބް ރިޕޮޒިޓަރީން ލިބިވަޑައިގަންނަވާނެއެވެ .