ꯕꯦꯖ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

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

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

ꯍꯦꯗꯤꯡꯁꯤꯡ꯫

HTML ꯍꯦꯗꯤꯡ ꯄꯨꯝꯅꯃꯛ, <h1>ꯊ꯭ꯔꯨ <h6>ꯑꯁꯤ ꯐꯪꯒꯅꯤ꯫

ꯑꯩꯆ.꯱. ꯍꯦꯗꯤꯡ ꯱

h꯲. ꯍꯦꯗꯤꯡ ꯲

ꯑꯩꯆ꯳. ꯍꯦꯗꯤꯡ ꯳

ꯑꯩꯆ꯴. ꯍꯦꯗꯤꯡ ꯴

h꯵. ꯍꯦꯗꯤꯡ ꯵
ꯑꯩꯆ꯶. ꯍꯦꯗꯤꯡ ꯶

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

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

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

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

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

<p> ... </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

<p ꯀ꯭ꯂꯥꯁ = "ꯂꯤꯗ" > ... </p> 

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

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


ꯃꯤꯠꯌꯦꯡ ꯆꯪꯕ

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

<small>

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

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

<p> <small> ꯇꯦꯛꯁꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯁꯤ ꯐꯥꯏꯅꯦꯜ ꯄ꯭ꯔꯤꯟꯇ ꯑꯣꯏꯅꯥ ꯂꯧꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ </small> </p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  

ꯊꯧꯅ ꯂꯩꯕ

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

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

<strong> ꯕꯣꯜꯗ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ </strong>꯫

ꯏꯇꯥꯂꯤꯛꯁꯁꯤꯡ꯫

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

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

<em> ꯏꯇꯥꯂꯤꯛ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ </em>

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

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

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

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

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

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

  1. <p class = "text-left" > ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯇꯦꯛꯁꯠ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  2. <p class = "text-center" > ꯁꯦꯟꯇꯔ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  3. <p class = "text-right" > ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯦꯝꯄꯥꯁꯤꯁ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

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

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

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

ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ꯫

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

  1. <p class = "muted" > ꯐꯨꯁꯁꯦ ꯗꯥꯄꯤꯕꯁ, ꯇꯦꯂꯁ ꯑꯦꯁꯤ ꯀꯔꯁꯁ ꯀꯃꯣꯗꯣ, ꯇꯣꯔꯇꯣꯔ ꯃꯧꯔꯤꯁ ꯅꯤꯚ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  2. <p class = "text-warning" > ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  3. <p class = "text-error" > ꯗꯣꯅꯦꯛ ꯎꯂꯝꯀꯣꯔꯄꯥꯔ ꯅꯨꯂꯥ ꯅꯟ ꯃꯦꯇꯁ ꯑꯣꯛꯇꯔ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. <p class = "ꯇꯦꯛꯁ-ꯏꯅꯐꯣ" > ꯑꯦꯅꯤꯌꯟ ꯏꯎ ꯂꯤꯑꯣ ꯀ꯭ꯕꯥꯝ꯫ ꯄꯦꯂꯦꯟꯇꯦꯁ꯭ꯛ ꯑꯣꯔꯅꯥꯔꯦ ꯁꯦꯝ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀ꯭ꯕꯥꯝ ꯚꯦꯅꯦꯇꯤꯁ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <p class = "text-success" > ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

<abbr>

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

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

<abbr title = "ꯑꯦꯠꯔꯤꯕꯤꯎꯠ" > ꯑꯦꯠꯔꯤ </abbr> 

<abbr class="initialism">

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

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

<abbr title = "ꯍꯥꯏꯄꯥꯔꯇꯦꯛꯁꯠ ꯃꯥꯔꯀꯑꯥꯞ ꯂꯦꯉ꯭ꯒꯨꯌꯦꯖ" class = "ꯏꯅꯤꯁꯤꯑꯦꯂꯤꯖꯝ" > HTML </abbr>  

ꯑꯦꯗ꯭ꯔꯦꯁꯁꯤꯡ꯫

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

<address>

ꯂꯥꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯂꯣꯏꯁꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯃꯦꯇꯤꯡ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯃꯨ <br>.

ꯇ꯭ꯕꯤꯇꯔ, ꯏꯅꯛ
꯷꯹꯵ ꯐꯣꯂꯁꯝ ꯑꯦꯚꯤ, ꯁꯨꯏꯠ ꯶꯰꯰
ꯁꯥꯟ ꯐ꯭ꯔꯥꯟꯁꯤꯁ꯭ꯀꯣ, ꯁꯤ.ꯑꯦ.꯹꯴꯱꯰꯷
ꯄꯤ: (꯱꯲꯳) ꯴꯵꯶-꯷꯸꯹꯰꯫
ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯃꯤꯡ
[email protected]
  1. <ꯑꯦꯗ꯭ꯔꯦꯁ>꯫
  2. <strong> ꯇ꯭ꯕꯤꯇꯔ, ꯏꯅꯛ </strong><br>
  3. ꯷꯹꯵ ꯐꯣꯂꯁꯝ ꯑꯦꯚꯤ, ꯁꯨꯏꯠ ꯶꯰꯰ <br>
  4. ꯁꯥꯟ ꯐ꯭ꯔꯥꯟꯁꯤꯁ꯭ꯀꯣ, ꯁꯤ.ꯑꯦ.꯹꯴꯱꯰꯷ <br>
  5. <abbr title = "ꯐꯣꯟ" > ꯄꯤ: </abbr> (꯱꯲꯳) ꯴꯵꯶-꯷꯸꯹꯰ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  6. </ꯑꯦꯗ꯭ꯔꯦꯁ>ꯗꯥ ꯂꯩꯕꯥ꯫
  7.  
  8. <ꯑꯦꯗ꯭ꯔꯦꯁ>꯫
  9. <strong> ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯃꯤꯡ </strong><br>꯫
  10. <a href = "mailto:#" > ꯑꯍꯥꯅꯕꯥ.ꯑꯔꯣꯏꯕꯥ@ꯈꯨꯗꯝ.ꯀꯝ </a>
  11. </ꯑꯦꯗ꯭ꯔꯦꯁ>ꯗꯥ ꯂꯩꯕꯥ꯫

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

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

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

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

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

  1. <ꯕ꯭ꯂꯣꯀꯀꯣꯠ> ꯇꯧꯕꯥ꯫
  2. <p> ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯃꯥ ꯑꯦꯟꯇꯤ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  3. </blockquote> ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫

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

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

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

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

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

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
  1. <ꯕ꯭ꯂꯣꯀꯀꯣꯠ> ꯇꯧꯕꯥ꯫
  2. <p> ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯃꯥ ꯑꯦꯟꯇꯤ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  3. <small> ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ <cite title = "ꯁꯣꯔꯁ ꯇꯥꯏꯇꯜ" > ꯁꯣꯔꯁ ꯇꯥꯏꯇꯜ </cite></small>
  4. </blockquote> ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫

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

