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

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯑꯍꯦꯅꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯑꯅꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯦꯁꯤꯛ ꯑꯣꯄꯁꯟ ꯑꯅꯤ꯫

ꯁꯤꯉ꯭ꯒꯜ ꯕꯇꯟ ꯒ꯭ꯔꯨꯞ꯫

.btnꯏꯟ .btn-group. _

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

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

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

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

ꯚꯔꯇꯤꯀꯦꯜ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

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

  1. <div class = "btn-ꯒ꯭ꯔꯨꯞ btn-ꯒ꯭ꯔꯨꯞ-ꯚꯔꯇꯤꯀꯦꯜ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

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

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

  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.

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

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

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


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

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

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

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

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

ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯇꯧꯕꯥ꯫

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

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡ꯫

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

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" >
  2. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <li class = "ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯦ" ><a href = "#" > « </a></li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  4. <li class = "ꯑꯦꯛꯇꯤꯕ" ><a href = "#" > </a></li>
  5. ...
  6. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" >
  2. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. <li class = "ꯗꯤꯁꯦꯕꯜ" ><span> « </span></li> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
  4. <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" ><span> </span></li>
  5. ...
  6. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

  1. <div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯑꯆꯧꯕꯥ" >
  2. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  3. ...
  4. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" >
  7. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  8. ...
  9. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  10. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  11. <div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯑꯄꯤꯀꯄꯥ" >
  12. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  13. ...
  14. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  15. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  16. <div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯃꯤꯅꯤ" >
  17. <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
  18. ...
  19. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  20. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

  1. <div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯁꯦꯟꯠꯔꯦꯜ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  1. <div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯔꯥꯏꯠ" >
  2. ...
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯄꯦꯖꯔ ꯇꯧꯕꯥ꯫

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

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

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

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

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

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

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

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

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

  1. <ul ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯔ" >
  2. <li class = "ꯃꯃꯥꯡꯗꯥ ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ" >
  3. <a href = "#" > ꯑꯃꯁꯨꯡ ꯂꯥꯔꯔ; ꯑꯍꯜ ꯑꯣꯏꯔꯕꯥ </a>꯫
  4. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. ...
  6. </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>

ꯕꯦꯖꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯤꯡ ꯈꯨꯗꯝ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ <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>

ꯐꯖꯅꯥ ꯊꯨꯒꯥꯏꯕꯥ ꯌꯥꯕꯥ꯫

:emptyꯐꯖꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯃꯅꯨꯡꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯒꯅꯤ (ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯁꯦꯂꯦꯛꯇꯔꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ )꯫

ꯍꯤꯔꯣ ꯌꯨꯅꯤꯠ꯫

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

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

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

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

  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> ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯄꯦꯖ ꯍꯦꯗ <small> ꯍꯦꯗꯀꯤꯗꯃꯛ ꯁꯕꯇꯦꯛꯁ </small></h1>
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

  • ꯳꯰꯰x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

    ꯊꯕꯛ ꯊꯕꯛ

  • ꯳꯰꯰x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

    ꯊꯕꯛ ꯊꯕꯛ

  • ꯳꯰꯰x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

    ꯊꯕꯛ ꯊꯕꯛ

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

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

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

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

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

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

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

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

  1. <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
  2. <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" >
  3. <a href = "#" ꯀ꯭ꯂꯥꯁ = "ꯊꯝꯕꯅꯦꯜ" >
  4. <img data-src = "ꯍꯣꯜꯗꯔ.ꯖꯦ.ꯑꯦꯁ./꯳꯰꯰x꯲꯰꯰" alt = "" >
  5. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. ...
  8. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

  1. <ul class = "ꯊꯝꯕꯅꯦꯂꯁꯤꯡ" >
  2. <ꯂꯤ ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" >
  3. <div class = "ꯊꯝꯕꯅꯦꯜ" >
  4. <img data-src = "ꯍꯣꯜꯗꯔ.ꯖꯦ.ꯑꯦꯁ./꯳꯰꯰x꯲꯰꯰" alt = "" >
  5. <h3> ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ </h3>
  6. <p> ꯊꯝꯕꯤꯕꯥ ꯀꯦꯄꯁꯟ... </p>
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. ...
  10. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯔꯠ ꯑꯃꯥ꯫

