ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯇꯧꯕꯥ꯫
ꯃꯥꯂꯦꯃꯒꯤ ꯁꯦꯇꯤꯡꯁꯤꯡ, ꯍꯦꯗꯤꯡꯁꯤꯡ, ꯕꯣꯗꯤ ꯇꯦꯛꯁꯠ, ꯂꯤꯁ꯭ꯇꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯌꯥꯑꯣꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯒꯤꯗꯃꯛ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫
ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯁꯦꯇꯤꯡꯁꯤꯡ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯕꯦꯁꯤꯛ ꯒ꯭ꯂꯣꯕꯦꯜ ꯗꯤꯁꯞꯂꯦ, ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ, ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯍꯦꯟꯅꯥ ꯀꯟꯠꯔꯣꯜ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ, ꯇꯦꯛꯁꯇꯥꯏꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ .
- ꯑꯣ.ꯑꯦꯁ. ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯈꯅꯒꯠꯂꯕꯥ ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
font-family
- ꯍꯦꯟꯅꯥ ꯌꯥꯑꯣꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯈꯂꯒꯤ ꯁ꯭ꯀꯦꯜ ꯑꯃꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯔꯨꯠ
font-size
(ꯃꯍꯧꯁꯥꯅꯥ 16px) ꯁꯤꯖꯤꯟꯅꯩ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯚꯤꯖꯤꯇꯔꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯑꯗꯨ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯒꯅꯤ꯫ $font-family-base
,$font-size-base
, ꯑꯃꯁꯨꯡ$line-height-base
ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯥꯏꯄꯒ꯭ꯔꯥꯐꯤꯛ ꯕꯦꯖ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ<body>
.- ꯒ꯭ꯂꯣꯕꯦꯜ ꯂꯤꯉ꯭ꯛ ꯃꯆꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯕꯥ
$link-color
ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯑꯟꯗꯔꯂꯥꯏꯅꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ:hover
. - ( ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯑꯗꯨꯗꯥ
$body-bg
a ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫background-color
<body>
#fff
ꯍꯥꯌꯔꯤꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯪꯒꯅꯤ _reboot.scss
, ꯑꯃꯁꯨꯡ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ _variables.scss
. ꯁꯣꯏꯗꯅꯥ ꯁꯦꯠ $font-size-base
ꯇꯧꯕꯤꯌꯨ rem
.
ꯍꯦꯗꯤꯡꯁꯤꯡ꯫
HTML ꯍꯦꯗꯤꯡ ꯄꯨꯝꯅꯃꯛ, , ꯒꯤ <h1>
ꯈꯨꯠꯊꯥꯡꯗꯥ <h6>
ꯐꯪꯒꯅꯤ꯫
ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ | ꯈꯨꯗꯝ |
---|---|
<h1></h1> |
ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h2></h2> |
h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h3></h3> |
h꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h4></h4> |
ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h5></h5> |
h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h6></h6> |
ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
through .h6
classes ꯑꯁꯤꯁꯨ ꯐꯪꯏ, ꯃꯔꯃꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯃꯒꯤ ꯐꯣꯟꯇ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯃꯔꯤ ꯂꯩꯅꯕꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯉꯃꯗꯕꯥ ꯃꯇꯃꯗꯥ꯫
ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
h꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
ꯍꯦꯗꯤꯡꯁꯤꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 3ꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯍꯦꯗꯤꯡ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯝꯅꯕꯥ ꯌꯥꯎꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯐꯦꯟꯁꯤ ꯗꯤꯁꯞꯂꯦ ꯍꯦꯗꯤꯡ ꯐꯦꯗ ꯇꯧꯔꯕꯥ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
ꯍꯦꯗꯤꯡꯁꯤꯡ ꯎꯠꯄꯥ꯫
ꯇ꯭ꯔꯦꯗꯤꯁ꯭ꯅꯦꯜ ꯍꯦꯗꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯄꯦꯖ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯆꯤꯟꯖꯥꯛꯇꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯊꯣꯏꯗꯣꯀꯄꯥ ꯑꯣꯏꯅꯕꯥ ꯍꯦꯗꯤꯡ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯗꯤꯁꯞꯂꯦ ꯍꯦꯗꯤꯡ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ —ꯑꯆꯧꯕꯥ, ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯂꯩꯕꯥ ꯍꯦꯗꯤꯡ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯥ꯫ ꯍꯦꯗꯤꯡꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ, ꯑꯗꯨꯕꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ .
ꯗꯤꯁꯞꯂꯦ ꯇꯧꯕꯥ ꯱ |
ꯗꯤꯁꯞꯂꯦ ꯇꯧꯕꯥ ꯲ |
ꯗꯤꯁꯞꯂꯦ ꯇꯧꯕꯥ ꯳ |
ꯗꯤꯁꯞꯂꯦ ꯇꯧꯕꯥ ꯴ |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
ꯍꯦꯟꯗꯨꯅ ꯆꯠꯄ
ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯃꯥ ꯃꯁꯛ ꯊꯣꯀꯄꯥ ꯑꯣꯏꯍꯅꯕꯤꯌꯨ .lead
.
ꯃꯁꯤ ꯂꯤꯗ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯃꯅꯤ꯫ ꯃꯁꯤ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡꯗꯒꯤ ꯇꯣꯉꯥꯟꯅꯥ ꯂꯩ꯫
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
ꯏꯅꯂꯥꯏꯟ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫
ꯀꯃꯟ ꯏꯅꯂꯥꯏꯟ HTML5 ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯇꯧꯕꯥ꯫
ꯅꯍꯥꯛꯅꯥ ꯃꯥꯔꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ...ꯇꯥꯛꯄꯃꯌꯦꯛ.
ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯗꯤꯂꯤꯠ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫
ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯛ ꯑꯆꯨꯝꯕꯥ ꯑꯣꯏꯗ꯭ꯔꯦ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫
ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫
ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤꯅꯥ ꯑꯟꯗꯔꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ꯫
ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯐꯥꯏꯅꯦꯜ ꯄ꯭ꯔꯤꯟꯇ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫
ꯂꯥꯏꯟ ꯑꯁꯤ ꯕꯣꯜꯗ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯈꯤ꯫
ꯂꯥꯏꯟ ꯑꯁꯤ ꯏꯇꯥꯂꯤꯛ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯈꯤ꯫
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
ꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯇꯦꯒꯁꯤꯡꯅꯥ ꯄꯨꯔꯛꯀꯗꯕꯥ ꯑꯄꯥꯝꯕꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯏꯝꯞꯂꯤꯀꯦꯁꯟ ꯑꯃꯠꯇꯥ ꯌꯥꯑꯣꯗꯅꯥ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯗꯒꯤ ꯉꯥꯀꯊꯣꯛꯂꯒꯥ .small
ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯐꯪꯏ꯫<mark>
<small>
ꯃꯊꯛꯇꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯃꯗꯥ, ꯁꯤꯖꯤꯟꯅꯅꯕꯥ <b>
ꯑꯃꯁꯨꯡ <i>
HTML5ꯗꯥ ꯐ꯭ꯔꯤ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯕꯤꯌꯨ꯫ <b>
ꯍꯥꯌꯕꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯤꯗꯅꯥ ꯋꯥꯍꯩ ꯅꯠꯠꯔꯒꯥ ꯋꯥꯍꯩ ꯄꯔꯦꯡꯁꯤꯡ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ ꯑꯗꯨꯒꯥ <i>
ꯑꯌꯥꯝꯕꯅꯥ ꯈꯣꯟꯖꯦꯜ, ꯇꯦꯛꯅꯤꯀꯦꯜ ꯇꯔꯃꯁꯤꯡ ꯑꯁꯤꯅꯆꯤꯡꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫
ꯇꯦꯛꯁꯠ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫
ꯑꯩꯈꯣꯌꯒꯤ ꯇꯦꯛꯁꯠ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ, ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ, ꯁ꯭ꯇꯥꯏꯜ, ꯋꯦꯠ, ꯑꯃꯁꯨꯡ ꯃꯆꯨ ꯍꯣꯡꯗꯣꯀꯎ .
ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ꯫
<abbr>
ꯍꯣꯚꯔꯗꯥ ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ ꯚꯔꯖꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯔꯣꯅꯤꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ HTMLꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯇꯥꯏꯂꯥꯏꯖ ꯇꯧꯔꯕꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯟꯗꯔꯂꯥꯏꯟ ꯑꯃꯥ ꯂꯩ ꯑꯃꯁꯨꯡ ꯍꯣꯚꯔꯗꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯛꯁ ꯄꯤꯅꯕꯥ ꯍꯦꯜꯄ ꯀꯔꯁꯔ ꯑꯃꯥ ꯐꯪꯏ꯫
.initialism
ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯄꯤꯀꯄꯥ ꯐꯣꯟꯇ-ꯁꯥꯏꯖ ꯑꯃꯒꯤꯗꯃꯛ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
ꯑꯦꯠꯔ ꯇꯧꯕꯥ꯫
HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
ꯕ꯭ꯂꯣꯀꯀꯣꯇꯁꯤꯡ꯫
ꯅꯍꯥꯛꯀꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯁꯣꯔꯁ ꯑꯃꯗꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯀꯣꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ꯫ ꯀꯣꯠ ꯑꯣꯏꯅꯥ HTML<blockquote class="blockquote">
ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀꯨꯄꯁꯤꯜꯂꯨ꯫
ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
ꯁꯣꯔꯁ ꯑꯃꯒꯤ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯥ꯫
<footer class="blockquote-footer">
ꯁꯣꯔꯁ ꯑꯗꯨ ꯈꯪꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯁꯣꯔꯁ ꯋꯥꯔꯛ ꯑꯗꯨꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ <cite>
.
ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫
ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯂꯣꯀꯀꯣꯇꯀꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯇꯦꯛꯁꯠ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫
ꯑꯅꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ꯫
list-style
ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯃꯁꯨꯡ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ (ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡ ꯈꯛꯇꯗꯥ)꯫ ꯃꯁꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯆꯠꯅꯒꯅꯤ , ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛꯇꯁꯨ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫
- ꯃꯁꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯅꯤ꯫
- ꯃꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯑꯅꯁ꯭ꯇꯥꯏꯜ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯏ꯫
- ꯁ꯭ꯠꯔꯀꯆꯔꯦꯜ ꯑꯣꯏꯅꯥ, ꯃꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯤꯁ꯭ꯠ ꯑꯃꯅꯤ꯫
- ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯃꯁꯤꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯆꯠꯅꯩ꯫
- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯇꯁꯤꯡ:
- ꯑꯁꯤ ꯃꯑꯣꯡ ꯑꯁꯤꯅꯥ ꯁꯣꯀꯍꯜꯂꯣꯏ꯫
- ꯍꯧꯖꯤꯀꯁꯨ ꯕꯨꯂꯦꯠ ꯑꯃꯥ ꯎꯠꯀꯅꯤ꯫
- ꯑꯃꯁꯨꯡ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯕꯥ꯫
- ꯃꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯐꯤꯚꯝ ꯈꯔꯗꯥ ꯀꯥꯟꯅꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ꯫
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫
ꯂꯤꯁ꯭ꯠ ꯑꯃꯒꯤ ꯕꯨꯂꯦꯠꯁꯤꯡ ꯂꯧꯊꯣꯀꯎ ꯑꯃꯁꯨꯡ margin
ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯉꯥꯜ ꯈꯔꯥ ꯊꯥꯎ, .list-inline
ꯑꯃꯁꯨꯡ .list-inline-item
.
- ꯃꯁꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯅꯤ꯫
- ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯑꯃꯅꯥ꯫
- ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯂꯥꯏꯟꯗꯥ ꯎꯠꯂꯤ꯫
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫
ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯂꯦꯄꯊꯣꯀꯈ꯭ꯔꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯅꯠꯔꯒꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ) ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯇꯔꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯅꯁꯤꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯅꯥ ꯆꯠꯅꯕꯒꯤꯗꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ .text-truncate
ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ, ꯃꯁꯤꯅꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯑꯦꯂꯤꯞꯁꯤꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇ꯭ꯔꯉ꯭ꯛ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
- ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫
- ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
- ꯋꯥꯍꯩ
-
ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯕꯥ꯫
ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯗꯦꯐꯤꯅꯤꯁꯟ ꯇꯦꯛꯁ ꯈꯔꯥ꯫
- ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯅꯤ꯫
- ꯃꯁꯤꯒꯤ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯁꯤ ꯊꯣꯏꯗꯣꯀꯄꯥ ꯑꯃꯅꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯅꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫
- ꯇ꯭ꯔꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯇꯔꯝ ꯑꯁꯤ ꯇ꯭ꯔꯉ꯭ꯛ ꯇꯧꯏ꯫
- ꯃꯁꯤ ꯁ꯭ꯄꯦꯁ ꯇꯠꯄꯥ ꯃꯇꯃꯗꯥ ꯀꯥꯟꯅꯕꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯑꯔꯣꯏꯕꯗꯥ ꯑꯦꯂꯤꯞꯁꯤꯁ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫
- ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫
-
- ꯅꯦꯁ꯭ꯇꯦꯗ ꯗꯦꯐꯤꯅꯤꯁꯟ ꯂꯤꯁ꯭ꯠ꯫
- ꯑꯩꯍꯥꯛꯅꯥ ꯅꯈꯣꯌꯗꯥ ꯗꯦꯐꯤꯅꯤꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯄꯥꯝꯃꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯈꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯗꯦꯐꯤꯅꯤꯁꯟ ꯂꯤꯁ꯭ꯇꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯗꯤꯐꯤꯅꯤꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯊꯃꯖꯒꯦ꯫
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ꯫
v4.3.0ꯗꯒꯤ ꯍꯧꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯥꯏ, ꯃꯁꯤꯅꯥ ꯇꯦꯛꯁꯠ ꯑꯁꯤ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ RFS$enable-responsive-font-sizes
ꯑꯁꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ true
ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯗꯨꯅꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
RFS , ꯁꯄꯣꯔꯠ ꯇꯧꯅꯕꯥ , ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯅꯣꯔꯃꯦꯜ font-size
ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯟꯅꯕꯥ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯁ꯭ꯀꯦꯂꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯌꯨꯅꯤꯠꯁꯤꯡꯒꯥ calc()
ꯂꯣꯌꯅꯅꯥ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯗꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯒꯅꯤ꯫ RFS ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯅꯒꯤ rem
ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯁꯤ ꯃꯁꯤꯒꯤ GitHub ꯔꯤꯄꯣꯖꯤꯇꯔꯤꯗꯥ ꯐꯪꯒꯅꯤ .