.pull-rightꯐ꯭ꯂꯣꯠ ꯇꯧꯔꯕꯥ, ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
  1. <blockquote class = "ꯄꯨꯜ-ꯔꯥꯏꯠ" >
  2. ...
  3. </blockquote> ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫

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

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

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

  • ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
  • ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
  • ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
  • ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
  • ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
    • ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ ꯅꯦꯀꯦ꯫
    • ꯄꯨꯔꯨꯁ ꯁꯣꯗꯦꯂꯁ ꯑꯂꯠꯔꯤꯁꯤꯁ꯫
    • ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯂꯥꯑꯣꯔꯤꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯁꯦꯝ꯫
    • ꯑꯦꯛ ꯇ꯭ꯔꯤꯁ꯭ꯇꯤꯛ ꯂꯤꯕꯦꯔꯣ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯠ꯫
  • ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
  • ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
  • ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫
  1. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  2. <li> ... </li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

  1. ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
  2. ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
  3. ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
  4. ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
  5. ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
  6. ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
  7. ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
  8. ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫
  1. <ol> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  2. <li> ... </li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. </ol> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

  • ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ꯫
  • ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫
  • ꯏꯟꯇꯤꯖꯔ ꯃꯣꯂꯦꯁ꯭ꯇꯤ ꯂꯣꯔꯦꯝ ꯑꯦꯠ ꯃꯥꯁꯥ꯫
  • ꯄ꯭ꯔꯦꯇꯤꯌꯝ ꯅꯤꯁꯜ ꯑꯦꯂꯤꯀꯦꯠꯇꯥ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ꯫
  • ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯂꯤꯛꯌꯨꯝ ꯚꯦꯂꯤꯠ꯫
    • ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ ꯅꯦꯀꯦ꯫
    • ꯄꯨꯔꯨꯁ ꯁꯣꯗꯦꯂꯁ ꯑꯂꯠꯔꯤꯁꯤꯁ꯫
    • ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯂꯥꯑꯣꯔꯤꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯁꯦꯝ꯫
    • ꯑꯦꯛ ꯇ꯭ꯔꯤꯁ꯭ꯇꯤꯛ ꯂꯤꯕꯦꯔꯣ ꯚꯣꯂꯨꯠꯄꯠ ꯑꯦꯠ꯫
  • ꯐꯧꯁꯤꯕꯁ ꯄꯣꯔꯇꯥ ꯂꯦꯀꯁ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ ꯚꯦꯜ꯫
  • ꯑꯦꯅꯤꯌꯟ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯑꯦꯔꯥꯠ ꯅꯟꯛ꯫
  • ꯑꯦꯒꯦꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯣꯔꯦꯝ꯫
  1. <ul class = "ꯑꯅꯁ꯭ꯇꯥꯏꯜ" >
  2. <li> ... </li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

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

  • ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ꯫
  • ꯐꯦꯁꯦꯂꯁ ꯏꯌꯥꯀꯨꯂꯤꯁ꯫
  • ꯅꯨꯜꯂꯥ ꯚꯣꯂꯨꯠꯄꯠ꯫
  1. <ul ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯂꯥꯏꯟ" >
  2. <li> ... </li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯋꯥꯔꯣꯜ

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

ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫
ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯏꯎꯏꯁꯃꯣꯗ꯫
ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯑꯥꯏꯗꯤ ꯂꯤꯒꯨꯂꯥ ꯄꯣꯔꯇꯥ ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫
ꯗꯣꯅꯦꯛ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ ꯅꯟ ꯃꯤ ꯄꯣꯔꯇꯥ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯑꯦꯠ ꯑꯦꯒꯦꯠ ꯃꯦꯇꯁ꯫
ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯄꯣꯔꯇꯥ꯫
ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫
  1. <dl> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  2. <dt> ... </dt> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <dd> ... </dd> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. </dl> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫

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

<dl>ꯂꯥꯏꯟ ꯑꯞ ꯁꯥꯏꯗ-ꯕꯥꯏ-ꯁꯥꯏꯗꯇꯥ ꯇꯔꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯅꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫
ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯏꯎꯏꯁꯃꯣꯗ꯫
ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯑꯥꯏꯗꯤ ꯂꯤꯒꯨꯂꯥ ꯄꯣꯔꯇꯥ ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫
ꯗꯣꯅꯦꯛ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ ꯅꯟ ꯃꯤ ꯄꯣꯔꯇꯥ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯑꯦꯠ ꯑꯦꯒꯦꯠ ꯃꯦꯇꯁ꯫
ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯄꯣꯔꯇꯥ꯫
ꯏꯇꯤꯌꯥꯝ ꯄꯣꯔꯇꯥ ꯁꯦꯝ ꯃꯥꯂꯦꯁꯨꯌꯥꯗꯥ ꯃꯒꯅꯥ ꯃꯣꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ꯫
ꯐꯦꯂꯤꯁ ꯏꯎꯏꯁꯃꯣꯗ ꯁꯦꯝꯄꯔ ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ꯫
ꯐꯨꯁꯦ ꯗꯥꯄꯤꯕꯁ, ꯇꯦꯂꯁ ꯑꯦ.ꯁꯤ.
  1. <dl ꯀ꯭ꯂꯥꯁ = "dl-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ" >
  2. <dt> ... </dt> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <dd> ... </dd> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. </dl> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫

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

ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

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

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, <section>ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯒꯗꯕꯅꯤ꯫
  1. ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ , <ꯀꯣꯗ> & lt ; ꯁꯦꯛꯁꯟ & gt ;</ ꯀꯣꯗ > ꯑꯁꯤ ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯒꯗꯕꯅꯤ .

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

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

<p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>
  1. <ꯄ꯭ꯔꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  2. <p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>
  3. </pre> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ!<pre>ꯌꯥꯔꯤꯕꯃꯈꯩ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯇꯦꯒꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯣꯗ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯃꯨ ; ꯃꯁꯤꯅꯥ ꯇꯦꯕ ꯄꯨꯝꯅꯃꯛ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ꯫

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ꯫

ꯕꯦꯁꯤꯛ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛ—ꯂꯥꯏꯠ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯚꯥꯏꯗꯔ ꯈꯛꯇꯃꯛ—ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ .tableꯑꯁꯤ <table>.

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯄꯥꯈꯪ ꯑꯗꯨ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  1. <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ" >
  2. ...
  3. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯍꯦꯛꯇꯕꯨ .tableꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

.table-striped

<tbody>ꯚꯤꯌꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯁꯦꯂꯦꯛꯇꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯕꯜ ꯔꯣ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯖꯦꯕ꯭ꯔꯥ-ꯁ꯭ꯠꯔꯥꯏꯄꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯤ :nth-child(ꯑꯥꯏ.ꯏ.꯷-꯸ꯗꯥ ꯐꯪꯗꯦ)꯫

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯄꯥꯈꯪ ꯑꯗꯨ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  1. <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯁ꯭ꯠꯔꯥꯏꯞ" >
  2. ...
  3. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

.table-bordered

ꯇꯦꯕꯜ ꯑꯗꯨꯗꯥ ꯕꯣꯔꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @ꯒꯦꯇꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯗ꯭ꯌ ꯕꯥꯔꯗ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  1. <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯕꯣꯔꯗꯔ ꯇꯧꯕꯥ" >
  2. ...
  3. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