.alertꯕꯦꯁꯤꯛ ꯋꯥꯔꯅꯤꯡ ꯑꯦꯂꯔꯠ ꯃꯦꯁꯦꯖ ꯑꯃꯒꯤꯗꯃꯛ ꯇꯦꯛꯁꯠ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯦꯜ ꯗꯤꯁꯃꯤꯁ ꯕꯇꯟ ꯑꯃꯥ ꯔꯦꯞ ꯇꯧ꯫

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

ꯕꯇꯅꯁꯤꯡ ꯊꯥꯗꯣꯀꯎ꯫

ꯃꯣꯕꯥꯏꯜ ꯁꯥꯐꯥꯔꯤ ꯑꯃꯁꯨꯡ ꯃꯣꯕꯥꯏꯜ ꯑꯣꯄꯦꯔꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯅꯥ, data-dismiss="alert"ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯤ ꯃꯊꯛꯇꯥ, ꯇꯦꯒ href="#"ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯑꯦꯂꯔꯇꯁꯤꯡ ꯊꯥꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫<a>

  1. <a href = "#" class = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

  1. <ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" data-dismiss = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯂꯔꯇꯁꯤꯡ ꯊꯥꯗꯣꯀꯎ꯫

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


ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯃꯦꯁꯦꯖꯁꯤꯡꯒꯤꯗꯃꯛ, ꯑꯦꯂꯔꯠ ꯔꯦꯄꯔꯒꯤ ꯃꯊꯛ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯄꯦꯗꯤꯡ ꯑꯗꯨ .alert-block.

ꯆꯦꯛꯁꯤꯟꯋꯥ!

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

  1. <div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯕ꯭ꯂꯣꯛ" >
  2. <ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" data-dismiss = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>ꯗꯥ ꯊꯝꯃꯨ꯫
  3. <h4> ꯆꯦꯀꯁꯤꯅꯋꯥ! </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 class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ %; " ></div>
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

ꯁ꯭ꯠꯔꯥꯏꯞ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯥꯏ.ꯏ.꯷-꯸ꯗꯥ ꯐꯪꯗꯦ꯫

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

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

ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ ꯑꯗꯨ ꯔꯥꯏꯠ ꯇꯨ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨ ꯑꯦꯅꯤꯃꯦꯠ .activeꯇꯧꯅꯕꯥ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .progress-stripedꯑꯥꯏ.ꯏ.ꯒꯤ ꯚꯔꯖꯟ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯐꯪꯗꯦ꯫

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

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ꯫

.progressꯃꯈꯣꯌꯗꯨ ꯁ꯭ꯇꯦꯛ ꯇꯧꯅꯕꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕꯥꯔꯁꯤꯡ ꯑꯗꯨ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯨ꯫

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

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

  1. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯏꯅꯐꯣ" >
  2. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ % " ></div>
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯃꯥꯏꯄ���ꯀꯄꯥ" >
  5. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 40 % " ></div>
  6. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯋꯥꯔꯅꯤꯡ" >
  8. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯁ꯭ꯇꯥꯏꯜ = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ % " ></div>
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  10. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯈꯨꯗꯣꯡꯊꯤꯕꯥ" >
  11. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 80 % " ></div>
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

  1. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯏꯅꯐꯣ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" >
  2. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ % " ></div>
  3. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  4. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯃꯥꯏꯄꯥꯀꯄꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" >
  5. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 40 % " ></div>
  6. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  7. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯋꯥꯔꯅꯤꯡ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ" >
  8. <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯁ꯭ꯇꯥꯏꯜ = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ % " ></div>
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  10. <div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯈꯨꯗꯣꯡꯊꯤꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" >
  11. <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 80 % " ></div>
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯱꯰ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯦꯔꯥ ꯱꯲ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯍꯥꯟꯅꯒꯤ ꯚꯔꯖꯅꯁꯤꯡꯅꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯇꯦꯛꯁꯇꯥꯏꯜ ꯀꯟꯇꯦꯟꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯦꯞꯇꯅꯥ ꯅꯠꯠꯔꯒꯥ ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯏꯃꯦꯖ ꯑꯃꯥ ꯌꯥꯑꯣꯕꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯃꯈꯂꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ (ꯕ꯭ꯂꯣꯒ ꯀꯃꯦꯟꯇ, ꯇ꯭ꯕꯤꯠ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ) ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯦꯕꯁ꯭ꯠꯔꯦꯛꯇ ꯑꯣꯕꯖꯦꯛꯇ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ꯫

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

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

