ꯍꯦꯟꯅꯥ ꯐꯕꯥ, ꯌꯥꯡꯅꯥ, ꯃꯄꯥꯉ꯭ꯒꯜ ꯀꯅꯕꯥ ꯋꯦꯕ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇꯀꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯌꯥꯑꯣꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯏꯅꯐ꯭ꯔꯥꯁ꯭ꯠꯔꯀꯆꯔꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯁꯔꯨꯀꯁꯤꯡꯒꯤ ꯂꯣꯗꯥꯎꯟ ꯐꯪꯕꯤꯌꯨ꯫

HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯇꯧꯕꯥ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯀꯛꯅꯕꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯍꯧꯔꯀꯐꯃꯗꯥ ꯃꯁꯤ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫

<!DOCTYPE html>
<html lang="en">
  ...
</html>

ꯃꯣꯕꯥꯏꯜ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯁꯤꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯃꯁꯀꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯣꯄꯁ꯭ꯅꯦꯜ ꯃꯣꯕꯥꯏꯜ ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯳ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤ ꯍꯧꯔꯀꯄꯗꯒꯤ ꯃꯣꯕꯥꯏꯜ ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯑꯣꯏꯅꯕꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯈ꯭ꯔꯦ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯃꯣꯕꯥꯏꯜ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯀꯣꯔꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯕꯦꯛ ꯇꯧꯏ꯫ ꯇꯁꯦꯡꯕꯗꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯃꯣꯕꯥꯏꯂꯅꯤ ꯐꯥꯔꯁ꯭ꯠ . ꯃꯣꯕꯥꯏꯜ ꯐꯥꯔꯁ꯭ꯠ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯅꯠꯇꯅꯥ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯐꯪꯒꯅꯤ꯫

ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯇꯆ ꯖꯨꯝ ꯇꯧꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ, ꯚꯤꯎꯄꯣꯔꯠ ꯃꯦꯇꯥ ꯇꯦꯒ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noꯚꯤꯎꯄꯣꯔꯠ ꯃꯦꯇꯥ ꯇꯦꯒꯇꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯖꯨꯝ ꯇꯧꯕꯒꯤ ꯀꯦꯄꯦꯕꯤꯂꯤꯇꯤꯁꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤꯅꯥ ꯖꯨꯝ ꯇꯧꯕꯥ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯏ, ꯍꯥꯌꯕꯗꯤ ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯈꯛꯇꯃꯛ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯠ ꯑꯗꯨ ꯅꯦꯇꯤꯕ ꯑꯦꯞꯂꯤꯀꯦꯁꯟ ꯑꯃꯒꯨꯝꯅꯥ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯐꯥꯑꯣꯍꯜꯂꯤ꯫ ꯑꯄꯨꯅꯕꯥ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤ ꯁꯥꯏꯠ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯔꯤꯀꯃꯦꯟꯗ ꯇꯧꯗꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯆꯦꯀꯁꯤꯅꯕꯤꯌꯨ!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯕꯦꯁꯤꯛ ꯒ꯭ꯂꯣꯕꯦꯜ ꯗꯤꯁꯞꯂꯦ, ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ, ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯃꯔꯨꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ:

ꯁꯦꯠ background-color: #fff;ꯇꯧꯕꯥ꯫body
@font-family-base, @font-size-base, ꯑꯃꯁꯨꯡ @line-height-baseꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯕꯦꯖ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯒ꯭ꯂꯣꯕꯦꯜ ꯂꯤꯉ꯭ꯛ ꯃꯆꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧ @link-colorꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯑꯟꯗꯔꯂꯥꯏꯅꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫:hover

ꯍꯥꯌꯔꯤꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ scaffolding.less.

ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ.css

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯛꯅꯕꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯅꯤꯀꯣꯂꯥꯁ ꯒ꯭ꯌꯥꯂꯥꯘꯔ ꯑꯃꯁꯨꯡ ꯖꯣꯅꯥꯊꯟ ꯅꯤꯂꯒꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯥ ꯑꯣꯏꯔꯤꯕꯥ Normalize.css ꯁꯤꯖꯤꯟꯅꯔꯤ꯫

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯁꯥꯏꯠ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯔꯦꯞ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ ꯊꯝꯅꯕꯥ ꯌꯥꯑꯣꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯅꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯅꯍꯥꯛꯅꯥ ꯈꯅꯕꯥ ꯌꯥꯏ꯫ ꯈꯪꯖꯤꯅꯒꯗꯕꯗꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ paddingꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ, ꯀꯟꯇꯦꯅꯔ ꯑꯃꯠꯇꯥ ꯅꯦꯁ꯭ꯇꯦꯕꯜ ꯑꯣꯏꯗꯦ꯫

.containerꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯋꯥꯏꯗ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="container">
  ...
</div>

.container-fluidꯅꯍꯥꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯄꯨꯝꯅꯃꯛ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ, ꯃꯄꯨꯡꯐꯥꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="container-fluid">
  ...
</div>

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯗꯤꯚꯥꯏꯁ ꯅꯠꯠꯔꯒꯥ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯁꯥꯏꯖ ꯍꯦꯅꯒꯠꯂꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯣꯂꯝ ꯱꯲ ꯐꯥꯑꯣꯕꯥ ꯃꯇꯤꯛ ꯆꯥꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯃꯣꯕꯥꯏꯜ ꯐꯥꯔꯁ꯭ꯠ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯃꯁꯤꯗꯥ ꯐꯖꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ , ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯟꯅꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯂꯦꯑꯥꯎꯠꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯛꯇꯤ ꯂꯩꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ .

ꯁꯛꯇꯥꯛꯄ

ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯊꯝꯂꯤꯕꯥ ꯔꯣ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯦꯖ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

ꯔꯣꯁꯤꯡ ꯑꯁꯤ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯄꯦꯗꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ .container(ꯐꯤꯛꯁ-ꯋꯥꯏꯗ) ꯅꯠꯠꯔꯒꯥ (ꯐꯨꯜ-ꯋꯥꯏꯗ) ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ꯫.container-fluid
ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯔꯣꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ, ꯑꯃꯁꯨꯡ ꯀꯣꯂꯝ ꯈꯛꯇꯃꯛ ꯔꯣꯁꯤꯡꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯃꯆꯥꯁꯤꯡ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯒꯨꯝꯅꯥ .rowꯑꯃꯁꯨꯡ .col-xs-4ꯊꯨꯅꯥ ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯒꯤꯗꯃꯛ ꯐꯪꯏ꯫ ꯍꯦꯟꯅꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯁꯨ ꯃꯤꯛꯁꯤꯟ ꯍꯟꯊꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫
ꯀꯣꯂꯃꯁꯤꯡꯅꯥ ꯒꯇꯔꯁꯤꯡ (ꯀꯣꯂꯝ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯔꯥꯞꯄꯥ) ꯁꯦꯝꯃꯤ padding. .rowꯑꯗꯨꯒꯨꯝꯕꯥ ꯄꯦꯗꯤꯡ ꯑꯗꯨ ꯑꯦꯁ.ꯗꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯅꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯥ ꯀꯣꯂꯃꯒꯤꯗꯃꯛ ꯔꯣꯁꯤꯡꯗꯥ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯏ꯫
ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯥꯎꯠꯗꯦꯟꯇ ꯑꯣꯏꯔꯤ꯫ ꯃꯁꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯅꯟ-ꯒ꯭ꯔꯤꯗ ꯀꯟꯇꯦꯟꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯏꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫
ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ ꯇꯔꯥꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨ ꯇꯥꯛꯇꯨꯅꯥ ꯁꯦꯝꯃꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯥꯟꯅꯕꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯃꯅꯥ ꯑꯍꯨꯝ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ .col-xs-4.
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯝ ꯱꯲ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯔꯣ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀꯣꯂꯃꯒꯤ ꯀꯥꯡꯂꯨꯞ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ, ꯌꯨꯅꯤꯠ ꯑꯃꯒꯨꯝꯅꯥ, ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯅꯤ꯫
ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯁꯥꯏꯖꯁꯤꯡꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯋꯥꯏꯗ ꯂꯩꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯏ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .col-md-*ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯅꯥ ꯃꯁꯤꯒꯤ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯁꯤ ꯃꯤꯗꯤꯌꯝ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯈꯛꯇꯥ ꯅꯠꯇꯅꯥ ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯁꯨ ꯀꯔꯤꯒꯨꯝꯕꯥ .col-lg-*ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯂꯩꯠꯔꯕꯗꯤ ꯁꯣꯀꯍꯅꯒꯅꯤ꯫

ꯄ꯭ꯔꯤꯟꯁꯤꯄꯂꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯗꯇꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯋꯥꯍꯪꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯗꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯦꯁ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯩ꯫

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯇꯝ ꯃꯇꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯍꯟꯗꯨꯅꯥ max-widthꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯕꯨ ꯍꯦꯟꯅꯥ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁ ꯁꯦꯠ ꯑꯃꯗꯥ ꯂꯤꯃꯤꯠ ꯇꯧꯅꯕꯥ ꯑꯃꯥ ꯌꯥꯑꯣꯍꯜꯂꯤ꯫

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ꯒ꯭ꯔꯤꯗ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯍꯦꯟꯗꯤ ꯇꯦꯕꯜ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯤ ꯑꯦꯁ꯭ꯄꯦꯛꯇꯁꯤꯡꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

	ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯐꯣꯅꯁꯤꯡ (<768px)	ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤ ꯇꯦꯕꯂꯁꯤꯡ (≥768px)	ꯃꯤꯗꯤꯌꯝ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ (≥992px)	ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ (≥1200px)
ꯒ꯭ꯔꯤꯗ ꯕꯤꯍꯦꯕꯤꯌꯔ꯫	ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯕꯥ꯫	ꯍꯧꯗꯣꯛꯅꯕꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯈꯤ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫
ꯀꯟꯇꯦꯅꯔꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ꯫	ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ (ꯑꯇꯣꯞꯄꯥ)	꯷꯵꯰ꯄꯤ.ꯑꯦꯛꯁ	꯹꯷꯰ꯄꯤ.ꯑꯦꯛꯁ	꯱꯱꯷꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯀ꯭ꯂꯥꯁꯀꯤ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ꯫	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ꯀꯂꯃꯁꯤꯡꯒꯤ꯫	꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ
ꯀꯣꯂꯃꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫	ꯑꯣꯇꯣ꯫	~꯶꯲ꯄꯤ.ꯑꯦꯛꯁ	~꯸꯱ꯄꯤꯑꯦꯛꯁ	~꯹꯷ꯄꯤ.ꯑꯦꯛꯁ
ꯒꯇꯔꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫	꯳꯰px (ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯃꯥꯏꯀꯩ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯱꯵px)
ꯅꯦꯁ꯭ꯇꯦꯕꯜ ꯑꯣꯏꯕꯥ꯫	ꯍꯣꯏ
ꯑꯣꯐꯁꯦꯠꯁꯤꯡ꯫	ꯍꯣꯏ
ꯀꯣꯂꯝ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫	ꯍꯣꯏ

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯁ꯭ꯇꯦꯛ-ꯇꯨ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫

ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ .col-md-*, ꯅꯍꯥꯛꯅꯥ ꯗꯦꯁ꯭ꯀꯇꯣꯞ (ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ) ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯕꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ (ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯔꯦꯟꯖ ꯐꯥꯑꯣꯕꯥ) ꯁ꯭ꯇꯦꯛ ꯇꯧꯗꯨꯅꯥ ꯍꯧꯕꯥ ꯕꯦꯁꯤꯛ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫ ꯒ꯭ꯔꯤꯗ ꯀꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯊꯝꯃꯨ .row.

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯱

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯸

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯶

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯐ꯭ꯂꯨꯏꯗ ꯀꯟꯇꯦꯅꯔ꯫

ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯅꯍꯥꯛꯀꯤ ꯃꯄꯥꯅꯒꯤ .containerꯑꯣꯏꯕꯥ ꯑꯗꯨ .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯃꯣꯕꯥꯏꯜ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯞ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯁꯨꯞꯅꯒꯤ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯄꯥꯃꯕ꯭ꯔꯥ? .col-xs-* .col-md-*ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ ꯗꯤꯚꯥꯏꯁ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯱꯲ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯸

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯶ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯶ ꯂꯩ꯫

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯃꯣꯕꯥꯏꯜ, ꯇꯦꯕꯜ, ꯗꯦꯁ꯭ꯀꯇꯣꯞ꯫

.col-sm-*ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯟꯅꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯑꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯛꯇꯤ ꯂꯩꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯃꯗꯨꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯈꯨꯗꯝ ꯑꯗꯨꯗꯥ ꯁꯦꯃꯒꯠꯂꯨ꯫

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯱꯲ .ꯀꯣꯜ-ꯑꯦꯁꯑꯦꯝ-꯶ .ꯀꯣꯜ-ꯑꯦꯝꯗꯤ-꯸

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯶ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯶ .ꯀꯣꯜ-ꯑꯦꯁꯑꯦꯝ-꯴

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯀꯣꯂꯝ ꯔꯦꯄꯤꯡ ꯇꯧꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯝ ꯱꯲ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯔꯣ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀꯣꯂꯃꯒꯤ ꯀꯥꯡꯂꯨꯞ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ, ꯌꯨꯅꯤꯠ ꯑꯃꯒꯨꯝꯅꯥ, ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯅꯤ꯫

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯹ ꯂꯩ꯫

.col-xs-4
9 + 4 = 13 > 12 ꯑꯣꯏꯕꯅꯥ, ꯃꯁꯤꯒꯤ 4-ꯀꯣꯂꯝ-ꯋꯥꯏꯗ ꯗꯤꯚ ꯑꯁꯤ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯦꯡ-ꯑꯣꯠꯄꯒꯤ ꯌꯨꯅꯤꯠ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯏ꯫

.col-xs-6
ꯃꯇꯨꯡ ꯇꯥꯔꯀꯄꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯁꯤꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯥ ꯆꯠꯊꯔꯤ꯫

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯣꯂꯝ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫

ꯐꯪꯂꯤꯕꯥ ꯒ꯭ꯔꯤꯗꯁꯤꯡꯒꯤ ꯇꯌꯥꯔ ꯃꯔꯤ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ, ꯑꯗꯣꯃꯒꯤ ꯀꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯑꯃꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯋꯥꯡꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯀꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯆꯨꯝꯅꯥ ꯀ꯭ꯂꯤꯌꯥꯔ ꯇꯧꯗꯕꯥ ꯏꯁꯨꯁꯤꯡꯗꯥ ꯂꯥꯟꯊꯦꯡꯅꯕꯥ ꯌꯥꯏ꯫ .clearfixꯃꯗꯨ ꯐꯤꯛꯁ ꯇꯧꯅꯕꯥ, ꯑꯦ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ .

.col-xs-6 .col-sm-3
ꯅꯍꯥꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯁꯥꯏꯖ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ ꯅꯠꯠꯔꯒꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯐꯣꯅꯗꯥ ꯆꯦꯛ ꯇꯧ꯫

.ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯶ .ꯀꯣꯜ-ꯑꯦꯁꯑꯦꯝ-꯳

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯀꯣꯂꯝ ꯀ꯭ꯂꯤꯌꯔ ꯇꯧꯕꯒꯤ ꯃꯊꯛꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯐꯁꯦꯠꯁꯤꯡ, ꯄꯨꯁꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯄꯨꯂꯁꯤꯡ ꯔꯤꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ . ꯃꯁꯤ ꯒ꯭ꯔꯤꯗꯀꯤ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯌꯦꯡꯕꯤꯌꯨ .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ꯑꯣꯐꯁꯦꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

.col-md-offset-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯗꯥ ꯂꯧꯊꯣꯀꯎ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯀꯣꯂꯝ ꯑꯃꯗꯥ *ꯍꯦꯅꯒꯠꯍꯜꯂꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯣꯂꯝ ꯃꯔꯤꯒꯤ ꯃꯊꯛꯇꯥ .col-md-offset-4ꯆꯠꯂꯤ꯫.col-md-4

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-ꯑꯣꯐꯁꯦꯠ-꯴

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯳ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-ꯑꯣꯐꯁꯦꯠ-꯳

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯶ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-ꯑꯣꯐꯁꯦꯠ-꯳

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯌꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔꯁꯤꯡꯗꯒꯤ ꯑꯣꯐꯁꯦꯇꯁꯤꯡꯁꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ꯅꯦꯁ꯭ꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯅꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯅꯧꯕꯥ .rowꯑꯃꯁꯨꯡ .col-sm-*ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .col-sm-*ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ 12 ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯐꯥꯎꯕꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯌꯥꯎꯒꯗꯕꯅꯤ (ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ 12 ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ)꯫

ꯊꯥꯛ ꯱: .ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯹

ꯊꯥꯛ ꯲: .ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯸ .ꯀꯣꯜ-ꯑꯦꯁꯑꯦꯝ-꯶

ꯊꯥꯛ ꯲: .ꯀꯣꯜ-ꯑꯦꯛꯁꯑꯦꯁ-꯴ .ꯀꯣꯜ-ꯑꯦꯁꯑꯦꯝ-꯶

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ꯀꯣꯂꯝ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯕꯤꯜꯇ-ꯏꯟ ꯒ꯭ꯔꯤꯗ ꯀꯂꯃꯁꯤꯡꯒꯤ ꯑꯣꯔꯗꯔ .col-md-push-*ꯑꯃꯁꯨꯡ .col-md-pull-*ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯖꯅꯥ ꯍꯣꯡꯗꯣꯀꯎ꯫

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯹ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-ꯄꯨꯁ-꯳

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯳ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-ꯄꯨꯜ-꯹

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ꯃꯤꯛꯁꯤꯟ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯟꯊꯕꯥ꯫

ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯄ꯭ꯔꯤꯕꯤꯜꯗ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ , ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯏꯆꯝ ꯆꯝꯕꯥ, ꯁꯦꯃꯦꯟꯇꯤꯛ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯊꯨꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯂꯦꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ, ꯒꯇꯔꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ, ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯣꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ ꯍꯧꯒꯗꯕꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯄꯣꯏꯟꯇ ꯑꯗꯨ ꯂꯦꯄꯊꯣꯀꯏ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯃꯊꯛꯇꯥ ꯗꯣꯀꯨꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯂꯣꯌꯅꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯁ꯭ꯇꯝ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯁꯨ ꯁꯤꯖꯤꯟꯅꯩ꯫

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ꯃꯤꯛꯁꯅꯁꯤꯡ꯫

ꯃꯤꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯅꯍꯥꯛꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯀꯁ꯭ꯇꯝ ꯚꯦꯜꯌꯨꯁꯤꯡꯗꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ ꯃꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯔꯛꯇꯥ ꯒꯦꯞ ꯑꯃꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯇꯤꯡꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ꯫

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ꯍꯦꯗꯤꯡꯁꯤꯡ꯫

HTML ꯍꯦꯗꯤꯡ ꯄꯨꯝꯅꯃꯛ, , ꯒꯤ <h1>ꯈꯨꯠꯊꯥꯡꯗꯥ <h6>ꯐꯪꯒꯅꯤ꯫ .h1ꯊ꯭ꯔꯨ .h6ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯐꯪꯏ, ꯃꯔꯃꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯃꯒꯤ ꯐꯣꯟꯇ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯎꯠꯄꯥ ꯄꯥꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ꯫

ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯳꯶ꯄꯤ.ꯑꯦꯛꯁ
h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯳꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯑꯩꯆ꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯲꯴ꯄꯤ.ꯑꯦꯛꯁ
ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯱꯸ꯄꯤ.ꯑꯦꯛꯁ
h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯱꯴ꯄꯤ.ꯑꯦꯛꯁ
ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯁꯦꯃꯤꯕꯣꯜꯗ ꯑꯣꯏꯕꯥ ꯱꯲ꯄꯤ.ꯑꯦꯛꯁ

<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>

<small>ꯖꯦꯅꯦꯔꯦꯜ ꯇꯦꯒ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ .smallꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯅꯥ, ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫

ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ꯍꯀꯆꯥꯡꯒꯤ ꯀꯣꯄꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯗꯤꯐꯣꯜꯇ font-sizeꯑꯁꯤ 14px , ꯃꯁꯤꯒꯤ line-heightꯃꯅꯨꯡꯗꯥ 1.428 . ꯃꯁꯤ <body>ꯑꯃꯁꯨꯡ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, <p>(ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡ)ꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯝꯞꯌꯨꯠ ꯇꯧꯔꯕꯥ ꯂꯥꯏꯟ-ꯍꯥꯏꯠ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ 10px)ꯒꯤ ꯁꯔꯨꯛ ꯑꯍꯨꯝ ꯊꯣꯀꯄꯒꯤ ꯑꯃꯒꯤ ꯕꯣꯇꯝ ꯃꯥꯔꯖꯤꯟ ꯑꯃꯥ ꯐꯪꯏ꯫

ꯅꯨꯜꯂꯥꯝ ꯀꯨꯏꯁ ꯔꯤꯁꯨꯁ ꯑꯦꯒꯦꯠ ꯎꯔꯅꯥ ꯃꯣꯂꯤꯁ ꯑꯣꯔꯅꯥꯔꯦ ꯚꯦꯜ ꯏꯎ ꯂꯤꯑꯣ꯫ ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫ ꯅꯨꯜꯂꯥꯝ ꯑꯥꯏꯗꯤ ꯗꯣꯂꯣꯔ ꯑꯥꯏꯗꯤ ꯅꯤꯚ ꯎꯜꯠꯔꯤꯁꯤꯁ ꯚꯦꯍꯤꯀꯨꯂꯥ꯫

ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫ ꯗꯣꯅꯦꯛ ꯎꯂꯝꯀꯣꯔꯄꯥꯔ ꯅꯨꯜꯂꯥ ꯅꯟ ꯃꯦꯇꯁ ꯑꯣꯛꯇꯔ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ, ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫ ꯗꯣꯅꯦꯛ ꯎꯂꯝꯀꯣꯔꯄꯥꯔ ꯅꯨꯜꯂꯥ ꯅꯟ ꯃꯦꯇꯁ ꯑꯣꯛꯇꯔ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫

ꯃꯦꯁꯦꯅꯥꯁ ꯁꯦꯗ ꯗꯥꯏꯝ ꯑꯦꯒꯦꯠ ꯔꯤꯁꯁ ꯚꯦꯔꯤꯌꯁ ꯕ꯭ꯂꯥꯟꯗꯤꯠ ꯁꯤꯠ ꯑꯦꯃꯦꯠ ꯅꯟ ꯃꯦꯒ꯭ꯅꯥ꯫ ꯗꯣꯅꯦꯛ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ ꯅꯟ ꯃꯤ ꯄꯣꯔꯇꯥ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯑꯦꯠ ꯑꯦꯒꯦꯠ ꯃꯦꯇꯁ꯫ ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ, ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫

<p>...</p>

ꯂꯤꯗ ꯕꯣꯗꯤ ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫

ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯃꯥ ꯃꯁꯛ ꯊꯣꯀꯄꯥ ꯑꯣꯏꯍꯅꯕꯤꯌꯨ .lead.

ꯚꯤꯚꯥꯃꯁ ꯁꯦꯖꯤꯇꯤꯁ ꯂꯦꯀꯁ ꯚꯦꯜ ꯑꯣꯒ ꯂꯥꯑꯣꯔꯦꯠ ꯔꯨꯠꯔꯨꯝ ꯐꯧꯁꯤꯕꯁ ꯗꯣꯂꯣꯔ ꯑꯣꯛꯇꯔ꯫ ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ꯫

<p class="lead">...</p>

ꯂꯦꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯥ꯫

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯁ꯭ꯀꯦꯜ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯂꯦꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯅꯤꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ꯫less : @font-size-baseꯑꯃꯁꯨꯡ @line-height-base. ꯑꯍꯥꯅꯕꯗꯥ ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯕꯦꯖ ꯐꯣꯟꯇ-ꯁꯥꯏꯖꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯅꯤꯁꯨꯕꯗꯥ ꯕꯦꯖ ꯂꯥꯏꯟ-ꯍꯥꯏꯠꯅꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯑꯃꯁꯨꯡ ꯏꯆꯝ ꯆꯝꯕꯥ ꯃꯦꯊꯁ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯈꯜ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯥꯔꯖꯤꯟ, ꯄꯦꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯂꯥꯏꯟ-ꯍꯥꯏꯠꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯑꯃꯥ ꯁꯦꯝꯃꯤ꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯏ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯃꯥꯔꯛ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯑꯇꯣꯞꯄꯥ ꯀꯟꯇꯦꯛꯁ ꯑꯃꯗꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯣꯏꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯔꯟ ꯑꯃꯥ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, <mark>ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯥꯔꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ...ꯇꯥꯛꯄꯃꯌꯦꯛ.

You can use the mark tag to <mark>highlight</mark> text.

ꯃꯨꯠꯊꯠꯂꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯃꯨꯠꯊꯠꯈ꯭ꯔꯕꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ <del>ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

~~ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯗꯤꯂꯤꯠ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫~~

<del>This line of text is meant to be treated as deleted text.</del>

ꯁ꯭ꯠꯔꯥꯏꯀꯊ꯭ꯔꯨ ꯇꯦꯛꯁꯠ꯫

ꯃꯈꯥ ꯇꯥꯅꯥ ꯃꯔꯤ ꯂꯩꯅꯗꯕꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ <s>ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

~~ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯛ ꯑꯆꯨꯝꯕꯥ ꯑꯣꯏꯗ꯭ꯔꯦ ꯍꯥꯌꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫~~

<s>This line of text is meant to be treated as no longer accurate.</s>

ꯇꯦꯛꯁꯠ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯦꯗꯤꯁꯅꯁꯤꯡ <ins>ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ꯑꯟꯗꯔꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯑꯟꯗꯔꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ <u>ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤꯅꯥ ꯑꯟꯗꯔꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ꯫

<u>This line of text will render as underlined</u>

ꯂꯥꯏꯠꯋꯦꯠ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ HTMLꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯦꯝꯐꯦꯁꯤꯁ ꯇꯦꯒꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯑꯄꯤꯀꯄꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯥ꯫

ꯏꯅꯂꯥꯏꯟ ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯕ꯭ꯂꯣꯀꯁꯤꯡꯗꯥ ꯗꯤ-ꯑꯦꯝꯐꯦꯁꯤꯁ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, <small>ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯁꯥꯏꯖꯒꯤ 85%ꯗꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫ font-sizeꯍꯦꯗꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯅꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯈꯣꯌꯒꯤ ꯑꯣꯏꯕꯥ <small>ꯐꯪꯏ꯫

ꯑꯗꯣꯝꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯏꯅꯂꯥꯏꯟ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ .smallꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ <small>.

ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯐꯥꯏꯅꯦꯜ ꯄ꯭ꯔꯤꯟꯇ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫

<small>This line of text is meant to be treated as fine print.</small>

ꯊꯧꯅ ꯂꯩꯕ

ꯍꯦꯟꯅꯥ ꯂꯨꯕꯥ ꯐꯣꯟꯇ-ꯋꯦꯠ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯃꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤ ꯕꯣꯜꯗ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯏ .

<strong>rendered as bold text</strong>

ꯏꯇꯥꯂꯤꯛꯁꯁꯤꯡ꯫

ꯏꯇꯥꯂꯤꯛ ꯌꯥꯑꯣꯕꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯃꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤ ꯏꯇꯥꯂꯤꯛ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯏ .

<em>rendered as italicized text</em>

ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯁꯤꯖꯤꯟꯅꯅꯕꯥ <b>ꯑꯃꯁꯨꯡ <i>HTML5 ꯗꯥ ꯐ꯭ꯔꯤ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯕꯤꯌꯨ꯫ <b>ꯍꯥꯌꯕꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯤꯗꯅꯥ ꯋꯥꯍꯩ ꯅꯠꯠꯔꯒꯥ ꯋꯥꯍꯩ ꯄꯔꯦꯡꯁꯤꯡ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ ꯑꯗꯨꯒꯥ <i>ꯑꯌꯥꯝꯕꯅꯥ ꯈꯣꯟꯖꯦꯜ, ꯇꯦꯛꯅꯤꯀꯦꯜ ꯇꯔꯃꯁꯤꯡ ꯑꯁꯤꯅꯆꯤꯡꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯦꯛꯁꯠ ꯐꯖꯅꯥ ꯔꯤꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯁꯦꯟꯇꯔ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯇꯦꯛꯁꯠ꯫

ꯔꯦꯞ ꯇꯦꯛꯁꯠ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯦꯁꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯇꯦꯛꯁꯠ ꯀꯦꯄꯤꯇꯦꯂꯥꯏꯖꯦꯁꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯦꯛꯁꯠ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯇꯧꯕꯥ꯫

ꯂꯣꯌꯔꯀꯦꯁ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯑꯆꯧꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯥ꯫

ꯀꯦꯄꯤꯇꯦꯂꯥꯏꯖ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ꯫

