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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯏ꯫

ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯥ CSS ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯐꯥꯏꯜ ꯑꯃꯗꯥ ꯂꯩ, button-groups.less.

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

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

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

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

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

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

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

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

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

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

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

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

ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯂꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ 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> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

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

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

ꯇꯦꯕꯁꯤꯡ ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ, .nav-tabsꯀ꯭ꯂꯥꯁ .tabbable.

ꯀꯁ꯭ꯇꯝ ꯖꯦꯛꯕꯦꯔꯤ ꯄ꯭ꯂꯒꯏꯟ꯫

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

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

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

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-fixed-topꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯄꯥꯅꯒꯤ ꯗꯤꯚꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ, .navbar.

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

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

ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ꯫

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

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

ꯁꯥꯔꯆ ꯐꯣꯔꯝ ꯑꯃꯥ꯫

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

<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 ꯐ꯭ꯂꯣꯠ ꯑꯃꯥ ꯍꯥꯄꯀꯅꯤ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ꯫

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

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

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

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

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

• ꯌꯨꯝ

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

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

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

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

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

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

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

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

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

• ꯃꯃꯥꯡꯒꯤ
• ꯃꯊꯪ

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

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

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

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

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

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

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

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ 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 ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯂꯔꯠ" > ꯫ 
  <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> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

ꯔꯤꯗ ꯀꯥꯎꯟꯇ ꯑꯃꯒꯤꯗꯃꯛ ꯅꯠꯠꯔꯒꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯏꯟꯗꯤꯀꯦꯇꯔ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯕꯦꯖ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<span class = "ꯕꯦꯖ" > ꯳ </div> ꯂꯩ꯫ 

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

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

×꯫

<a class = "ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ" > × </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