.table-hover

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

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯗ꯭ꯌ ꯕꯥꯔꯗ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  1. <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯍꯣꯚꯥꯔ" >
  2. ...
  3. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

.table-condensed

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

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯗ꯭ꯌ ꯕꯥꯔꯗ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
  1. <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯀꯟꯗꯦꯟꯁ ꯇꯧꯕꯥ" >
  2. ...
  3. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯔꯣ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

ꯀ꯭ꯂꯥꯁ ꯋꯥꯔꯣꯜ
.success ꯃꯥꯌ ꯄꯥꯛꯂꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯖꯤꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
.error ꯈꯨꯗꯣꯡꯊꯤꯅꯤꯉꯥꯏ ꯑꯣꯏꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯅꯦꯒꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
.warning ꯄꯨꯛꯅꯤꯡ ꯆꯪꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯕꯥ ꯆꯦꯀꯁꯤꯅꯋꯥ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
.info ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
# ꯄꯣꯠꯊꯣꯛ ꯄꯦꯃꯦꯟꯇ ꯂꯧꯈ꯭ꯔꯦ꯫ ꯊꯥꯛ
ꯇꯤ.ꯕꯤ.- ꯊꯥꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯰꯱/꯰꯴/꯲꯰꯱꯲ꯗꯥ ꯊꯣꯀꯈꯤ꯫ ꯌꯥꯔꯕ
ꯇꯤ.ꯕꯤ.- ꯊꯥꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯰꯲/꯰꯴/꯲꯰꯱꯲ꯗꯥ ꯊꯣꯀꯈꯤ꯫ ꯍꯟꯊꯔꯦ꯫
ꯇꯤ.ꯕꯤ.- ꯊꯥꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯰꯳/꯰꯴/꯲꯰꯱꯲ꯗꯥ ꯊꯣꯀꯈꯤ꯫ ꯄꯟꯗꯨꯅ ꯂꯩꯕ
ꯇꯤ.ꯕꯤ.- ꯊꯥꯒꯤ ꯑꯣꯏꯕꯥ꯫ ꯰꯴/꯰꯴/꯲꯰꯱꯲ꯗꯥ ꯊꯣꯀꯈꯤ꯫ ꯀꯅꯐꯥꯔꯝ ꯇꯧꯅꯕꯥ ꯀꯜ ꯇꯧꯕꯤꯌꯨ꯫
  1. ...
  2. < tr class = "ꯃꯥꯏꯄꯥꯀꯄꯥ" >
  3. <td> < /td> ꯂꯩ꯫
  4. <td>ꯇꯤ.ꯕꯤ.- ꯊꯥꯒꯤ ꯑꯣꯏꯕꯥ</ td >
  5. <td> ꯰꯱ / ꯰꯴ / ꯲꯰꯱꯲ꯗꯥ ꯊꯣꯀꯈꯤꯕꯥ < /td>
  6. <td>ꯑꯌꯥꯕꯥ ꯄꯤꯈ꯭ꯔꯦ</ td >
  7. </ tr > ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  8. ...

ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯇꯦꯕꯜ ꯃꯥꯔꯀꯑꯥꯞ꯫

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

ꯃꯤꯡ ꯊꯥꯕ ꯋꯥꯔꯣꯜ
<table> ꯇꯦꯕꯜ ꯐꯣꯔꯃꯦꯠꯇꯥ ꯗꯦꯇꯥ ꯎꯠꯅꯕꯒꯤꯗꯃꯛ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫
<thead> <tr>ꯇꯦꯕꯜ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯂꯦꯕꯦꯜ ꯇꯧꯕꯥ ꯇꯦꯕꯜ ꯍꯦꯗꯔ ꯔꯣꯁꯤꯡ ( )ꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫
<tbody> <tr>ꯇꯦꯕꯂꯒꯤ ꯍꯀꯆꯥꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯕꯜ ꯔꯣ ( )ꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫
<tr> ꯔꯣ ꯑꯃꯗꯥ ꯊꯣꯀꯄꯥ ꯇꯦꯕꯜ ꯁꯦꯂꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ( <td>ꯅꯠꯔꯒꯥ )꯫<th>
<td> ꯗꯤꯐꯣꯜꯇ ꯇꯦꯕꯜ ꯁꯦꯜ꯫
<th> ꯀꯣꯂꯝ (ꯅꯠꯠꯔꯒꯥ ꯔꯣ, ꯁ꯭ꯀꯣꯞ ꯑꯃꯁꯨꯡ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ) ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯈꯟꯅꯕꯥ ꯇꯦꯕꯜ ꯁꯦꯜ꯫
<caption> ꯇꯦꯕꯜ ꯑꯗꯨꯅꯥ ꯊꯝꯂꯤꯕꯥ ꯋꯥꯐꯃꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯃꯖꯤꯟꯅꯍꯅꯕꯥ, ꯃꯔꯨꯑꯣꯏꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯥꯟꯅꯒꯅꯤ꯫
  1. <ꯇꯦꯕꯜ> ꯑꯁꯤꯅꯤ꯫
  2. <ꯀꯦꯄꯁꯟ> ... </ꯀꯦꯄꯁꯟ> ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫
  3. <ꯃꯊꯛ>꯫
  4. <tr> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
  5. <th> ... </th> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  6. <th> ... </th> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  7. </tr>ꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥ ꯉꯥꯡꯈꯤ꯫
  8. </thead> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
  9. <ꯇꯕꯣꯗꯤ> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
  10. <tr> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
  11. <td> ... </td> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
  12. <td> ... </td> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
  13. </tr>ꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥ ꯉꯥꯡꯈꯤ꯫
  14. </tbody>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
  15. </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ꯫

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

ꯋꯥꯔꯤ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ꯫
  1. <ꯐꯣꯔꯝ>꯫
  2. <ꯐꯤꯜꯗꯁꯦꯠ> ꯑꯁꯤꯅꯤ꯫
  3. <legend> ꯂꯤꯖꯦꯟꯗ </legend> ꯑꯁꯤꯅꯤ꯫
  4. <label> ꯂꯦꯕꯦꯂꯒꯤ ꯃꯃꯤꯡ </label>
  5. <input type = "text" placeholder = "ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯇꯥꯏꯞ ꯇꯧ..." >
  6. <span class = "help-block" > ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ. </span>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫
  7. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯆꯦꯀꯕꯣꯛꯁ" >
  8. <input type = "checkbox" > ꯑꯩꯕꯨ ꯆꯦꯛ ꯇꯧꯕꯤꯌꯨ꯫
  9. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  10. <button type = "ꯁꯕꯃꯤꯠ" class = "btn" > ꯁꯕꯃꯤꯠ ꯇꯧꯕꯥ </button>
  11. </ꯐꯤꯜꯗꯁꯦꯠ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
  12. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ꯫

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

ꯁꯥꯔꯆ ꯐꯣꯔꯝ ꯑꯃꯥ꯫

