ꯈꯨꯗꯝ

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

<ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" ꯊꯧꯗꯥꯡ = "ꯃꯦꯅꯨ" aria-labelledby = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" >   
  <li><a tabindex = "-1" href = "#" > ꯑꯦꯛꯁꯟ </a></li>  
  <li><a tabindex = "-1" href = "#" > ꯑꯇꯣꯞꯄꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ </a></li>  
  <li><a tabindex = "-1" href = "#" > ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ </a></li>  
  <li class = "ꯗꯤꯚꯥꯏꯗꯔ" </li> 
  <li><a tabindex = "-1" href = "#" > ꯇꯣꯉꯥꯅꯕꯥ ꯂꯤꯉ꯭ꯛ </a></li>  
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

ꯁꯨꯞꯅꯒꯤ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯗꯨ ꯌꯦꯡꯕꯗꯥ, ꯃꯐꯃꯁꯤꯗꯥ ꯃꯊꯧ ꯇꯥꯕꯥ HTML ꯑꯗꯨ ꯄꯤꯔꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯗꯨ ꯃꯅꯨꯡꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ .dropdown, ꯅꯠꯔꯒꯥ position: relative;. ꯑꯗꯨꯗꯒꯤ ꯃꯦꯅꯨ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯁꯦꯝꯃꯨ꯫

<div class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ" > 
  <!-- ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯂꯤꯉ꯭ꯛ ꯅꯠꯔꯒꯥ ꯕꯇꯟ -->
  <ul ꯀ꯭ꯂꯥꯁ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" ꯊꯧꯗꯥꯡ = "ꯃꯦꯅꯨ" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > ꯑꯦꯛꯁꯟ </a></li>  
    <li><a tabindex = "-1" href = "#" > ꯑꯇꯣꯞꯄꯥ ꯑꯦꯛꯁꯟ ꯑꯃꯥ </a></li>  
    <li><a tabindex = "-1" href = "#" > ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯋꯥꯐꯝ ꯑꯃꯥ </a></li>  
    <li class = "ꯗꯤꯚꯥꯏꯗꯔ" </li> 
    <li><a tabindex = "-1" href = "#" > ꯇꯣꯉꯥꯅꯕꯥ ꯂꯤꯉ꯭ꯛ </a></li>  
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

ꯃꯦꯅꯨꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯗꯨ ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ .pull-rightaꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.dropdown-menu

<ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ ꯄꯨꯜ-ꯔꯥꯏꯠ" ꯔꯣꯜ = "ꯃꯦꯅꯨ" aria- labelledby = "dLabel" >   
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

<ul ꯀ꯭ꯂꯥꯁ = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" ꯊꯧꯗꯥꯡ = "ꯃꯦꯅꯨ" aria- labelledby = "dLabel" >   
  ...
  <li class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯁꯕꯃꯦꯅꯨ" > 
    <a tabindex = "-1" href = "#" > ꯑꯍꯦꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ </a>  
    <ul class = "ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ" > 
      ...
    </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

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

.btnꯏꯟ .btn-group. _

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

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

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

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

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

ꯂꯥꯏꯠꯋꯦꯠ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ, ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

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

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

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

ꯅꯦꯚ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯑꯣꯏꯅꯥ (ꯇꯦꯕꯁꯤꯡ, ꯄꯤꯂꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ), ꯑꯉꯧꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ .disabledꯑꯃꯁꯨꯡ ꯍꯣꯚꯔ ꯏꯐꯦꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯔꯣꯏ . hrefꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯠꯔꯕꯗꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯅꯥ ꯂꯩꯒꯅꯤ꯫ ꯅꯠꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯤꯀꯁꯤꯡ ꯑꯗꯨ ꯊꯤꯡꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<ul class = "ꯅꯥꯚ ꯅꯚ-ꯄꯤꯂꯁ" > 
  ...
  <li class = "ꯗꯤꯁꯦꯕꯜ" ><a href = "#" > ꯃꯌꯨꯝ </a></li>  
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ꯫

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

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

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

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

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

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫

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

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

<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> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯅꯦꯚ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫

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

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

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

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

ꯈꯪꯖꯤꯟꯒꯗꯕꯅꯦꯚ ꯂꯤꯁ꯭ꯠ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, class="nav nav-list"ꯅꯦꯁ꯭ꯠ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ <ul>.

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

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

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

ꯇꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯅꯚ꯫

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

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

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

<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> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

ꯇꯦꯕꯜ ꯇꯦꯕꯜ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯥꯏꯠꯋꯦꯠ 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> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯕꯦꯁꯤꯛ ꯅꯕꯕꯔ꯫

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

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

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

ꯃꯃꯤꯡ

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

<a class = "brand" href = "#" > ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯃꯃꯤꯡ </a>  

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

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

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

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

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