<abbr>ꯍꯣꯚꯔꯗꯥ ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ ꯚꯔꯖꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯔꯣꯅꯤꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ HTMLꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯇꯥꯏꯂꯥꯏꯖ ꯇꯧꯔꯕꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯃꯥ ꯂꯩꯕꯥ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡꯗꯥ titleꯂꯥꯏꯠ ꯗꯣꯇꯦꯗ ꯕꯣꯇꯣꯝ ꯕꯣꯔꯗꯔ ꯑꯃꯁꯨꯡ ꯍꯣꯚꯔꯗꯥ ꯍꯦꯜꯄ ꯀꯔꯁꯔ ꯑꯃꯥ ꯂꯩ, ꯃꯁꯤꯅꯥ ꯍꯣꯚꯔꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯛꯁ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯄꯤꯔꯤ꯫

ꯕꯦꯁꯤꯛ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ꯫

ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯌꯕꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ attr .

<abbr title="attribute">attr</abbr>

ꯏꯅꯤꯁꯤꯑꯦꯂꯤꯖꯝ꯫

.initialismꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯄꯤꯀꯄꯥ ꯐꯣꯟꯇ-ꯁꯥꯏꯖ ꯑꯃꯒꯤꯗꯃꯛ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

HTML ꯑꯁꯤ ꯁ꯭ꯂꯥꯏꯁ ꯇꯧꯔꯕꯥ ꯕ꯭ꯔꯦꯗꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯋꯥꯐꯃꯅꯤ꯫

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ꯑꯦꯗ꯭ꯔꯦꯁꯁꯤꯡ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯀꯄꯥ ꯏꯄꯥ-ꯏꯄꯨ ꯅꯠꯠꯔꯒꯥ ꯊꯕꯛꯀꯤ ꯍꯀꯆꯥꯡ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯀꯟꯇꯦꯛꯇ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯄꯤꯕꯥ꯫ ꯂꯥꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯂꯣꯏꯁꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯃꯦꯇꯤꯡ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯃꯨ <br>.

ꯇ꯭ꯕꯤꯇꯔ, ꯏꯅꯛ
꯱꯳꯵꯵ ꯃꯥꯔꯀꯦꯠ ꯁ꯭ꯠꯔꯤꯠ, ꯁꯨꯏꯠ ꯹꯰꯰
ꯁꯥꯟ ꯐ꯭ꯔꯥꯟꯁꯤꯁ꯭ꯀꯣ, ꯁꯤ.ꯑꯦ.꯹꯴꯱꯰꯳
ꯄꯤ: (꯱꯲꯳) ꯴꯵꯶-꯷꯸꯹꯰꯫

ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯃꯤꯡ
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ꯕ꯭ꯂꯣꯀꯀꯣꯇꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯁꯣꯔꯁ ꯑꯃꯗꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯀꯣꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯕ꯭ꯂꯣꯀꯀꯣꯠ꯫

ꯀꯣꯠ ꯑꯣꯏꯅꯥ HTML<blockquote> ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀꯨꯄꯁꯤꯜꯂꯨ꯫ ꯁ꯭ꯠꯔꯦꯠ ꯀꯣꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯔꯤꯀꯃꯦꯟꯗ ꯇꯧꯔꯤ ꯃꯗꯨꯗꯤ .<p>

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ꯫

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯑꯃꯗꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇ ꯍꯣꯡꯏ꯫<blockquote> .

ꯁꯣꯔꯁ ꯑꯃꯒꯤ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯥ꯫

<footer>ꯁꯣꯔꯁ ꯑꯗꯨ ꯈꯪꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯁꯣꯔꯁ ꯋꯥꯔꯛ ꯑꯗꯨꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ <cite>.

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯤ꯫

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯗꯤꯁꯞꯂꯦꯁꯤꯡ꯫

.blockquote-reverseꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯩꯕꯥ ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯤ꯫

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯅꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯑꯣꯔꯗꯔ ꯑꯗꯨ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯔꯨ ꯑꯣꯏꯗꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
- ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ ꯅꯦꯀꯦ꯫
- ꯄꯨꯔꯨꯁ ꯁꯣꯗꯦꯂꯁ ꯑꯂꯠꯔꯤꯁꯤꯁ꯫
- ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯂꯥꯑꯣꯔꯤꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯁꯦꯝ꯫
- ꯑꯦꯛ ꯇ꯭ꯔꯤꯁ꯭ꯇꯤꯛ ꯂꯤꯕꯦꯔꯣ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯠ꯫
ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫

<ul>
  <li>...</li>
</ul>

ꯑꯣꯔꯗꯔ ꯇꯧꯈ꯭ꯔꯦ꯫

ꯑꯣꯔꯗꯔ ꯑꯗꯨꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯇꯧꯔꯤꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫

<ol>
  <li>...</li>
</ol>

ꯑꯅꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ꯫

list-styleꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯃꯁꯨꯡ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ (ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡ ꯈꯛꯇꯗꯥ)꯫ ꯃꯁꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯆꯠꯅꯒꯅꯤ , ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛꯇꯁꯨ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯒꯅꯤ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
- ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ ꯅꯦꯀꯦ꯫
- ꯄꯨꯔꯨꯁ ꯁꯣꯗꯦꯂꯁ ꯑꯂꯠꯔꯤꯁꯤꯁ꯫
- ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯂꯥꯑꯣꯔꯤꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯁꯦꯝ꯫
- ꯑꯦꯛ ꯇ꯭ꯔꯤꯁ꯭ꯇꯤꯛ ꯂꯤꯕꯦꯔꯣ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯠ꯫
ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫

<ul class="list-unstyled">
  <li>...</li>
</ul>

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯂꯤꯁ꯭ꯇꯀꯤ ꯑꯥꯏꯇꯦꯝ ꯄꯨꯝꯅꯃꯛ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯊꯝꯃꯨ display: inline-block;ꯑꯃꯁꯨꯡ ꯃꯉꯥꯂꯒꯤ ꯄꯦꯗꯤꯡ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯝꯃꯨ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ꯫
ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ꯫
ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ꯫

<ul class="list-inline">
  <li>...</li>
</ul>

ꯋꯥꯔꯣꯜ

ꯃꯈꯣꯌꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯔꯃꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ꯫

ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫: ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯏꯎꯏꯁꯃꯣꯗ꯫: ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯑꯥꯏꯗꯤ ꯂꯤꯒꯨꯂꯥ ꯄꯣꯔꯇꯥ ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫; ꯗꯣꯅꯦꯛ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ ꯅꯟ ꯃꯤ ꯄꯣꯔꯇꯥ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯑꯦꯠ ꯑꯦꯒꯦꯠ ꯃꯦꯇꯁ꯫
ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯄꯣꯔꯇꯥ꯫: ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯇꯧꯕꯥ꯫

<dl>ꯂꯥꯏꯟ ꯑꯞ ꯁꯥꯏꯗ-ꯕꯥꯏ-ꯁꯥꯏꯗꯇꯥ ꯇꯔꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯅꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫ ꯗꯤꯐꯣꯜꯇ sꯒꯨꯝꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯗꯨꯅꯥ ꯍꯧꯏ <dl>, ꯑꯗꯨꯕꯨ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨ ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯇꯧꯕꯤꯌꯨ꯫

ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫: ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯏꯎꯏꯁꯃꯣꯗ꯫: ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯑꯥꯏꯗꯤ ꯂꯤꯒꯨꯂꯥ ꯄꯣꯔꯇꯥ ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫; ꯗꯣꯅꯦꯛ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ ꯅꯟ ꯃꯤ ꯄꯣꯔꯇꯥ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯑꯦꯠ ꯑꯦꯒꯦꯠ ꯃꯦꯇꯁ꯫
ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯄꯣꯔꯇꯥ꯫: ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫
ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ꯫: ꯐꯨꯁꯦ ꯗꯥꯄꯤꯕꯁ, ꯇꯦꯂꯁ ꯑꯦ.ꯁꯤ.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ꯑꯣꯇꯣ-ꯇ꯭ꯔꯟꯀꯦꯇꯤꯡ ꯇꯧꯕꯥ꯫

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯅꯥ text-overflow. ꯑꯄꯤꯀꯄꯥ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ, ꯃꯈꯣꯌ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ ꯂꯦꯑꯥꯎꯇꯇꯥ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯀꯣꯗꯀꯤ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯅꯤꯄꯦꯠꯁꯤꯡ ꯑꯁꯤ <code>.

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, <section>ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯒꯗꯕꯅꯤ꯫

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ꯌꯨꯖꯔ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ꯫

<kbd>ꯃꯍꯧꯁꯥꯅꯥ ꯀꯤꯕꯣꯔꯗꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯏꯅꯄꯨꯠ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ, cdꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ ꯇꯥꯏꯞ ꯇꯧ꯫
ꯁꯦꯇꯤꯡꯁꯤꯡ ꯑꯦꯗꯤꯠ ꯇꯧꯅꯕꯥ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ꯫ 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>

ꯕꯦꯁꯤꯛ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫

<pre>ꯀꯣꯗꯀꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯣꯗꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯉ꯭ꯒꯜ ꯕ꯭ꯔꯦꯀꯦꯠ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯣꯌꯗꯅꯥ ꯑꯦꯁ꯭ꯀꯦꯞ ꯇꯧꯕꯤꯌꯨ꯫

<p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ .pre-scrollableꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ, ꯃꯁꯤꯅꯥ 350pxꯒꯤ ꯃꯦꯛꯁ-ꯍꯥꯏꯠ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ y-ꯑꯦꯛꯁꯤꯁ ꯁ꯭ꯛꯔꯣꯂꯕꯥꯔ ꯑꯃꯥ ꯄꯤꯒꯅꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ <var>ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

y = m x + ꯕꯤ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ꯫

ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯝ ꯑꯃꯗꯒꯤ ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ <samp>ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯇꯦꯛꯁꯠ ꯑꯁꯤ ꯀꯝꯞꯌꯨꯇꯔ ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯝ ꯑꯃꯗꯒꯤ ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯕꯦꯁꯤꯛ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛ—ꯂꯥꯏꯠ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯚꯥꯏꯗꯔ ꯈꯛꯇꯒꯤ ꯑꯣꯏꯅꯥ—ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ .tableꯑꯁꯤ <table>. ꯃꯁꯤ ꯁꯨꯄꯔ ꯔꯤꯗꯟꯗꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯕꯨ ꯀꯦꯂꯦꯟꯗꯔ ꯑꯃꯁꯨꯡ ꯗꯦꯠ ꯄꯤꯀꯔꯒꯨꯝꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇꯦꯕꯂꯁꯤꯡ ꯄꯥꯛ ꯁꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯁꯤ ꯌꯦꯡꯂꯒꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯁ꯭ꯇꯝ ꯇꯦꯕꯜ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯥꯏꯁꯣꯂꯦꯠ ꯇꯧꯅꯕꯥ ꯋꯥꯔꯦꯞ ꯂꯧꯔꯦ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯇꯦꯕꯜ ꯀꯦꯄꯁꯟ꯫
#	ꯑꯍꯥꯟꯕ ꯃꯤꯡ	ꯑꯀꯣꯟꯕ ꯃꯤꯡ	ꯌꯨꯖꯔꯅꯦꯝ꯫
꯱	ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫	ꯑꯣꯇꯣ꯫	@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
꯲	ꯌꯥꯀꯣꯕ꯫	ꯊꯣꯔꯅꯇꯟ꯫	@ꯑꯅꯣꯏꯕ
꯳	ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫	ꯄꯥꯈꯪ ꯑꯗꯨ꯫	@twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫

<table class="table">
  ...
</table>

ꯁ꯭ꯠꯔꯥꯏꯞ ꯑꯣꯏꯕꯥ ꯔꯣꯁꯤꯡ꯫

.table-stripedꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯕꯜ ꯔꯣ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯖꯦꯕ꯭ꯔꯥ-ꯁ꯭ꯠꯔꯥꯏꯄꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ <tbody>.

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

:nth-childꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯸ꯗꯥ ꯐꯪꯗꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯁꯦꯂꯦꯛꯇꯔꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ꯫

#	ꯑꯍꯥꯟꯕ ꯃꯤꯡ	ꯑꯀꯣꯟꯕ ꯃꯤꯡ	ꯌꯨꯖꯔꯅꯦꯝ꯫
꯱	ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫	ꯑꯣꯇꯣ꯫	@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
꯲	ꯌꯥꯀꯣꯕ꯫	ꯊꯣꯔꯅꯇꯟ꯫	@ꯑꯅꯣꯏꯕ
꯳	ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫	ꯄꯥꯈꯪ ꯑꯗꯨ꯫	@twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫

<table class="table table-striped">
  ...
</table>

ꯉꯃꯈꯩ ꯂꯩꯕꯥ ꯇꯦꯕꯜ꯫

.table-borderedꯇꯦꯕꯜ ꯑꯃꯁꯨꯡ ꯁꯦꯂꯁꯤꯡꯒꯤ ꯃꯥꯌꯀꯩ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯕꯣꯔꯗꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

#	ꯑꯍꯥꯟꯕ ꯃꯤꯡ	ꯑꯀꯣꯟꯕ ꯃꯤꯡ	ꯌꯨꯖꯔꯅꯦꯝ꯫
꯱	ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫	ꯑꯣꯇꯣ꯫	@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
꯲	ꯌꯥꯀꯣꯕ꯫	ꯊꯣꯔꯅꯇꯟ꯫	@ꯑꯅꯣꯏꯕ
꯳	ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫	ꯄꯥꯈꯪ ꯑꯗꯨ꯫	@twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫

<table class="table table-bordered">
  ...
</table>

ꯍꯣꯚꯔ ꯔꯣꯁꯤꯡ꯫

.table-hoverꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯇꯦꯕꯜ ꯔꯣꯁꯤꯡꯗꯥ ꯍꯣꯚꯔ ꯁ꯭ꯇꯦꯠ ꯑꯃꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ <tbody>.

#	ꯑꯍꯥꯟꯕ ꯃꯤꯡ	ꯑꯀꯣꯟꯕ ꯃꯤꯡ	ꯌꯨꯖꯔꯅꯦꯝ꯫
꯱	ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫	ꯑꯣꯇꯣ꯫	@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
꯲	ꯌꯥꯀꯣꯕ꯫	ꯊꯣꯔꯅꯇꯟ꯫	@ꯑꯅꯣꯏꯕ
꯳	ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫	ꯄꯥꯈꯪ ꯑꯗꯨ꯫	@twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫

<table class="table table-hover">
  ...
</table>

ꯀꯟꯗꯦꯟꯁꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯕꯜ꯫

.table-condensedꯁꯦꯜ ꯄꯦꯗꯤꯡ ꯑꯗꯨ ꯇꯪꯈꯥꯌꯗꯥ ꯀꯥꯄꯁꯤꯟꯗꯨꯅꯥ ꯇꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯀꯝꯄꯦꯛꯇ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