ꯑꯍꯦꯅꯕꯥ-ꯔꯥꯎꯟꯗ ꯇꯦꯛꯁ ꯏꯅꯄꯨꯠ ꯑꯃꯒꯤꯗꯃꯛ .form-searchꯐꯣꯔꯝ ꯑꯗꯨꯗꯥ ꯑꯃꯁꯨꯡ .search-queryꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫<input>

  1. <ꯐꯣꯔꯝ ꯀ꯭ꯂꯥꯁ = "ꯐꯣꯔꯝ-ꯁꯥꯔꯆ" >
  2. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯃꯦꯗꯤꯌꯝ ꯁꯥꯔꯆ-ꯀ꯭ꯕꯦꯔꯤ" >
  3. <ꯕꯇꯟ ꯃꯈꯜ = "ꯁꯕꯃꯤꯠ" ꯀ꯭ꯂꯥꯁ = "btn" > ꯁꯥꯔꯆ ꯇꯧꯕꯥ </button>
  4. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯝ꯫

.form-inlineꯀꯝꯄꯦꯛꯇ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯏꯅꯂꯥꯏꯟ-ꯕ꯭ꯂꯣꯛ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

  1. <ꯐꯣꯔꯝ ꯀ꯭ꯂꯥꯁ = "ꯐꯣꯔꯝ-ꯏꯅꯂꯥꯏꯟ" >
  2. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯑꯄꯤꯀꯄꯥ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯏꯃꯦꯏꯜ" >
  3. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯄꯥꯁꯋꯥꯔꯗ" ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯑꯄꯤꯀꯄꯥ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯄꯥꯁꯋꯥꯔꯗ" >
  4. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯆꯦꯀꯕꯣꯛꯁ" >
  5. <input type = "checkbox" > ꯑꯩꯕꯨ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫
  6. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  7. <button type = "submit" class = "btn" > ꯁꯥꯏꯟ ꯏꯟ ꯇꯧꯕꯥ </button>
  8. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

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

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

  • .form-horizontalꯐꯣꯔꯝ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
  • ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯥ꯫.control-group
  • .control-labelꯂꯦꯕꯦꯜ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
  • .controlsꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯔꯦꯞ ꯇꯧ꯫
  1. <ꯐꯣꯔꯝ ꯀ꯭ꯂꯥꯁ = "ꯐꯣꯔꯝ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ" >
  2. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ" >
  3. <label class = "ꯀꯟꯠꯔꯣꯜ-ꯂꯦꯕꯦꯜ" for = "ꯏꯅꯄꯨꯇꯏꯃꯦꯏꯜ" > ꯏꯃꯦꯏꯜ </label>
  4. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  5. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" id = "ꯏꯅꯄꯨꯠꯏꯃꯦꯏꯜ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯏꯃꯦꯏꯜ" >
  6. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ" >
  9. <label class = "ꯀꯟꯠꯔꯣꯜ-ꯂꯦꯕꯦꯜ" for = "ꯏꯅꯄꯨꯇꯄꯥꯁꯋꯥꯔꯗ" > ꯄꯥꯁꯋꯥꯔꯗ </label>
  10. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  11. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯄꯥꯁꯋꯥꯔꯗ" id = "ꯏꯅꯄꯨꯇꯄꯥꯁꯋꯥꯔꯗ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯄꯥꯁꯋꯥꯔꯗ" >
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  13. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  14. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ" >
  15. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  16. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯆꯦꯀꯕꯣꯛꯁ" >
  17. <input type = "checkbox" > ꯑꯩꯕꯨ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫
  18. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  19. <button type = "submit" class = "btn" > ꯁꯥꯏꯟ ꯏꯟ ꯇꯧꯕꯥ </button>
  20. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  21. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  22. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

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

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

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

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

typeꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

  1. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯇꯦꯛꯁꯠ ꯏꯅꯄꯨꯠ" >

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

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

  1. <textarea ꯔꯣꯁꯤꯡ = "꯳" ></textarea>

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

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

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


  1. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯆꯦꯀꯕꯣꯛꯁ" >
  2. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯆꯦꯀꯕꯣꯛꯁ" ꯚꯦꯜꯌꯨ = "" >
  3. ꯑꯣꯄꯁꯟ ꯑꯃꯅꯥ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯤ—ꯃꯁꯤ ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ ꯑꯣꯏꯔꯤꯕꯅꯣ ꯍꯥꯌꯕꯗꯨ ꯁꯣꯏꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ꯫
  4. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  5.  
  6. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯔꯦꯗꯤꯑꯣ" >
  7. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯔꯦꯗꯤꯑꯣ" ꯃꯃꯤꯡ = "ꯑꯣꯄꯁꯅꯁꯤꯡꯔꯦꯗꯤꯑꯣꯁꯤꯡ" id = "ꯑꯣꯄꯁꯅꯁꯤꯡꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯱" ꯚꯦꯜꯌꯨ = "ꯑꯣꯄꯁꯟ꯱" ꯆꯦꯛ ꯇꯧꯈ꯭ꯔꯦ >
  8. ꯑꯣꯄꯁꯟ ꯑꯃꯅꯥ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯤ—ꯃꯁꯤ ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ ꯑꯣꯏꯔꯤꯕꯅꯣ ꯍꯥꯌꯕꯗꯨ ꯁꯣꯏꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ꯫
  9. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  10. <ꯂꯦꯕꯦꯜ ꯀ꯭ꯂꯥꯁ = "ꯔꯦꯗꯤꯑꯣ" >
  11. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯔꯦꯗꯤꯑꯣ" ꯃꯃꯤꯡ = "ꯑꯣꯄꯁꯅꯁꯤꯡꯔꯦꯗꯤꯑꯣꯁꯤꯡ" id = "ꯑꯣꯄꯁꯅꯁꯤꯡꯔꯦꯗꯤꯑꯣꯁꯤꯡ꯲" ꯚꯦꯜꯌꯨ = "ꯑꯣꯄꯁꯅꯁꯤꯡ꯲" >
  12. ꯑꯣꯄꯁꯟ ꯑꯅꯤ ꯑꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯈꯅꯕꯅꯥ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯗꯤꯁꯦꯂꯦꯛꯇ ꯇꯧꯒꯅꯤ꯫
  13. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

ꯏꯅꯂꯥꯏꯟ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ꯫

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

  1. <label class = "ꯆꯦꯀꯕꯣꯛꯁ ꯏꯅꯂꯥꯏꯟ" >
  2. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯆꯦꯀꯕꯣꯛꯁ" id = "ꯏꯅꯂꯥꯏꯅꯆꯦꯀꯕꯣꯛꯁ1" ꯚꯦꯜꯌꯨ = "ꯑꯣꯄꯁꯟ1" > 1
  3. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  4. <label class = "ꯆꯦꯀꯕꯣꯛꯁ ꯏꯅꯂꯥꯏꯟ" >
  5. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯆꯦꯀꯕꯣꯛꯁ" id = "ꯏꯅꯂꯥꯏꯅꯆꯦꯀꯕꯣꯛꯁ2" ꯚꯦꯜꯌꯨ = "ꯑꯣꯄꯁꯟ2" > 2
  6. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫
  7. <label class = "ꯆꯦꯀꯕꯣꯛꯁ ꯏꯅꯂꯥꯏꯟ" >
  8. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯆꯦꯀꯕꯣꯛꯁ" id = "ꯏꯅꯂꯥꯏꯅꯆꯦꯀꯕꯣꯛꯁ3" ꯚꯦꯜꯌꯨ = "ꯑꯣꯄꯁꯟ3" > 3
  9. </label> ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