ꯐꯣꯔꯃꯁꯤꯡ꯫

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

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

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

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

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

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

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

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯃꯥꯔꯀꯑꯥꯞ ꯈꯔꯥ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯦꯚꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯑꯄꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ .

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

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

ꯃꯌꯦꯛ

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

ꯑꯣꯄꯁꯅꯦꯜ ꯗꯤꯁꯞꯂꯦ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ꯫

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

ꯃꯊꯛꯇꯥ ꯐꯤꯛꯁ ꯇꯧꯈ꯭ꯔꯦ꯫

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

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

ꯃꯈꯥꯗꯥ ꯐꯤꯛꯁ ꯇꯧꯈ꯭ꯔꯦ꯫

.navbar-fixed-bottomꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

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

ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯊꯛ ꯊꯪꯕꯥ ꯅꯕꯕꯥꯔ꯫

ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯥ .navbar-static-topꯁꯦꯝꯃꯨ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯗꯅꯥ .navbar-fixed-top, ꯑꯗꯣꯝꯅꯥ ꯄꯦꯗꯤꯡ ꯑꯃꯠꯇꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯗꯦ body.

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

ꯏꯅꯚꯥꯔꯇꯦꯗ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯂꯩꯕꯥ꯫

ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯅꯕꯕꯥꯔꯒꯤ ꯂꯨꯛ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ .navbar-inverse.

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

<ul class = "ꯕ꯭ꯔꯦꯗꯛꯔꯥꯝ" > 
  <li><a href = "#" > ꯍꯣꯝ </a> <ꯁ꯭ꯄꯦꯟ ꯀ꯭ꯂꯥꯁ = "ꯗꯤꯚꯥꯏꯗꯔ" > / </span></li>   
  <li><a href = "#" > ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ </a> <span class = "ꯗꯤꯚꯥꯏꯗꯔ" > / </span></li>   
  <li class = "ꯑꯦꯛꯇꯤꯕ" > ꯗꯦꯇꯥ </li> 
</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ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯃꯁꯨꯡ .activeꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <li class = "ꯗꯤꯁꯦꯕꯜ" ><a href = "#" > ꯃꯃꯥꯡꯒꯤ </a></li>  
    <li class = "ꯑꯦꯛꯇꯤꯕ" ><a href = "#" > ꯱ </a></li>  
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

<div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    <li class = "ꯗꯤꯁꯦꯕꯜ" ><span> ꯃꯃꯥꯡꯒꯤ </span></li> 
    <li ꯀ꯭ꯂꯥꯁ = "ꯑꯦꯛꯇꯤꯕ" ><span> ꯱ </span></li> 
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯁꯥꯏꯖꯁꯤꯡ꯫

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

<div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯑꯆꯧꯕꯥ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div ꯀ꯭ꯂꯥꯁ = "ꯄꯦꯖꯤꯅꯦꯁꯟ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯑꯄꯤꯀꯄꯥ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄꯦꯖꯤꯅꯦꯁꯟ ꯄꯦꯖꯤꯅꯦꯁꯟ-ꯃꯤꯅꯤ" > 
  <ul> ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫
    ...
  </ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

ꯄꯦꯖꯔ ꯇꯧꯕꯥ꯫

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

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

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

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

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

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

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

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

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

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

ꯂꯦꯕꯦꯂꯁꯤꯡ꯫

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

ꯍꯤꯔꯣ ꯌꯨꯅꯤꯠ꯫

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

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

ꯄꯦꯖ ꯍꯦꯗ ꯇꯧꯕꯥ꯫

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

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

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

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

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

ꯑꯍꯦꯅꯕꯥ ꯃꯥꯔꯀꯑꯥꯞ ꯈꯔꯥ ꯇꯧꯔꯒꯥ, ꯍꯦꯗꯤꯡ, ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ, ꯅꯠꯔꯒꯥ ꯕꯇꯅꯒꯨꯝꯕꯥ ꯃꯈꯜ ꯑꯃꯠꯇꯒꯤ 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 = "" >  
      <h3> ꯊꯝꯕꯤꯕꯥ ꯂꯦꯕꯦꯜ </h3>
      <p> ꯊꯝꯕꯤꯕꯥ ꯀꯦꯄꯁꯟ... </p>
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  ...
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

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

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

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

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

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

<a href = "#" class = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </a>   

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

<ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>   

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

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

<div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯕ꯭ꯂꯣꯛ" > 
  <ꯕꯇꯟ ꯃꯈꯜ = "ꯕꯇꯟ" ꯀ꯭ꯂꯥꯁ = "ꯀ꯭ꯂꯣꯖ" ꯗꯦꯇꯥ-ꯗꯤꯁꯃꯤꯁ = "ꯑꯦꯂꯔꯠ" > × </ꯕꯇꯟ>   
  <h4> ꯆꯦꯀꯁꯤꯅꯋꯥ! </h꯴> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
  ꯕꯦꯁ꯭ꯠ ꯆꯦꯛ ꯌꯣ ꯁꯦꯜꯐ, ꯅꯍꯥꯛꯅꯥ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯑꯂꯇꯔꯅꯦꯇꯤꯕꯁꯤꯡ꯫

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

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

