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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

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

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

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

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

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

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

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

ꯁꯛꯇꯤ ꯂꯩꯕꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ꯫

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

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

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

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

nav ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ, .pull-leftꯅꯠꯔꯒꯥ .pull-rightꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯃꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨꯗꯥ CSS ꯐ꯭ꯂꯣꯠ ꯑꯃꯥ ꯍꯥꯄꯀꯅꯤ꯫

ꯕꯦꯁꯤꯛ ꯇꯦꯕꯁꯤꯡ꯫

ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯂꯧꯕꯤꯌꯨ <ul>ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ .nav-tabs:

• ꯌꯨꯝ
• ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ
• ꯄꯥꯎꯖꯦꯂꯁꯤꯡ꯫

<ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
  <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" > 
    <a href = "#" > ꯌꯨꯃꯗꯥ </a> 
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <li><a href = "#" > ... </a></li> ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ ꯌꯥꯏ꯫ 
  <li><a href = "#" > ... </a></li> ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ ꯌꯥꯏ꯫ 
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯕꯦꯁꯤꯛ ꯄꯤꯂꯁꯤꯡ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ HTML ꯑꯗꯨ ꯂꯧ, ꯑꯗꯨꯕꯨ .nav-pillsꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ:

• ꯌꯨꯝ
• ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ
• ꯄꯥꯎꯖꯦꯂꯁꯤꯡ꯫

<ul class = "ꯅꯥꯚ ꯅꯚ-ꯄꯤꯂꯁ" > 
  <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" > 
    <a href = "#" > ꯌꯨꯃꯗꯥ </a> 
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <li><a href = "#" > ... </a></li> ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ ꯌꯥꯏ꯫ 
  <li><a href = "#" > ... </a></li> ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ ꯌꯥꯏ꯫ 
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯒꯅꯤ 'ꯑꯦꯝ

ꯇꯦꯕꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯤꯂꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯕꯅꯥ, .nav-stackedꯃꯈꯣꯌꯕꯨ ꯚꯦꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯗꯨꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯟꯅꯕꯥ ꯑꯅꯤꯁꯨꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ, ,꯫

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ ꯇꯦꯕꯁꯤꯡ꯫

• ꯌꯨꯝ
• ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ
• ꯄꯥꯎꯖꯦꯂꯁꯤꯡ꯫

<ul class = "ꯅꯥꯚ ꯅꯚ-ꯇꯦꯕꯁꯤꯡ ꯅꯚ-ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ" > 
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ ꯍꯤꯗꯥꯀꯁꯤꯡ꯫

• ꯌꯨꯝ
• ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ
• ꯄꯥꯎꯖꯦꯂꯁꯤꯡ꯫

<ul class = "ꯅꯥꯚ ꯅꯚ-ꯄꯤꯂꯁ ꯅꯚ-ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ" > 
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯔꯤꯆ ꯃꯦꯅꯨꯁꯤꯡ ꯐꯖꯅꯥ ꯁꯦꯃꯈꯤ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯇꯦꯕꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯤꯂꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯨꯄꯔ ꯏꯖꯤ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯥ ꯑꯍꯦꯅꯕꯥ HTML ꯈꯔꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯠꯋꯦꯠ jQuery ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯕꯁꯤꯡ꯫

• ꯌꯨꯝ
• ꯇꯦꯡꯕꯥꯡꯕ
• ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯊꯕꯛ
  • ꯑꯇꯣꯞꯄꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯅꯤ꯫
  • ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯂꯩꯔꯤ꯫
  • ꯇꯣꯈꯥꯌꯅꯥ ꯂꯩꯕꯥ ꯂꯤꯉ꯭ꯛ꯫

<ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
  <li class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" > 
    <a class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ"꯫ 
       data-toggle = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ"꯫
       href = "#" > ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ꯫
        ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
        <b ꯀ꯭ꯂꯥꯁ = "ꯀꯦꯔꯦꯠ" </b> 
      </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" > 
      <!-- ꯂꯤꯉ꯭ꯀꯁꯤꯡ -->
    </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯤꯂꯁꯤꯡ꯫

• ꯌꯨꯝ
• ꯇꯦꯡꯕꯥꯡꯕ
• ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯊꯕꯛ
  • ꯑꯇꯣꯞꯄꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯅꯤ꯫
  • ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯂꯩꯔꯤ꯫
  • ꯇꯣꯈꯥꯌꯅꯥ ꯂꯩꯕꯥ ꯂꯤꯉ꯭ꯛ꯫