ꯈꯅꯒꯠꯂꯤ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯄꯁꯟ ꯁꯤꯖꯤꯟꯅꯧ ꯅꯠꯠꯔꯒꯥ ꯑꯣꯄꯁꯟ multiple="multiple"ꯀꯌꯥ ꯑꯃꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯎꯠꯅꯕꯥ a ꯁ꯭ꯄꯦꯁꯤꯐꯥꯏ ꯇꯧꯔꯣ.


  1. <ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫
  2. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  3. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  4. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  5. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  6. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  7. </ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫
  8.  
  9. < ꯃꯜꯇꯤꯄꯜ ꯈꯅꯕꯤꯌꯨ = "ꯃꯜꯇꯤꯄꯜ" >
  10. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  11. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  12. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  13. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  14. <ꯑꯣꯄꯁꯟ> </option> ꯂꯩ꯫
  15. </ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫

ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯥꯡꯗꯣꯀꯄꯥ꯫

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

ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯇꯧꯔꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯄꯦꯟꯗꯤꯡ ꯇꯧꯔꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ꯫

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯏꯅꯄꯨꯠ ꯑꯃꯗꯥ ꯇꯦꯛꯁꯠ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ an .add-onꯑꯃꯁꯨꯡ an ꯔꯦꯞ ꯇꯧ꯫input

@

.꯰꯰ ꯑꯣꯏꯈꯤ꯫
  1. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ" >
  2. <span class = "ꯑꯦꯗ-ꯑꯣꯟ" > @ </span>
  3. <input class = "span2" id = "prependedInput " type = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯌꯨꯖꯔꯅꯦꯝ" >
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  6. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯏꯅꯄꯨꯠ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  7. <span class = "ꯑꯦꯗ-ꯑꯣꯟ" > .꯰꯰ </span>
  8. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯄꯨꯟꯅꯥ ꯆꯠꯃꯤꯟꯅꯈꯤ꯫

.add-onꯏꯅꯄꯨꯠ ꯑꯃꯥ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯃꯛ ꯑꯃꯁꯨꯡ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯅꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫

$ .꯰꯰ ꯑꯣꯏꯈꯤ꯫
  1. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ" >
  2. <span class = "ꯑꯦꯗ-ꯑꯣꯟ" > $ </span>
  3. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯞꯔꯦꯄꯦꯟꯗꯦꯗꯏꯅꯄꯨꯠ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  4. <span class = "ꯑꯦꯗ-ꯑꯣꯟ" > .꯰꯰ </span>
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯇꯦꯛꯁꯇꯀꯤ ꯃꯍꯨꯠꯇꯥ ꯕꯇꯅꯁꯤꯡ꯫

<span>ꯇꯦꯛꯁꯇꯥꯏꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ aꯒꯤ ꯃꯍꯨꯠꯇꯥ , .btnꯏꯅꯄꯨꯠ ꯑꯃꯗꯥ ꯕꯇꯟ ꯑꯃꯥ (ꯅꯠꯠꯔꯒꯥ ꯑꯅꯤ) ꯑꯦꯇꯦꯆ ꯇꯧꯅꯕꯥ a ꯁꯤꯖꯤꯟꯅꯧ꯫

  1. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯏꯅꯄꯨꯇꯕꯇꯟ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  3. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" ꯃꯈꯜ = "ꯕꯇꯟ" > ꯆꯠꯂꯨ! </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  1. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯏꯅꯄꯨꯇꯕꯇꯅꯁꯤꯡ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  3. <button class = "btn" type = "ꯕꯇꯟ" > ꯁꯥꯔꯆ ꯇꯧꯕꯥ </button>
  4. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" ꯃꯈꯜ = "ꯕꯇꯟ" > ꯑꯣꯄꯁꯅꯁꯤꯡ </button>
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ꯫

  1. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯕꯇꯟ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  4. <button class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" ꯗꯦꯇꯥ-ꯇꯣꯒꯜ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
  5. ꯊꯕꯛ
  6. <span class = "ꯀꯦꯔꯦꯠ" </span>
  7. </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  8. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  9. ...
  10. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  11. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  1. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  3. <button class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" ꯗꯦꯇꯥ-ꯇꯣꯒꯜ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
  4. ꯊꯕꯛ
  5. <span class = "ꯀꯦꯔꯦꯠ" </span>
  6. </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  7. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  8. ...
  9. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  10. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  11. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯄ꯭ꯔꯤꯄꯦꯟꯗꯦꯗꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯕꯇꯟ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  1. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  3. <button class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" ꯗꯦꯇꯥ-ꯇꯣꯒꯜ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
  4. ꯊꯕꯛ
  5. <span class = "ꯀꯦꯔꯦꯠ" </span>
  6. </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  7. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  8. ...
  9. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  10. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  11. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯑꯦꯄꯦꯟꯗꯦꯗꯞꯔꯦꯄꯦꯟꯗꯦꯗꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯕꯇꯟ " ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  12. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  13. <button class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" ꯗꯦꯇꯥ-ꯇꯣꯒꯜ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
  14. ꯊꯕꯛ
  15. <span class = "ꯀꯦꯔꯦꯠ" </span>
  16. </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  17. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  18. ...
  19. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  20. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  21. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯁꯦꯒꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

  1. <ꯐꯣꯔꯝ>꯫
  2. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ" >
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤ.ꯇꯤ.ꯑꯦꯟ.-ꯒ꯭ꯔꯨꯞ" > ... </div>
  4. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  7. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  8. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤ.ꯇꯤ.ꯑꯦꯟ.-ꯒ꯭ꯔꯨꯞ" > ... </div>
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  10. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯁꯥꯔꯆ ꯐꯣꯔꯝ ꯑꯃꯥ꯫

  1. <ꯐꯣꯔꯝ ꯀ꯭ꯂꯥꯁ = "ꯐꯣꯔꯝ-ꯁꯥꯔꯆ" >
  2. <div class = "ꯏꯅꯄꯨꯠ-ꯑꯦꯄꯦꯟꯗ ꯇꯧꯕꯥ" >
  3. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲ ꯁꯥꯔꯆ-ꯀ꯭ꯕꯦꯔꯤ" >
  4. <ꯕꯇꯟ ꯃꯈꯜ = "ꯁꯕꯃꯤꯠ" ꯀ꯭ꯂꯥꯁ = "btn" > ꯁꯥꯔꯆ ꯇꯧꯕꯥ </button>
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ" >
  7. <ꯕꯇꯟ ꯃꯈꯜ = "ꯁꯕꯃꯤꯠ" ꯀ꯭ꯂꯥꯁ = "btn" > ꯁꯥꯔꯆ ꯇꯧꯕꯥ </button>
  8. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲ ꯁꯥꯔꯆ-ꯀ꯭ꯕꯦꯔꯤ" >
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  10. </form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

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

