ꯁ꯭ꯀꯦꯐꯣꯜꯗꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ, ꯕꯦꯁꯤꯛ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯑꯅꯧꯕꯥ, ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ ꯂꯨꯛ ꯑꯃꯁꯨꯡ ꯐꯤꯜ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯑꯦꯛꯁꯇꯦꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯅꯒꯠꯍꯜꯂꯤ꯫
ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯒ꯭ꯔꯤꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ variables.less ꯐꯥꯏꯂꯗꯥ ꯂꯩꯕꯥ Less ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯅꯤꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ: @baseFontSize
ꯑꯃꯁꯨꯡ @baseLineHeight
. ꯑꯍꯥꯅꯕꯗꯥ ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯕꯦꯖ ꯐꯣꯟꯇ-ꯁꯥꯏꯖꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯅꯤꯁꯨꯕꯗꯥ ꯕꯦꯖ ꯂꯥꯏꯟ-ꯍꯥꯏꯠꯅꯤ꯫
ꯑꯩꯈꯣꯌꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ, ꯑꯃꯁꯨꯡ ꯃꯦꯊꯁ ꯈꯔꯗꯤ, ꯑꯩꯈꯣꯌꯒꯤ ꯃꯈꯜ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯥꯔꯖꯤꯟ, ꯄꯦꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯂꯥꯏꯟ-ꯍꯥꯏꯠꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ꯫
ꯅꯨꯜꯂꯥꯝ ꯀꯨꯏꯁ ꯔꯤꯁꯨꯁ ꯑꯦꯒꯦꯠ ꯎꯔꯅꯥ ꯃꯣꯂꯤꯁ ꯑꯣꯔꯅꯥꯔꯦ ꯚꯦꯜ ꯏꯎ ꯂꯤꯑꯣ꯫ ꯀꯝ ꯁꯣꯁꯤꯏꯁ ꯅꯥꯇꯣꯛ ꯄꯦꯅꯥꯇꯤꯕꯁ ꯑꯦꯠ ꯃꯦꯒ꯭ꯅꯤꯁ ꯗꯤꯁ ꯄꯥꯔꯇꯨꯔꯤꯌꯦꯟꯇ ꯃꯣꯟꯇꯦꯁ, ꯅꯥꯁꯦꯇꯨꯔ ꯔꯤꯗꯤꯀꯨꯂꯁ ꯃꯁ꯫ ꯅꯨꯜꯂꯥꯝ ꯑꯥꯏꯗꯤ ꯗꯣꯂꯣꯔ ꯑꯥꯏꯗꯤ ꯅꯤꯚ ꯎꯜꯠꯔꯤꯁꯤꯁ ꯚꯦꯍꯤꯀꯨꯂꯥ ꯎꯠ ꯑꯥꯏꯗꯤ ꯏꯂꯤꯠ꯫
ꯚꯤꯚꯥꯃꯁ ꯁꯦꯖꯤꯇꯤꯁ ꯂꯦꯀꯁ ꯚꯦꯜ ꯑꯣꯒ ꯂꯥꯑꯣꯔꯦꯠ ꯔꯨꯠꯔꯨꯝ ꯐꯧꯁꯤꯕꯁ ꯗꯣꯂꯣꯔ ꯑꯣꯛꯇꯔ꯫ ꯗꯨꯏꯁ ꯃꯣꯂꯤꯁ, ꯑꯦꯁ꯭ꯠ ꯅꯟ ꯀꯃꯣꯗꯣ ꯂꯨꯛꯇꯁ, ꯅꯤꯁꯤ ꯑꯦꯔꯥꯠ ꯄꯣꯔꯇꯤꯇꯣꯔ ꯂꯤꯒꯨꯂꯥ, ꯑꯦꯒꯦꯠ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯑꯣꯗꯤꯑꯣ ꯁꯦꯝ ꯅꯦꯛ ꯏꯂꯤꯠ꯫ ꯗꯣꯅꯦꯛ ꯁꯦꯗ ꯑꯣꯗꯤꯑꯣ ꯗꯨꯏ꯫
ꯄꯣꯠꯂꯝ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ | ꯈꯟꯕ ꯌꯥꯕ |
---|---|---|
<strong> |
ꯃꯔꯨꯑꯣꯏꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯃꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ꯫ | ꯑꯃꯠꯇ ꯅꯠꯇꯦ |
<em> |
ꯁ꯭ꯠꯔꯦꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯃꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ꯫ | ꯑꯃꯠꯇ ꯅꯠꯇꯦ |
<abbr> |
ꯍꯣꯚꯔꯗꯥ ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ ꯚꯔꯖꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯔꯣꯅꯤꯃꯁꯤꯡ ꯔꯦꯞ ꯇꯧꯏ꯫ | title ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ ꯇꯦꯛꯁꯇꯀꯤꯗꯃꯛꯇꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ |
<address> |
ꯃꯁꯤꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯀꯄꯥ ꯏꯄꯥ-ꯏꯄꯨ ꯅꯠꯠꯔꯒꯥ ꯊꯕꯛꯀꯤ ꯍꯀꯆꯥꯡ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯀꯟꯇꯦꯛꯇ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛ꯫ | ꯂꯥꯏꯟ ꯄꯨꯝꯅꯃꯛ ꯂꯣꯏꯁꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯃꯦꯇꯤꯡ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯃꯨ꯫<br> |
ꯐꯨꯁꯁꯦ ꯗꯥꯄꯤꯕꯁ , ꯇꯦꯂꯁ ꯑꯦ.ꯁꯤ . ꯃꯦꯁꯦꯅꯥꯁ ꯐꯧꯁꯤꯕꯁ ꯃꯣꯂꯤꯁ ꯏꯟꯇꯔꯗꯝ꯫ ꯅꯨꯜꯂꯥ ꯚꯤꯇꯥꯏ ꯏꯂꯤꯠ ꯂꯤꯕꯦꯔꯣ, ꯑꯦ ꯐꯥꯔꯦꯠꯔꯥ ꯑꯣꯒ꯫
ꯈꯪꯖꯤꯅꯒꯗꯕꯥ: ꯁꯤꯖꯤꯟꯅꯅꯕꯥ <b>
ꯑꯃꯁꯨꯡ <i>
HTML5 ꯗꯥ ꯐ꯭ꯔꯤ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯕꯤꯌꯨ, ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌꯒꯤ ꯁꯤꯖꯤꯟꯅꯐꯝ ꯑꯗꯨꯗꯤ ꯈꯔꯥ ꯍꯣꯡꯂꯦ꯫ <b>
ꯍꯥꯌꯕꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯄꯤꯗꯅꯥ ꯋꯥꯍꯩ ꯅꯠꯠꯔꯒꯥ ꯋꯥꯍꯩ ꯄꯔꯦꯡꯁꯤꯡ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯍꯥꯌꯕꯅꯤ ꯑꯗꯨꯒꯥ <i>
ꯑꯌꯥꯝꯕꯅꯥ ꯈꯣꯟꯖꯦꯜ, ꯇꯦꯛꯅꯤꯀꯦꯜ ꯇꯔꯃꯁꯤꯡ ꯑꯁꯤꯅꯆꯤꯡꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫
<address>
ꯇꯦꯒ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯅꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ :
ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔꯁꯤꯡ ꯑꯁꯤ ꯑꯆꯧꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯁꯨꯡ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯗꯣꯇꯦꯠ ꯕꯣꯇꯣꯝ ꯕꯣꯔꯗꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ꯫ ꯃꯈꯣꯌꯗꯥ ꯍꯣꯚꯔꯗꯥ ꯍꯦꯜꯄ ꯀꯔꯁꯔ ꯑꯃꯁꯨ ꯂꯩ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯍꯣꯚꯔꯗꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯈꯔꯥ ꯎꯠꯀꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯑꯍꯦꯅꯕꯥ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯂꯩ꯫
HTML ꯑꯁꯤ ꯁ꯭ꯂꯥꯏꯁ ꯇꯧꯔꯕꯥ ꯕ꯭ꯔꯦꯗꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯋꯥꯐꯃꯅꯤ꯫
ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯍꯥꯌꯕꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ attr .
ꯄꯣꯠꯂꯝ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ | ꯈꯟꯕ ꯌꯥꯕ |
---|---|---|
<blockquote> |
ꯑꯇꯣꯞꯄꯥ ꯁꯣꯔꯁ ꯑꯃꯗꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯀꯣꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫ |
.pull-left ꯑꯃꯁꯨꯡ .pull-right ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫ |
<small> |
ꯌꯨꯖꯔ-ꯐꯦꯁꯤꯡ ꯁꯥꯏꯇꯦꯁꯟ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯒꯤꯗꯃꯛ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ, ꯃꯍꯧꯁꯥꯅꯥ ꯊꯕꯛꯀꯤ ꯇꯥꯏꯇꯜ ꯂꯩꯕꯥ ꯑꯣꯊꯣꯔꯤꯇꯤ ꯑꯃꯥ꯫ | <cite> ꯁꯣꯔꯁꯀꯤ ꯇꯥꯏꯇꯜ ꯅꯠꯠꯔꯒꯥ ꯃꯃꯤꯡ ꯑꯗꯨꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯊꯝꯃꯨ꯫ |
ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯃꯥ ꯌꯥꯑꯣꯍꯟꯅꯕꯥ, ꯀꯣꯠ ꯑꯣꯏꯅꯥ HTML<blockquote>
ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀꯨꯄꯁꯤꯜꯂꯨ꯫ ꯁ꯭ꯠꯔꯦꯠ ꯀꯣꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯔꯤꯀꯃꯦꯟꯗ ꯇꯧꯔꯤ ꯃꯗꯨꯗꯤ .<p>
ꯅꯍꯥꯛꯀꯤ ꯁꯣꯔꯁ ꯑꯗꯨ ꯄꯅꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ <small>
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯌꯥꯎꯍꯅꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ —
ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯏꯝ ꯗꯦꯁ ꯑꯃꯥ ꯐꯪꯒꯅꯤ꯫
- <ꯕ꯭ꯂꯣꯀꯀꯣꯠ> ꯇꯧꯕꯥ꯫
- <p> ꯂꯣꯔꯦꯝ ꯏꯄꯁꯨꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯥꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ꯫ </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <small> ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ </small>꯫
- </blockquote> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯂꯣꯀꯀꯣꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯒꯨꯝꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ:
ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ꯫
ꯕꯣꯗꯤ ꯑꯣꯐ ꯋꯔꯀꯇꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯤ꯫
ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯗꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧꯅꯕꯥ, ꯍꯥꯄꯆꯤꯜꯂꯨ class="pull-right"
:
ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯑꯦꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯦ ꯑꯦꯟꯇꯤ ꯚꯦꯅꯦꯅꯥꯇꯤꯁ꯫
ꯕꯣꯗꯤ ꯑꯣꯐ ꯋꯔꯀꯇꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯤ꯫
<ul>
<ul class="unstyled">
<ol>
<dl>
ꯀꯣꯗꯀꯤ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯅꯤꯄꯦꯠꯁꯤꯡ ꯑꯁꯤ <code>
.
- ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ , <code> ꯁꯦꯛꯁꯟ </ code > ꯑꯁꯤ ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯒꯗꯕꯅꯤ .
<pre>
ꯀꯣꯗꯀꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯦꯔꯦꯠ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯃꯈꯣꯌꯒꯤ ꯌꯨꯅꯤꯀꯣꯗ ꯀꯦꯔꯦꯛꯇꯔꯁꯤꯡꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯑꯣꯟꯊꯣꯀꯎ꯫
<p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>
- <ꯄ꯭ꯔꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>
- </pre> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯈꯪꯖꯤꯅꯒꯗꯕꯥ: ꯇꯦꯒꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯣꯗ ꯑꯗꯨ <pre>
ꯌꯥꯔꯤꯕꯃꯈꯩ ꯅꯛꯅꯥ ꯊꯝꯃꯨ; ꯃꯁꯤꯅꯥ ꯇꯦꯕ ꯄꯨꯝꯅꯃꯛ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ꯫
ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯂꯧꯈꯠꯂꯨ <pre>
ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
- <p> ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ... </p>
- <pre class = "ꯄ꯭ꯔꯤꯇꯤꯞꯔꯤꯟꯇ꯫"
- ꯂꯥꯏꯅꯃꯁꯤꯡ" >
- <p>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯦꯝꯄꯜ ꯇꯦꯛꯁꯠ...</p>
- </pre> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
google-code-prettify ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯔꯤꯗꯝ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫
ꯃꯤꯡ ꯊꯥꯕ | ꯋꯥꯔꯣꯜ |
---|---|
<table> |
ꯇꯦꯕꯜ ꯐꯣꯔꯃꯦꯠꯇꯥ ꯗꯦꯇꯥ ꯎꯠꯅꯕꯒꯤꯗꯃꯛ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫ |
<thead> |
<tr> ꯇꯦꯕꯜ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯂꯦꯕꯦꯜ ꯇꯧꯕꯥ ꯇꯦꯕꯜ ꯍꯦꯗꯔ ꯔꯣꯁꯤꯡ ( )ꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫ |
<tbody> |
<tr> ꯇꯦꯕꯂꯒꯤ ꯍꯀꯆꯥꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯕꯜ ꯔꯣ ( )ꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫ |
<tr> |
ꯔꯣ ꯑꯃꯗꯥ ꯊꯣꯀꯄꯥ ꯇꯦꯕꯜ ꯁꯦꯂꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯀꯟꯇꯦꯅꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ( <td> ꯅꯠꯔꯒꯥ )꯫<th> |
<td> |
ꯗꯤꯐꯣꯜꯇ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ |
<th> |
ꯀꯣꯂꯃꯒꯤꯗꯃꯛ ꯑꯈꯟꯅꯕꯥ ꯇꯦꯕꯜ ꯁꯦꯜ (ꯅꯠꯠꯔꯒꯥ ꯔꯣ, ꯁ꯭ꯀꯣꯞ ꯑꯃꯁꯨꯡ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ) ꯂꯦꯕꯦꯂꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ a <thead> |
<caption> |
ꯇꯦꯕꯜ ꯑꯗꯨꯅꯥ ꯊꯝꯂꯤꯕꯥ ꯋꯥꯐꯃꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯇꯥꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯁꯃꯖꯤꯟꯅꯍꯅꯕꯥ, ꯃꯔꯨꯑꯣꯏꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯥꯟꯅꯒꯅꯤ꯫ |
- <ꯇꯦꯕꯜ> ꯑꯁꯤꯅꯤ꯫
- <ꯃꯊꯛ>꯫
- <tr> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
- <th> ... </th> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <th> ... </th> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- </tr>ꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥ ꯉꯥꯡꯈꯤ꯫
- </thead> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
- <ꯇꯕꯣꯗꯤ> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
- <tr> ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫
- <td> ... </td> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <td> ... </td> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- </tr>ꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯋꯥ ꯉꯥꯡꯈꯤ꯫
- </tbody>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯃꯤꯡ | ꯀ꯭ꯂꯥꯁ | ꯋꯥꯔꯣꯜ |
---|---|---|
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ | ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯃꯑꯣꯡ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ, ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ ꯔꯣ ꯈꯛꯇꯅꯤ꯫ |
ꯇꯉꯥꯏ ꯐꯗꯕ | .table |
ꯔꯣꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯂꯥꯏꯟ ꯈꯛꯇꯃꯛ꯫ |
ꯉꯃꯈꯩꯗꯥ ꯂꯩꯕꯥ꯫ | .table-bordered |
ꯀꯣꯟꯅꯥ ꯒꯣꯜꯗ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯄꯥꯅꯒꯤ ꯕꯣꯔꯗꯔ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ |
ꯖꯦꯕ꯭ꯔꯥ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ꯫ | .table-striped |
ꯑꯆꯝꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ (꯱, ꯳, ꯵, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯑꯉꯧꯕꯥ ꯃꯆꯨꯒꯤ ꯃꯆꯨ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫ |
ꯀꯟꯗꯦꯟꯁꯟ ꯇꯧꯕꯥ꯫ | .table-condensed |
ꯚꯔꯇꯤꯀꯦꯜ ꯄꯦꯗꯤꯡ ꯑꯁꯤ ꯇꯪꯈꯥꯌꯗꯥ ꯀꯥꯄꯁꯤꯜꯂꯤ, 8px ꯗꯒꯤ 4px ꯐꯥꯑꯣꯕꯥ, ꯄꯨꯝꯅꯃꯛ td ꯑꯃꯁꯨꯡ th ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ꯫ |
ꯇꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯔꯤꯗꯤꯕꯤꯂꯤꯇꯤ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯠꯔꯀꯆꯔ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯅꯕꯥ ꯉꯃꯈꯩ ꯈꯔꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ꯫ ꯲.꯰ꯒꯥ ꯂꯣꯌꯅꯅꯥ .table
ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯏ꯫
- <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ" >
- ...
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
# | ꯑꯍꯥꯟꯕ ꯃꯤꯡ | ꯑꯀꯣꯟꯕ ꯃꯤꯡ | ꯂꯣꯜ |
---|---|---|---|
꯱ | ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ | ꯑꯣꯇꯣ꯫ | ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ |
꯲ | ꯌꯥꯀꯣꯕ꯫ | ꯊꯣꯔꯅꯇꯟ꯫ | ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫ |
꯳ | ꯁ꯭ꯇꯨ | ꯗꯦꯟꯇ ꯇꯧꯕꯥ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
ꯖꯦꯕ꯭ꯔꯥ-ꯁ꯭ꯠꯔꯥꯏꯄꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯔꯥ ꯐꯦꯟꯁꯤ ꯑꯣꯏꯌꯨ— .table-striped
ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
ꯈꯪꯖꯤꯅꯒꯗꯕꯥ: ꯁ꯭ꯞꯔꯤꯠ ꯇꯧꯔꯕꯥ ꯇꯦꯕꯂꯁꯤꯡꯅꯥ :nth-child
CSS ꯁꯦꯂꯦꯛꯇꯔ ꯁꯤꯖꯤꯟꯅꯩ ꯑꯃꯁꯨꯡ IE7-IE8ꯗꯥ ꯐꯪꯗꯦ꯫
- <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯁ꯭ꯠꯔꯥꯏꯞ" >
- ...
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
# | ꯑꯍꯥꯟꯕ ꯃꯤꯡ | ꯑꯀꯣꯟꯕ ꯃꯤꯡ | ꯂꯣꯜ |
---|---|---|---|
꯱ | ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ | ꯑꯣꯇꯣ꯫ | ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ |
꯲ | ꯌꯥꯀꯣꯕ꯫ | ꯊꯣꯔꯅꯇꯟ꯫ | ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫ |
꯳ | ꯁ꯭ꯇꯨ | ꯗꯦꯟꯇ ꯇꯧꯕꯥ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
ꯇꯦꯕꯜ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯕꯣꯔꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯣꯏꯕꯥ ꯄꯥꯟꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
- <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯕꯣꯔꯗꯔ ꯇꯧꯕꯥ" >
- ...
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
# | ꯑꯍꯥꯟꯕ ꯃꯤꯡ | ꯑꯀꯣꯟꯕ ꯃꯤꯡ | ꯂꯣꯜ |
---|---|---|---|
꯱ | ꯃꯥꯔꯛ ꯑꯣꯇꯣ꯫ | ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ | |
꯲ | ꯌꯥꯀꯣꯕ꯫ | ꯊꯣꯔꯅꯇꯟ꯫ | ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫ |
꯳ | ꯁ꯭ꯇꯨ | ꯗꯦꯟꯇ ꯇꯧꯕꯥ꯫ | |
꯳ | ꯕ꯭ꯔꯣꯁꯦꯐ꯫ | ꯁ꯭ꯇꯥꯂꯤꯟꯅꯥ ꯄꯤꯈꯤ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
.table-condensed
ꯇꯦꯕꯜ ꯁꯦꯜ ꯄꯦꯗꯤꯡ ꯑꯗꯨ ꯇꯪꯈꯥꯌꯗꯥ (8pxꯗꯒꯤ 4px ꯐꯥꯎꯕꯥ) ꯀꯀꯊꯠꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯀꯝꯄꯦꯛꯇ ꯑꯣꯏꯍꯅꯒꯗꯕꯅꯤ꯫
- <ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯀꯟꯗꯦꯟꯁ ꯇꯧꯕꯥ" >
- ...
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
# | ꯑꯍꯥꯟꯕ ꯃꯤꯡ | ꯑꯀꯣꯟꯕ ꯃꯤꯡ | ꯂꯣꯜ |
---|---|---|---|
꯱ | ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ | ꯑꯣꯇꯣ꯫ | ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ |
꯲ | ꯌꯥꯀꯣꯕ꯫ | ꯊꯣꯔꯅꯇꯟ꯫ | ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫ |
꯳ | ꯁ꯭ꯇꯨ | ꯗꯦꯟꯇ ꯇꯧꯕꯥ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
ꯂꯩꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯂꯨꯀꯁꯤꯡ ꯐꯪꯅꯕꯥ ꯇꯦꯕꯜ ꯀ꯭ꯂꯥꯁ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯄꯨꯟꯁꯤꯟꯅꯕꯗꯥ ꯋꯥꯈꯜ ꯅꯨꯡꯉꯥꯏꯅꯥ ꯂꯩꯌꯨ꯫
- <table class = "ꯇꯦꯕꯜ ꯇꯦꯕꯜ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯦꯕꯜ-ꯕꯣꯔꯗꯔ ꯇꯦꯕꯜ-ꯀꯟꯗꯦꯟꯁ ꯇꯧꯕꯥ" >
- ...
- </ꯇꯦꯕꯜ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
# | ꯑꯍꯥꯟꯕ ꯃꯤꯡ | ꯑꯀꯣꯟꯕ ꯃꯤꯡ | ꯂꯣꯜ |
---|---|---|---|
꯱ | ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ | ꯑꯣꯇꯣ꯫ | ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ |
꯲ | ꯌꯥꯀꯣꯕ꯫ | ꯊꯣꯔꯅꯇꯟ꯫ | ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ꯫ |
꯳ | ꯁ꯭ꯇꯨ | ꯗꯦꯟꯇ ꯇꯧꯕꯥ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
꯴ | ꯕ꯭ꯔꯣꯁꯦꯐ꯫ | ꯁ꯭ꯇꯥꯂꯤꯟꯅꯥ ꯄꯤꯈꯤ꯫ | HTML ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯐꯣꯔꯃꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯁꯔꯨꯛ ꯑꯗꯨꯗꯤ ꯅꯍꯥꯛꯀꯤ ꯏꯅꯄꯨꯠ ꯑꯃꯁꯨꯡ ꯀꯟꯠꯔꯣꯜ ꯄꯨꯝꯅꯃꯛ ꯅꯍꯥꯛꯀꯤ ꯃꯥꯔꯀꯑꯥꯄꯇꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯦꯃꯒꯠꯂꯕꯁꯨ ꯑꯆꯧꯕꯥ ꯎꯕꯥ ꯐꯪꯏ꯫ ꯑꯍꯦꯅꯕꯥ HTML ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ, ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡꯒꯤꯗꯃꯛ ꯄꯦꯇꯔꯅꯁꯤꯡ ꯄꯤꯔꯤ꯫
ꯍꯦꯟꯅꯥ ꯀꯝꯄꯤꯂꯤꯀꯦꯠ ꯑꯣꯏꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯑꯁꯤ ꯐꯖꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯃꯁꯨꯡ ꯏꯚꯦꯟꯇ ꯕꯥꯏꯟꯗꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯨꯞꯄꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯀꯦꯂꯦꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯈꯣꯡꯊꯥꯡ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯀꯚꯔ ꯇꯧꯏ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯐꯣꯔꯝ ꯂꯦꯑꯥꯎꯠ ꯃꯈꯜ ꯃꯔꯤꯒꯤ ꯁꯄꯣꯔꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ:
ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯃꯈꯂꯒꯤ ꯐꯣꯔꯝ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯈꯔꯥ ꯄꯨꯔꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯑꯗꯨꯕꯨ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯃꯁꯥꯃꯛ ꯑꯗꯨꯃꯛ ꯂꯩꯔꯤ ꯑꯃꯁꯨꯡ ꯂꯃꯆꯠ ꯁꯥꯖꯠ ꯆꯠꯂꯤ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯐꯣꯔꯃꯁꯤꯡꯗꯥ ꯏꯅꯄꯨꯠ, ꯇꯦꯛꯁꯑꯦꯔꯤꯌꯥ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯊꯥꯖꯕꯥ ꯌꯥꯕꯥ ꯈꯅꯒꯠꯂꯕꯥ ꯕꯦꯖ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ ꯑꯗꯨꯕꯨ ꯃꯁꯤꯗꯥ ꯑꯦꯄꯦꯟꯗꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯨꯝꯕꯥ ꯀꯁ꯭ꯇꯝ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯌꯥ ꯑꯃꯁꯨ ꯌꯥꯑꯣꯔꯤ ꯑꯃꯁꯨꯡ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯇꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫
ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯃꯈꯜ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯑꯦꯔꯥꯔ, ꯋꯥꯔꯅꯤꯡ, ꯑꯃꯁꯨꯡ ꯃꯥꯌ ꯄꯥꯀꯄꯒꯨꯝꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯋꯦꯕ ꯐꯣꯔꯃꯁꯤꯡꯒꯤ ꯃꯑꯣꯡ ꯃꯔꯤꯒꯤꯗꯃꯛ ꯏꯆꯝ ꯆꯝꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯄꯤꯔꯤ꯫
ꯃꯤꯡ | ꯀ꯭ꯂꯥꯁ | ꯋꯥꯔꯣꯜ |
---|---|---|
ꯚꯔꯇꯤꯀꯦꯜ (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ) | .form-vertical (ꯃꯊꯧ ꯇꯥꯗꯦ) |
ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ, ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ꯫ |
ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫ | .form-inline |
ꯀꯝꯄꯦꯛꯇ ꯁ꯭ꯇꯥꯏꯂꯒꯤꯗꯃꯛ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯁꯨꯡ ꯏꯅꯂꯥꯏꯟ-ꯕ꯭ꯂꯣꯛ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ꯫ |
ꯊꯤꯕ | .form-search |
ꯃꯁꯛ ꯊꯣꯀꯄꯥ ꯁꯥꯔꯆ ꯑꯦꯁ꯭ꯇꯦꯇꯤꯛ ꯑꯃꯒꯤꯗꯃꯛ ꯑꯍꯦꯅꯕꯥ-ꯔꯥꯎꯟꯗ ꯇꯦꯛꯁ ꯏꯅꯄꯨꯠ꯫ |
ꯑꯐꯩꯕ | .form-horizontal |
ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯂꯥꯏꯟꯗꯥ ꯂꯦꯞꯇꯅꯥ, ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫ |
v2.0ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯐꯣꯔꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯃꯥꯔꯠ ꯑꯣꯏꯕꯥ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯂꯩ꯫ ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ, ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯐꯣꯔꯝ ꯈꯛꯇꯅꯤ꯫
ꯗꯤꯐꯣꯜꯇ ꯋꯦꯕꯀꯤꯠ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯔꯤꯐ꯭ꯂꯦꯛꯇ .form-search
ꯇꯧꯗꯨꯅꯥ, ꯑꯍꯦꯅꯕꯥ ꯒꯣꯜꯗ ꯁꯥꯔꯆ ꯐꯤꯜꯗꯁꯤꯡꯒꯤꯗꯃꯛ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
ꯏꯅꯄꯨꯠꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯗꯣꯛꯅꯕꯥ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯂꯅꯤ꯫ .form-inline
ꯑꯃꯁꯨꯡ , .form-horizontal
ꯑꯩꯈꯣꯌꯅꯥ ꯏꯅꯂꯥꯏꯟ-ꯕ꯭ꯂꯣꯛ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯄꯨꯝꯅꯃꯛꯅꯤ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯨꯂꯦꯠ ꯂꯤꯁ꯭ꯠ ꯑꯁꯤ ꯄꯤꯔꯤ:
v1.4 ꯐꯥꯑꯣꯕꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯗꯤꯐꯣꯜꯇ ꯐꯣꯔꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯂꯦꯑꯥꯎꯠ ꯁꯤꯖꯤꯟꯅꯈꯤ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯍꯦꯟꯅꯥ ꯁ꯭ꯃꯥꯔꯠ ꯑꯣꯏꯕꯥ, ꯍꯦꯟꯅꯥ ꯁ꯭ꯀꯦꯂꯦꯕꯜ ꯑꯣꯏꯕꯥ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯂꯩꯍꯟꯅꯕꯥ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯑꯊꯤꯡꯕꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯈꯤ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ disabled
ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯐꯤꯆꯔ ꯇꯧꯏ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯋꯦꯕꯀꯤꯠ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯏ outline
ꯑꯃꯁꯨꯡ box-shadow
ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ :focus
.
ꯃꯁꯤꯗꯥ ꯑꯁꯣꯏꯕꯥ, ꯆꯦꯀꯁꯤꯅꯋꯥ, ꯑꯃꯁꯨꯡ ꯃꯥꯌ ꯄꯥꯀꯄꯒꯤꯗꯃꯛ ꯚꯦꯂꯤꯗꯦꯁꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ, ꯑꯀꯣꯌꯕꯗꯥ ꯂꯩꯔꯤꯕꯥ .control-group
.
- <ꯐꯤꯜꯗꯁꯦꯠ ꯇꯧꯕꯥ꯫
- class = "ꯀꯟꯠꯔꯣꯜ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯑꯁꯣꯌꯕꯥ" >
- ...
- </ꯐꯤꯜꯗꯁꯦꯠ>ꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ—ꯑꯦꯄꯦꯟꯗꯦꯗ ꯅꯠꯠꯔꯒꯥ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯇꯥꯏꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ—ꯅꯍꯥꯛꯀꯤ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯀꯟꯇꯦꯛꯁ ꯄꯤꯅꯕꯒꯤ ꯐꯖꯔꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ ꯑꯆꯧꯕꯥ ꯈꯨꯗꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯇ꯭ꯕꯤꯇꯔ ꯌꯨꯖꯔꯅꯦꯃꯒꯤꯗꯃꯛ @ ꯁꯥꯏꯟ ꯅꯠꯔꯒꯥ ꯐꯥꯏꯅꯥꯟꯁꯀꯤ ꯑꯣꯏꯅꯥ $ ꯌꯥꯑꯣꯔꯤ꯫
v1.4 ꯐꯥꯑꯣꯕꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯁ꯭ꯇꯦꯛ ꯇꯧꯅꯕꯥ ꯆꯦꯀꯕꯣꯛꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯃꯊꯧ ꯇꯥꯈꯤ꯫ ꯍꯧꯖꯤꯛ, ꯃꯁꯤ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯏꯆꯝ ꯆꯝꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯅꯤ <label class="checkbox">
ꯃꯗꯨꯗꯤ <input type="checkbox">
.
ꯏꯅꯂꯥꯏꯟ ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣꯁꯤꯡꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯈꯖꯤꯛꯇꯪ ꯅꯠꯔꯒꯥ .inline
ꯑꯃꯠꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯂꯣꯏꯔꯦ꯫.checkbox
.radio
ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯝ ꯑꯃꯗꯥ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯄꯦꯟꯗ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ, .add-on
ꯑꯃꯁꯨꯡ input
ꯑꯗꯨ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯂꯥꯏꯟ ꯑꯗꯨꯗꯥ, ꯁ꯭ꯄꯦꯁ ꯌꯥꯑꯣꯗꯅꯥ ꯁꯣꯏꯗꯅꯥ ꯊꯝꯃꯨ꯫
ꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯝ ꯏꯅꯄꯨꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, ꯏꯅꯄꯨꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ��ꯇꯨꯡꯗꯥ ꯏꯅꯂꯥꯏꯟ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ <span class="help-inline">
ꯑꯃꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯦꯜꯄ ꯇꯦꯛꯁꯠ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ ꯌꯥꯎꯍꯅꯒꯗꯕꯅꯤ꯫<p class="help-block">
:after
. In the docs, we show a light red background color on hover to hightlight the icon's size.
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position
. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon-
for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
With v2.0.0, we have opted to use an <i>
tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i>
tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an <i>
tag, you can put an icon.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.