#	ꯑꯍꯥꯟꯕ ꯃꯤꯡ	ꯑꯀꯣꯟꯕ ꯃꯤꯡ	ꯌꯨꯖꯔꯅꯦꯝ꯫
꯱	ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫	ꯑꯣꯇꯣ꯫	@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
꯲	ꯌꯥꯀꯣꯕ꯫	ꯊꯣꯔꯅꯇꯟ꯫	@ꯑꯅꯣꯏꯕ
꯳	ꯂꯥꯔꯤ ꯗ꯭ꯌ ꯕꯥꯔꯗ꯫		@twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫

<table class="table table-condensed">
  ...
</table>

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯇꯦꯕꯜ ꯔꯣꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯦꯂꯁꯤꯡ ꯃꯆꯨ ꯁꯪꯍꯟꯅꯕꯥ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯀ꯭ꯂꯥꯁ	ꯋꯥꯔꯣꯜ
`.active`	ꯑꯀꯛꯅꯕꯥ ꯔꯣ ꯅꯠꯠꯔꯒꯥ ꯁꯦꯜ ꯑꯃꯗꯥ ꯍꯣꯚꯔ ꯃꯆꯨ ꯑꯗꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫
`.success`	ꯃꯥꯌꯄꯥꯛꯂꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯖꯤꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
`.info`	ꯅ꯭ꯌꯨꯠꯔꯤꯑꯦꯟꯇ ꯏꯅꯐꯣꯔꯃꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯍꯣꯡꯕꯥ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
`.warning`	ꯄꯨꯛꯅꯤꯡ ꯆꯪꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯕꯥ ꯆꯦꯀꯁꯤꯅꯋꯥ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
`.danger`	ꯈꯨꯗꯣꯡꯊꯤꯅꯤꯉꯥꯏ ꯑꯣꯏꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯅꯦꯒꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫

#	ꯀꯣꯂꯝ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯀꯣꯂꯝ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯀꯣꯂꯝ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
꯱	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯲	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯳	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯴	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯵	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯶	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯷	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯸	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
꯹	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫	ꯀꯣꯂꯃꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯇꯦꯕꯜ ꯔꯣ ꯅꯠꯠꯔꯒꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯦꯜ ꯑꯃꯗꯥ ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ ꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯇꯦꯕꯜ ꯔꯣ/ꯁꯦꯂꯗꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ) ꯅꯠꯠꯔꯒꯥ .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯍꯥꯌꯕꯁꯤ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯇꯦꯕꯂꯁꯤꯡ꯫

ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ (768pxꯒꯤ ꯃꯈꯥꯗꯥ) ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯅꯕꯥ .tableꯏꯟ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯔꯦꯞ ꯇꯧꯗꯨꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯇꯦꯕꯂꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫ .table-responsive768px ꯋꯥꯏꯗꯇꯒꯤ ꯍꯦꯟꯅꯥ ꯆꯥꯎꯕꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯗꯥ ꯌꯦꯡꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯇꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯈꯦꯠꯅꯕꯥ ꯑꯃꯠꯇꯥ ꯎꯕꯥ ꯐꯪꯂꯣꯏ꯫

ꯚꯔꯇꯤꯀꯦꯜ ꯀ꯭ꯂꯤꯄꯤꯡ/ ꯇ꯭ꯔꯉ꯭ꯀꯁꯟ ꯇꯧꯕꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯇꯦꯕꯂꯁꯤꯡꯅꯥ , ꯁꯤꯖꯤꯟꯅꯩ overflow-y: hidden, ꯃꯁꯤꯅꯥ ꯇꯦꯕꯂꯒꯤ ꯃꯈꯥꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯊꯛꯀꯤ ꯃꯐꯃꯁꯤꯡꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯆꯠꯄꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀ꯭ꯂꯤꯞ ꯇꯧꯏ꯫ ꯃꯔꯨꯑꯣꯏꯅꯥ, ꯃꯁꯤꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯋꯤꯖꯇꯦꯃꯁꯤꯡ ꯀ꯭ꯂꯤꯞ ꯑꯣꯐ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯐꯥꯏꯔꯐꯛꯁ ꯑꯃꯁꯨꯡ ꯐꯤꯜꯗꯁꯦꯇꯁꯤꯡ꯫

widthꯐꯥꯏꯔꯐꯛꯁꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯇꯦꯕꯂꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯕꯥ ꯑꯁꯣꯅꯕꯥ ꯐꯤꯜꯗꯁꯦꯠ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯈꯔꯥ ꯂꯩ꯫ ꯃꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯄꯤꯗꯕꯥ ꯐꯥꯏꯔꯐꯛꯁ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯍꯦꯛ ꯑꯃꯥ ꯌꯥꯑꯣꯗꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯗꯦ :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ, ꯁ꯭ꯇꯦꯛ ꯑꯣꯚꯔꯐ꯭ꯂꯣꯒꯤ ꯄꯥꯎꯈꯨꯝ ꯑꯁꯤ ꯄꯥꯕꯤꯌꯨ .

#	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
꯱	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫
꯲	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫
꯳	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫

#	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫	ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
꯱	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫
꯲	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫
꯳	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫	ꯇꯦꯕꯜ ꯁꯦꯜ꯫

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯅꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯈꯔꯥ ꯐꯪꯏ꯫ ꯇꯦꯛꯁꯇꯥꯏꯜ <input>, <textarea>, ꯑꯃꯁꯨꯡ <select>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ .form-controlꯑꯣꯏꯅꯥ ꯁꯦꯠ width: 100%;ꯇꯧꯏ꯫ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯗꯨ .form-groupꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ ꯔꯦꯞ ꯇꯧ꯫

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ꯐꯣꯔꯝ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ꯫

ꯐꯣꯔꯝ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯑꯁꯤ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯃꯤꯛꯁ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ . ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯞ ꯑꯗꯨ ꯐꯣꯔꯝ ꯒ꯭ꯔꯨꯄꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧ꯫

ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯝ꯫

ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯏꯅꯂꯥꯏꯟ-ꯕ꯭ꯂꯣꯛ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ .form-inlineꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ (ꯃꯁꯤ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯃꯁꯤ ꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ 768px ꯄꯥꯀꯄꯥ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯐꯣꯔꯃꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯆꯠꯅꯩ꯫<form>

ꯀꯁ꯭ꯇꯝ ꯋꯥꯏꯗꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯁꯦꯂꯦꯛꯇꯁꯤꯡ width: 100%;ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯈ꯭ꯔꯦ꯫ ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯗꯨ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫width: auto; ꯇꯧꯏ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯂꯦꯑꯥꯎꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯑꯍꯦꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯋꯥꯏꯗꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯌꯥꯑꯣꯗ꯭ꯔꯕꯗꯤ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯃꯁꯤꯡꯗꯥ ꯑꯋꯥꯕꯥ ꯃꯥꯌꯣꯛꯅꯒꯅꯤ꯫ .sr-onlyꯍꯥꯌꯔꯤꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯃꯁꯤꯡ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯄꯤꯕꯒꯤ ꯃꯈꯥ ꯇꯥꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯄꯥꯝꯕꯩꯁꯤꯡ ꯂꯩꯔꯤ, ꯃꯗꯨꯗꯤ aria-label, aria-labelledbyꯅꯠꯔꯒꯥ titleꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯠꯔꯕꯗꯤ, ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ placeholderꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯇꯦꯡ ꯂꯧꯕꯥ ꯌꯥꯏ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ, ꯑꯗꯨꯕꯨ placeholderꯑꯇꯩ ꯂꯦꯕꯦꯂꯤꯡ ꯃꯦꯊꯗꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ꯫

ꯐꯣꯔꯃꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯗꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯃꯥꯡꯗꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ .form-horizontal(ꯃꯁꯤ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ <form>). ꯃꯁꯤ ꯇꯧꯕꯅꯥ .form-groups ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯔꯣ ꯑꯣꯏꯅꯥ ꯂꯃꯆꯠ ꯁꯥꯖꯠ ꯍꯣꯡꯍꯜꯂꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯐꯣꯔꯝ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯗꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯏꯅꯄꯨꯠꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ, ꯇꯦꯛꯁꯇꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯏꯅꯄꯨꯠ ꯐꯤꯜꯗꯁꯤꯡ꯫ HTML5 ꯃꯈꯜ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ꯑꯃꯁꯨꯡ color.

ꯇꯥꯏꯞ ꯗꯤꯛꯂꯥꯔꯦꯁꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ typeꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯂꯥꯎꯊꯣꯛꯂꯕꯈꯛꯇꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯒꯅꯤ꯫

<input type="text" class="form-control" placeholder="Text input">

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

ꯇꯦꯛꯁꯇꯥꯏꯂꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯑꯃꯁꯨꯡ/ꯅꯠꯔꯒꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯟꯇꯤꯒ꯭ꯔꯦꯇꯦꯗ ꯇꯦꯛꯁꯠ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯅꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ <input>, ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯞ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯆꯦꯛ ꯇꯧꯕꯤꯌꯨ .

ꯇꯦꯛꯁꯇꯥꯏꯜ ꯑꯦꯔꯤꯌꯥ꯫

ꯇꯦꯛꯁꯇꯀꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ꯫ rowsꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯣꯡꯗꯣꯀꯎ꯫

<textarea class="form-control" rows="3"></textarea>

ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯫

ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯁꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯗꯥ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯌꯥ ꯈꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ, ꯑꯗꯨꯒꯥ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ ꯀꯌꯥ ꯑꯃꯗꯒꯤ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯈꯅꯕꯅꯤ꯫

ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯍꯣꯚꯔꯗꯥ "ꯑꯌꯥꯕꯥ ꯄꯤꯗꯕꯥ" ꯀꯔꯁꯔ ꯑꯃꯥ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ <label>, ꯅꯍꯥꯛꯅꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯗꯨꯗꯥ .disabledꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ .radio, .radio-inline, .checkbox, ꯅꯠꯠꯔꯒꯥ .checkbox-inline.

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ (ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ)

ꯑꯣꯄꯁꯟ ꯑꯃꯅꯥ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯤ—ꯃꯁꯤ ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ ꯑꯣꯏꯔꯤꯕꯅꯣ ꯍꯥꯌꯕꯗꯨ ꯁꯣꯏꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ꯫

ꯑꯣꯄꯁꯟ ꯑꯅꯤ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ꯫

ꯑꯣꯄꯁꯟ ꯑꯅꯤ ꯑꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯈꯅꯕꯅꯥ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯗꯤꯁꯦꯂꯦꯛꯇ ꯇꯧꯒꯅꯤ꯫

ꯑꯣꯄꯁꯟ ꯑꯍꯨꯝ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ꯫

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ꯏꯅꯂꯥꯏꯟ ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯂꯥꯏꯟ ꯑꯗꯨꯗꯥ ꯊꯣꯀꯄꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯆꯦꯀꯕꯣꯛꯁ ꯅꯠꯠꯔꯒꯥ ꯔꯦꯗꯤꯑꯣꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯗꯥ .checkbox-inlineꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫.radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ꯂꯦꯕꯦꯜ ꯇꯦꯛꯁꯠ ꯌꯥꯎꯗꯕꯥ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯫

ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯠꯇꯥ ꯂꯩꯠꯔꯕꯗꯤ <label>, ꯏꯅꯄꯨꯠ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯊꯥꯖꯕꯥ ꯌꯥꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯏ꯫ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯅꯟ-ꯏꯅꯂꯥꯏꯟ ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣ ꯈꯛꯇꯗꯥ ꯊꯕꯛ ꯇꯧꯔꯤ꯫ aria-labelꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ) ꯍꯧꯖꯤꯀꯁꯨ ꯃꯈꯜ ꯑꯃꯒꯤ ꯂꯦꯕꯦꯜ ꯄꯤꯕꯥ ꯍꯥꯌꯕꯁꯤ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ꯈꯅꯒꯠꯂꯤ꯫

ꯅꯦꯇꯤꯕ ꯁꯦꯂꯦꯛꯇ ꯃꯦꯅꯨ ꯀꯌꯥꯗꯥ-ꯃꯈꯣꯌꯅꯥ ꯁꯥꯐꯥꯔꯤ ꯑꯃꯁꯨꯡ ꯀ꯭ꯔꯣꯃꯗꯥ- border-radiusꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯗꯕꯥ ꯒꯣꯜꯗ ꯀꯣꯔꯅꯔꯁꯤꯡ ꯂꯩ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯂꯩꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ multiple, ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯎꯠꯂꯤ꯫

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ꯁ꯭ꯇꯦꯇꯤꯛ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ꯫

ꯐꯣꯔꯝ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯣꯔꯝ ꯂꯦꯕꯦꯜ ꯑꯃꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯄ꯭ꯂꯦꯟ ꯇꯦꯛꯁꯠ ꯊꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ, .form-control-staticꯀ꯭ꯂꯥꯁ ꯑꯗꯨ <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ꯐꯣꯀꯁ ꯁ꯭ꯇꯦꯠ꯫

ꯑꯩꯈꯣꯌꯅꯥ outlineꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯈꯔꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯂꯧꯊꯣꯀꯏ ꯑꯃꯁꯨꯡ box-shadowꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ :focus.

ꯗꯦꯃꯣ ꯇꯧꯕꯥ꯫`:focus` ꯔꯥꯖ꯭ꯌ꯫

ꯃꯊꯛꯀꯤ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯏꯅꯄꯨꯠ ꯑꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯣꯀꯨꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ :focusꯔꯥꯖ꯭ꯌ ꯑꯁꯤ .form-control.

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯁ꯭ꯇꯦꯠ꯫

