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

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

ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

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

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯕꯀꯁꯤꯡ꯫

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

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

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ꯫

ꯑꯦꯉ꯭ꯀꯔ ꯇꯦꯒ ꯕꯇꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯝꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯕꯇꯟ ꯒ꯭ꯔꯨꯞ ꯑꯃꯥ HTMLꯅꯥ ꯀꯔꯝꯅꯥ ꯌꯦꯡꯒꯅꯤ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  2. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" > 1 </ꯕꯇꯟ> ꯫
  3. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" > </ꯕꯇꯟ> ꯫
  4. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" > 3 </ꯕꯇꯟ> ꯂꯩ꯫
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯇꯨꯂꯕꯥꯔꯒꯤ ꯈꯨꯗꯝ꯫

ꯍꯦꯟꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ <div class="btn-group">ꯑꯦꯗꯥ ꯁꯦꯠꯁꯤꯡ ꯀꯝꯕꯤꯅꯦꯠ ꯇꯧꯕꯥ꯫<div class="btn-toolbar">

  1. <div ꯀ꯭ꯂꯥꯁ = "btn-ꯇꯨꯂꯕꯥꯔ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  3. ...
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯐꯪꯕꯤꯌꯨ »

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

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯂꯩꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯥ ꯃꯁꯥꯒꯤ .btn-groupꯃꯅꯨꯡꯗꯥ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯅꯒꯗꯕꯅꯤ꯫.btn-toolbar

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

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯑꯦꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯃꯗꯨꯅꯥ .btn-groupꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯦꯅꯨ ꯃꯥꯔꯀꯑꯥꯞ ꯄꯤꯗꯨꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯃꯥ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯅꯕꯥ ꯕꯇꯟ ꯑꯃꯍꯦꯛꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

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

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  2. <a class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" data-toggle = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" href = "#" >
  3. ꯊꯕꯛ
  4. <span class = "ꯀꯦꯔꯦꯠ" </span>
  5. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  7. <!-- ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯂꯤꯉ꯭ꯀꯁꯤꯡ -->
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯕꯇꯟ ꯁꯥꯏꯖ ꯄꯨꯝꯅꯃꯛꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯅꯥ ꯁꯥꯏꯖ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯕꯇꯟ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯗꯨ .btn-large, .btn-small, ꯅꯠꯔꯒꯥ .btn-mini.

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯄ꯭ꯂꯒꯏꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

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


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

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯤꯇꯤꯑꯦꯟ-ꯒ꯭ꯔꯨꯞ" >
  2. ...
  3. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ ꯄꯨꯜ-ꯔꯥꯏꯠ" >
  4. <!-- ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯂꯤꯉ꯭ꯀꯁꯤꯡ -->
  5. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  6. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

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

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

ꯗ꯭ꯔꯣꯄꯑꯞ ꯃꯦꯅꯨꯁꯤꯡ꯫

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

  1. <div class = "btn-ꯒ꯭ꯔꯨꯞ ꯗ꯭ꯔꯣꯄꯑꯞ" >
  2. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "btn" > ꯗ꯭ꯔꯣꯄꯑꯞ </ꯕꯇꯟ>
  3. <button class = "btn ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ" ꯗꯦꯇꯥ-ꯇꯣꯒꯜ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
  4. <span class = "ꯀꯦꯔꯦꯠ" </span>
  5. </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  6. <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >
  7. <!-- ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯂꯤꯉ꯭ꯀꯁꯤꯡ -->
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯜꯇꯤꯀꯟ-ꯄꯦꯖ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯀꯗꯥꯏꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ꯫

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

ꯔꯥꯖ꯭ꯌꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯦꯖ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

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

ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯄꯦꯖꯤꯅꯦꯁꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ: .pagination-centeredꯑꯃꯁꯨꯡ .pagination-right.

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

ꯔꯦꯞ ꯏꯟ ꯑꯦ <div>, ꯄꯦꯖꯤꯅꯦꯁꯟ ꯑꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ <ul>.

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" >
  2. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <li><a href = "#" > ꯃꯃꯥꯡꯒꯤ </a></li>
  4. <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" >
  5. <a href = "#" > </a> ꯂꯩ꯫
  6. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. <li><a href = "#" > </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
  8. <li><a href = "#" > </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
  9. <li><a href = "#" > </a></li> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
  10. <li><a href = "#" > ꯃꯊꯪꯒꯤ </a></li>
  11. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯄꯦꯖꯔ ꯊꯨꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯑꯃꯁꯨꯡ ꯃꯊꯪꯒꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛ꯫

ꯄꯦꯖꯔꯒꯤ ꯃꯇꯥꯡꯗꯥ꯫

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

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

.disabledꯄꯦꯖꯔ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯅꯥ ꯄꯦꯖꯤꯅꯦꯁꯅꯗꯒꯤ ꯖꯦꯅꯦꯔꯦꯜ ꯀ꯭ꯂꯥꯁꯁꯨ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯈꯨꯗꯝ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯄꯦꯖꯔ ꯑꯗꯨꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯁꯦꯟꯇꯔ ꯇꯧꯏ꯫

  1. <ul ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯔ" >
  2. <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <a href = "#" > ꯃꯃꯥꯡꯒꯤ </a>
  4. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  6. <a href = "#" > ꯃꯊꯪꯒꯤ </a>
  7. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

ꯅꯠꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯂꯤꯉ꯭ꯛ ꯈꯨꯗꯤꯡꯃꯛ ꯁꯥꯏꯗꯁꯤꯡꯗꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯏ:

  1. <ul ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯔ" >
  2. <li class = "ꯃꯃꯥꯡꯒꯤ" >
  3. <a href = "#" > ꯑꯃꯁꯨꯡ ꯂꯥꯔꯔ; ꯑꯍꯜ ꯑꯣꯏꯔꯕꯥ </a>꯫
  4. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <li class = "ꯃꯊꯪꯒꯤ" >
  6. <a href = "#" > ꯑꯅꯧꯕꯥ → </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
ꯂꯦꯕꯦꯂꯁꯤꯡ꯫ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ <span class="label">Default</span>
ꯃꯥꯏ ꯄꯥꯛꯄ <span class="label label-success">Success</span>
ꯆꯦꯛꯁꯤꯟꯋꯥ <span class="label label-warning">Warning</span>
ꯃꯔꯨ ꯑꯣꯏꯕ <span class="label label-important">Important</span>
ꯏꯅꯐꯣ <span class="label label-info">Info</span>
ꯏꯅꯚꯥꯔꯁ ꯇꯧꯕꯥ꯫ <span class="label label-inverse">Inverse</span>

ꯃꯔꯝꯗꯤ

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

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

ꯃꯤꯡ ꯈꯨꯗꯝ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ <span class="badge">1</span>
ꯃꯥꯏ ꯄꯥꯛꯄ <span class="badge badge-success">2</span>
ꯆꯦꯛꯁꯤꯟꯋꯥ <span class="badge badge-warning">4</span>
ꯃꯔꯨ ꯑꯣꯏꯕ <span class="badge badge-important">6</span>
ꯏꯅꯐꯣ <span class="badge badge-info">8</span>
ꯏꯅꯚꯥꯔꯁ ꯇꯧꯕꯥ꯫ ꯱꯰ <span class="badge badge-inverse">10</span>

ꯍꯤꯔꯣ ꯌꯨꯅꯤꯠ꯫

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

ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ divꯂꯥꯏꯛ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧꯔꯣ:

  1. <div class = "ꯍꯤꯔꯣ-ꯌꯨꯅꯤꯠ" >
  2. <h1> ꯍꯦꯗꯤꯡ </h1> ꯂꯩ꯫
  3. <p> ꯇꯦꯒꯂꯥꯏꯟ </p >꯫
  4. <p> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  5. <a class = "btn btn-ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ btn-ꯑꯆꯧꯕꯥ" >
  6. ꯍꯦꯟꯅꯥ ꯈꯉꯕꯤꯌꯨ꯫
  7. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </p> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ, ꯃꯥꯂꯦꯝ!

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

ꯍꯦꯟꯅꯥ ꯈꯉꯕꯤꯌꯨ꯫

ꯄꯦꯖ ꯍꯦꯗ ꯇꯧꯕꯥ꯫

h1ꯄꯦꯖ ꯑꯃꯗꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯁꯦꯛꯁꯅꯁꯤꯡ ꯃꯇꯤꯛ ꯆꯥꯅꯥ ꯁ꯭ꯄꯦꯁ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯦꯒꯃꯦꯟꯇ ꯇꯧꯅꯕꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯁꯦꯜ ꯑꯃꯥ꯫ ꯃꯁꯤꯅꯥ h1's ꯗꯤꯐꯣꯜꯇ small, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯌꯥꯝꯕꯥ ꯑꯇꯩ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ (ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ) ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

  1. <div class = "ꯄꯦꯖ-ꯍꯦꯗꯔ" >
  2. <h1> ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯄꯦꯖ ꯍꯦꯗ </h1>
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯊꯝꯕꯤꯕꯥ꯫

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

ꯌꯥꯝꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ꯫

ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯈꯔꯥ ꯇꯧꯔ���ꯥ, ꯍꯦꯗꯤꯡ, ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ, ꯅꯠꯔꯒꯥ ꯕꯇꯅꯒꯨꯝꯕꯥ ꯃꯈꯜ ꯑꯃꯠꯇꯒꯤ HTML ꯀꯟꯇꯦꯟꯇ ꯊꯝꯕꯤꯕꯥ ꯌꯥꯏ꯫

  • ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ꯫

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

    ꯊꯕꯛ ꯊꯕꯛ

  • ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ꯫

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

    ꯊꯕꯛ ꯊꯕꯛ

ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯊꯝꯕꯤꯔꯤꯕꯅꯣ꯫

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

ꯏꯆꯝ ꯆꯝꯕꯥ, ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ꯫

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

ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ ꯁꯥꯏꯖꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

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

ꯃꯥꯔꯀꯑꯥꯞ ꯑꯗꯨ꯫

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

  1. <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
  2. <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳" >
  3. <a href = "#" ꯀ꯭ꯂꯥꯁ = "ꯊꯝꯕꯅꯦꯜ" >
  4. <img src = "https://ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗ.ꯏꯠ/꯲꯶꯰x꯱꯸꯰" alt = "" >
  5. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. ...
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯊꯝꯕꯤꯁꯤꯡꯗꯥ ꯀꯁ꯭ꯇꯝ HTML ꯀꯟꯇꯦꯟꯇꯀꯤꯗꯃꯛ, ꯃꯥꯔꯀꯑꯥꯞ ꯑꯁꯤ ꯈꯔꯥ ꯍꯣꯡꯏ꯫ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯀꯟꯇꯦꯟꯇ ꯃꯐꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯅꯕꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯥꯏꯛ ꯁꯣ <a>ꯑꯃꯒꯤꯗꯃꯛ ꯁꯣꯞ ꯇꯧꯏ <div>:

  1. <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
  2. <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳" >
  3. <div class = "ꯊꯝꯕꯅꯦꯜ" >
  4. <img src = "https://ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗ.ꯏꯠ/꯲꯶꯰x꯱꯸꯰" alt = "" >
  5. <h5> ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ </h5>
  6. <p> ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯊꯝꯕꯤꯕꯥ ꯀꯦꯄꯁꯟ... </p>
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. ...
  10. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯑꯍꯦꯅꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯂꯥꯏꯠꯋꯦꯠ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ꯫

ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯕꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯂꯥꯏꯊꯣꯀꯍꯜꯂꯦ: .alertꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ .alert-message. ꯑꯩꯈꯣꯌꯅꯥ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯥꯔꯀꯑꯥꯄꯁꯨ ꯍꯟꯊꯍꯜꯂꯦ—ꯅꯣ <p>ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯊꯧ ꯇꯥꯗꯦ, ꯃꯄꯥꯅꯒꯤ <div>.

ꯁꯤꯉ꯭ꯒꯜ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯥ꯫

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


ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯆꯧꯕꯥ ꯆꯠꯂꯤ꯫

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

ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯐꯪꯕꯤꯌꯨ »

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯔꯇꯁꯤꯡ꯫

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

ꯆꯦꯛꯁꯤꯟꯋꯥ! ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯎꯕꯥ ꯐꯪꯗ꯭ꯔꯤ꯫
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯂꯔꯠ" > ꯫
  2. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>
  3. <strong> ꯆꯦꯀꯁꯤꯅꯋꯥ ꯑꯃꯥ! </strong> ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯎꯕꯥ ꯐꯪꯗ꯭ꯔꯤ꯫
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! ꯑꯥꯏ.ꯑꯣ.ꯑꯦꯁ.ꯀꯤ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯅꯥ href="#"ꯑꯦꯂꯔꯇꯁꯤꯡ ꯊꯥꯗꯣꯀꯄꯒꯤꯗꯃꯛ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯉ꯭ꯀꯔ ꯀ꯭ꯂꯣꯖ ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯌꯥꯎꯍꯅꯒꯗꯕꯅꯤ꯫ ꯅꯠꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ <button>ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯥ ꯂꯣꯌꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯃꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇꯧꯅꯕꯥ ꯈꯅꯈ꯭ꯔꯦ꯫ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ <button>, ꯅꯍꯥꯛꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ type="button"ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯃꯁꯤꯡ ꯑꯗꯨ ꯄꯤꯁꯤꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯗꯨ ꯐꯖꯅꯥ ꯁꯥꯡꯗꯣꯀꯎ: .alert-blockꯍꯦꯟꯅꯥ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯁꯠ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯃꯁꯨꯡ .alert-headingꯃꯦꯆꯤꯡ ꯍꯦꯗꯤꯡ ꯑꯃꯒꯤꯗꯃꯛ꯫