.input-largeꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯗꯨ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯁꯥꯏꯖꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯦꯆ ꯇꯧꯕꯥ ꯔꯤꯂꯦꯇꯤꯕ ꯁꯥꯏꯖꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ .span*ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯂꯒꯤ ꯏꯅꯄꯨꯠꯁꯤꯡ꯫

ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯨꯝꯅꯥ ꯂꯃꯆꯠ - <input>ꯁꯥꯖꯠ ꯁꯦꯃꯗꯣꯀꯄꯥ꯫<textarea>

  1. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ" >

ꯔꯤꯂꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

  1. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯃꯤꯅꯤ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯃꯤꯅꯤ" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯑꯄꯤꯀꯄꯥ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯑꯄꯤꯀꯄꯥ" >
  3. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯃꯦꯗꯤꯌꯝ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯃꯦꯗꯤꯌꯝ" >
  4. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯂꯥꯔꯖ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯂꯥꯔꯖ" >
  5. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-ꯑꯦꯛꯁꯂꯥꯔꯖ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-ꯑꯦꯛꯁꯂꯥꯔꯖ" >
  6. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "ꯏꯅꯄꯨꯠ-xxꯂꯥꯔꯖ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".ꯏꯅꯄꯨꯠ-xxꯂꯥꯔꯖ" >

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

ꯒ꯭ꯔꯤꯗ ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯒ꯭ꯔꯤꯗ ꯀꯂꯃꯁꯤꯡꯒꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁꯥꯏꯖꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤꯗꯃꯛ .span1to ꯁꯤꯖꯤꯟꯅꯧ꯫.span12

  1. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span1" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span1" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span2" >
  3. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span3" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span3" >
  4. < ꯀ꯭ꯂꯥꯁ ꯈꯅꯕꯤꯌꯨ = "span1" >
  5. ...
  6. </ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫
  7. < ꯀ꯭ꯂꯥꯁ ꯈꯅꯕꯤꯌꯨ = "span2" >
  8. ...
  9. </ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫
  10. < ꯀ꯭ꯂꯥꯁ ꯈꯅꯕꯤꯌꯨ = "span3" >
  11. ...
  12. </ꯁꯦꯂꯦꯛꯇ ꯇꯧꯕꯥ>꯫

ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯒ꯭ꯔꯤꯗ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤꯗꯃꯛ, ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯧ.controls-row . ꯃꯁꯤꯅꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯗꯨ ꯋꯥꯏꯇꯦꯞ-ꯁ꯭ꯄꯦꯁ ꯀꯣꯂꯥꯞ ꯇꯧꯅꯕꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧꯏ, ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯖꯤꯅꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯣꯠ ꯑꯗꯨ ꯀ꯭ꯂꯤꯌꯔ ꯇꯧꯏ꯫

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  2. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span5" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span5" >
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. <div class = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ-ꯔꯣ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯏ" >
  5. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span4" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span4" >
  6. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span1" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = ".span1" >
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. ...

ꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ ꯌꯥꯗꯕꯥ ꯏꯅꯄꯨꯠꯁꯤꯡ꯫

ꯇꯁꯦꯡꯕꯥ ꯐꯣꯔꯝ ꯃꯥꯔꯀꯑꯥꯞ ꯁꯤꯖꯤꯟꯅꯗꯅꯥ ꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ ꯌꯥꯗꯕꯥ ꯐꯣꯔꯝ ꯑꯃꯗꯥ ꯗꯦꯇꯥ ꯄꯤꯌꯨ꯫

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯈꯔꯅꯥ ꯃꯃꯜ ꯊꯝꯂꯤ꯫
  1. <span class = "input-xlarge uneditable-input" > ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯚꯦꯜꯌꯨ ꯈꯔꯥ </span>

ꯑꯦꯛꯁꯅꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

ꯑꯦꯛꯁꯅꯁꯤꯡ (ꯕꯇꯅꯁꯤꯡ) ꯀꯥꯡꯂꯨꯞ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯥ ꯂꯣꯏꯁꯤꯜꯂꯨ꯫ a ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯕꯥ ꯃꯇꯃꯗꯥ .form-actions, ꯕꯇꯅꯁꯤꯡ ꯑꯗꯨ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯏꯟꯗꯦꯟꯇ ꯇꯧꯒꯅꯤ꯫

  1. <div class = "ꯐꯣꯔꯝ-ꯑꯦꯛꯁꯅꯁꯤꯡ" >
  2. <button type = "submit" class = "btn btn-primary" > ꯑꯍꯣꯡꯕꯁꯤꯡ ꯁꯦꯚ ꯇꯧꯕꯥ </button>
  3. <ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "btn" > ꯀꯦꯟꯁꯦꯜ ꯇꯧꯕꯥ </button>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

ꯏꯅꯂꯥꯏꯟ ꯃꯇꯦꯡ ꯄꯥꯡꯏ꯫

ꯏꯅꯂꯥꯏꯟ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ꯫
  1. <input type = "text" ><span class = "ꯍꯦꯜꯄ-ꯏꯅꯂꯥꯏꯟ" > ꯏꯅꯂꯥꯏꯟ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ </span>

ꯃꯇꯦꯡ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫

ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯕ꯭ꯔꯦꯛ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯟ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯠꯄꯥ ꯌꯥꯕꯥ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯇꯀꯤ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ꯫
  1. <input type = "text" ><span class = "help-block" > ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯕ꯭ꯔꯦꯛ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯟ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯠꯄꯥ ꯌꯥꯕꯥ ꯃꯇꯦꯡ ꯇꯦꯛꯁꯇꯀꯤ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ. </span>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯔꯥꯖ꯭ꯌꯁꯤꯡ꯫

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

ꯏꯅꯄꯨꯠ ꯐꯣꯀꯁ ꯇꯧꯕꯥ꯫

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

  1. <input class = "input-xlarge" id = "ꯐꯣꯀꯁ ꯇꯧꯔꯕꯥꯏꯅꯄꯨꯠ" type = "text" value = "ꯃꯁꯤ ꯐꯣꯀꯁ ꯇꯧꯏ..." >

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

.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯔꯥꯎꯖꯔ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯜ ꯏꯅꯄꯨꯠꯁꯤꯡ :invalid. a , ꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯤꯜꯗ ꯑꯗꯨ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ typeꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ , ꯑꯃꯁꯨꯡ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯞꯂꯤꯀꯦꯕꯜ ꯑꯣꯏꯔꯕꯗꯤ) a .requiredpattern