disabledꯌꯨꯖꯔ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯏꯅꯄꯨꯠ ꯑꯃꯗꯥ ꯕꯨꯂꯦꯇꯤꯟ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯏ ꯑꯃꯁꯨꯡ not-allowedꯀꯔꯁꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯐꯤꯜꯗꯁꯦꯇꯁꯤꯡ꯫

ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯄꯨꯝꯅꯃꯛ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ disabledꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯗꯨ aꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫<fieldset><fieldset>

ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯀꯦꯚꯦꯠ ꯇꯧꯕꯥ꯫`<a>`

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯅꯥ aꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯅꯦꯇꯤꯕ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ( <input>, <select>ꯑꯃꯁꯨꯡ <button>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ) ꯄꯨꯝꯅꯃꯛ <fieldset disabled>ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯂꯧꯒꯅꯤ, ꯃꯈꯣꯌꯗꯥ ꯀꯤꯕꯣꯔꯗ ꯑꯃꯁꯨꯡ ꯃꯥꯎꯁ ꯏꯟꯇꯔꯦꯛꯁꯟ ꯑꯅꯤꯃꯛ ꯊꯤꯡꯒꯅꯤ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯝ ꯑꯗꯨꯗꯥ <a ... class="btn btn-*">ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯁꯨ ꯌꯥꯑꯣꯔꯕꯗꯤ, ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ pointer-events: none. ꯕꯇꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯦꯇꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯁꯦꯛꯁꯟ ꯑꯁꯤꯗꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ (ꯑꯃꯁꯨꯡ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯦꯉ꯭ꯀꯔ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯁꯕ-ꯁꯦꯛꯁꯟ ꯑꯁꯤꯗꯥ), CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯦꯔꯥ 18 ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ 11ꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗ꯭ꯔꯤ, ꯑꯃꯁꯨꯡ ꯃꯥꯏꯄꯥꯀꯈꯤ꯫ 't ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯅꯠꯔꯒꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯕꯥ ꯉꯃꯍꯟꯗꯕꯥ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯦꯐ ꯑꯣꯏꯅꯕꯒꯤꯗꯃꯛ, ꯑꯁꯤꯒꯨꯝꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯅꯤ ꯑꯗꯨꯕꯨ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯱꯱ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯅꯥ disabledꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ <fieldset>. ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯐꯤꯜꯗꯁꯦꯠ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ꯔꯤꯗꯑꯣꯅꯂꯤ ꯁ꯭ꯇꯦꯠ꯫

readonlyꯏꯅꯄꯨꯠꯀꯤ ꯚꯦꯜꯌꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯏꯅꯄꯨꯠ ꯑꯃꯗꯥ ꯕꯨꯂꯦꯟ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯄꯆꯤꯜꯂꯨ . ꯔꯤꯗ-ꯑꯣꯅꯂꯤ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯏ (ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯨꯝꯅꯥ), ꯑꯗꯨꯕꯨ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯀꯔꯁꯔ ꯑꯗꯨ ꯊꯝꯃꯨ꯫

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ꯫

ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ ꯑꯦꯁꯣꯁꯤꯑꯦꯠ ꯇꯧꯕꯥ꯫

aria-describedbyꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ ꯑꯁꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯁꯤꯖꯤꯟꯅꯕꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯒꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯔꯤ ꯂꯩꯅꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯌꯨꯖꯔꯅꯥ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯟꯠꯔꯣꯂꯗꯥ ꯆꯪꯂꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯍꯦꯜꯄ ꯇꯦꯛꯁ ꯑꯁꯤ ꯂꯥꯎꯊꯣꯛꯀꯅꯤ꯫

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ꯚꯦꯂꯤꯗꯦꯁꯟ ꯔꯥꯖ꯭ꯌꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯗꯥ ꯑꯦꯔꯥꯔ, ꯋꯥꯔꯅꯤꯡ, ꯑꯃꯁꯨꯡ ꯃꯥꯌ ꯄꯥꯀꯄꯒꯤ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯌꯥꯎꯏ꯫ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ, .has-warning, .has-error, ꯅꯠꯠꯔꯒꯥ .has-successꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ .control-label, .form-control, ꯑꯃꯁꯨꯡ .help-blockꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯐꯪꯒꯅꯤ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯂꯔꯕ꯭ꯂꯥꯏꯟꯗ ꯌꯨꯖꯔꯁꯤꯡꯗꯥ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯦꯠ ꯌꯧꯍꯅꯕꯥ꯫

ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯒꯤ ꯐꯤꯚꯝ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ, ꯃꯆꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ - ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯒꯨꯝꯕꯥ - ꯅꯠꯠꯔꯒꯥ ꯃꯆꯨ ꯁꯪꯂꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫

ꯁ꯭ꯇꯦꯇꯀꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯁꯨ ꯁꯣꯌꯗꯅꯥ ꯐꯪꯍꯅꯕꯥ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯒꯤ ꯇꯦꯛꯁꯠ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯁ꯭ꯇꯦꯇꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯍꯤꯟꯇ ꯑꯃꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯌꯥꯏ <label>(ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯣꯗ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ), ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯑꯃꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯌꯥꯏ (ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ .sr-only- ꯒ꯭ꯂꯥꯏꯐꯤꯀꯅꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ ), ꯅꯠꯠꯔꯒꯥ ꯑꯃꯥ ꯄꯤꯗꯨꯅꯥ꯫ ꯑꯍꯦꯅꯕꯥ ꯃꯇꯦꯡ ꯇꯦꯛꯁꯠ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯁꯣꯌꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯗꯁꯨ aria-invalid="true"ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯄꯤꯕꯥ ꯌꯥꯏ꯫

ꯃꯥꯌ ꯄꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ꯫ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯕ꯭ꯔꯦꯛ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯟ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯠꯄꯥ ꯌꯥꯕꯥ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯇꯀꯤ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ꯫

ꯋꯥꯔꯅꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ꯫

ꯑꯁꯣꯌꯕꯥ ꯂꯩꯕꯥ ꯏꯅꯄꯨꯠ꯫

ꯃꯥꯌ ꯄꯥꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯦꯀꯕꯣꯛꯁ꯫

ꯋꯥꯔꯅꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯦꯀꯕꯣꯛꯁ꯫

ꯑꯁꯣꯌꯕꯥ ꯂꯩꯕꯥ ꯆꯦꯀꯕꯣꯛꯁ꯫

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ꯑꯣꯄꯁꯅꯦꯜ ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯑꯗꯣꯝꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯐꯤꯗꯕꯦꯛ ꯑꯥꯏꯀꯅꯁꯤꯡꯁꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ .has-feedbackꯑꯃꯁꯨꯡ ꯑꯆꯨꯝꯕꯥ ꯑꯥꯏꯀꯟ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

<input class="form-control">ꯐꯤꯗꯕꯦꯛ ꯑꯥꯏꯀꯅꯁꯤꯡꯅꯥ ꯇꯦꯛꯁꯇꯥꯏꯜ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

ꯑꯥꯏꯀꯅꯁꯤꯡ, ꯂꯦꯕꯦꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

ꯂꯦꯕꯦꯜ ꯌꯥꯑꯣꯗꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯑꯦꯗ-ꯑꯣꯟ ꯑꯃꯥ ꯂꯩꯕꯥ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯐꯤꯗꯕꯦꯛ ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯤ ꯃꯦꯅꯨꯑꯦꯜ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯃꯔꯃꯁꯤꯡꯅꯥ ꯏꯅꯄꯨꯠ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯄꯤꯅꯕꯥ ꯑꯗꯣꯝꯅꯥ ꯀꯟꯅꯥ ꯇꯀꯁꯤꯜꯂꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯎꯠꯄꯥ ꯊꯤꯡꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯃꯈꯣꯌꯕꯨ .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯦꯕꯦꯜ ꯌꯥꯎꯗꯅꯥ ꯇꯧꯒꯗꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ, topꯐꯤꯗꯕꯦꯛ ꯑꯥꯏꯀꯅꯒꯤ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧ꯫ ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, rightꯅꯍꯥꯛꯀꯤ ꯑꯦꯗꯗꯣꯅꯒꯤ ꯄꯥꯛ-ꯆꯥꯎꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯄꯤꯛꯁꯦꯜ ꯚꯦꯜꯌꯨ ꯑꯃꯗꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯔꯣ.

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯥꯏꯀꯟ ꯑꯁꯤꯒꯤ ꯑꯔꯊ ꯌꯧꯍꯅꯕꯥ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯑꯥꯏꯀꯟ ꯑꯃꯒꯤ ꯑꯔꯊ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ, ꯑꯍꯦꯅꯕꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ .sr-onlyꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯒꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯃꯔꯤ ꯂꯩꯅꯍꯅꯒꯗꯕꯅꯤ aria-describedby. <label>ꯅꯠꯠꯔꯒꯥ, ꯑꯔꯊ ꯑꯗꯨ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯀꯛꯅꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯦꯟꯠꯔꯤ ꯐꯤꯜꯗ ꯑꯃꯒꯤꯗꯃꯛ ꯋꯥꯔꯅꯤꯡ ꯑꯃꯥ ꯂꯩ ꯍꯥꯌꯕꯒꯤ ꯋꯥꯐꯝ) ꯑꯗꯨ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯇꯁꯦꯡꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯄꯒꯨꯝꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯐꯣꯡꯗꯣꯀꯄꯥ ꯁꯣꯌꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯍꯥꯟꯅꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ <label>ꯇꯦꯛꯁꯠ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯄꯅꯈ꯭ꯔꯕꯁꯨ, ꯃꯊꯛꯇꯥ ꯄꯅꯈ꯭ꯔꯤꯕꯥ ꯇꯦꯛꯅꯤꯛ ꯑꯁꯤ ( .sr-onlyꯇꯦꯛꯁ ꯑꯃꯁꯨꯡ aria-describedby) ꯑꯁꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ ꯌꯥꯑꯣꯍꯅꯈ꯭ꯔꯦ꯫

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯃꯁꯤꯡꯗꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯥꯏꯀꯅꯁꯤꯡ꯫

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯥꯏꯀꯅꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯒꯤ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ <label>ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ (ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯒꯨꯝꯕꯥ ꯑꯇꯩ ꯂꯦꯕꯦꯂꯤꯡ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ aria-label), ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯥꯏꯀꯟ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯒꯅꯤ꯫

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ꯫

ꯑꯁꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯍꯥꯏꯠꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯕꯥ .input-lg, ꯑꯃꯁꯨꯡ .col-lg-*.

ꯍꯥꯏꯠ ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯕꯇꯟ ꯁꯥꯏꯖꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯍꯦꯟꯅꯥ ꯋꯥꯡꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯨꯞꯄꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯐꯣꯔꯝ ꯒ꯭ꯔꯨꯞ ꯁꯥꯏꯖꯁꯤꯡ꯫

.form-horizontalꯂꯦꯕꯦꯂꯁꯤꯡ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯅꯨꯡꯗꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ .form-group-lgꯅꯠꯠꯔꯒꯥ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ꯀꯣꯂꯝ ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯑꯄꯥꯝꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯁꯤꯡ ꯐꯖꯅꯥ ꯆꯠꯅꯍꯟꯅꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀꯂꯃꯁꯤꯡꯗꯥ, ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯄꯦꯔꯦꯟꯇ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯔꯦꯞ ꯇꯧ꯫

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ꯕꯇꯟ ꯇꯦꯒꯁꯤꯡ꯫

<a>, <button>, ꯅꯠꯠꯔꯒꯥ <input>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯕꯇꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ꯀꯟꯇꯦꯛꯁ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯑꯣꯏꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

<a>ꯕꯇꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯟ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯒꯤ ꯅꯦꯚ ꯑꯃꯁꯨꯡ ꯅꯦꯚꯕꯥꯔ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ <button>ꯈꯛꯇꯃꯛ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫<button>

ꯕꯇꯟ ꯑꯣꯏꯅꯥ ꯊꯕꯛ ꯇꯧꯔꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ <a>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯕꯇꯟ ꯑꯣꯏꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ – ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯗꯣꯀꯨꯃꯦꯟꯇ ꯅꯠꯔꯒꯥ ꯁꯦꯛꯁꯟ ꯑꯃꯗꯥ ꯆꯠꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯏꯟ-ꯄꯦꯖ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ – ꯃꯈꯣꯌꯗꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ role="button".

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯌꯥꯝꯅꯥ ꯇꯀꯁꯤꯜꯂꯤ꯫<button> ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯟꯗꯔꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ

ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ, ꯐꯥꯏꯔꯐꯛꯁ <30ꯗꯥ ꯕꯥꯒ ꯑꯃꯥline-height ꯂꯩ ꯃꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯗꯥ of -ꯕꯦꯖ ꯕꯇꯅꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯕꯥ ꯉꯃꯍꯟꯗꯦ <input>, ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯐꯥꯏꯔꯐꯛꯁꯇꯥ ꯂꯩꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨꯒꯥ ꯆꯞ ꯃꯥꯟꯅꯗꯦ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯕꯇꯟ ꯑꯃꯥ ꯊꯨꯅꯥ ꯁꯦꯝꯅꯕꯥ ꯂꯩꯔꯤꯕꯥ ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯕꯇꯟ ꯑꯃꯗꯥ ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ ꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯕꯇꯟ ꯑꯗꯨꯒꯤ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨꯗꯒꯤ) ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯏ, ꯅꯠꯠꯔꯒꯥ .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ ꯍꯥꯌꯕꯁꯤ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ꯫

ꯁꯥꯏꯖꯁꯤꯡ꯫

ꯐꯦꯟꯁꯤ ꯑꯆꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯄꯤꯀꯄꯥ ꯕꯇꯅꯁꯤꯡ? ꯑꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ .btn-lg, .btn-sm, ꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.btn-xs

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯂꯒꯤ ꯕꯇꯅꯁꯤꯡ ꯁꯦꯝꯃꯨ—ꯃꯃꯥ-ꯃꯄꯥ ꯑꯃꯒꯤ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯌꯧꯍꯅꯕꯥ— ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯔꯥꯖ꯭ꯌ꯫

ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯗꯨ ꯄ꯭ꯔꯦꯁ ꯇꯧꯗꯨꯅꯥ (ꯍꯦꯟꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ, ꯍꯦꯟꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕꯣꯔꯗꯔ, ꯑꯃꯁꯨꯡ ꯏꯅꯁꯦꯠ ꯁꯦꯗꯣꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ) ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ <button>ꯃꯁꯤ :active. ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ <a>, ꯃꯁꯤ .active. ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯁ꯭ꯇꯦꯠ ꯑꯗꯨ ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯔꯤꯞꯂꯤꯀꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯅꯍꯥꯛꯅꯥ s .activeꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ (ꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯌꯥꯎꯍꯅꯕꯥ ꯌꯥꯏ)꯫<button>aria-pressed="true"

ꯕꯇꯟ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ꯫

ꯃꯁꯤ ꯄ꯭ꯁꯨꯗꯣ-ꯀ꯭ꯂꯥꯁ ꯑꯣꯏꯕꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ :active, ꯑꯗꯨꯕꯨ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡ ꯑꯗꯨ ꯐꯣꯔꯁ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ, ꯃꯈꯥ ꯆꯠꯊꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ꯑꯦꯉ꯭ꯀꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ꯫

.activeꯀ꯭ꯂꯥꯁ ꯑꯗꯨ <a>ꯕꯇꯅꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯝꯔꯤ

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯁ꯭ꯇꯦꯠ꯫