<ul class = "ꯅꯥꯚ ꯅꯚ-ꯄꯤꯂꯁ" > 
  <li class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" > 
    <a class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ"꯫ 
       data-toggle = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ"꯫
       href = "#" > ꯍꯥꯌꯅꯥ ꯊꯥꯕꯥ꯫
        ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
        <b ꯀ꯭ꯂꯥꯁ = "ꯀꯦꯔꯦꯠ" </b> 
      </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" > 
      <!-- ꯂꯤꯉ꯭ꯀꯁꯤꯡ -->
    </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯑꯦꯞꯂꯤꯀꯦꯁꯟ-ꯁ꯭ꯇꯥꯏꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯇꯧꯕꯥ꯫

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

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

ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

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

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯚꯥꯏꯗꯔꯁꯤꯡ꯫

ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯝꯄꯣꯔꯠ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯁꯦꯃꯗꯨꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯤꯚꯥꯏꯗꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .divider, ꯃꯗꯨꯗꯤ:

<ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯂꯤꯁ꯭ꯠ" > 
  ...
  <li class = "ꯗꯤꯚꯥꯏꯗꯔ" </li> 
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯅꯦꯚ ꯂꯤꯁ꯭ꯠ꯫

ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯂꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ class="nav nav-list":

<ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯂꯤꯁ꯭ꯠ" > 
  <li class = "ꯅꯥꯚ-ꯍꯦꯗꯔ" > 
    ꯂꯤꯁ꯭ꯠ ꯍꯦꯗ ꯇꯧꯕꯥ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" > 
    <a href = "#" > ꯌꯨꯃꯗꯥ </a> 
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <a href = "#" > ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ </a> 
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯈꯨꯗꯝ, ꯑꯗꯨꯕꯨ <i>ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇꯦꯒꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

<ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯂꯤꯁ꯭ꯠ" > 
  ...
  <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <a href = "#" > ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫ 
      <i ꯀ꯭ꯂꯥꯁ = "ꯑꯥꯏꯀꯟ-ꯕꯨꯛ" </i> 
      ꯂꯥꯏꯔꯤꯛ ꯊꯝꯐꯝ
    </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯌꯥꯑꯣꯔꯤꯕꯥ ꯑꯗꯨ ꯀꯔꯤꯅꯣ꯫

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

ꯃꯈꯣꯌꯒꯤ ꯃꯔꯛꯇꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯀꯑꯥꯞ ꯌꯥꯝꯅꯥ ꯅꯦꯝꯕꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯇꯦꯕꯁꯤꯡꯗꯥ ꯐꯦꯗ ꯇꯧꯕꯥ꯫

ꯇꯦꯕꯁꯤꯡ ꯐꯦꯗ ꯏꯟ .fadeꯇꯧꯅꯕꯥ, ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .tab-pane.

jQuery ꯄ꯭ꯂꯒꯏꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

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

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

ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯈꯨꯗꯝ꯫

ꯇꯦꯕꯁꯤꯡ ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ, .tab-paneꯇꯦꯕ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯈꯟꯅꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯥ ꯁꯦꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ .tab-content.

ꯔꯥꯏꯠ ꯅꯠꯠꯔꯒꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯇꯦꯕꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, .nav-tabsꯑꯃꯁꯨꯡ .tab-contentꯏꯟ .tabbable.

ꯁ꯭ꯠꯔꯦꯠꯐꯣꯔꯗ ꯃꯥꯔꯀꯑꯥꯞ ꯇꯧꯕꯥ꯫

ꯇꯦꯕꯜ ꯇꯦꯕꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯔꯦꯄꯤꯡ ꯗꯤꯚ, ꯇꯦꯕ ꯁꯦꯠ ꯑꯃꯥ, ꯑꯃꯁꯨꯡ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯇꯦꯕꯜ ꯄꯦꯅꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