ꯃꯁꯤ CSS ꯄ꯭ꯁꯨꯗꯣ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯂꯩꯇꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ 7-9ꯒꯤ ꯚꯔꯁꯅꯁꯤꯡꯗꯥ ꯐꯪꯗꯦ꯫

  1. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span3" ꯃꯈꯜ = "ꯏꯃꯦꯏꯜ" ꯃꯊꯧ ꯇꯥꯏ >

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯏꯅꯄꯨꯇꯁꯤꯡ꯫

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

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯏꯅꯄꯨꯠ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ..." ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ >

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

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

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯁꯣꯀꯄꯥ ꯌꯥꯏ꯫
ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯁꯣꯌꯕꯥ ꯑꯗꯨ ꯀꯣꯀꯍꯅꯕꯤꯌꯨ꯫
ꯌꯨꯖꯔꯅꯦꯝ ꯑꯁꯤ ꯂꯧꯏ꯫
ꯋꯨꯍꯨ!
  1. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ ꯋꯥꯔꯅꯤꯡ" >
  2. <label class = "control-label" for = "ꯏꯅꯄꯨꯇꯋꯥꯔꯅꯤꯡ" > ꯋꯥꯔꯅꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ </label>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  4. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" id = "ꯏꯅꯄꯨꯇꯋꯥꯔꯅꯤꯡ" >
  5. <span class = "help-inline" > ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯑꯔꯥꯅꯕꯥ ꯑꯣꯏꯔꯝꯕꯥ ꯌꯥꯏ </span>
  6. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8.  
  9. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯑꯁꯣꯌꯕꯥ" >
  10. <label class = "control-label" for = "inputError" > ꯑꯁꯣꯌꯕꯥ ꯂꯩꯕꯥ ꯏꯅꯄꯨꯠ </label>
  11. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  12. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" id = "ꯏꯅꯄꯨꯇꯑꯦꯔꯥꯔ" >
  13. <span class = "help-inline" > ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯁꯣꯌꯕꯥ ꯑꯗꯨ ꯀꯣꯀꯍꯅꯕꯤꯌꯨ </span>
  14. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  15. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  16.  
  17. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ ꯏꯅꯐꯣ" >
  18. <label class = "control-label" for = "ꯏꯅꯄꯨꯇꯏꯅꯐꯣ" > ꯏꯅꯐꯣꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ </label>
  19. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  20. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" id = "ꯏꯅꯄꯨꯇꯏꯅꯐꯣ" >
  21. <span class = "help-inline" > ꯌꯨꯖꯔꯅꯦꯝ ꯑꯁꯤ ꯍꯥꯟꯅꯅꯥ ꯂꯧꯈ꯭ꯔꯦ </span>
  22. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  23. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  24.  
  25. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ ꯃꯥꯌ ꯄꯥꯀꯄꯥ" >
  26. <label class = "control-label" for = "inputSuccess" > ꯃꯥꯌ ꯄꯥꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ </label>
  27. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  28. <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" id = "ꯏꯅꯄꯨꯇꯁꯥꯀꯁꯦꯁ" >
  29. <span class = "ꯍꯦꯜꯄ-ꯏꯅꯂꯥꯏꯟ" > ꯋꯨꯍꯨ! </span>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫
  30. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  31. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯕꯇꯅꯁꯤꯡ꯫

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

ꯀꯨꯗꯥꯝ class="" ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ ꯋꯥꯔꯣꯜ
btn ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯂꯩꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯒ꯭ꯔꯦ ꯕꯇꯟ꯫
btn btn-primary ꯑꯍꯦꯅꯕꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯋꯦꯠ ꯄꯤꯔꯤ ꯑꯃꯁꯨꯡ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯗꯥ ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯑꯦꯛꯁꯟ ꯑꯗꯨ ꯃꯁꯛ ꯈꯪꯗꯣꯀꯏ꯫
btn btn-info ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
btn btn-success ꯃꯥꯌꯄꯥꯛꯂꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯖꯤꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
btn btn-warning ꯑꯦꯛꯁꯟ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯦꯀꯁꯤꯅꯒꯗꯕꯅꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯛꯂꯤ꯫
btn btn-danger ꯈꯨꯗꯣꯡꯊꯤꯅꯤꯉꯥꯏ ꯑꯣꯏꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯅꯦꯒꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ ꯇꯥꯀꯏ꯫
btn btn-inverse ꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯦꯛꯁꯟ ꯅꯠꯠꯔꯒꯥ ꯁꯤꯖꯤꯟꯅꯐꯝ ꯑꯃꯗꯥ ꯇꯤꯡꯗꯕꯥ, ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯗꯥꯔꯛ ꯒ꯭ꯔꯦ ꯕꯇꯟ꯫
btn btn-link ꯕꯇꯟ ꯑꯃꯒꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯗꯨ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯂꯒꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯎꯍꯟꯗꯨꯅꯥ ꯕꯇꯟ ꯑꯃꯕꯨ ꯍꯦꯟꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯄꯤꯌꯨ꯫

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

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

ꯕꯇꯅꯒꯤ ꯁꯥꯏꯖꯁꯤꯡ꯫

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

  1. <p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  2. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-ꯑꯆꯧꯕꯥ btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ" type = "ꯕꯇꯟ" > ꯑꯆꯧꯕꯥ ꯕꯇꯟ </button>
  3. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-large" type = "ꯕꯇꯟ" > ꯑꯆꯧꯕꯥ ꯕꯇꯟ </button>
  4. </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  6. <button class = "btn btn-primary" type = "ꯕꯇꯟ" > ꯗꯤꯐꯣꯜꯇ ꯕꯇꯟ </ꯕꯇꯟ>
  7. <button class = "btn" type = "ꯕꯇꯟ" > ꯗꯤꯐꯣꯜꯇ ꯕꯇꯟ </button>
  8. </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. <p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  10. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-ꯑꯄꯤꯀꯄꯥ btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ" type = "ꯕꯇꯟ" > ꯑꯄꯤꯀꯄꯥ ꯕꯇꯟ </button>
  11. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-small" type = "ꯕꯇꯟ" > ꯑꯄꯤꯀꯄꯥ ꯕꯇꯟ </button>
  12. </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  13. <p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  14. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-ꯃꯤꯅꯤ btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ" ꯃꯈꯜ = "ꯕꯇꯟ" > ꯃꯤꯅꯤ ꯕꯇꯟ </button>
  15. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn btn-mini" type = "ꯕꯇꯟ" > ꯃꯤꯅꯤ ꯕꯇꯟ </ꯕꯇꯟ>
  16. </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "ꯕꯇꯟ" > ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯕꯇꯟ </button>
  2. <button class = "btn btn-large btn-block" type = "ꯕꯇꯟ" > ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯕꯇꯟ </button>

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

ꯕꯇꯅꯁꯤꯡ ꯑꯗꯨ 50% ꯍꯟꯖꯤꯅꯍꯟꯗꯨꯅꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯎꯍꯅꯒꯗꯕꯅꯤ꯫

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

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

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

  1. <a href = "#" class = "btn btn-ꯂꯥꯔꯖ btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ" > ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯂꯤꯉ꯭ꯛ </a>
  2. <a href = "#" class = "btn btn-ꯂꯥꯔꯖ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ" > ꯂꯤꯉ꯭ꯛ </a>

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

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

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

  1. <button type = "ꯕꯇꯟ" class = "btn btn-large btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ" disabled = "ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ" > ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯕꯇꯟ </button>
  2. <ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "btn btn-large" ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ > ꯕꯇꯟ </ꯕꯇꯟ>

ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ, ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯇꯦꯒꯁꯤꯡ꯫

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