<div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯑꯦꯔꯔ" > 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯥꯏ ꯄꯥꯛꯄ

<div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯃꯥꯏꯄꯥꯀꯄꯥ" > 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯏꯄꯥꯎ

<div class = "ꯑꯦꯂꯔꯠ ꯑꯦꯂꯔꯠ-ꯏꯅꯐꯣ" > 
  ...
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

ꯇꯉꯥꯏ ꯐꯗꯕ

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

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

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

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

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

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

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

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

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ꯫

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

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

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

<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯏꯅꯐꯣ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯃꯥꯏꯄꯥꯀꯄꯥ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 40 % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯋꯥꯔꯅꯤꯡ" > 
  <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯁ꯭ꯇꯥꯏꯜ = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯈꯨꯗꯣꯡꯊꯤꯕꯥ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 80 % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯏꯅꯐꯣ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯲꯰ % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯃꯥꯏꯄꯥꯀꯄꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 40 % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯋꯥꯔꯅꯤꯡ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ" > 
  <div ꯀ꯭ꯂꯥꯁ = "ꯕꯥꯔ" ꯁ꯭ꯇꯥꯏꯜ = " ꯄꯥꯀꯆꯥꯎꯕꯥ : ꯶꯰ % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<div class = "ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯈꯨꯗꯣꯡꯊꯤꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ-ꯁ꯭ꯠꯔꯥꯏꯞ ꯇꯧꯕꯥ" > 
  <div class = "bar" style = " ꯄꯥꯀꯆꯥꯎꯕꯥ : 80 % " ></div>   
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

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

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

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

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

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

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

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

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

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

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

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

<div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫ 
  <a class = "ꯄꯨꯜ-ꯂꯦꯐꯠ" href = "#" >  
    <img class = "ꯃꯤꯗꯤꯌꯥ-ꯑꯣꯕꯖꯦꯛꯇ" src = "https://placehold.it/64x64" >  
  </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  <div class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯀꯆꯥꯡ" > 
    <h4 class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯦꯗꯤꯡ" > ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ </h4> 
    ...
 
    <!-- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ -->
    <div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫ 
      ...
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯃꯤꯗꯤꯌꯥ ꯂꯤꯁ꯭ꯠ ꯇꯧꯕꯥ꯫

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

<ul class = "ꯃꯤꯗꯤꯌꯥ-ꯂꯤꯁ꯭ꯠ" > 
  <li class = "ꯃꯤꯗꯤꯌꯥ" > 
    <a class = "ꯄꯨꯜ-ꯂꯦꯐꯠ" href = "#" >  
      <img class = "ꯃꯤꯗꯤꯌꯥ-ꯑꯣꯕꯖꯦꯛꯇ" src = "https://placehold.it/64x64" >  
    </a> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <div class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯀꯆꯥꯡ" > 
      <h4 class = "ꯃꯤꯗꯤꯌꯥ-ꯍꯦꯗꯤꯡ" > ꯃꯤꯗꯤꯌꯥ ꯍꯦꯗꯤꯡ </h4> 
      ...
 
      <!-- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ -->
      <div ꯀ꯭ꯂꯥꯁ = "ꯃꯤꯗꯤꯌꯥ" >꯫ 
        ...
     </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </li> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</ul> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

class = "ꯄꯨꯜ-ꯂꯦꯐꯠ"꯫

. ꯄꯨꯜ - ꯂꯦꯃꯍꯧꯔꯤꯕꯥ {
  float : ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ;
} .

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

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

class = "ꯄꯨꯜ-ꯔꯥꯏꯠ"꯫

. ꯄꯨꯜ - ꯔꯥꯏꯠ { .
  float : ꯑꯔꯥꯞꯄꯥ ;
} .

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

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

class = "ꯃ꯭ꯌꯨꯠ ꯇꯧꯔꯕꯥ"꯫

. ꯃ꯭ꯌꯨꯇꯦꯗ {
  ꯃꯆꯨ : #꯹꯹꯹; 
} .

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

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

class = "ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ꯇꯧꯕꯥ"꯫

. ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ {
  * ꯖꯨꯝ ꯇꯧꯕꯥ : ꯱ ; 
  &: ꯃꯃꯥꯡꯗꯥ , .
  &: ꯃꯇꯨꯡꯗꯥ {
    ꯗꯤꯁꯞꯂꯦ : ꯇꯦꯕꯜ ;
    ꯀꯟꯇꯦꯟꯇ : "" ; 
  } .
  &: ꯃꯇꯨꯡꯗꯥ {
    ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ : ꯑꯅꯤꯃꯛ ;
  } .
} .