<div class = "tabbable" > <!-- ꯂꯦꯃꯍꯧꯔꯤꯕꯥ/ꯑꯔꯥꯞꯄꯥ ꯇꯦꯕꯁꯤꯡꯒꯤꯗꯃꯛ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ -->  
  <ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
    <li class = "ꯑꯦꯛꯇꯤꯕ" ><a href = "#tab1" data-toggle = "ꯇꯦꯕ" > ꯁꯦꯛꯁꯟ ꯱ </a></li>   
    <li><a href = "#tab2" data-toggle = "ꯇꯦꯕ" > ꯁꯦꯛꯁꯟ 2 </a></li>  
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  <div class = "ꯇꯦꯕ-ꯀꯟꯇꯦꯟꯇ" > 
    <div class = "ꯇꯦꯕ-ꯄꯦꯟ ꯑꯦꯛꯇꯤꯕ" id = "ꯇꯦꯕ꯱" >  
      <p> ꯑꯩꯅꯥ ꯁꯦꯛꯁꯟ ꯱ꯗꯥ ꯂꯩꯔꯤ꯫ </p>
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <div ꯀ꯭ꯂꯥꯁ = "ꯇꯦꯕ-ꯄꯦꯟ" id = "ꯇꯦꯕ꯲" >  
      <p> ꯍꯥꯑꯣꯗꯤ, ꯑꯩꯅꯥ ꯁꯦꯛꯁꯟ ꯲ꯗꯥ ꯂꯩꯔꯤ꯫ </p>
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯕꯁꯤꯡ꯫

HTMLꯒꯤ ꯑꯣꯔꯗꯔ ꯑꯗꯨ ꯐ꯭ꯂꯤꯞ ꯇꯧ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯇꯦꯕꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<div class = "ꯇꯦꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯇꯦꯕꯁꯤꯡ-ꯃꯈꯥꯗꯥ" > 
  <div class = "ꯇꯦꯕ-ꯀꯟꯇꯦꯟꯇ" > 
    ...
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯇꯦꯕꯁꯤꯡ꯫

ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯇꯦꯕꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯣꯞ ꯇꯧ꯫

<div class = "ꯇꯦꯕꯕꯜ ꯇꯦꯕꯁꯤꯡ-ꯂꯦꯐꯠ" > 
  <ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  <div class = "ꯇꯦꯕ-ꯀꯟꯇꯦꯟꯇ" > 
    ...
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯔꯣꯏꯕꯗꯥ ꯇꯦꯕꯁꯤꯡ꯫

ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯗꯥ ꯇꯦꯕꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯁꯣꯞ ꯇꯧ꯫

<div class = "ꯇꯦꯕꯕꯜ ꯇꯦꯕꯁꯤꯡ-ꯑꯔꯥꯞꯄꯥ" > 
  <ul class = "ꯅꯥꯚ ꯅꯦꯚ-ꯇꯦꯕꯁꯤꯡ" > 
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  <div class = "ꯇꯦꯕ-ꯀꯟꯇꯦꯟꯇ" > 
    ...
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯕꯕꯔ ꯁ꯭ꯀꯦꯐꯣꯜꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

<div ꯀ꯭ꯂꯥꯁ = "ꯅꯥꯚꯕꯥꯔ" > 
  <div class = "ꯅꯥꯚꯕꯥꯔ-ꯏꯅꯥꯔ" > 
    <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯇꯦꯅꯔ" > 
      ...
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯅꯕꯕꯥꯔ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯅꯒꯤ ꯗꯤꯚ, .navbar.

<div class = "ꯅꯥꯚꯕꯥꯔ ꯅꯚꯕꯥꯔ-ꯐꯤꯛꯁ-ꯇꯣꯞ" > 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

<div class = "ꯅꯥꯚꯕꯥꯔ ꯅꯚꯕꯥꯔ-ꯐꯤꯛꯁ-ꯕꯣꯇꯝ" > 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯍꯥꯛꯅꯥ ꯅꯕꯕꯥꯔ ꯑꯗꯨ ꯑꯦꯐꯤꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯑꯦꯀꯥꯎꯟꯇ ꯇꯧꯕꯥ ꯅꯤꯡꯁꯤꯡꯕꯤꯌꯨ꯫ 40px ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯄꯦꯗꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ <body>. ꯃꯁꯤ ꯀꯣꯔ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ CSSꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯦꯜ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ CSSꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ꯫

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

<a class = "ꯕ꯭ꯔꯦꯟꯗ" href = "#" >  
  ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯃꯃꯤꯡ꯫
</a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯕꯕꯥꯔꯗꯥ ꯐꯣꯔꯃꯁꯤꯡ꯫

ꯅꯕꯕꯥꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯣꯔꯝ ꯑꯃꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯅꯕꯥ, ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯗꯤꯐꯣꯜꯇ ꯐꯣꯔꯝ ꯑꯃꯒꯤꯗꯃꯛ, ꯌꯥꯎꯍꯅꯕꯥ .navbar-formꯑꯃꯁꯨꯡ ꯅꯠꯠꯔꯒꯥ .pull-leftꯅꯠꯠꯔꯒꯥ .pull-rightꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ꯫

<form class = "ꯅꯥꯚꯕꯥꯔ-ꯐꯣꯔꯝ ꯄꯨꯜ-ꯂꯦꯐꯠ" > 
  <ꯏꯅꯄꯨꯠ ꯃꯈꯜ = "ꯇꯦꯛꯁꯠ" ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲" >  
</form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯍꯦꯟꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯁꯥꯔꯆ ꯐꯣꯔꯝ ꯑꯃꯒꯤꯗꯃꯛ, ꯅꯦꯚꯕꯥꯔꯗꯥ ꯂꯩꯕꯥ ꯑꯈꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯏꯅꯄꯨꯠ .navbar-searchꯑꯗꯨꯗꯥ formꯑꯃꯁꯨꯡ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.search-query

<form class = "ꯅꯥꯚꯕꯥꯔ-ꯁꯥꯔꯆ ꯄꯨꯜ-ꯂꯦꯐꯠ" > 
  <input type = "text" class = "ꯁꯥꯔꯆ-ꯀ꯭ꯕꯦꯔꯤ" ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ = "ꯁꯥꯔꯆ" >   
</form>ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯈꯤ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯟ꯫

ꯅꯍꯥꯛꯀꯤ ꯇꯣꯄꯕꯥꯔꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯆꯥꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯌꯥꯏ꯫ ꯃꯁꯤ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯌꯥꯎꯕꯥ div, .nav-collapse.collapse, ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧ ꯑꯃꯁꯨꯡ ꯅꯦꯚꯕꯥꯔ ꯇꯣꯒꯜ ꯕꯇꯟ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ, .btn-navbar.

<div ꯀ꯭ꯂꯥꯁ = "ꯅꯥꯚꯕꯥꯔ" > 
  <div class = "ꯅꯥꯚꯕꯥꯔ-ꯏꯅꯥꯔ" > 
    <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯇꯦꯅꯔ" > 
 
      <!-- .btn-navbar ꯑꯁꯤ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯔꯕꯥ ꯅꯥꯚꯕꯥꯔ ꯀꯟꯇꯦꯟꯇꯀꯤꯗꯃꯛ ꯇꯣꯒꯜ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ -->
      <a class = "btn btn-navbar" data-toggle = "ꯀꯣꯂꯥꯞꯁ" ꯗꯦꯇꯥ-ꯇꯥꯔꯒꯦꯠ = ".ꯅꯥꯚ-ꯀꯣꯂꯥꯞꯁ" >   
        <span class = "ꯑꯥꯏꯀꯟ-ꯕꯥꯔ" </span> 
        <span class = "ꯑꯥꯏꯀꯟ-ꯕꯥꯔ" </span> 
        <span class = "ꯑꯥꯏꯀꯟ-ꯕꯥꯔ" </span> 
      </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
 
      <!-- ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯎꯠꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯕ꯭ꯔꯥꯟꯗ ꯑꯗꯨ ꯃꯐꯃꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯃꯨ -->꯫
      <a class = "brand" href = "#" > ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯃꯃꯤꯡ </a>  
 
      <!-- ꯅꯍꯥꯛꯅꯥ 940px ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯃꯐꯃꯗꯥ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯄꯨꯝꯅꯃꯛ, ꯃꯐꯃꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯃꯨ -->
      <div class = "ꯅꯥꯚ-ꯀꯣꯂꯥꯞꯁ" > 
        <!-- .ꯅꯥꯚ, .ꯅꯥꯚꯕꯥꯔ-ꯁꯥꯔꯆ, .ꯅꯥꯚꯕꯥꯔ-ꯐꯣꯔꯝ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ -->
      </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
 
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

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

<ul ꯀ꯭ꯂꯥꯁ = "ꯅꯥꯚ" > ꯫ 
  <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" > 
    <a href = "#" > ꯌꯨꯃꯗꯥ </a> 
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <li><a href = "#" > ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ </a></li> 
  <li><a href = "#" > ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ </a></li> 
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