ꯝꯔꯤ
  1. <a class = "btn" href = "" > ꯂꯤꯉ꯭ꯛ </a>
  2. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" ꯃꯈꯜ = "ꯁꯕꯃꯤꯠ" > ꯕꯇꯟ </ꯕꯇꯟ>
  3. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "btn" ꯃꯈꯜ = "ꯕꯇꯟ" ꯚꯦꯜꯌꯨ = "ꯏꯅꯄꯨꯠ" >
  4. <input class = "btn" type = "ꯁꯕꯃꯤꯠ" ꯚꯦꯜꯌꯨ = "ꯁꯕꯃꯤꯠ" >

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯟꯗꯔꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯛꯁꯀꯤꯗꯃꯛꯇꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯃꯦꯆ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯧ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ input, <input type="submit">ꯅꯍꯥꯛꯀꯤ ꯕꯇꯟ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

꯱꯴꯰x꯱꯴꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯴꯰x꯱꯴꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯴꯰x꯱꯴꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
  1. <img src = "..." ꯀ꯭ꯂꯥꯁ = "ꯏꯃꯖꯤ-ꯔꯥꯎꯟꯗ ꯇꯧꯔꯕꯥ" >
  2. <img src = "..." ꯀ꯭ꯂꯥꯁ = "ꯏꯃꯖꯤ-ꯁꯔꯀꯜ" >
  3. <img src = "..." ꯀ꯭ꯂꯥꯁ = "ꯏꯃꯖꯤ-ꯄꯣꯂꯥꯔꯣꯏꯗ" >

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! .img-roundedꯑꯃꯁꯨꯡ ꯁꯄꯣꯔꯠ .img-circleꯂꯩꯇꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯥꯏ.ꯏ.꯷-꯸ꯗꯥ ꯊꯕꯛ ꯇꯧꯗꯦ꯫border-radius

ꯑꯥꯏꯀꯟ ꯒ꯭ꯂꯤꯐꯁꯤꯡ꯫

ꯁ꯭ꯞꯔꯥꯏꯠ ꯃꯑꯣꯡꯗꯥ ꯑꯥꯏꯀꯟ ꯱꯴꯰, ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯑꯉꯧꯕꯥ (ꯗꯤꯐꯣꯜꯇ) ꯑꯃꯁꯨꯡ ꯑꯉꯧꯕꯥ ꯃꯆꯨꯗꯥ ꯐꯪꯏ, ꯒ꯭ꯂꯥꯏꯐꯤꯀꯅꯁꯤꯡꯅꯥ ꯄꯤꯕꯥ .

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

ꯒ꯭ꯂꯥꯏꯐꯤꯀꯅꯁ ꯑꯦꯠꯔꯤꯕꯤꯎꯁꯟ ꯇꯧꯕꯥ꯫

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


ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ꯫

ꯑꯥꯏꯀꯟ ꯄꯨꯝꯅꯃꯛꯇꯥ <i>ꯑꯈꯟꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯂꯩꯕꯥ ꯇꯦꯒ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯃꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ icon-. ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯣꯗ ꯑꯁꯤ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯃꯐꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯊꯝꯃꯨ:

  1. <i class = "ꯑꯥꯏꯀꯟ-ꯁꯥꯔꯆ" </i>

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

  1. <i class = "ꯑꯥꯏꯀꯟ-ꯁꯥꯔꯆ ꯑꯥꯏꯀꯟ-ꯍꯣꯏꯠ" ></i>

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


ꯑꯥꯏꯀꯅꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯕꯇꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯕꯇꯟ ꯇꯨꯂꯕꯥꯔ ꯑꯃꯗꯥ ꯕꯇꯟ ꯒ꯭ꯔꯨꯞ꯫
  1. <div ꯀ꯭ꯂꯥꯁ = "btn-ꯇꯨꯂꯕꯥꯔ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  3. <a class = "btn" href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯂꯦꯐꯠ" ></i></a>
  4. <a class = "btn" href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯁꯦꯟꯇꯔ" ></i></a>
  5. <a class = "btn" href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯔꯥꯏꯠ" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯖꯁ꯭ꯇꯤꯐꯥꯏ" ></i></a>
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯕꯇꯟ ꯒ꯭ꯔꯨꯞ ꯑꯃꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯌꯨꯖꯔ ꯑꯥꯏꯀꯟ-ꯍꯣꯏꯠ" ></i> ꯌꯨꯖꯔ </a>
  3. <a class = "btn btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" data-toggle = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" href = "#" ><span ꯀ꯭ꯂꯥꯁ = "ꯀꯦꯔꯦꯠ" ></span></a>
  4. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  5. <li><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯄꯦꯟꯁꯤꯜ" </i> ꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ </a></li>
  6. <li><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯇ꯭ꯔꯥꯁ" </i> ꯃꯨꯠꯊꯠꯄꯥ </a></li>
  7. <li><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯕꯦꯟ-ꯁꯔꯀꯜ" </i> ꯑꯊꯤꯡꯕꯥ ꯊꯝꯃꯨ </a></li>
  8. <li class = "ꯗꯤꯚꯥꯏꯗꯔ" </li>
  9. <li><a href = "#" ><i class = "ꯑꯩ" </i> ꯑꯦꯗꯃꯤꯟ ꯑꯃꯥ ꯁꯦꯝꯃꯨ </a></li>
  10. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  11. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯕꯇꯅꯒꯤ ꯁꯥꯏꯖꯁꯤꯡ꯫
  1. <a class = "btn btn-large" href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯁ꯭ꯇꯥꯔ" ></i> ꯁ꯭ꯇꯥꯔ </a>
  2. <a class = "btn btn-small" href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯁ꯭ꯇꯥꯔ" ></i> ꯁ꯭ꯇꯥꯔ </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯁ꯭ꯇꯥꯔ" </i> ꯁ꯭ꯇꯥꯔ </a>

ꯅꯦꯚꯤꯒꯦꯁꯟ ꯇꯧꯕꯥ꯫

  1. <ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯂꯤꯁ꯭ꯠ" >
  2. <li class = "ꯑꯦꯛꯇꯤꯕ" ><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯍꯣꯝ ꯑꯥꯏꯀꯟ-ꯍꯣꯏꯠ" </i> ꯍꯣꯝ </a></li>
  3. <li><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯕꯨꯛ" </i> ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ </a></li>
  4. <li><a href = "#" ><i class = "ꯑꯥꯏꯀꯟ-ꯄꯦꯟꯁꯤꯜ" </i> ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡ </a></li>
  5. <li><a href = "#" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯩ" </i> ꯃꯤꯁꯛ </a></li>
  6. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯐꯣꯔꯝ ꯐꯤꯜꯗꯁꯤꯡ꯫

  1. <div class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯞ" >
  2. <label class = "control-label" for = "ꯏꯅꯄꯨꯇꯑꯥꯏꯀꯟ" > ꯏꯃꯦꯏꯜ ꯑꯦꯗ꯭ꯔꯦꯁ </label>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯠꯔꯣꯂꯁꯤꯡ" >
  4. <div class = "ꯏꯅꯄꯨꯠ-ꯄ꯭ꯔꯤꯄꯦꯟꯗ" >
  5. <span class = "ꯑꯦꯗ-ꯑꯣꯟ" ><i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯑꯦꯅꯚꯦꯂꯄꯃꯦꯟꯇ" ></i></span>
  6. <ꯏꯅꯄꯨꯠ ꯀ꯭ꯂꯥꯁ = "span2" id = "ꯏꯅꯄꯨꯇꯑꯥꯏꯀꯟ" ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" >
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