ꯅꯦꯚꯤꯒꯦꯁꯟ, ꯑꯦꯂꯔꯇꯁꯤꯡ, ꯄꯣꯄꯣꯚꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯗꯖꯟ ꯀꯌꯥ ꯁꯦꯃꯒꯠꯂꯤ꯫
ꯑꯥꯔ.ꯗꯤ.ꯑꯣ.ꯅꯥ ꯏꯟꯁꯄꯥꯏꯔ ꯇꯧꯕꯥ ꯑꯂꯠꯔꯥ ꯁꯤꯝꯄꯂꯤꯁ꯭ꯇꯤꯛ ꯑꯃꯁꯨꯡ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ, ꯑꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯁꯥꯔꯆ ꯔꯤꯖꯜꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ꯫ ꯑꯆꯧꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯨꯕꯥ, ꯐꯖꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ, ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯦꯔꯤꯌꯥꯁꯤꯡ ꯄꯤꯔꯤ꯫
ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯑꯆꯨꯝꯕꯥ ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯤꯚꯝ ꯀꯌꯥꯗꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ .disabled
ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯃꯁꯨꯡ .active
ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖꯒꯤꯗꯃꯛ꯫
ꯄꯦꯖꯤꯅꯦꯁꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ: .pagination-centered
ꯑꯃꯁꯨꯡ .pagination-right
.
ꯗꯤꯐꯣꯜꯇ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯀꯌꯥꯗꯥ ꯊꯕꯛ ꯇꯧꯏ꯫
ꯔꯦꯞ ꯏꯟ ꯑꯦ <div>
, ꯄꯦꯖꯤꯅꯦꯁꯟ ꯑꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ <ul>
.
- <div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" >
- <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <li><a href = "#" > ꯃꯃꯥꯡꯒꯤ </a></li>
- <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" >
- <a href = "#" > ꯱ </a> ꯂꯩ꯫
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <li><a href = "#" > ꯲ </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
- <li><a href = "#" > ꯳ </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
- <li><a href = "#" > ꯴ </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
- <li><a href = "#" > ꯃꯊꯪꯒꯤ </a></li>
- </ul>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯄꯦꯖꯔ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤ ꯂꯥꯏꯠ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯒꯤꯁꯨ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯔꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯅꯤ꯫ ꯃꯁꯤ ꯕ꯭ꯂꯣꯒ ꯅꯠꯠꯔꯒꯥ ꯃꯦꯒꯥꯖꯤꯅꯒꯨꯝꯕꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯁꯥꯏꯇꯁꯤꯡꯒꯤꯗꯃꯛ ꯌꯥꯝꯅꯥ ꯐꯩ꯫
ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯄꯦꯖꯔ ꯑꯗꯨꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯁꯦꯟꯇꯔ ꯇꯧꯏ꯫
- <ul ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯔ" >
- <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <a href = "#" > ꯃꯃꯥꯡꯒꯤ </a>
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
- <a href = "#" > ꯃꯊꯪꯒꯤ </a>
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </ul>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
ꯅꯠꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯂꯤꯉ꯭ꯛ ꯈꯨꯗꯤꯡꯃꯛ ꯁꯥꯏꯗꯁꯤꯡꯗꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ:
- <ul ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯔ" >
- <li class = "ꯃꯃꯥꯡꯒꯤ" >
- <a href = "#" > ꯑꯃꯁꯨꯡ ꯂꯥꯔꯔ; ꯑꯍꯜ ꯑꯣꯏꯔꯕꯥ </a>꯫
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <li class = "ꯃꯊꯪꯒꯤ" >
- <a href = "#" > ꯑꯅꯧꯕꯥ → </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </ul>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
ꯂꯦꯕꯦꯂꯁꯤꯡ꯫ | ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫ |
---|---|
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ | <span class="label">Default</span> |
ꯑꯅꯧꯕ | <span class="label label-success">New</span> |
ꯆꯦꯛꯁꯤꯟꯋꯥ | <span class="label label-warning">Warning</span> |
ꯃꯔꯨ ꯑꯣꯏꯕ | <span class="label label-important">Important</span> |
ꯏꯅꯐꯣ | <span class="label label-info">Info</span> |
ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯊꯝꯕꯤꯁꯤꯡ ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯀꯑꯥꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯎꯠꯅꯕꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯅꯤ꯫
ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯈꯔꯥ ꯇꯧꯔꯒꯥ, ꯍꯦꯗꯤꯡ, ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ, ꯅꯠꯔꯒꯥ ꯕꯇꯅꯒꯨꯝꯕꯥ ꯃꯈꯜ ꯑꯃꯠꯇꯒꯤ HTML ꯀꯟꯇꯦꯟꯇ ꯊꯝꯕꯤꯕꯥ ꯌꯥꯏ꯫
ꯊꯝꯕꯤꯕꯥ (ꯃꯃꯥꯡꯗꯥ .media-grid
v1.4 ꯐꯥꯑꯣꯕꯥ) ꯑꯁꯤ ꯐꯣꯇꯣ ꯅꯠꯠꯔꯒꯥ ꯚꯤꯗꯤꯑꯣꯁꯤꯡꯒꯤ ꯒ꯭ꯔꯤꯗꯁꯤꯡ, ꯏꯃꯦꯖ ꯁꯥꯔꯆ ꯔꯤꯖꯜꯇꯁꯤꯡ, ꯔꯤꯇꯦꯜ ꯄ꯭ꯔꯗꯛꯇꯁꯤꯡ, ꯄꯣꯔꯇꯐꯣꯂꯤꯑꯣꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤꯗꯃꯛ ꯑꯆꯧꯕꯥ ꯑꯃꯅꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯂꯤꯉ꯭ꯛ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯀꯟꯇꯦꯟꯇ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
ꯊꯝꯕꯤꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯃꯅꯤ— ꯑꯦꯂꯤꯃꯦꯟꯇ ul
ꯃꯁꯤꯡ ꯑꯃꯍꯦꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯥ li
ꯍꯥꯌꯕꯁꯤ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯥ ꯑꯗꯨ ꯈꯛꯇꯅꯤ꯫ ꯃꯁꯤꯁꯨ ꯁꯨꯄꯔ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯔꯦꯞ ꯇꯧꯅꯕꯥ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯃꯈꯜ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯤ꯫
ꯑꯔꯣꯏꯕꯗꯥ, ꯊꯝꯕꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯅꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ—ꯃꯈꯣꯌꯒꯨꯝꯕꯥ .span2
ꯅꯠꯠꯔꯒꯥ — .span3
ꯊꯨꯝꯕꯅꯦꯂꯒꯤ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ꯫
ꯃꯃꯥꯡꯗꯥ ꯍꯥꯌꯈꯤꯕꯒꯨꯝꯅꯥ, ꯊꯝꯕꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯂꯥꯏ ꯑꯃꯁꯨꯡ ꯁ꯭ꯠꯔꯦꯠꯐꯣꯔꯗ ꯑꯣꯏ꯫ ꯂꯤꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯏꯃꯦꯖꯁꯤꯡꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯇꯑꯞ ꯑꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ :
- <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
- <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳" >
- <a href = "#" ꯀ꯭ꯂꯥꯁ = "ꯊꯝꯕꯅꯦꯜ" >
- <img src = "https://ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗ.ꯏꯠ/꯲꯶꯰x꯱꯸꯰" alt = "" >
- </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- ...
- </ul>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
ꯊꯝꯕꯤꯁꯤꯡꯗꯥ ꯀꯁ꯭ꯇꯝ HTML ꯀꯟꯇꯦꯟꯇꯀꯤꯗꯃꯛ, ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯈꯔꯥ ꯍꯣꯡꯏ꯫ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯀꯟꯇꯦꯟꯇ ꯃꯐꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯅꯕꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯥꯏꯛ ꯁꯣ <a>
ꯑꯃꯒꯤꯗꯃꯛ ꯁ꯭ꯕ꯭ꯌꯥꯞ ꯇꯧꯏ <div>
:
- <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
- <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳" >
- <div class = "ꯊꯝꯕꯅꯦꯜ" >
- <img src = "https://ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗ.ꯏꯠ/꯲꯶꯰x꯱꯸꯰" alt = "" >
- <h5> ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ </h5>
- <p> ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯊꯝꯕꯤꯕꯥ ꯀꯦꯄꯁꯟ... </p>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- ...
- </ul>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯂꯥꯏꯊꯣꯀꯍꯜꯂꯦ: .alert
ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ .alert-message
. ꯑꯩꯈꯣꯌꯅꯥ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯗꯨꯁꯨ ꯍꯟꯊꯍꯜꯂꯦ—ꯅꯣ <p>
ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯊꯧ ꯇꯥꯗꯦ, ꯁꯨꯞꯅꯇꯒꯤ ꯑꯥꯎꯠꯇꯔ <div>
.
ꯀꯣꯗ ꯍꯟꯊꯅꯥ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯇꯦꯛꯇ ꯀꯥꯌꯗꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯒꯤꯗꯃꯛ, ꯑꯩꯈꯣꯌꯅꯥ ꯕ꯭ꯂꯣꯛ ꯑꯦꯂꯔꯇꯁꯤꯡ, ꯍꯦꯟꯅꯥ ꯄꯦꯗꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯄꯥ ꯃꯦꯁꯦꯖꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯍꯧꯁꯥꯅꯥ ꯍꯦꯟꯅꯥ ꯇꯦꯛꯁꯠꯀꯤꯗꯃꯛ ꯗꯤꯐꯦꯔꯦꯟꯁꯤꯌꯦꯇꯤꯡ ꯂꯨꯛ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯁꯨ ꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ .alert-block
.
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯑꯆꯧꯕꯥ jQuery ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ, ꯃꯁꯤꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯌꯥꯝꯅꯥ ꯂꯥꯏꯅꯥ ꯊꯥꯗꯣꯀꯄꯥ ꯉꯃꯍꯜꯂꯤ꯫
ꯅꯍꯥꯛꯀꯤ ꯃꯦꯁꯦꯖ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯣꯖ ꯑꯥꯏꯀꯟ ꯑꯃꯥ ꯁꯤꯝꯄꯜ ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯚ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯂꯔꯠ" > ꯫
- <a class = "ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ" > × </a>
- <strong> ꯆꯦꯀꯁꯤꯅꯋꯥ ꯑꯃꯥ! </strong> ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯎꯕꯥ ꯐꯪꯗ꯭ꯔꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯗꯨ ꯐꯖꯅꯥ ꯁꯥꯡꯗꯣꯀꯎ: .alert-block
ꯍꯦꯟꯅꯥ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯁꯠ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯃꯁꯨꯡ .alert-heading
ꯃꯦꯆꯤꯡ ꯍꯦꯗꯤꯡ ꯑꯃꯒꯤꯗꯃꯛ꯫
ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯎꯕꯥ ꯐꯪꯗ꯭ꯔꯤ꯫ ꯅꯨꯜꯂꯥ ꯚꯤꯇꯥ ꯏꯂꯤꯠ ꯂꯤꯕꯦꯔꯣ, ꯑꯦ ꯐꯥꯔꯦꯠꯔꯥ ꯑꯣꯒ꯫ ꯄ꯭ꯔꯦꯁꯦꯟꯇ ꯀꯃꯣꯗꯣ ꯀꯔꯁꯁ ꯃꯦꯒ꯭ꯅꯥ, ꯚꯦꯜ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯅꯤꯁꯜ ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯠ.
- <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯕ꯭ꯂꯣꯛ" >
- <a class = "ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ" > × </a>
- <h4 class = "ꯑꯦꯂꯔꯠ-ꯍꯦꯗꯤꯡ" > ꯆꯦꯀꯁꯤꯅꯋꯥ! </h꯴> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
- ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛꯅꯥ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯑꯦꯔꯔ" >
- ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯃꯥꯏꯄꯥꯀꯄꯥ" >
- ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯏꯅꯐꯣ" >
- ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯚꯔꯇꯤꯀꯦꯜ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
- style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ %; " ></div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯁ꯭ꯠꯔꯥꯏꯞ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
- <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯏꯅꯐꯣ꯫"
- ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
- style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ %; " ></div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯁ꯭ꯠꯔꯥꯏꯞ ꯈꯨꯗꯝ ꯑꯃꯥ ꯂꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯕꯨ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯏ꯫
- <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯈꯨꯗꯣꯡꯊꯤꯕꯥ꯫"
- ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯑꯦꯛꯇꯤꯕ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
- style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯴꯰ %; " ></div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯃꯥꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯕꯇꯟ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯔꯇꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯈꯔꯗꯤ ꯁꯤꯖꯤꯟꯅꯩ꯫
.progress-info
.progress-success
.progress-danger
ꯅꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ LESS ꯐꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯃꯆꯨ ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖꯁꯤꯡ ꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ CSS3 ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ .active
ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯀꯤ .progress-striped
ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ ꯑꯗꯨ ꯂꯦꯡꯗꯅꯥ ꯂꯩꯒꯅꯤ꯫
ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯏꯐꯦꯛꯇ ꯄꯨꯝꯅꯃꯛ ꯐꯪꯅꯕꯥ CSS3 ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇꯁꯤꯡ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯐꯤꯆꯔꯁꯤꯡ ꯑꯁꯤ IE7-8 ꯅꯠꯠꯔꯒꯥ ꯐꯥꯏꯔꯐꯛꯁꯀꯤ ꯑꯔꯤꯕꯥ ꯚꯔꯁꯅꯁꯤꯡꯗꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫
ꯑꯣꯄꯦꯔꯥꯅꯥ ꯃꯇꯝ ꯑꯁꯤꯗꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫
ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯏꯅꯁꯦꯠ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯋꯦꯜ ꯑꯗꯨ ꯏꯆꯝ ꯆꯝꯕꯥ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
- <div class = "ꯑꯐꯕꯥ" >꯫
- ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯔꯇꯁꯤꯡꯒꯨꯝꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯊꯥꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯖꯦꯅꯦꯔꯦꯜ ꯀ꯭ꯂꯣꯖ ꯑꯥꯏꯀꯟ ꯁꯤꯖꯤꯟꯅꯧ꯫
- <a class = "ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ" > × </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