<ul ꯀ꯭ꯂꯥꯁ = "ꯅꯥꯚ" > ꯫ 
  ...
  <li class = "ꯗꯤꯚꯥꯏꯗꯔ-ꯚꯔꯇꯤꯀꯦꯜ" </li> 
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

nav, ꯁꯥꯔꯆ ꯐꯣꯔꯝ, ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ, .pull-leftꯅꯠꯠꯔꯒꯥ .pull-rightꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯃꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨꯗꯥ CSS ꯐ꯭ꯂꯣꯠ ꯑꯃꯥ ꯍꯥꯄꯀꯅꯤ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫

ꯅꯦꯚꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯑꯄꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯑꯁꯤ ꯁꯨꯄꯔ ꯁꯤꯝꯄꯂꯅꯤ, ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ .

<ul ꯀ꯭ꯂꯥꯁ = "ꯅꯥꯚ" > ꯫ 
  <li class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" > 
    <a href = "#" ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ 
          class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯇꯣꯒꯜ ꯇꯧꯕꯥ"꯫
          data-toggle = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" >
          ꯋꯥꯔꯣꯜ
          <b ꯀ꯭ꯂꯥꯁ = "ꯀꯦꯔꯦꯠ" </b> 
    </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" > 
      ...
    </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

ꯅꯕꯕꯥꯔꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ꯫

ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡ ꯑꯗꯨ a <.navbar-text>, ꯃꯍꯧꯁꯥꯅꯥ <p>ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯂꯤꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯆꯨꯒꯤꯗꯃꯛ ꯇꯦꯒ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧ꯫

ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯤꯒꯤ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯅꯣ꯫

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕ�� ꯄꯦꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯎꯠꯄꯥ ꯌꯥꯏ ꯍꯥꯌꯅꯥ ꯎꯠꯂꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯈꯛꯇꯃꯛ꯫

• ꯌꯨꯝ

• ꯍꯣꯝ / ꯳.
• ꯂꯥꯏꯔꯤꯛ ꯊꯝꯐꯝ

• ꯍꯣꯝ / ꯳.
• ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ / ꯳.
• ꯏ ꯄꯥꯎ

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

HTML ꯑꯁꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯑꯅꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯇꯅꯤ꯫

<ul class = "ꯕ꯭ꯔꯦꯗꯛꯔꯥꯝ" > 
  <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <a href = "#" > ꯍꯣꯝ </a> <span ꯀ꯭ꯂꯥꯁ = "ꯗꯤꯚꯥꯏꯗꯔ" > / </span>   
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <ꯂꯤ> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <a href = "#" > ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ </a> <span ꯀ꯭ꯂꯥꯁ = "ꯗꯤꯚꯥꯏꯗꯔ" > / </span>   
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <li class = "ꯑꯦꯛꯇꯤꯕ" > ꯗꯦꯇꯥ </li> 
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

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

ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯑꯆꯨꯝꯕꯥ ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯤꯚꯝ ꯀꯌꯥꯗꯥ ꯊꯕꯛ ꯇꯧꯏ꯫ .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> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

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

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

• ꯃꯃꯥꯡꯒꯤ
• ꯃꯊꯪ

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

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

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

• ← ꯑꯍꯜ ꯑꯣꯏꯔꯕꯥ꯫
• ꯑꯅꯧꯕꯥ →

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

ꯃꯔꯝꯗꯤ

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

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

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

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

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

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

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

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

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

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

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

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

• 

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

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

  ꯊꯕꯛ ꯊꯕꯛ

• 

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

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

  ꯊꯕꯛ ꯊꯕꯛ

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

ꯊꯝꯕꯤꯕꯥ (ꯃꯃꯥꯡꯗꯥ .media-gridv1.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 ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯂꯔꯠ" > ꯫ 
  <ꯕꯇꯟ ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>  
  <strong> ꯆꯦꯀꯁꯤꯅꯋꯥ ꯑꯃꯥ! </strong> ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯎꯕꯥ ꯐꯪꯗ꯭ꯔꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

<div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯕ꯭ꯂꯣꯛ" > 
  <a class = "ꯀ꯭ꯂꯣꯖ" data-dismiss = "ꯑꯦꯂꯔꯠ" href = "#" > × </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> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

ꯂꯤꯆꯠ ꯁꯥꯖꯠ

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

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

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

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

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

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

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

<div class = "ꯑꯐꯕꯥ" >꯫ 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

×꯫

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

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

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