ꯆꯦꯛꯁꯤꯟꯋꯥ!

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

  1. <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯕ꯭ꯂꯣꯛ" >
  2. <a class = "ꯀ꯭ꯂꯣꯖ" data-dismiss = "ꯑꯦꯂꯔꯠ" href = "#" > × </a>
  3. <h4 class = "ꯑꯦꯂꯔꯠ-ꯍꯦꯗꯤꯡ" > ꯆꯦꯀꯁꯤꯅꯋꯥ! </h꯴> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  4. ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛꯅꯥ...
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

ꯑꯁꯣꯌꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯈꯨꯗꯣꯡꯊꯤꯕꯥ ꯊꯣꯀꯄꯥ꯫

ꯑꯣꯍ ꯁ꯭ꯅꯦꯞ! ꯋꯥꯐꯝ ꯈꯔꯥ ꯍꯣꯡꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯕꯃꯤꯠ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯧ꯫
  1. <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯑꯦꯔꯔ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯥꯏ ꯄꯥꯛꯄ

ꯅꯤꯉꯡꯤꯅ ꯄꯥꯉꯡꯣꯡꯂꯦ! ꯑꯗꯣꯝꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯁꯤ ꯃꯥꯌ ꯄꯥꯛꯅꯥ ꯄꯥꯔꯤ꯫
  1. <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯃꯥꯏꯄꯥꯀꯄꯥ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯏꯄꯥꯎ

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! ꯃꯁꯤꯒꯤ ꯑꯦꯂꯔꯠ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯄꯨꯛꯅꯤꯡ ꯆꯪꯕꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯑꯗꯨꯕꯨ ꯃꯁꯤ ꯁꯨꯄꯔ ꯏꯝꯄꯣꯔꯇꯦꯕꯜ ꯑꯣꯏꯗꯦ꯫
  1. <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯏꯅꯐꯣ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯈꯨꯗꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯞ꯫

ꯇꯉꯥꯏ ꯐꯗꯕ

ꯚꯔꯇꯤꯀꯦꯜ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔ꯫

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
  3. style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ %; " ></div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ꯫

ꯁ꯭ꯠꯔꯥꯏꯞ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ (ꯑꯥꯏ.ꯏ. ꯂꯩꯇꯦ)꯫

  1. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
  3. style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ %; " ></div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯦꯅꯤꯃꯦꯇꯦꯗ ꯑꯣꯏꯕꯥ꯫

ꯁ꯭ꯠꯔꯥꯏꯞ ꯈꯨꯗꯝ ꯑꯃꯥ ꯂꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯑꯦꯅꯤꯃꯦꯠ ꯇꯧꯏ (ꯑꯥꯏ.ꯏ. ꯂꯩꯇꯦ)꯫

  1. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ꯫"
  2. ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ" >
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯫
  4. style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯴꯰ %; " ></div>
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯑꯍꯦꯅꯕꯥ ꯃꯆꯨꯁꯤꯡ꯫

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

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

ꯁꯣꯂꯤꯗ ꯃꯆꯨꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯁ꯭ꯠꯔꯥꯏꯞ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡ ꯂꯩꯔꯤ꯫

ꯂꯤꯆꯠ ꯁꯥꯖꯠ

ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ CSS3 ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ .activeꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯀꯤ .progress-stripedꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ ꯑꯗꯨ ꯂꯦꯡꯗꯅꯥ ꯂꯩꯒꯅꯤ꯫

ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

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

ꯑꯣꯄꯦꯔꯥ ꯑꯃꯁꯨꯡ ꯑꯥꯏ.ꯏ.ꯅꯥ ꯃꯇꯝ ꯑꯁꯤꯗꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯋꯦꯂꯁ ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫

ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯏꯅꯁꯦꯠ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯋꯦꯜ ꯑꯗꯨ ꯏꯆꯝ ꯆꯝꯕꯥ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯌꯦꯡꯎ, ꯑꯩꯅꯥ ꯀꯨꯌꯣꯝ ꯑꯃꯗꯥ ꯂꯩꯔꯤ!
  1. <div class = "ꯑꯐꯕꯥ" >꯫
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

  1. <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" > × </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯑꯦꯉ꯭ꯀꯔ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ iOS ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯅꯥ ꯀ꯭ꯂꯤꯛ ꯏꯚꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛ href="#" ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

  1. <a class = "ꯀ꯭ꯂꯣꯖ" href = "#" > &ꯇꯥꯏꯃꯁ; </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