opacity. _

ꯕꯇꯟ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ꯫

disabledꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ <button>ꯕꯇꯅꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ disabledꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ a ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯗꯤ <button>, ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯌꯥꯔ 9 ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯐꯤꯛꯁ ꯇꯧꯕꯥ ꯉꯃꯗꯕꯥ ꯑꯔꯥꯅꯕꯥ ꯇꯦꯛꯁꯠ-ꯁꯦꯗꯣꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯠ ꯒ꯭ꯔꯦ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ꯫

ꯑꯦꯉ꯭ꯀꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ꯫

.disabledꯀ꯭ꯂꯥꯁ ꯑꯗꯨ <a>ꯕꯇꯅꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯝꯔꯤ

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ꯑꯩꯈꯣꯌꯅꯥ .disabledꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯀꯃꯟ .activeꯀ꯭ꯂꯥꯁꯀꯥ ꯃꯥꯟꯅꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫

ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯀꯦꯚꯦꯠ ꯇꯧꯕꯥ꯫

ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ s ꯒꯤ pointer-events: noneꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ <a>, ꯑꯗꯨꯕꯨ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯦꯔꯥ ꯱꯸ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ, ꯅꯠꯔꯒꯥ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯱꯱ꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗ꯭ꯔꯤ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯁꯨ pointer-events: none, ꯀꯤꯕꯣꯔꯗ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯁꯤ ꯁꯣꯀꯍꯟꯗꯅꯥ ꯂꯩꯔꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯤꯠ ꯎꯗꯕꯥ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯦꯐ ꯑꯣꯏꯅꯕꯒꯤꯗꯃꯛ, ꯑꯁꯤꯒꯨꯝꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ꯫

.img-responsiveꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯳ꯗꯥ ꯂꯩꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯑꯣꯏꯍꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ max-width: 100%;, height: auto;ꯑꯃꯁꯨꯡ display: block;ꯏꯃꯦꯖ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯅꯥ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯅꯨꯡꯉꯥꯏꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯏ꯫

.img-responsiveꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ , .center-blockꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ .text-center. ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯍꯦꯜꯄꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫.center-block

ꯑꯦꯁ.ꯚꯤ.ꯖꯤ.ꯒꯤ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯥꯏ.ꯏ.꯸-꯱꯰

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯌꯥꯔ 8-10ꯗꯥ, SVG ꯏꯃꯦꯖꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ .img-responsiveꯃꯁꯤꯡ ꯌꯥꯝꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯏ꯫ ꯃꯁꯤ ꯐꯤꯛꯁ ꯇꯧꯅꯕꯥ, width: 100% \9;ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯐꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯃꯁꯤ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯦ ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯏꯃꯦꯖ ꯐꯣꯔꯃꯦꯠꯁꯤꯡꯗꯥ ꯀꯃꯞꯂꯤꯀꯦꯁꯟ ꯊꯣꯀꯍꯜꯂꯤ꯫

<img src="..." class="img-responsive" alt="Responsive image">

ꯏꯃꯦꯖ ꯃꯑꯣꯡꯁꯤꯡ꯫

<img>ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯐꯖꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯌꯥꯔ ꯸ꯗꯥ ꯒꯣꯜꯗ ꯀꯣꯔꯅꯔꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯂꯩꯇꯦ ꯍꯥꯌꯕꯁꯤ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯃꯆꯨꯁꯤꯡ꯫

ꯑꯦꯝꯄꯥꯁꯤꯁ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯆꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯁꯨ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯂꯤꯉ꯭ꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯨꯝꯅꯥ ꯍꯣꯚꯔꯗꯥ ꯑꯃꯝꯕꯥ ꯑꯣꯏꯒꯅꯤ꯫

ꯐꯨꯁꯦ ꯗꯥꯄꯤꯕꯨꯁ, ꯇꯦꯂꯁ ꯑꯦꯁꯤ ꯀꯔꯁꯁ ꯀꯃꯣꯗꯣ, ꯇꯣꯔꯇꯣꯔ ꯃꯧꯔꯤꯁ ꯅꯤꯚ꯫

ꯅꯨꯜꯂꯥꯝ ꯑꯥꯏꯗꯤ ꯗꯣꯂꯣꯔ ꯑꯥꯏꯗꯤ ꯅꯤꯚ ꯎꯜꯠꯔꯤꯁꯤꯁ ꯚꯦꯍꯤꯀꯨꯂꯥ ꯎꯠ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ꯫

ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ꯫

ꯃꯦꯁꯦꯅꯥꯁ ꯁꯦꯗ ꯗꯥꯏꯝ ꯑꯦꯒꯦꯠ ꯔꯤꯁꯁ ꯚꯦꯔꯤꯌꯁ ꯕ꯭ꯂꯥꯟꯗꯤꯠ ꯁꯤꯠ ꯑꯦꯃꯦꯠ ꯅꯟ ꯃꯦꯒ꯭ꯅꯥ꯫

ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫

ꯗꯣꯅꯦꯛ ꯎꯂꯝꯀꯣꯔꯄꯥꯔ ꯅꯨꯜꯂꯥ ꯅꯟ ꯃꯦꯇꯁ ꯑꯣꯛꯇꯔ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯦꯡꯅꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯝꯄꯥꯁꯤꯁ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯉꯃꯗꯦ꯫ ꯑꯌꯥꯝꯕꯥ ꯀꯦꯁꯁꯤꯡꯗꯗꯤ, ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯃꯗꯤ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯛꯁꯠ <span>ꯑꯗꯨ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ aꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯅꯤ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ ꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯅꯠꯠꯔꯒꯥ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯑꯣꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ (ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯛꯁꯠ/ꯃꯥꯔꯀꯑꯄꯇꯥ ꯍꯥꯟꯅꯅꯥ ꯂꯩꯔꯕꯥ ꯑꯔꯊ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯃꯄꯥꯉ꯭ꯒꯜ ꯀꯅꯈꯠꯍꯟꯅꯕꯥ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯩ), ꯅꯠꯠꯔꯒꯥ .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ꯫ .

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗꯁꯤꯡ꯫

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯇꯦꯛꯁꯠ ꯀꯂꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯑꯗꯨ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯐꯖꯅꯥ ꯁꯦꯠ ꯇꯧ꯫ ꯑꯦꯉ꯭ꯀꯔ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯛꯁꯠ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯨꯝꯅꯥ ꯍꯣꯚꯔꯗꯥ ꯑꯃꯝꯕꯥ ꯊꯣꯛꯀꯅꯤ꯫

ꯅꯨꯜꯂꯥꯝ ꯑꯥꯏꯗꯤ ꯗꯣꯂꯣꯔ ꯑꯥꯏꯗꯤ ꯅꯤꯚ ꯎꯜꯠꯔꯤꯁꯤꯁ ꯚꯦꯍꯤꯀꯨꯂꯥ ꯎꯠ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ꯫

ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ꯫

ꯃꯦꯁꯦꯅꯥꯁ ꯁꯦꯗ ꯗꯥꯏꯝ ꯑꯦꯒꯦꯠ ꯔꯤꯁꯁ ꯚꯦꯔꯤꯌꯁ ꯕ꯭ꯂꯥꯟꯗꯤꯠ ꯁꯤꯠ ꯑꯦꯃꯦꯠ ꯅꯟ ꯃꯦꯒ꯭ꯅꯥ꯫

ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫

ꯗꯣꯅꯦꯛ ꯎꯂꯝꯀꯣꯔꯄꯥꯔ ꯅꯨꯜꯂꯥ ꯅꯟ ꯃꯦꯇꯁ ꯑꯣꯛꯇꯔ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯦꯡꯅꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯁꯦꯂꯦꯛꯇꯔ ꯑꯃꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯉꯃꯗꯦ꯫ ꯀꯦꯁ ꯈꯔꯗꯗꯤ, ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯃꯗꯤ ꯅꯍꯥꯛꯀꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯀꯟꯇꯦꯟꯇ <div>ꯑꯗꯨ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ aꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯅꯤ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯃꯆꯨꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ , ꯃꯆꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯔꯊ ꯑꯃꯍꯦꯛꯇꯕꯨꯁꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯄ꯭ꯔꯖꯦꯟꯇꯦꯁꯅꯦꯜ ꯑꯣꯏꯗꯕꯥ ꯐꯣꯔꯃꯦꯠꯇꯥ ꯌꯧꯍꯅꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫

ꯑꯥꯏꯀꯟ ꯊꯤꯡꯖꯤꯜꯂꯨ꯫

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯔꯇꯁꯤꯡꯒꯨꯝꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯊꯥꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯖꯦꯅꯦꯔꯦꯜ ꯀ꯭ꯂꯣꯖ ꯑꯥꯏꯀꯟ ꯁꯤꯖꯤꯟꯅꯧ꯫

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ꯀꯦꯔꯦꯠꯁꯤꯡ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯃꯥꯌꯀꯩ ꯇꯥꯛꯅꯕꯥ ꯀꯦꯔꯦꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ ꯗꯤꯐꯣꯜꯇ ꯀꯦꯔꯦꯠ ꯑꯁꯤ ꯗ꯭ꯔꯣꯄꯑꯞ ꯃꯦꯅꯨꯁꯤꯡꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯔꯤꯚꯔꯁ ꯇꯧꯒꯅꯤ .

<span class="caret"></span>

ꯀꯨꯏꯛ ꯐ꯭ꯂꯣꯇꯁꯤꯡ꯫

ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯦꯡꯗꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯔꯣꯏꯕꯗꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫ !importantꯑꯁꯤ ꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤꯒꯤ ꯋꯥꯐꯃꯁꯤꯡ ꯊꯣꯀꯍꯟꯗꯅꯕꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯛꯁꯤꯟ ꯑꯣꯏꯅꯥꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ꯅꯕꯕꯥꯔꯁꯤꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯅꯠꯇꯦ꯫

ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ, .navbar-leftꯅꯠꯠꯔꯒꯥ .navbar-rightꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯅꯕꯕꯥꯔ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯁꯦꯟꯇꯔ ꯀꯟꯇꯦꯟꯇ ꯕ꯭ꯂꯣꯀꯁꯤꯡ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯥ display: blockꯑꯃꯁꯨꯡ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ margin. ꯃꯤꯛꯁꯤꯟ ꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫

ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥfloat ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯐꯖꯅꯥ ꯀ꯭ꯂꯤꯌꯔ ꯇꯧꯕꯥ s . ꯅꯤꯀꯣꯂꯥꯁ ꯒ꯭ꯌꯥꯂꯥꯘꯔꯅꯥ ꯃꯤꯌꯥꯝꯅꯥ ꯄꯥꯝꯅꯕꯥ ꯑꯣꯏꯍꯅꯈꯤꯕꯥ ꯃꯥꯏꯛꯔꯣ ꯀ꯭ꯂꯤꯌꯔꯐꯤꯛꯁ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫.clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ꯀꯟꯇꯦꯟꯇ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ( ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯌꯥꯑꯣꯅꯥ ) .showꯑꯃꯁꯨꯡ .hiddenꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯐꯣꯔꯁ ꯇꯧ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯅꯥ !importantꯁ꯭ꯄꯦꯁꯤꯐꯤꯁꯤꯇꯤ ꯀꯟꯐ꯭ꯂꯤꯛꯇꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯀꯨꯏꯛ ꯐ꯭ꯂꯣꯠꯁꯤꯡꯒꯨꯝꯅꯥ . ꯃꯈꯣꯌ ꯑꯁꯤ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯇꯣꯒꯂꯤꯡꯒꯤꯗꯃꯛ ꯈꯛꯇꯃꯛ ꯐꯪꯏ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯤꯛꯁꯤꯟ ꯑꯣꯏꯅꯥꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

.hideꯑꯁꯤ ꯐꯪꯏ, ꯑꯗꯨꯕꯨ ꯃꯁꯤꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯦ ꯑꯃꯁꯨꯡ v3.0.1 ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ꯫ ꯁꯤꯖꯤꯟꯅꯧ .hiddenꯅꯠꯠꯔꯒꯥ .sr-onlyꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, .invisibleꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯈꯛꯇꯃꯛ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯍꯥꯌꯕꯗꯤ ꯃꯁꯤꯒꯤ displayꯃꯣꯗꯤꯐꯥꯏꯗ ꯇꯧꯗꯦ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯐ꯭ꯂꯣꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ꯫

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔ ꯑꯃꯁꯨꯡ ꯀꯤꯕꯣꯔꯗ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯀꯟꯇꯦꯟꯇ꯫

ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡ ꯅꯠꯇꯕꯥ ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ .sr-only. ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯎꯠꯅꯕꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯈꯛꯇꯒꯤ ꯑꯣꯏꯕꯥ ꯌꯨꯖꯔ ꯑꯃꯅꯥ)ꯒꯥ .sr-onlyꯄꯨꯟꯅꯥ ꯆꯠꯃꯤꯟꯅꯧ꯫ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯕꯀꯁꯤꯡ.sr-only-focusable ꯉꯥꯛꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ . ꯃꯤꯛꯁꯤꯟ ꯑꯣꯏꯅꯥꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ꯏꯃꯦꯖ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ꯫

.text-hideꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯇꯦꯛꯁꯠ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯏꯃꯦꯖ ꯑꯃꯅꯥ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯅꯠꯠꯔꯒꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯃꯣꯕꯥꯏꯜ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇꯒꯤꯗꯃꯛ, ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯅꯥ ꯀꯟꯇꯦꯟꯇ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫

ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯅꯦꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯍꯣꯠꯅꯧ ꯑꯃꯁꯨꯡ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁꯥꯏꯠ ꯑꯗꯨꯒꯤ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯚꯔꯁꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯔꯣꯏꯗꯕꯅꯤ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯃꯈꯣꯌꯗꯨ ꯗꯤꯚꯥꯏꯁ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯄ꯭ꯔꯖꯦꯟꯇꯦꯁꯟ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯐꯪꯂꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯚꯤꯎꯄꯣꯔꯠ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯀꯟꯇꯦꯟꯇ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯂꯩꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯤꯉ꯭ꯒꯜ ꯅꯠꯠꯔꯒꯥ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

	ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ꯫ꯐꯣꯅꯁꯤꯡ (<꯷꯶꯸px) ꯌꯥꯑꯣꯔꯤ꯫	ꯑꯄꯤꯀꯄꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ꯫ꯇꯦꯕꯂꯁꯤꯡ (≥768px) ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫	ꯃꯤꯗꯤꯌꯝ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ꯫ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ (≥992px) ꯑꯁꯤꯅꯤ꯫	ꯑꯆꯧꯕꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ꯫ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ (≥1200px) ꯑꯁꯤꯅꯤ꯫