꯶꯴x꯶꯴ ꯂꯩ꯫

ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ ꯀꯃꯣꯗꯣ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫
  2. <a class = "ꯄꯨꯜ-ꯂꯦꯐꯠ" href = "#" >
  3. <img ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ-ꯑꯣꯕꯖꯦꯛꯇ" ꯗꯦꯇꯥ-src = "ꯍꯣꯜꯗꯔ.ꯖꯦ.ꯑꯦꯁ./꯶꯴x꯶꯴" >
  4. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. <div class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯀꯆꯥꯡ" >
  6. <h4 class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯦꯗꯤꯡ" > ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ </h4>
  7. ...
  8.  
  9. <!-- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ -->
  10. <div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫
  11. ...
  12. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  13. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  14. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ꯫

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

  • ꯶꯴x꯶꯴ ꯂꯩ꯫

    ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

    ꯶꯴x꯶꯴ ꯂꯩ꯫

    ꯅꯦꯁ꯭ꯇꯦꯗ ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ꯫

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

    ꯅꯦꯁ꯭ꯇꯦꯗ ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ꯫

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

    ꯅꯦꯁ꯭ꯇꯦꯗ ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ꯫

    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ ꯀꯃꯣꯗꯣ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫
  • ꯶꯴x꯶꯴ ꯂꯩ꯫

    ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ ꯀꯃꯣꯗꯣ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫
  1. <ul class = "ꯃꯤꯗꯤꯌꯥ-ꯂꯤꯁ꯭ꯠ" >
  2. <li class = "ꯃꯤꯗꯤꯌꯥ" >
  3. <a class = "ꯄꯨꯜ-ꯂꯦꯐꯠ" href = "#" >
  4. <img ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ-ꯑꯣꯕꯖꯦꯛꯇ" ꯗꯦꯇꯥ-src = "ꯍꯣꯜꯗꯔ.ꯖꯦ.ꯑꯦꯁ./꯶꯴x꯶꯴" >
  5. </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <div class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯀꯆꯥꯡ" >
  7. <h4 class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯦꯗꯤꯡ" > ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ </h4>
  8. ...
  9.  
  10. <!-- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ -->
  11. <div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫
  12. ...
  13. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  14. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  15. </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  16. </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

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

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

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

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

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

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

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

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

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

ꯍꯦꯜꯄꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

.ꯄꯨꯜ-ꯂꯦꯐꯠ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯂꯦꯞꯇꯅꯥ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫

  1. class = "ꯄꯨꯜ-ꯂꯦꯐꯠ"꯫
  1. . ꯄꯨꯜ - ꯂꯦꯃꯍꯧꯔꯤꯕꯥ {
  2. float : ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ;
  3. } .

.ꯄꯨꯜ-ꯔꯥꯏꯠ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯔꯥꯏꯠ ꯐ꯭ꯂꯣꯠ ꯇꯧ꯫

  1. class = "ꯄꯨꯜ-ꯔꯥꯏꯠ"꯫
  1. . ꯄꯨꯜ - ꯔꯥꯏꯠ { .
  2. float : ꯑꯔꯥꯞꯄꯥ ;
  3. } .

.ꯃ꯭ꯌꯨꯇꯦꯗ ꯑꯣꯏꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯆꯨ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫#999

  1. class = "ꯃ꯭ꯌꯨꯠ ꯇꯧꯔꯕꯥ"꯫
  1. . ꯃ꯭ꯌꯨꯇꯦꯗ {
  2. ꯃꯆꯨ : #꯹꯹꯹;
  3. } .

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

floatꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯂꯩꯕꯥ ꯑꯗꯨ ꯀ꯭ꯂꯤꯌꯔ ꯇꯧ꯫

  1. class = "ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ꯇꯧꯕꯥ"꯫
  1. . ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ {
  2. * ꯖꯨꯝ ꯇꯧꯕꯥ : ;
  3. &: ꯃꯃꯥꯡꯗꯥ , .
  4. &: ꯃꯇꯨꯡꯗꯥ {
  5. ꯗꯤꯁꯞꯂꯦ : ꯇꯦꯕꯜ ;
  6. ꯀꯟꯇꯦꯟꯇ : "" ;
  7. } .
  8. &: ꯃꯇꯨꯡꯗꯥ {
  9. ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ : ꯑꯅꯤꯃꯛ ;
  10. } .
  11. } .