ރީބޫޓް ކުރާށެވެ
ރީބޫޓް، އެއް ފައިލެއްގައި އެލިމެންޓަށް ޚާއްޞަ ސީއެސްއެސް ބަދަލުތަކުގެ ކޮލެކްޝަނެއް، ކިކްސްޓާޓް ބޫޓްސްޓްރެޕް އިން ބިލްޑް ކުރުމަށް އެލިގަންޓް، ކޮންސިސްޓެންޓް، އަދި ސާދާ ބޭސްލައިނެއް ފޯރުކޮށްދެއެވެ.
ކުރިމަތިލުން
ރީބޫޓް ބިނާވެފައިވަނީ ނޯމަލައިޒްގެ މައްޗަށް ކަމަށާއި، ހަމައެކަނި އެލިމެންޓް ސެލެކްޓަރސް ބޭނުންކޮށްގެން ކޮންމެވެސް ވަރަކަށް ޚިޔާލު ތަފާތު ސްޓައިލްތަކާއެކު ގިނަ އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް ފޯރުކޮށްދެއެވެ. އިތުރު ސްޓައިލިންގ ހެދެނީ ހަމައެކަނި ކްލާސްތަކާއެކުގައެވެ. މިސާލަކަށް، އަޅުގަނޑުމެން <table>
ސާދާ ބޭސްލައިނަކަށްޓަކައި ބައެއް ސްޓައިލްތައް ރީބޫޓްކޮށް، ފަހުން .table
, .table-bordered
, އަދި އެއަށްވުރެ ގިނަ ކަންތައްތައް ފޯރުކޮށްދެމެވެ.
މިއީ އަޅުގަނޑުމެންގެ ގައިޑްލައިންތަކާއި ރީބޫޓްގައި އޯވަރރައިޑް ކުރާނެ ކަންތައްތައް އިޚްތިޔާރު ކުރުމަށް ހުރި ސަބަބުތަކެވެ:
- ސްކޭލް ކުރެވޭ ކޮމްޕޮނެންޓް ސްޕޭސިންގ އަށް s
rem
ގެ ބަދަލުގައި s ބޭނުން ކުރުމަށް ބައެއް ބްރައުޒާ ޑިފޯލްޓް ވެލިއުތައް އަޕްޑޭޓް ކުރާށެވެ .em
- ދުރުހެލިވާށެވެ
margin-top
. ވަރުގަދަ މާރޖިންތައް ވެއްޓި، ހީވެސް ނުކުރާ ނަތީޖާތަކެއް ލިބިދާނެ އެވެ. ނަމަވެސް މިއަށްވުރެ މުހިންމު ކަމަކީ، އެއް މިސްރާބަކީ،margin
ނަފްސާނީ ގޮތުން މާ ސާދާ މޮޑެލެކެވެ. - ޑިވައިސް ސައިޒްތަކުގެ ތެރެއިން ފަސޭހައިން ސްކޭލް ކުރުމަށްޓަކައި، ބްލޮކް އެލިމެންޓްތަކުން
rem
s އަށްmargin
s ބޭނުން ކުރަންވާނެއެވެ. font
-ގުޅުންހުރި ޕްރޮޕަޓީތަކުގެ ޑިކްލެރޭޝަންތައް އެންމެ ކުޑަމިނުން ބެހެއްޓުން،inherit
ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި ބޭނުންކޮށްގެން.
ސީއެސްއެސް ވެރިއޭބަލްސް އެވެ
v5.1.1 ގައި އިތުރުކޮށްފައިވެއެވެ
v5.1.1 އާއެކު، އަޅުގަނޑުމެންގެ @import
ހުރިހާ ސީއެސްއެސް ބަންޑަލްތަކެއްގައި އަޅުގަނޑުމެންގެ ބޭނުންވާ s ސްޓޭންޑަރޑައިޒް ކޮށްފިން ( bootstrap.css
, bootstrap-reboot.css
, އަދި bootstrap-grid.css
ހިމެނޭ ގޮތަށް _root.scss
. މިއީ :root
ހުރިހާ ބަންޑަލްތަކަށް ލެވެލް ސީއެސްއެސް ވެރިއޭބަލްތައް އިތުރުކޮށްދޭ ކަމެކެވެ ވަގުތު ފާއިތުވަމުންދާ ވަރަކަށް އިތުރުކުރެވޭ އިތުރު ސީއެސްއެސް ވެރިއޭބަލްތައް ބައްލަވާށެވެ.
ޕޭޖް ޑިފޯލްޓް ވެއެވެ
އަދި <html>
އެލިމެންޓްތައް <body>
އަޕްޑޭޓްކޮށްފައިވަނީ ރަނގަޅު ޕޭޖް ވައިޑް ޑިފޯލްޓްތައް ފޯރުކޮށްދިނުމަށެވެ. އިތުރަށް ވަކިން ހާއްސަކޮށް:
- ދަ
box-sizing
އަކީ ގްލޯބަލްކޮށް ކޮންމެ އުނިއިތުރެއްގެ މައްޗަށް ސެޓްކޮށްފައިވާ އެއްޗެއް—އޭގެ ތެރޭގައި*::before
އަދި*::after
, އަށްborder-box
. މިއީ ޕެޑިންގ ނުވަތަ ބޯޑަރ ގެ ސަބަބުން ދުވަހަކުވެސް އެލިމެންޓްގެ ޑިކްލެއާ ކުރެވިފައިވާ ފުޅާމިނަށްވުރެ އިތުރު ނުވާނެކަން ކަށަވަރުކޮށްދޭ ކަމެކެވެ.- ގައި އެއްވެސް އަސާސެއް
font-size
ޑިކްލެއާ ނުކުރެވި<html>
، އެކަމަކު16px
ގަބޫލުކުރެވެނީ (ބްރައުޒާ ޑިފޯލްޓް) އެވެ.font-size: 1rem
is applied on the<body>
ފޯރ އީޒީ ރެސްޕޮންސިވް ޓައިޕް-ސްކޭލިންގ ވިއާ މީޑިއާ ކިއުއަރީސް ވިތް ރިސްޕެކްޓިންގ ޔޫޒަރ ޕްރެފެރެންސްސް އެންޑް އެންޝުއަރިންގ އެމޯރ އެކްސެސިބަލް އެޕްރޯޗް. މި ބްރައުޒާ ޑިފޯލްޓް އޯވަރރައިޑް ކުރެވޭނީ$font-size-root
ވެރިއޭބަލް ބަދަލުކޮށްގެންނެވެ.
- ގައި އެއްވެސް އަސާސެއް
- ދަ
<body>
ވެސް ސެޓް ކުރަނީ ގްލޯބަލްfont-family
,font-weight
,line-height
, އަދިcolor
. މިއީ ފޮންޓް އެއްގޮތް ނުވުން ހުއްޓުވުމަށްޓަކައި ފަހުން ބައެއް ފޯމް އެލިމެންޓްތަކުން ވާރުތަވާ ކަމެކެވެ. - ރައްކާތެރިކަމަށްޓަކައި، ދަ
<body>
ހޭސް އަ ޑިކްލެއަރޑްbackground-color
, ޑިފޯލްޓިންގ ޓު#fff
.
ނެޓިވް ފޮންޓް ސްޓޭކް
ބޫޓްސްޓްރަޕް އިން ކޮންމެ ޑިވައިސްއަކާއި އޮއެސްއެއްގައި ވެސް އޮޕްޓިމަމް ޓެކްސްޓް ރެންޑަރިންގ އަށް “ނެޓިވް ފޮންޓް ސްޓޭކް” ނުވަތަ “ސިސްޓަމް ފޮންޓް ސްޓޭކް” ބޭނުންކުރެއެވެ. މި ސިސްޓަމް ފޮންޓްތައް ފަރުމާކޮށްފައިވަނީ ޚާއްޞަކޮށް މިއަދުގެ ޑިވައިސްތަކަށް ވިސްނައިގެން، ސްކްރީންތަކުގައި ރެންޑަރިންގ ރަނގަޅުކޮށް، ވެރިއޭބަލް ފޮންޓް ސަޕޯޓާއި، އަދިވެސް އެތައް ކަމެއް ކޮށްގެންނެވެ. ނެޓިވް ފޮންޓް ސްޓޭކްތަކާ ބެހޭ އިތުރު މައުލޫމާތު މި ސްމޭޝިންގ މެގަޒިންގެ ލިޔުމުގައި ކިޔައިބަލާށެވެ .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
ފާހަގަކޮށްލަންޖެހޭ ކަމަކީ ފޮންޓް ސްޓޭކްގައި އިމޯޖީ ފޮންޓްތައް ހިމެނޭތީ، އާންމު ގިނަ ސިމްބަލް/ޑިންގްބެޓް ޔުނިކޯޑް އަކުރުތައް ގިނަ ކުލައެއްގެ ޕިކްޓޯގްރާފްތަކެއްގެ ގޮތުގައި ރެންޑަރ ކުރެވޭނެއެވެ. އެމީހުންގެ ސިފަ ތަފާތުވާނީ، ބްރައުޒާ/ޕްލެޓްފޯމްގެ ނެޓިވް އިމޯޖީ ފޮންޓުގައި ބޭނުންކުރާ ސްޓައިލަށް ބަލާފައި، އަދި އެއްވެސް ސީއެސްއެސް color
ސްޓައިލެއްގެ އަސަރެއް ނުކުރާނެއެވެ.
މިއީ މުޅި ބޫޓްސްޓްރެޕްގައި ގްލޯބަލްކޮށް އޮޓޮމެޓިކުން އިންހެރިޓް font-family
ކުރެވޭ ގޮތަށް އަމަލުކުރެވޭނެ ގޮތެކެވެ . <body>
ގްލޯބަލް ބަދަލު ކުރުމަށް , ބޫޓްސްޓްރެޕް font-family
އަޕްޑޭޓްކޮށް އަލުން ކޮމްޕައިލް ކުރާށެވެ.$font-family-base
ސީއެސްއެސް ވެރިއޭބަލްސް އެވެ
ބޫޓްސްޓްރެޕް 5 މެޗުއަރވަމުންދާ ވަރަކަށް، އަބަދުވެސް ސާސް އަލުން ކޮމްޕައިލް ކުރަން ނުޖެހި، އިތުރު ރިއަލް ޓައިމް ކަސްޓަމައިޒޭޝަން ފޯރުކޮށްދިނުމުގެ ވަސީލަތެއްގެ ގޮތުގައި ސީއެސްއެސް ވެރިއޭބަލްތަކާއެކު ގިނަ ސްޓައިލްތައް ބިނާކުރެވޭނެއެވެ . އަޅުގަނޑުމެންގެ އުސޫލަކީ އަޅުގަނޑުމެންގެ ސޯސް ސާސް ވެރިއޭބަލްތައް ނަގައިގެން ސީއެސްއެސް ވެރިއޭބަލްތަކަށް ބަދަލުކުރުމެވެ. އެގޮތަށް ސީއެސްއެސް ވެރިއޭބަލްސް ބޭނުން ނުކުރިޔަސް، ސާސްގެ ހުރިހާ ބާރެއް ލިބިގެންދެއެވެ. މިއީ އަދިވެސް ކުރިއަށްދާ ކަމެއް ކަމަށާއި ފުރިހަމައަށް ތަންފީޒު ކުރަން ވަގުތު ނަގާނެ ކަމަށް ވެސް ވިދާޅުވި އެވެ.
މިސާލަކަށް، :root
އާންމު <body>
ސްޓައިލްތަކަށް މި ސީއެސްއެސް ވެރިއޭބަލްތަކަށް ބަލާލާށެވެ:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
ޢަމަލީގޮތުން ބަލާއިރު، އެ ވެރިއޭބަލްތައް ދެން ރީބޫޓްގައި އެޕްލައި ކުރެވެނީ މިހެންނެވެ:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
އެއީ ތިމާ ބޭނުން ގޮތަކަށް ރިއަލް ޓައިމް ކަސްޓަމައިޒޭޝަންތައް ހެދުމުގެ ފުރުސަތު ލިބޭ އެއްޗެކެވެ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
ސުރުޚީތަކާއި ޕެރެގްރާފްތަކެވެ
ހުރިހާ ހެޑިންގ އެލިމެންޓްތައް-އެބަހީ، <h1>
—އަދި <p>
އެތަކެތި margin-top
ނައްތާލުމަށް ރީސެޓް ކުރެވެއެވެ. ފަސޭހައިން ޖާގަ ދިނުމަށްޓަކައި ސުރުޚީތަކާއި margin-bottom: .5rem
ޕެރެގްރާފްތައް އިތުރުކޮށްފައިވެއެވެ .margin-bottom: 1rem
ސުރުޚީ | މިސާލު |
---|---|
<h1></h1> |
ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
<h2></h2> |
ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
<h3></h3> |
ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
<h4></h4> |
ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
<h5></h5> |
ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
<h6></h6> |
ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ |
ލިސްޓްތައް
ހުރިހާ ލިސްޓެއް— <ul>
, <ol>
, އަދި <dl>
—އެތަކެތި margin-top
ނައްތާލާފައި ހުރި ލިސްޓެއް އަދި އެއް margin-bottom: 1rem
. ނެސްޓް ކުރެވިފައިވާ ލިސްޓްތަކުގައި އެއްވެސް margin-bottom
. padding-left
އަދި އޮން <ul>
އަދި <ol>
އެލިމެންޓްސް ވެސް އަޅުގަނޑުމެން ރީސެޓް ކޮށްފިން .
- ހުރިހާ ލިސްޓެއްގެ މަތީ މާރޖިން އުނިކޮށްފައިވެއެވެ
- އަދި އެމީހުންގެ ބޮޓޮމް މާރޖިން ނޯމަލައިޒް ވެގެން ދިޔައެވެ
- ނެސްޓް ކުރެވިފައިވާ ލިސްޓްތަކުގައި ބޮޓޮމް މާރޖިންއެއް ނެތެވެ
- މިގޮތަށް އެމީހުންނަށް ލިބެނީ މާ ހަމަހަމަ ސިފައެކެވެ
- ޚާއްޞަކޮށް އޭގެ ފަހުން އިތުރު ލިސްޓް އައިޓަމްތައް އަންނައިރު
- އަދި ކަނާތު ޕެޑިން ވެސް ވަނީ ރީސެޓްކޮށްފަ އެވެ
- މިއޮތީ ތަރުތީބުކޮށްފައިވާ ލިސްޓެކެވެ
- މަދު ލިސްޓް އައިޓަމަކާއެކުގައެވެ
- އެއީ އެއް އޯވަރޯލް ލޫކެވެ
- ކުރީގެ ތަރުތީބު ނުކުރެވި ހުރި ލިސްޓެއް ފަދައިންނެވެ
ސާދާ ސްޓައިލިންގ އާއި، ސާފު ހައިރާކީ އާއި، ރަނގަޅު ސްޕޭސިންގ އަށްޓަކައި، ޑިސްކްރިޕްޝަން ލިސްޓްތަކުގައި އަޕްޑޭޓްކޮށްފައިވާ margin
ސ. s އަށް <dd>
ރީސެޓްކޮށް އިތުރުކުރުން . s ބޮލްޑްކޮށްފައި ހުރެއެވެ .margin-left
0
margin-bottom: .5rem
<dt>
- ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ
- ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.
- މުއްދަތު
- މި ލަފުޒަށް ދޭ މާނަ.
- ހަމަ އެ ލަފުޒަށް ދޭ ދެވަނަ މާނައެކެވެ.
- އަނެއްކާ ޓާރމް
- މި އަނެއް ލަފުޒަށް މާނަކުރުމެވެ.
އިންލައިން ކޯޑެވެ
ކޯޑްގެ އިންލައިން ސްނިޕެޓްތައް <code>
. އެޗްޓީއެމްއެލް އެންގްލް ބްރެކެޓްތަކުން ސަލާމަތްވުން ޔަގީން ކުރައްވާށެވެ.
<section>
އިންލައިންގެ ގޮތުގައި އޮޅާލަން ޖެހެއެވެ.
For example, <code><section></code> should be wrapped as inline.
ކޯޑް ބްލޮކްތަކެވެ
<pre>
ކޯޑްގެ އެތައް ސަފުހާއަކަށް s ބޭނުން ކުރާށެވެ . އަނެއްކާވެސް ރަނގަޅަށް ރެންޑަރ ކުރުމަށްޓަކައި ކޯޑްގައިވާ އެއްވެސް އެންގްލް ބްރެކެޓެއް ފިލައިގެން ދިއުން ޔަގީން ކުރައްވާށެވެ. އެލިމެންޓް ރީސެޓް ކުރެވެނީ އޭގެ <pre>
ނައްތާލައި އޭގެ ޔުނިޓްތައް margin-top
ބޭނުން ކުރުމަށް .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
ވެރިއޭބަލްސް އެވެ
ވެރިއޭބަލްތައް ދައްކާލުމަށްޓަކައި <var>
ޓެގް ބޭނުން ކުރާށެވެ.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ޔޫޒަރ އިންޕުޓް
<kbd>
އާންމުކޮށް ކީބޯޑް މެދުވެރިކޮށް އެންޓަރ ކުރާ އިންޕުޓް ދައްކާލުމަށް ބޭނުންކުރާށެވެ .
ސެޓިންގސް އެޑިޓް ކުރުމަށް ފިއްތާލާށެވެ ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
ސާމްޕަލް އައުޓްޕުޓް
ޕްރޮގްރާމަކުން ސާމްޕަލް އައުޓްޕުޓް ދައްކާލުމަށްޓަކައި <samp>
ޓެގް ބޭނުން ކުރާށެވެ.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
މޭޒުތަކެވެ
މޭޒުތައް ސްޓައިލް s އަށް ކުޑަކޮށް އެޖެސްޓްކޮށް ، ބޯޑަރުތައް ކޮލަޕްސްކޮށް، މުޅި ތަނުގައި <caption>
އެއްގޮތްކަން ކަށަވަރުކޮށްދެއެވެ . text-align
ބޯޑަރސް، ޕެޑިންގ، އަދި އެހެނިހެން ކަންކަމަށް އިތުރު ބަދަލުތައް އަންނަނީ .table
ކްލާހާއެކުގައެވެ .
ތާވަލުގެ ސުރުޚީ | ތާވަލުގެ ސުރުޚީ | ތާވަލުގެ ސުރުޚީ | ތާވަލުގެ ސުރުޚީ |
---|---|---|---|
ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް |
ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް |
ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް | ޓޭބަލް ސެލް |
ފޯމުތައް
ސާދާ ބޭސް ސްޓައިލްތަކަށް އެކި ފޯމް އެލިމެންޓްތައް ރީބޫޓްކޮށްފައިވެ އެވެ. މިއީ އެންމެ ފާހަގަކޮށްލެވޭ ބައެއް ބަދަލުތަކެވެ.
<fieldset>
s ގައި ބޯޑަރ، ޕެޑިންގ، ނުވަތަ މާރޖިން އެއް ނެތުމުން ވަކިވަކި އިންޕުޓްތަކަށް ނުވަތަ އިންޕުޓްތަކުގެ ގްރޫޕްތަކަށް ރެޕަރެއްގެ ގޮތުގައި ފަސޭހައިން ބޭނުންކުރެވޭނެއެވެ.<legend>
s، ފީލްޑްސެޓް ފަދައިން، ވެސް ސޯރޓްސްގެ ސުރުޚީއެއްގެ ގޮތުގައި ދައްކާލުމަށް ރީސްޓައިލް ކުރެވިފައިވެއެވެ.<label>
s އަށް ސެޓްކޮށްފައިވަނީ އެޕްލައިdisplay: inline-block
ކުރުމަށް ހުއްދަ ދިނުމަށެވެ.margin
<input>
s،<select>
s،<textarea>
s، އަދި<button>
s އަށް ގިނައިން އެޑްރެސް ކުރެވެނީ ނޯމަލައިޒް އިން ނަމަވެސް ރީބޫޓް އިން އެމީހުންގެmargin
އަދި ސެޓްތައް ނައްތާލައެވެline-height: inherit
.<textarea>
s އަށް ބަދަލު ގެނެސްފައިވަނީ ހަމައެކަނި ވަރުގަދައަށް ރީސައިޒް ކުރެވޭ ގޮތަށް ހޮރައިޒޮންޓަލް ރީސައިޒިންގ އިން ގިނަ ފަހަރަށް ޕޭޖް ލޭއައުޓް “ބްރޭކް” ކުރާތީއެވެ.<button>
s އަދި<input>
ބަޓަން އެލިމެންޓްތަކުގައި ހުންނަނީcursor: pointer
ކޮން އިރަކު:not(:disabled)
.
މި ބަދަލުތައް، އަދި އެއަށްވުރެ ގިނަ ބަދަލުތައް ތިރީގައި މިވަނީއެވެ.
ތާރީޚު & ކުލަ އިންޕުޓް ސަޕޯޓް
ހަނދާނުގައި ބަހައްޓަންވީ ތާރީޚު އިންޕުޓްތަކަށް ހުރިހާ ބްރައުޒާތަކެއް ކަމަށްވާ ސަފާރީން ފުރިހަމައަށް ސަޕޯޓް ނުކުރާ އެއްޗެކެވެ.
ބަޓަންތަކުގައި ހުންނަ ޕޮއިންޓަރުތައް
role="button"
ރީބޫޓްގައި ޑިފޯލްޓް ކަރސަރ އަށް ބަދަލުކުރުމަށް ފޯރުކޮށްދޭ އިތުރުވުމެއް ހިމެނެއެވެ pointer
. އެލިމެންޓްތަކަކީ އިންޓަރެކްޓިވް އެއްޗެހިކަން އަންގައިދިނުމަށް އެހީތެރިވުމަށްޓަކައި މި އެޓްރިބިއުޓް އެލިމެންޓްތަކަށް އިތުރުކޮށްލާށެވެ. <button>
މި ރޯލަކީ އަމިއްލަ cursor
ބަދަލެއް ލިބޭ އުފެއްދުންތަކަށް ކޮންމެހެން ބޭނުންތެރި ދައުރެއް ނޫނެވެ .
<span role="button" tabindex="0">Non-button element button</span>
މިސްކް އެލިމެންޓްސް
އެޑްރެސް
އެލިމެންޓް <address>
އަޕްޑޭޓް ކުރެވެނީ ބްރައުޒާ ޑިފޯލްޓް font-style
އިން ރީސެޓް italic
ކުރުމަށެވެ normal
. line-height
ވެސް މިހާރު ވާރުތަވެ، margin-bottom: 1rem
އި��ުރުކޮށްފައިވެ އެވެ. <address>
s އަކީ އެންމެ ކައިރީގައި ހުންނަ ކާބަފައިން (ނުވަތަ މުޅި މަސައްކަތުގެ ބޮޑީއެއް) ގުޅޭނެ މައުލޫމާތު ހުށަހެޅުމަށްޓަކައެވެ. އިން ލައިންތައް ނިންމާލައިގެން ފޯމެޓިންގ ރައްކާތެރިކުރުން <br>
.
1355 މާކެޓް ސެއިންޓް، ސުއިޓް 900
ސެން ފްރެންސިސްކޯ، ސީއޭ 94103
ޕީ: (123) 456-7890 ފުރިހަމަ ނަން
[email protected]
ބްލޮކްކޯޓް ކުރާށެވެ
margin
ބްލޮކްކޯޓްސްގައި ޑިފޯލްޓް ވާނީ 1em 40px
, އެހެންކަމުން އަޅުގަނޑުމެން އެކަން ރީސެޓް 0 0 1rem
ކުރަނީ އެހެން އެލިމެންޓްތަކާ މާ އެއްގޮތްވާ އެއްޗަކަށްޓަކައެވެ.
މަޝްހޫރު ކޯޓޭޝަނެއް، ބްލޮކްކޯޓް އެލިމެންޓެއްގައި ހިމެނޭ ކޯޓެކެވެ.
ސޯސް ޓައިޓަލްގައި މަޝްހޫރު މީހެކެވެ
އިންލައިން އެލިމެންޓްސް
އެ <abbr>
އެލިމެންޓަށް ޕެރެގްރާފް ޓެކްސްޓްގެ ތެރެއިން ވަކިން ފާހަގަކޮށްލެވޭ ގޮތަށް އަސާސީ ސްޓައިލިންގ ލިބެއެވެ.
ޚުލާސާ
ސުމާރީގައި ޑިފޯލްޓްކޮށް cursor
ލިޔެފައިވަނީ text
, އެހެންކަމުން އަޅުގަނޑުމެން އެކަން ރީސެޓް ކުރަނީ pointer
އެ އެލިމެންޓަށް ކްލިކްކޮށްގެން މުއާމަލާތް ކުރެވޭނެކަން ފޯރުކޮށްދިނުމަށެވެ.
ބައެއް ތަފްޞީލެވެ
ތަފްސީލުތަކާ ބެހޭ އިތުރު މައުލޫމާތު.
އަދިވެސް އިތުރު ތަފްޞީލެވެ
މިއޮތީ ތަފްސީލުތަކާ ބެހޭ އިތުރު ތަފްސީލެވެ.
އެޗްޓީއެމްއެލް5 [hidden]
އެޓްރިބިއުޓް
HTML5 އިން އާ ގްލޯބަލް އެޓްރިބިއުޓެއް[hidden]
display: none
އިތުރުކުރަނީ , މިއީ ޑިފޯލްޓްކޮށް ސްޓައިލް ކުރެވިފައިވާ އެއްޗެކެވެ . PureCSS އިން ޚިޔާލެއް ދަރަންޏަށް ނަގައިގެން , އަޅުގަނޑުމެން މި ޑިފޯލްޓް ރަނގަޅު ކޮށްގެން އޭގެ އެކްސިޑެންޓް އޮވަރރައިޑް ވުމުން [hidden] { display: none !important; }
ރައްކާތެރިވުމަށް އެހީތެރިވުމަށް ހެދިން.display
<input type="text" hidden>
ޖީކުއަރީ އިންކޮމްޕެޓިބިލިޓީ
[hidden]
$(...).hide()
ޖީކުއަރީސް އާއި $(...).show()
މެތޯޑްސް އާއި އެއްގޮތް ނުވާ އެއްޗެކެވެ . އެހެންކަމުން، އަޅުގަނޑުމެން މިވަގުތު ޚާއްޞަކޮށް އެންޑޯސް ނުކުރަން [hidden]
އެހެން އުކުޅުތަކުގެ މައްޗަށް މެނޭޖް ކުރުމަށް display
އޮފް އެލިމެންޓްސް.
ހަމައެކަނި އެލިމެންޓެއްގެ ވިޒިބިލިޓީ ޓޮގްލް ކުރުމަށްޓަކައި، މާނައަކީ އޭގެ display
ބަދަލު ނުކުރެވި އެ އެލިމެންޓުން އަދިވެސް ޑޮކިއުމަންޓްގެ ފްލޯއަށް އަސަރު ފޯރާފާނެތީ، އޭގެ ބަދަލުގައި ކްލާސް ބޭނުން ކުރާށެވެ ..invisible