`.visible-xs-*`	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ
`.visible-sm-*`	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ
`.visible-md-*`	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ
`.visible-lg-*`	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫
`.hidden-xs`	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫
`.hidden-sm`	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫
`.hidden-md`	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫
`.hidden-lg`	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ

v3.2.0 ꯐꯥꯑꯣꯕꯗꯥ, .visible-*-*ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯑꯍꯨꯃꯗꯥ ꯂꯥꯀꯏ, displayꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯚꯦꯜꯌꯨ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯑꯃꯥ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯀꯥꯡꯂꯨꯞ꯫	ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

ꯑꯗꯨꯅꯥ, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ( xs) ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯂꯩꯔꯤꯕꯥ .visible-*-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ: .visible-xs-block, .visible-xs-inline, ꯑꯃꯁꯨꯡ .visible-xs-inline-block.

ꯀ꯭ꯂꯥꯁꯁꯤꯡ .visible-xs, .visible-sm, .visible-md, ꯑꯃꯁꯨꯡ .visible-lgꯃꯁꯤꯁꯨ ꯂꯩꯔꯤ, ꯑꯗꯨꯕꯨ v3.2.0 ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯇꯣꯒꯂꯤꯡꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ .visible-*-blockꯑꯍꯦꯅꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯀꯦꯁꯁꯤꯡ ꯅꯠꯇꯅꯥ, ꯆꯥꯎꯔꯥꯛꯅꯥ , ꯒꯥ ꯃꯥꯟꯅꯩ꯫<table>

ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯟꯇ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫	ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯃꯥ꯫	ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ꯫
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	ꯂꯣꯠꯇꯨꯅ ꯊꯕ	ꯎꯕꯥ ꯐꯪꯏ꯫
`.hidden-print`	ꯎꯕꯥ ꯐꯪꯏ꯫	ꯂꯣꯠꯇꯨꯅ ꯊꯕ

ꯀ꯭ꯂꯥꯁ .visible-printꯑꯁꯤꯁꯨ ꯂꯩꯔꯤ ꯑꯗꯨꯕꯨ v3.2.0 ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯗꯤꯞꯔꯦꯀꯦꯠ ꯇꯧꯔꯦ꯫ ꯃꯁꯤ -ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ .visible-print-blockꯑꯍꯦꯅꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯀꯦꯁꯁꯤꯡ ꯅꯠꯇꯅꯥ, ꯆꯥꯎꯔꯥꯛꯅꯥ , ꯒꯥ ꯃꯥꯟꯅꯩ꯫<table>

ꯇꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯀꯦꯁꯁꯤꯡ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯇꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯀꯎ ꯅꯠꯠꯔꯒꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯂꯣꯗ ꯇꯧ꯫

ꯌꯦꯡꯕꯥ ꯌꯥꯕꯥ...

ꯒ꯭ꯔꯤꯟ ꯆꯦꯀꯃꯥꯔꯀꯁꯤꯡꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯎꯕꯥ ꯐꯪꯂꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯏ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ꯫ ✔ x-small ꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯄꯤꯛꯄ ✔ ꯑꯄꯤꯀꯄꯥ ꯃꯐꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯄꯥꯝꯕꯩ ✔ ꯃꯦꯗꯤꯌꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯆꯧꯕ ✔ ꯑꯆꯧꯕꯥ ꯃꯐꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥ꯫ ✔ x-ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ ꯃꯤꯗꯤꯌꯝ ꯑꯃꯁꯨꯡ ꯂꯥꯔꯖꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ꯫ ✔ x-small ꯑꯃꯁꯨꯡ medium ꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯃꯐꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ x-ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ꯫ ✔ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ ꯃꯐꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫

ꯂꯣꯠꯁꯤꯜꯂꯕꯥ...

ꯃꯐꯝ ꯑꯁꯤꯗꯥ, ꯒ꯭ꯔꯤꯟ ꯆꯦꯀꯃꯥꯔꯀꯁꯤꯡꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯂꯣꯠꯂꯤ ꯍꯥꯌꯕꯁꯤꯁꯨ ꯇꯥꯀꯏ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ꯫ ✔ x-small ꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ꯫

ꯑꯄꯤꯛꯄ ✔ ꯑꯄꯤꯀꯄꯥ ꯃꯊꯛꯇꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯄꯥꯝꯕꯩ ✔ ꯃꯦꯗꯤꯌꯃꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ꯫

ꯑꯆꯧꯕ ✔ ꯑꯆꯧꯕꯥ ꯃꯐꯃꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥ꯫ ✔ x-ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥꯗꯥ ꯂꯣꯠꯂꯤ꯫

ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ ꯃꯤꯗꯤꯌꯝ ꯑꯃꯁꯨꯡ ꯂꯥꯔꯖꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ꯫ ✔ x-small ꯑꯃꯁꯨꯡ medium ꯗꯥ ꯂꯣꯠꯂꯤ꯫

ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯃꯊꯛꯇꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ꯫ ✔ x-ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯃꯐꯃꯗꯥ ꯂꯣꯠꯂꯤ꯫

ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ꯫ ✔ ꯑꯄꯤꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ ꯃꯐꯃꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ CSS ꯑꯁꯤ CSS ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯒꯨꯝꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯂꯩꯕꯥ ꯄ꯭ꯔꯤꯞꯔꯣꯁꯦꯁꯔ ꯑꯃꯗꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯐꯥꯏꯂꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯣꯔꯁ ꯂꯦꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯌꯦꯡꯂꯤꯕꯁꯤꯡꯅꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫

ꯒ꯭ꯔꯤꯗ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯁꯦꯛꯁꯅꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯣꯅꯁꯤꯜꯂꯤ .

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ ꯃꯑꯣꯡ ꯑꯅꯤꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ: ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSSꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯣꯔꯁ ꯂꯦꯁ ꯐꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯂꯦꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯥ, , ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯃꯥꯟꯗꯁꯤꯡ ꯆꯠꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯑꯦꯅꯚꯥꯏꯔꯅꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯔꯝꯅꯥ ꯁꯦꯠ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯒꯦꯇꯤꯡ ꯁ꯭ꯇꯥꯔꯠ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯊꯥꯔꯗ ꯄꯥꯔꯇꯤ ꯀꯝꯄꯥꯏꯂꯦꯁꯟ ꯇꯨꯂꯁꯤꯡꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯔ ꯇꯤꯃꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯕꯗꯥ ꯃꯆꯨ, ꯁ꯭ꯄꯦꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯀꯁꯤꯡꯒꯨꯝꯕꯥ ꯀꯃꯟ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯦꯟꯠꯔꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯦꯌꯔ ꯇꯧꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯕ꯭ꯔꯦꯀꯗꯥꯎꯅꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯀꯁ꯭ꯇꯃꯔ .

ꯃꯆꯨꯁꯤꯡ꯫

ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯝ ꯑꯅꯤ ꯐꯖꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ: ꯒ꯭ꯔꯦꯁ꯭ꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯁꯦꯃꯦꯟꯇꯤꯛ꯫ ꯒ꯭ꯔꯦꯁ꯭ꯀꯦꯜ ꯃꯆꯨꯁꯤꯡꯅꯥ ꯃꯍꯧꯁꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯕ꯭ꯂꯦꯀꯀꯤ ꯁꯦꯠꯁꯤꯡꯗꯥ ꯊꯨꯅꯥ ꯑꯦꯛꯁꯦꯁ ꯄꯤꯔꯤ ꯑꯗꯨꯒꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯔꯊ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯚꯦꯜꯌꯨꯁꯤꯡꯗꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯃꯆꯨꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ꯃꯆꯨꯒꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯃꯈꯣꯌꯅꯥ ꯂꯩꯔꯤꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯧ ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤꯗꯃꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯑꯔꯊ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧ꯫

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ꯁ꯭ꯀꯦꯐꯣꯜꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯇꯀꯤ ꯁ꯭ꯀꯦꯂꯦꯇꯅꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯊꯨꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯃꯁꯤꯡ ꯈꯔꯥ꯫

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯚꯦꯜꯌꯨ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯃꯆꯨꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯐꯖꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯤꯌꯨ꯫

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ @link-hover-colorꯐꯉ꯭ꯀꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯁꯤ ꯂꯦꯁꯀꯤ ꯑꯇꯣꯞꯄꯥ ꯑꯉꯀꯄꯥ ꯈꯨꯠꯂꯥꯌ ꯑꯃꯅꯤ, ꯃꯁꯤꯅꯥ ꯑꯣꯇꯣꯃꯦꯖꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯆꯨꯝꯕꯥ ꯍꯣꯚꯔ ꯃꯆꯨ ꯑꯗꯨ ꯁꯦꯝꯃꯤ꯫ ꯑꯗꯣꯝꯅꯥ darken, lighten, saturate, ꯑꯃꯁꯨꯡ desaturate.

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯇꯧꯕꯥ꯫

ꯊꯨꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯥꯏꯄꯐꯦꯁ, ꯇꯦꯛꯁꯠ ꯁꯥꯏꯖ, ꯂꯤꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯐꯖꯅꯥ ꯁꯦꯠ ꯇꯧ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯐꯖꯅꯥ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯄꯤꯔꯤ꯫

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ꯑꯥꯏꯀꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯅꯍꯥꯛꯀꯤ ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯤ ꯃꯐꯝ ꯑꯃꯁꯨꯡ ꯐꯥꯏꯂꯒꯤ ꯃꯃꯤꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯅꯕꯥ ꯊꯨꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯅꯤ꯫

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯩꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯅꯥ ꯀꯃꯟ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯔꯗꯤ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯐꯃꯁꯤꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯌꯥꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯑꯗꯨꯅꯤ꯫

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ꯚꯦꯟꯗꯔ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫

ꯚꯦꯟꯗꯔ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ CSSꯗꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯚꯦꯟꯗꯔ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯎꯍꯟꯗꯨꯅꯥ ꯃꯜꯇꯤꯄꯜ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯅꯤ꯫

ꯕꯣꯛꯁ-ꯁꯥꯏꯖꯤꯡ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯕꯣꯛꯁ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯤꯁꯦꯠ ꯇꯧ꯫ ꯀꯟꯇꯦꯛꯁꯀꯤꯗꯃꯛꯇꯥ, ꯃꯣꯖꯤꯂꯥꯗꯒꯤ ꯃꯇꯦꯡ ꯑꯣꯏꯕꯥ ꯑꯥꯔꯇꯤꯀꯜ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ .

ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ v3.2.0ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ, ꯑꯣꯇꯣꯞꯔꯤꯐꯤꯛꯁꯔ ꯌꯥꯑꯣꯔꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯕꯦꯀꯋꯥꯔꯗ-ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ v4 ꯐꯥꯎꯕꯗꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ ꯏꯟꯇꯔꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ꯒꯣꯜꯗ ꯑꯣꯏꯕꯥ ꯀꯣꯅꯨꯡꯁꯤꯡ꯫

ꯉꯁꯤꯗꯤ ꯃꯣꯗꯔꯟ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯅꯥ ꯅꯟ-ꯄ꯭ꯔꯤꯐꯤꯛꯁ border-radiusꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, ꯃꯤꯛꯁꯤꯟ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ .border-radius(), ꯑꯗꯨꯕꯨ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯒꯤ ꯑꯀꯛꯅꯕꯥ ꯃꯐꯝ ꯑꯃꯗꯥ ꯀꯣꯟꯅꯥ ꯑꯅꯤ ꯊꯨꯅꯥ ꯂꯥꯎꯊꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯁꯣꯔꯇꯀꯥꯇꯁꯤꯡ ꯌꯥꯎꯏ꯫

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ꯕꯣꯛꯁ (ꯗ꯭ꯔꯣꯞ) ꯁꯦꯠꯄꯥ꯫

box-shadowꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯥꯔꯒꯦꯠ ꯑꯣꯗꯤꯁꯟ ꯑꯗꯨꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯆꯥꯎꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁꯤꯖꯤꯟꯅꯕꯈꯛꯇꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯔꯤꯕꯥ ꯑꯦꯟꯗ꯭ꯔꯣꯏꯗ (ꯄ꯭ꯔꯤ- v4 ) ꯑꯃꯁꯨꯡ ꯑꯥꯏ.ꯑꯣ.ꯑꯦꯁ -webkit.

ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ v3.1.0ꯗꯒꯤ ꯍꯧꯅꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ , ꯃꯔꯃꯗꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯕꯥ ꯃꯇꯝ ꯂꯣꯏꯔꯕꯥ ꯄ꯭ꯂꯦꯠꯐꯣꯔꯃꯁꯤꯡ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫ ꯕꯦꯀꯋꯥꯔꯗ-ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ v4 ꯐꯥꯎꯕꯗꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ ꯏꯟꯇꯔꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ.

ꯅꯍꯥꯛꯀꯤ ꯕꯣꯛꯁ ꯁꯦꯗꯣꯡꯁꯤꯡꯗꯥ ꯃꯆꯨꯁꯤꯡ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ rgba()ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗꯁꯤꯡꯒꯥ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯊꯨꯅꯥ ꯌꯥꯡꯅꯥ ꯕ꯭ꯂꯦꯟꯗ ꯇꯧꯏ꯫

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯦꯛꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤꯗꯃꯛ ꯃꯜꯇꯤꯄꯜ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯄꯨꯝꯅꯃꯛ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯠ ꯇꯧ, ꯅꯠꯠꯔꯒꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯊꯦꯡꯊꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯇꯝ ꯑꯃꯥ ꯇꯥꯀꯎ꯫

ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ v3.2.0ꯗꯒꯤ ꯍꯧꯅꯥ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ, ꯑꯣꯇꯣꯞꯔꯤꯐꯤꯛꯁꯔ ꯌꯥꯑꯣꯔꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯕꯦꯀꯋꯥꯔꯗ-ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯅꯕꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ v4 ꯐꯥꯑꯣꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯏꯟꯇꯔꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯦꯁꯅꯁꯤꯡ ꯇꯧꯕꯥ꯫

ꯄꯣꯠꯁꯛ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯔꯣꯇꯦꯠ ꯇꯧꯕꯥ, ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ, ꯍꯟꯗꯣꯀꯄꯥ (ꯆꯠꯄꯥ) ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯀꯦꯎ ꯇꯧꯕꯥ꯫

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ꯑꯦꯅꯤꯃꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯗꯤꯛꯂꯥꯔꯦꯁꯟ ꯑꯃꯗꯥ CSS3ꯒꯤ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯈꯛꯇꯃꯛ ꯑꯃꯁꯨꯡ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤꯗꯃꯛ ꯑꯇꯩ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ꯑꯣꯄꯦꯁꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯣꯄꯦꯁꯤꯇꯤ ꯁꯦꯠ ꯇꯧ ꯑꯃꯁꯨꯡ filterIE8ꯒꯤꯗꯃꯛ ꯐꯣꯂꯕꯦꯛ ꯑꯃꯥ ꯄꯤꯌꯨ꯫

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯇꯦꯛꯁꯠ꯫

ꯐꯤꯜꯗ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯛꯁ ꯄꯤꯕꯥ꯫

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ꯀꯂꯃꯁꯤꯡ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ꯫

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇꯁꯤꯡ꯫

ꯃꯆꯨ ꯑꯅꯤ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯗꯥ ꯐꯖꯅꯥ ꯑꯣꯟꯊꯣꯀꯎ꯫ ꯍꯦꯟꯅꯥ ꯆꯥꯎꯈꯠꯂꯨ ꯑꯃꯁꯨꯡ ꯃꯥꯌꯀꯩ ꯑꯃꯥ ꯁꯦꯝꯃꯨ, ꯃꯆꯨ ꯑꯍꯨꯝ ꯁꯤꯖꯤꯟꯅꯧ ꯅꯠꯠꯔꯒꯥ ꯔꯦꯗꯤꯑꯦꯜ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯒꯗꯕꯥ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ ꯁꯤꯟꯇꯦꯛꯁ ꯄꯨꯝꯅꯃꯛ ꯐꯪꯒꯅꯤ꯫

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯃꯆꯨ ꯑꯅꯤꯒꯤ, ꯂꯥꯏꯅꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯒꯤ ꯑꯦꯉ꯭ꯒꯜ ꯑꯗꯨꯁꯨ ꯇꯥꯀꯄꯥ ꯌꯥꯏ:

#gradient > .directional(#333; #000; 45deg);

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯥꯔꯕꯥꯔ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯁ꯭ꯇꯥꯏꯜ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ, ꯃꯗꯨꯁꯨ ꯌꯥꯝꯅꯥ ꯂꯥꯏꯕꯛ ꯐꯕꯅꯤ꯫ ꯃꯆꯨ ꯑꯃꯈꯛꯇꯃꯛ ꯇꯥꯀꯄꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯋꯥꯏꯠ ꯁ꯭ꯠꯔꯥꯏꯞ ꯑꯃꯥ ꯑꯣꯚꯔꯂꯦꯏ ꯇꯧꯒꯅꯤ꯫

#gradient > .striped(#333; 45deg);

ꯑꯦꯟꯇꯦ ꯑꯗꯨ ꯑꯞ ꯇꯧ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯆꯨ ꯑꯍꯨꯝ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯍꯥꯅꯕꯥ ꯃꯆꯨ, ꯑꯅꯤꯁꯨꯕꯥ ꯃꯆꯨ, ꯑꯅꯤꯁꯨꯕꯥ ꯃꯆꯨꯒꯤ ꯃꯆꯨꯒꯤ ꯊꯣꯡ (25%ꯒꯨꯝꯕꯥ ꯆꯥꯗꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯥ), ꯑꯃꯁꯨꯡ ꯑꯍꯨꯃꯁꯨꯕꯥ ꯃꯆꯨ ꯑꯁꯤ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯠ ꯇꯧ:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! filterꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯀꯄꯥ ꯌꯥꯕꯥ IE-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯣꯌꯗꯅꯥ ꯂꯧꯊꯣꯀꯎ꯫ ꯃꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯇꯧꯕꯥ ꯌꯥꯏ ꯃꯗꯨꯒꯤ .reset-filter()ꯃꯊꯛꯇꯥ ꯃꯤꯛꯁꯤꯟ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ background-image: none;.

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯑꯀꯛꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯅꯠꯠꯔꯒꯥ ꯊꯕꯛ ꯑꯃꯥ ꯐꯪꯅꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯃꯔꯤ ꯂꯩꯅꯗꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ꯇꯧꯕꯥ꯫

class="clearfix"ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯀꯥꯑꯣꯊꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ .clearfix()ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯐꯃꯗꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯅꯤꯀꯣꯂꯥꯁ ꯒ꯭ꯌꯥꯂꯥꯘꯔꯗꯒꯤ ꯃꯥꯏꯛꯔꯣ ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ꯁꯤꯖꯤꯟꯅꯔꯤ .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯃꯗꯨꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯨꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧ꯫ ꯃꯊꯧ ꯇꯥꯏ widthꯅꯠꯠꯔꯒꯥ max-widthꯁꯦꯠ ꯇꯧꯒꯗꯕꯅꯤ꯫

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ꯍꯦꯜꯄꯔꯁꯤꯡ ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯄꯣꯠꯁꯛ ꯑꯃꯒꯤ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡ ꯍꯦꯟꯅꯥ ꯐꯖꯅꯥ ꯇꯥꯀꯄꯤꯌꯨ꯫

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ꯔꯤꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯇꯦꯛꯁꯇꯥꯏꯂꯁꯤꯡ꯫

ꯇꯦꯛꯁꯇꯥꯏꯜ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ, ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯔꯤꯁꯥꯏꯖ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯐꯖꯅꯥ ꯀꯅꯐꯤꯒꯔ ꯇꯧ꯫ ꯅꯣꯔꯃꯦꯜ ꯕ꯭ꯔꯥꯎꯖꯔ ꯕꯤꯍꯦꯕꯤꯌꯔꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯇꯧꯏ ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ꯇꯦꯛꯁꯠ ꯇ꯭ꯔꯉ꯭ꯛ ꯇꯧꯕꯥ꯫

ꯃꯤꯛꯁꯤꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯞꯁꯤꯁ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯠ ꯐꯖꯅꯥ ꯇ꯭ꯔꯉ꯭ꯛ ꯇꯧꯕꯥ꯫ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯑꯣꯏꯕꯥ blockꯅꯠꯠꯔꯒꯥ inline-blockꯂꯦꯚꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ꯔꯦꯇꯤꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ꯫

ꯏꯃꯦꯖ ꯄꯥꯊ ꯑꯅꯤ ꯑꯃꯁꯨꯡ @1x ꯏꯃꯦꯖ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡ ꯇꯥꯀꯎ, ꯑꯃꯁꯨꯡ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ @2x ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯥ ꯄꯤꯒꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯦꯕꯥ ꯇꯧꯅꯕꯥ ꯏꯃꯦꯖ ꯀꯌꯥ ꯂꯩꯔꯕꯗꯤ, ꯅꯍꯥꯛꯀꯤ ꯔꯦꯇꯤꯅꯥ ꯏꯃꯦꯖ CSS ꯑꯗꯨ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯗꯥ ꯏꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯂꯦꯁꯇꯥ ꯁꯥꯕꯅꯤ ꯑꯗꯨꯕꯨ ꯃꯁꯤꯗꯥ ꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯑꯣꯏꯕꯥ ꯁꯥꯁ ꯄꯣꯔꯠ ꯑꯃꯁꯨ ꯂꯩꯔꯤ . ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ GitHub ꯔꯤꯄꯣꯖꯤꯇꯔꯤ ꯑꯃꯗꯥ ꯊꯝꯃꯤ ꯑꯃꯁꯨꯡ ꯀꯅꯕꯔꯁꯟ ꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯄꯗꯦꯠꯁꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯏ꯫

ꯌꯥꯑꯣꯔꯤꯕꯥ ꯑꯗꯨ ꯀꯔꯤꯅꯣ꯫

ꯁꯥꯁ ꯄꯣꯔꯠ ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯔꯦꯄꯣ ꯑꯃꯥ ꯂꯩꯕꯅꯥ ꯑꯃꯁꯨꯡ ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯗꯤꯁꯟ ꯑꯃꯒꯤ ꯁꯦꯕꯥ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯁꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯁꯤꯒꯥ ꯌꯥꯝꯅꯥ ꯈꯦꯠꯅꯩ꯫ ꯃꯁꯤꯅꯥ ꯁꯥꯁ ꯄꯣꯔꯠ ꯑꯁꯤ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯁꯥꯁꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯁꯤꯁ꯭ꯇꯦꯝ ꯀꯌꯥꯒꯥ ꯆꯨꯅꯕꯥ ꯑꯣꯏꯍꯜꯂꯤ꯫

ꯂꯝꯕꯤ	ꯋꯥꯔꯣꯜ
`lib/`	ꯔꯨꯕꯤ ꯖꯦꯝ ꯀꯣꯗ (ꯁꯥꯁ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ, ꯔꯦꯜ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯁ ꯏꯟꯇꯤꯒ꯭ꯔꯦꯁꯅꯁꯤꯡ)
`tasks/`	ꯀꯟꯚꯥꯔꯇꯔ ꯁ꯭ꯛꯔꯤꯞꯇꯁꯤꯡ (ꯑꯄꯁ꯭ꯠꯔꯤꯝ ꯂꯦꯁ ꯇꯨ ꯁꯥꯁꯇꯥ ꯑꯣꯟꯊꯣꯀꯄꯥ)
`test/`	ꯀꯝꯄꯥꯏꯂꯦꯁꯟ ꯇꯦꯁ꯭ꯇꯁꯤꯡ ꯇꯧꯕꯥ꯫
`templates/`	ꯀꯝꯄꯥꯁ ꯄꯦꯀꯦꯖ ꯃꯦꯅꯤꯐꯦꯁ꯭ꯠ ꯇꯧꯕꯥ꯫
`vendor/assets/`	ꯁꯥꯁ, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ, ꯑꯃꯁꯨꯡ ꯐꯣꯟꯇ ꯐꯥꯏꯂꯁꯤꯡ꯫
`Rakefile`	ꯔꯦꯛ ꯑꯃꯁꯨꯡ ꯀꯟꯚꯥꯔꯠ ꯑꯁꯤꯅꯆꯤꯡꯕꯥ ꯃꯅꯨꯡꯒꯤ ꯑꯣꯏꯕꯥ ꯊꯕꯀꯁꯤꯡ꯫

ꯐꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯁꯅꯗꯥ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ ꯁꯥꯁ ꯄꯣꯔꯇꯀꯤ GitHub ꯔꯤꯄꯣꯖꯤꯇꯔꯤꯗꯥ ꯆꯠꯂꯨ꯫

ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ꯫

ꯁꯥꯁꯀꯤꯗꯃꯛꯇꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ, GitHub ꯔꯤꯄꯣꯖꯤꯇꯔꯤ readme . ꯃꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ ꯁꯣꯔꯁꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯥ ꯔꯦꯜ, ꯀꯝꯄꯥꯁ, ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯁꯥꯁ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯌꯥꯑꯣꯔꯤ꯫

ꯁꯥꯁꯀꯤꯗꯃꯛ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ꯫

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯇꯧꯕꯥ꯫

ꯃꯣꯕꯥꯏꯜ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ꯫

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ.css

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ꯫

ꯁꯛꯇꯥꯛꯄ

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯋꯥꯍꯪꯁꯤꯡ꯫

ꯒ꯭ꯔꯤꯗ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯁ꯭ꯇꯦꯛ-ꯇꯨ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯐ꯭ꯂꯨꯏꯗ ꯀꯟꯇꯦꯅꯔ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯃꯣꯕꯥꯏꯜ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯞ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯃꯣꯕꯥꯏꯜ, ꯇꯦꯕꯜ, ꯗꯦꯁ꯭ꯀꯇꯣꯞ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ: ꯀꯣꯂꯝ ꯔꯦꯄꯤꯡ ꯇꯧꯕꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯣꯂꯝ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫

ꯑꯣꯐꯁꯦꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

ꯅꯦꯁ꯭ꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

ꯀꯣꯂꯝ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯃꯤꯛꯁꯤꯟ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯟꯊꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯃꯤꯛꯁꯅꯁꯤꯡ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯇꯧꯕꯥ꯫

ꯍꯦꯗꯤꯡꯁꯤꯡ꯫

ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯑꯩꯆ꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯁꯦꯀꯦꯟꯗꯔꯤ ꯇꯦꯛꯁꯠ꯫

ꯍꯀꯆꯥꯡꯒꯤ ꯀꯣꯄꯤ꯫

ꯂꯤꯗ ꯕꯣꯗꯤ ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫

ꯂꯦꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯥ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯃꯥꯔꯛ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯃꯨꯠꯊꯠꯂꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯁ꯭ꯠꯔꯥꯏꯀꯊ꯭ꯔꯨ ꯇꯦꯛꯁꯠ꯫

ꯇꯦꯛꯁꯠ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯑꯟꯗꯔꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯑꯄꯤꯀꯄꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯥ꯫

ꯊꯧꯅ ꯂꯩꯕ

ꯏꯇꯥꯂꯤꯛꯁꯁꯤꯡ꯫

ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯃꯦꯁꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ꯫

ꯕꯦꯁꯤꯛ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ꯫

ꯏꯅꯤꯁꯤꯑꯦꯂꯤꯖꯝ꯫

ꯑꯦꯗ꯭ꯔꯦꯁꯁꯤꯡ꯫

ꯕ꯭ꯂꯣꯀꯀꯣꯇꯁꯤꯡ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯕ꯭ꯂꯣꯀꯀꯣꯠ꯫

ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯁꯣꯔꯁ ꯑꯃꯒꯤ ꯃꯃꯤꯡ ꯊꯣꯅꯕꯥ꯫

ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯗꯤꯁꯞꯂꯦꯁꯤꯡ꯫

ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯅꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯑꯣꯔꯗꯔ ꯇꯧꯈ꯭ꯔꯦ꯫

ꯑꯅꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯋꯥꯔꯣꯜ

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯇꯧꯕꯥ꯫

ꯑꯣꯇꯣ-ꯇ꯭ꯔꯟꯀꯦꯇꯤꯡ ꯇꯧꯕꯥ꯫

ꯀꯣꯗ ꯇꯧꯕꯥ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯌꯨꯖꯔ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ꯫

ꯕꯦꯁꯤꯛ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ꯫

ꯇꯦꯕꯂꯁꯤꯡ꯫

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯁ꯭ꯠꯔꯥꯏꯞ ꯑꯣꯏꯕꯥ ꯔꯣꯁꯤꯡ꯫

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯗꯦꯃꯣ ꯇꯧꯕꯥ꯫`:focus` ꯔꯥꯖ꯭ꯌ꯫

ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯀꯦꯚꯦꯠ ꯇꯧꯕꯥ꯫`<a>`

`.sr-only`ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯥꯏꯀꯅꯁꯤꯡ꯫