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

ꯐꯪꯂꯤꯕꯥ ꯒ꯭ꯂꯥꯏꯐꯁꯤꯡ꯫

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

  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯁ꯭ꯇꯦꯔꯤꯁ꯭ꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯂꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯌꯨꯔꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯎꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯥꯏꯅꯥꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯂꯥꯎꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯅꯚꯦꯂꯄꯃꯦꯟꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯦꯟꯁꯤꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯒ꯭ꯂꯥꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃ꯭ꯌꯨꯖꯤꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯔꯆ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯥꯔꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯥꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯥꯔ-ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯌꯨꯖꯔ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯤꯜꯃ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊ-ꯂꯥꯔꯖ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊ-ꯂꯤꯁ꯭ꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯧꯊꯣꯀꯄꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯖꯨꯝ-ꯏꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯖꯨꯝ-ꯑꯥꯎꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯐ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯤꯒꯅꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯣꯒ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯁ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯣꯝ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯥꯏꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯥꯏꯝ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯣꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯗꯥꯎꯅꯂꯣꯗ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯄꯂꯣꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯅꯕꯣꯛꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯂꯦ-ꯁꯔꯀꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯄꯤꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯐ꯭ꯔꯦꯁ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯤꯁ꯭ꯠ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯣꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯦꯒ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯗꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯚꯣꯜꯌꯨꯝ-ꯑꯣꯐ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯚꯣꯜꯌꯨꯝ-ꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯚꯣꯜꯌꯨꯝ-ꯑꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯌꯨ.ꯑꯥꯔ.ꯀꯣꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯥꯔꯀꯣꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯒ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯒꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯨꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯨꯀꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯦꯃꯦꯔꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯟꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯣꯜꯗ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯇꯥꯂꯤꯛ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯛꯁꯠ-ꯍꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯛꯁ-ꯋꯥꯏꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯁꯦꯟꯇꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯂꯥꯏꯟ-ꯖꯁ꯭ꯇꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯤꯁ꯭ꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯟꯗꯦꯟꯇ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯟꯗꯦꯟꯇ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯦꯁꯇꯥꯏꯝ-ꯚꯤꯗꯤꯑꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯤꯛꯆꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯞ-ꯃꯥꯔꯀꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯤꯟꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯦꯌꯔ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯆꯦꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯨꯚ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯦꯞ-ꯕꯦꯀꯋꯥꯔꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯥꯁ꯭ꯠ-ꯕꯦꯀꯋꯥꯔꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯦꯀꯋꯥꯔꯗ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯂꯦ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯣꯖ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯣꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯔꯋꯥꯔꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯥꯁ꯭ꯠ-ꯐꯣꯔꯋꯥꯔꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯦꯞ-ꯐꯣꯔꯋꯥꯔꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯖꯦꯛꯇ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯆꯦꯚ꯭ꯔꯣꯟ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯆꯦꯚ꯭ꯔꯣꯟ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯂꯁ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯥꯏꯅꯥꯁ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯃꯨꯚ-ꯁꯥꯏꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯛ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯕꯦꯁꯟ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯅꯐꯣ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯛꯔꯤꯅꯁꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯃꯨꯚ-ꯁꯔꯀꯜ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯛ-ꯁꯔꯀꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯦꯟ-ꯁꯔꯀꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯔꯣ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯤꯔ-ꯑꯔꯥꯞꯄꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯔꯣ-ꯑꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯔꯣ-ꯗꯥꯎꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯦꯌꯔ-ꯑꯜꯇ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯁꯥꯏꯖ-ꯐꯨꯜ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯁꯥꯏꯖ-ꯑꯄꯤꯀꯄꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯛꯁꯛꯂꯦꯃꯦꯁꯟ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯒꯤꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯥꯝꯕꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯥꯌꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯥꯏ-ꯑꯣꯄꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯥꯏ-ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯋꯥꯔꯅꯤꯡ-ꯁꯥꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄ꯭ꯂꯦꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯦꯂꯦꯟꯗꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯦꯟꯗꯝ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯒ꯭ꯅꯦꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯆꯦꯚ꯭ꯔꯣꯟ-ꯑꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯆꯦꯚ꯭ꯔꯣꯟ-ꯗꯥꯎꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯠꯕꯤꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯄꯤꯡ-ꯀꯥꯔꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯜꯗꯔ-ꯀ꯭ꯂꯣꯖ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯜꯗꯔ-ꯑꯣꯄꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯁꯥꯏꯖ-ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯤꯁꯥꯏꯖ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯩꯆ.ꯗꯤ.ꯗꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯨꯂꯍꯣꯔꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯔꯇꯤꯐꯤꯀꯦꯠ ꯄꯤꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊꯨꯝ-ꯑꯥꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊꯨꯝ-ꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯟꯗ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯟꯗ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯟꯗ-ꯑꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯟꯗ-ꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯔꯀꯜ-ꯑꯦꯔꯣ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯔꯀꯜ-ꯑꯦꯔꯣ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯔꯀꯜ-ꯑꯦꯔꯣ-ꯑꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯔꯀꯜ-ꯑꯦꯔꯣ-ꯗꯥꯎꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯒ꯭ꯂꯣꯕ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯦꯟꯆ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯥꯁ꯭ꯀꯁꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯤꯜꯇꯔ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕ꯭ꯔꯤꯐꯀꯦꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯨꯂꯁ꯭ꯛꯔꯤꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯗꯦꯁꯕꯣꯔꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯦꯄꯥꯔꯛꯂꯤꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯥꯔꯠ-ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯨꯁꯄꯤꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯌꯨ.ꯑꯦꯁ.ꯗꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯖꯤ.ꯕꯤ.ꯄꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯂꯐꯥꯕꯦꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯂꯐꯥꯕꯦꯠ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯣꯔꯗꯔ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯣꯔꯠ-ꯕꯥꯏ-ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯅꯆꯦꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯛꯁꯄꯥꯟꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯣꯂꯥꯄꯁ-ꯗꯥꯎꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯣꯂꯥꯄꯁ-ꯑꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯣꯒ-ꯏꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯦꯁ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯣꯒ-ꯑꯥꯎꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯅꯧꯕꯥ-ꯎꯏꯟꯗꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯦꯀꯣꯔꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯦꯚ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯄꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯦꯚ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯛꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯊꯥꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯣꯄꯤ-ꯗꯤꯁ꯭ꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯣꯄꯤ-ꯁꯦꯚ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯣꯄꯤ-ꯂꯧꯊꯣꯀꯄꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯣꯄꯤ-ꯁꯦꯚ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐ꯭ꯂꯣꯄꯤ-ꯑꯣꯄꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯔꯦꯗꯤꯠ-ꯀꯥꯔꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯟꯁꯐꯔ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯇꯂꯔꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯦꯗꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯝꯞꯔꯦꯁ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯌꯥꯔꯐꯣꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯐꯣꯟ-ꯑꯂꯠ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯥꯋꯥꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯇꯦꯠꯁꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯁꯗꯤ-ꯚꯤꯗꯤꯑꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯩꯆ.ꯗꯤ.-ꯚꯤꯗꯤꯑꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯕꯇꯥꯏꯇꯂꯁꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯎꯟꯗ-ꯁ꯭ꯇꯦꯔꯤꯑꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯎꯟꯗ-ꯗꯣꯂꯕꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯎꯟꯗ-꯵-꯱
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯎꯟꯗ-꯶-꯱
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯥꯎꯟꯗ-꯷-꯱
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯣꯄꯤꯔꯥꯏꯠ-ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯦꯖꯤꯁ꯭ꯠꯔꯦꯁꯟ-ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯂꯥꯎꯗ-ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀ꯭ꯂꯥꯎꯗ-ꯑꯄꯂꯣꯗ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯤ-ꯀꯣꯅꯤꯐꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯤ-ꯗꯤꯁꯤꯗ꯭ꯌꯨꯁ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯤ.ꯗꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯦꯚ-ꯐꯥꯏꯜ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯄꯟ-ꯐꯥꯏꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯦꯚꯦꯜ-ꯑꯞ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯦꯁ꯭ꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯂꯔꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯀꯨꯏꯂꯥꯏꯖꯥꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯨꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯥꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯤꯁꯣꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯅꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯦꯕꯤ-ꯐꯣꯔꯃꯨꯂꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯟꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕ꯭ꯂꯦꯀꯕꯣꯔꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯦꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯄꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯏꯔꯦꯖ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯍꯥꯎꯔꯒ꯭ꯂꯥꯁ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯂꯦꯝꯄ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯗꯨꯞꯂꯤꯀꯦꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯄꯤꯒꯤ-ꯕꯦꯉ꯭ꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯤꯖꯔꯁꯤꯡ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯤꯇꯀꯣꯏꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯕꯤ.ꯇꯤ.ꯁꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯛꯁ.ꯕꯤ.ꯇꯤ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯌꯦꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯖꯦ.ꯄꯤ.ꯑꯥꯏ
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯨꯕꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯔꯕ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯥꯏꯁ-ꯂꯣꯂꯤ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯥꯏꯁ-ꯂꯣꯂꯤ-ꯇꯦꯁ꯭ꯠ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯦꯖꯨꯀꯦꯁꯟ ꯇꯧꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯄꯁꯟ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯄꯁꯟ-ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯕꯥ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯅꯨ-ꯍꯦꯃꯕꯥꯔꯒꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯣꯗꯦꯜ-ꯎꯏꯟꯗꯣ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯏꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯒ꯭ꯔꯦꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯅꯨꯃꯤꯠꯀꯤ ꯆꯤꯟꯖꯥꯛ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯛꯁꯠ-ꯁꯥꯏꯖ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯛꯁ-ꯀꯂꯔ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇꯦꯛꯁꯠ-ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯇꯣꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯕꯣꯇꯝ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯚꯔꯇꯤꯀꯦꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯑꯣꯕꯖꯦꯛꯇ-ꯑꯦꯂꯥꯏꯟ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯏꯑꯦꯉ꯭ꯒꯜ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯏꯑꯦꯉ꯭ꯒꯜ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯏꯑꯦꯉ꯭ꯒꯜ-ꯕꯣꯇꯝ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯇ꯭ꯔꯥꯏꯑꯦꯉ꯭ꯒꯜ-ꯇꯣꯞ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯀꯟꯁꯣꯜ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯨꯄꯥꯔꯁ꯭ꯛꯔꯤꯞꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯁꯕꯁ꯭ꯛꯔꯤꯞꯇ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯅꯨ-ꯂꯦꯐꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯅꯨ-ꯔꯥꯏꯠ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯅꯨ-ꯗꯥꯎꯟ꯫
  • ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ ꯒ꯭ꯂꯥꯏꯐꯤꯀꯟ-ꯃꯦꯅꯨ-ꯑꯞ꯫

ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ꯫

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

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

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

ꯏꯝꯄꯦꯛꯇ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯈꯛꯇꯃꯛ꯫

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

ꯑꯥꯏꯀꯟ ꯐꯣꯟꯇ ꯂꯣꯀꯦꯁꯟ ꯍꯣꯡꯗꯣꯀꯄꯥ꯫

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

  • ꯁꯣꯔꯁ ꯂꯦꯁ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ @icon-font-pathꯑꯃꯁꯨꯡ/ꯅꯠꯔꯒꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯎ꯫@icon-font-name
  • ꯂꯦꯁ ꯀꯝꯄꯥꯏꯂꯔꯅꯥ ꯄꯤꯕꯥ ꯔꯤꯂꯦꯇꯤꯚ URLꯁꯤꯡꯒꯤ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫
  • url()ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯂꯩꯕꯥ ꯄꯥꯊꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯅꯍꯥꯛꯀꯤ ꯑꯀꯛꯅꯕꯥ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯁꯦꯇꯑꯄꯇꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯆꯨꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯑꯥꯏꯀꯅꯁꯤꯡ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯤ ꯃꯣꯗꯔꯟ ꯚꯔꯖꯅꯁꯤꯡꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ, ꯂꯣꯌꯅꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯌꯨꯅꯤꯀꯣꯗ ꯀꯦꯔꯦꯛꯇꯔꯁꯤꯡ ꯂꯥꯎꯊꯣꯛꯀꯅꯤ꯫ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯗꯥ (ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯥꯏꯀꯅꯁꯤꯡ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯗꯦꯀꯣꯔꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯇꯃꯗꯥ) ꯑꯅꯤꯡꯕꯥ ꯑꯄꯥꯝꯕꯥ ꯑꯃꯁꯨꯡ ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯑꯥꯎꯠꯄꯨꯠ ꯊꯣꯀꯍꯟꯗꯅꯕꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯈꯣꯌꯕꯨ aria-hidden="true"ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯔꯊ ꯄꯤꯅꯕꯥ ꯑꯥꯏꯀꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ (ꯗꯦꯀꯣꯔꯦꯇꯦꯗ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯈꯛꯇꯃꯛ ꯅꯠꯇꯅꯥ), ꯑꯔꯊ ꯑꯁꯤ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯁꯨ ꯌꯧꯍꯅꯕꯥ ꯁꯣꯏꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ – ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ, .sr-onlyꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯇꯦꯛꯁꯠ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯕꯥ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯦꯝꯂꯕꯗꯤ ( <button>ꯑꯥꯏꯀꯟ ꯑꯃꯈꯛꯇꯃꯛ ꯌꯥꯑꯣꯕꯥ) ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯀꯟꯠꯔꯣꯜ ꯑꯗꯨꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨ ꯈꯉꯗꯣꯛꯅꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯥ ꯄꯤꯒꯗꯕꯅꯤ, ꯃꯗꯨꯅꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯑꯣꯏꯒꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯦꯁ ꯑꯁꯤꯗꯥ, ꯅꯍꯥꯛꯅꯥ aria-labelꯀꯟꯠꯔꯣꯜ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ꯃꯁꯤ ꯑꯦꯔꯥꯔ ꯃꯦꯁꯦꯖ ꯑꯃꯅꯤ ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ ꯑꯦꯂꯔꯠ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯑꯥꯏꯀꯟ ꯑꯃꯥ , ꯃꯁꯤꯗꯥ .sr-onlyꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯍꯤꯟꯇ ꯑꯁꯤ ꯌꯧꯍꯟꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯠ ꯌꯥꯑꯣꯔꯤ꯫

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

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

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯒꯤ ꯇ꯭ꯔꯤꯒꯔ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ .dropdown, ꯅꯠꯠꯔꯒꯥ position: relative;. ꯑꯗꯨꯗꯒꯤ ꯃꯦꯅꯨꯒꯤ HTML ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯑꯁꯤ ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯃꯊꯛꯇꯥ (ꯃꯈꯥꯒꯤ ꯃꯍꯨꯠꯇꯥ) ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯍꯟꯅꯕꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ .dropupꯌꯥꯏ꯫

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯃꯥ ꯃꯊꯛꯇꯒꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ 100% ꯄꯣꯖꯤꯁꯟ ꯇꯧꯏ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨ ꯑꯗꯨ ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ .dropdown-menu-rightaꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.dropdown-menu

ꯑꯍꯦꯅꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯄꯤꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

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

ꯗꯤꯞꯔꯦꯛꯇꯦꯗ .pull-rightꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

v3.1.0 ꯗꯒꯤ ꯍꯧꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ .pull-rightꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡꯗꯥ ꯗꯤꯞꯔꯦꯀꯦꯠ ꯇꯧꯔꯦ꯫ ꯃꯦꯅꯨ ꯑꯃꯥ ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ, .dropdown-menu-right. ꯅꯦꯚꯕꯥꯔꯗꯥ ꯂꯩꯕꯥ ꯔꯥꯏꯠ-ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯅꯦꯚ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯅꯥ ꯃꯦꯅꯨ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯒꯤ ꯃꯤꯛꯁꯤꯟ ꯚꯔꯖꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ, .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

ꯂꯤꯉ꯭ꯛ ꯑꯗꯨ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯗꯥ ꯂꯩꯕꯥ .disableda ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

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

ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ & ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯑꯈꯟꯅꯕꯥ ꯁꯦꯇꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

a ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯞ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ .btn-group, ꯅꯍꯥꯛꯅꯥ container: 'body'ꯑꯄꯥꯝꯕꯥ ꯁꯥꯏꯗ ꯏꯐꯦꯛꯇꯁꯤꯡ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯄꯥꯀꯊꯣꯛ-ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯇꯨꯂꯇꯤꯞ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯗꯨꯒꯤ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯃꯥꯡꯈꯤꯕꯥ) ꯊꯤꯡꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯇꯥꯀꯄꯥ ꯇꯥꯏ꯫

ꯑꯆꯨꯝꯕꯥ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯒꯗꯕꯅꯤ roleꯑꯃꯁꯨꯡ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯄꯤꯒꯗꯕꯅꯤ꯫

ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯕꯇꯅꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯀꯥꯡꯂꯨꯞ ꯈꯥꯌꯗꯣꯀꯏ ꯍꯥꯌꯕꯥ ꯈꯉꯍꯟꯅꯕꯒꯤꯗꯃꯛ, ꯃꯇꯤꯛ ꯆꯥꯕꯥ roleꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯃꯥ ꯄꯤꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯃꯁꯤ ꯑꯣꯏꯒꯅꯤ role="group", ꯑꯗꯨꯒꯥ ꯇꯨꯂꯕꯥꯔꯁꯤꯡꯗꯥ role="toolbar".

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

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯨꯂꯕꯥꯔꯁꯤꯡꯗꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯄꯤꯒꯗꯕꯅꯤ, ꯃꯔꯃꯗꯤ ꯑꯌꯥꯝꯕꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯅꯠꯔꯕꯗꯤ ꯃꯈꯣꯌꯕꯨ ꯂꯥꯎꯊꯣꯛꯂꯣꯏ, ꯑꯆꯨꯝꯕꯥ roleꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯩꯔꯕꯁꯨ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤ aria-label, ꯑꯗꯨꯕꯨ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯕꯁꯤꯡ aria-labelledbyꯑꯁꯤꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

.btnꯏꯟ .btn-group. _

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ꯕꯇꯟ ꯇꯨꯂꯕꯥꯔ꯫

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯀꯥꯡꯂꯨꯞ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯕꯇꯟ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯕꯇꯟ ꯁꯥꯏꯖꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯀꯥꯡꯂꯨꯞ ꯀꯌꯥ ꯑꯃꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯌꯥꯑꯣꯅꯥ, .btn-group-*ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯈꯛꯇꯃꯛ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.btn-group




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯕꯥ ꯚꯦꯔꯤꯑꯦꯁꯟ꯫

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

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

ꯉꯃꯈꯩꯁꯤꯡ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯥ꯫

ꯕꯇꯅꯁꯤꯡꯕꯨ ꯖꯁ꯭ꯇꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯑꯀꯛꯅꯕꯥ HTML ꯑꯃꯁꯨꯡ CSS ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ( display: table-cellꯃꯈꯣꯌꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯉꯃꯈꯩꯁꯤꯡ ꯑꯁꯤ ꯁꯔꯨꯛ ꯑꯅꯤ ꯍꯦꯅꯒꯠꯂꯀꯏ꯫ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯗꯥ, margin-left: -1pxꯉꯃꯈꯩꯁꯤꯡ ꯂꯧꯊꯣꯀꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯗꯨꯕꯨ margin, display: table-cell. ꯃꯁꯤꯒꯤ ꯃꯍꯩ ꯑꯣꯏꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯃꯔꯁꯤꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯉꯃꯈꯩꯁꯤꯡ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ ꯄꯥꯝꯂꯕꯁꯨ ꯌꯥꯏ꯫

ꯑꯥꯏ.ꯏ.꯸ ꯑꯃꯁꯨꯡ ꯉꯃꯈꯩꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯸ꯅꯥ ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯕꯇꯟ ꯒ꯭ꯔꯨꯞ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯕꯇꯅꯁꯤꯡꯗꯥ ꯕꯣꯔꯗꯔꯁꯤꯡ ꯔꯦꯟꯗꯔ ꯇꯧꯗꯦ, ꯃꯁꯤ ꯑꯣꯟ ꯑꯣꯏꯔꯕꯁꯨ <a>ꯅꯠꯠꯔꯒꯥ <button>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯣꯏꯔꯕꯁꯨ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯆꯠꯅꯕꯥ, ꯕꯇꯟ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯇꯣꯞꯄꯥ ꯑꯃꯗꯥ ꯀꯨꯄꯁꯤꯜꯂꯨ .btn-group.

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ #12476 ꯌꯦꯡꯕꯤꯌꯨ꯫

<a>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

.btnꯁꯨꯞꯅꯇꯒꯤ ꯑꯦꯁ ꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ꯕꯇꯟ ꯑꯣꯏꯅꯥ ꯊꯕꯛ ꯇꯧꯔꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

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

<button>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

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

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

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

ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯈꯥ ꯄꯣꯅꯕꯥ꯫

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

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

ꯕꯦꯁꯤꯛ ꯃꯥꯔꯀꯑꯥꯞ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯕꯇꯟ ꯑꯃꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯇꯣꯒꯜ ꯑꯃꯗꯥ ꯑꯣꯟꯊꯣꯀꯎ꯫

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯕꯇꯟ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯅꯥ ꯁꯥꯏꯖ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯕꯇꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ꯗ꯭ꯔꯣꯄꯑꯞ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡ ꯇ꯭ꯔꯤꯒꯔ .dropupꯇꯧ꯫

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

ꯇꯦꯛꯁꯇꯥꯏꯂꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯃꯇꯨꯡꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯥꯌꯀꯩ ꯑꯅꯤꯃꯛꯇꯥ ꯇꯦꯛꯁꯠ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯅꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯥꯡꯗꯣꯀꯄꯥ <input>. ꯁꯤꯉ꯭ꯒꯜ ꯑꯃꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯄ꯭ꯔꯤꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯄꯦꯟꯗ ꯇꯧꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ .input-groupꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ ..input-group-addon.input-group-btn.form-control

ꯇꯦꯛꯁꯇꯥꯏꯜ <input>ꯑꯦꯁ ꯈꯛꯇꯃꯛ꯫

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯣꯏꯗꯕꯅꯤ <select>ꯃꯔꯃꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯋꯦꯕꯀꯤꯠ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ ꯉꯃꯗꯦ꯫

<textarea>ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯣꯏꯗꯕꯅꯤ ꯃꯔꯃꯗꯤ ꯃꯈꯣꯌꯒꯤ rowsꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯗꯨ ꯀꯦꯁ ꯈꯔꯗꯥ ꯏꯀꯥꯌꯈꯨꯝꯅꯕꯥ ꯎꯠꯂꯣꯏ꯫

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

ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ .input-group, ꯅꯍꯥꯛꯅꯥ container: 'body'ꯑꯄꯥꯝꯕꯥ ꯁꯥꯏꯗ ꯏꯐꯦꯛꯇꯁꯤꯡ (ꯏꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯦꯟꯅꯥ ꯄꯥꯀꯊꯣꯛ-ꯆꯥꯎꯊꯣꯀꯍꯅꯕꯥ ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯇꯨꯂꯇꯤꯞ ꯅꯠꯠꯔꯒꯥ ꯄꯣꯄꯣꯚꯔ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯥꯒꯤ ꯒꯣꯜꯗ ꯑꯣꯏꯕꯥ ꯀꯣꯟꯅꯥ ꯃꯥꯡꯍꯅꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ) ꯊꯤꯡꯅꯕꯥ ꯑꯣꯄꯁꯟ ꯑꯗꯨ ꯇꯥꯀꯄꯥ ꯇꯥꯏ꯫

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

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

ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

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

ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯇꯦꯛꯅꯤꯛ (ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯉꯝꯕꯥ <label>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ, ꯀ꯭ꯂꯥꯁ <label>ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ , ꯅꯠꯠꯔꯒꯥ , , , ꯅꯠꯠꯔꯒꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯁꯤꯖꯤꯟꯅꯕꯥ) ꯑꯃꯁꯨꯡ ꯀꯔꯤ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯄꯤꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯔꯤꯕꯥ ꯏꯟꯇꯔꯐꯦꯁ ꯋꯤꯖꯇꯦꯃꯒꯤ ꯑꯀꯛꯅꯕꯥ ꯃꯈꯂꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯈꯦꯠꯅꯒꯅꯤ꯫ ꯀꯥꯈꯜ ꯑꯁꯤꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯁꯖꯦꯁꯟ ꯇꯧꯔꯕꯥ, ꯀꯦꯁ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯑꯣꯏꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯈꯔꯥ ꯄꯤꯔꯤ꯫.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯏꯅꯄꯨꯠ ꯑꯃꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯃꯔꯣꯃꯗꯥ ꯑꯦꯗ-ꯑꯣꯟ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯑꯃꯥ ꯊꯝꯃꯨ꯫ ꯅꯍꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯑꯃꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯅꯤꯃꯛꯇꯥ ꯑꯃꯨꯛ ꯊꯝꯕꯥ ꯌꯥꯏ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯥꯌꯀꯩ ꯑꯃꯈꯛꯇꯗꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯑꯦꯗ-ꯑꯣꯅꯁꯤꯡ ( .input-group-addonꯅꯠꯔꯒꯥ ) ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫.input-group-btn

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

@

@ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ.ꯀꯝ

$ .꯰꯰ ꯑꯣꯏꯈꯤ꯫

https://ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ.ꯀꯝ/ꯌꯨꯖꯔꯁꯤꯡ/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯔꯤꯂꯦꯇꯤꯕ ꯐꯣꯔꯝ ꯁꯥꯏꯖꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ .input-groupꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ-ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯜ ꯁꯥꯏꯖ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ꯆꯦꯀꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤꯑꯣ ꯑꯦꯗꯣꯅꯁꯤꯡ꯫

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ꯕꯇꯟ ꯑꯦꯗꯟ ꯇꯧꯕꯥ꯫

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤ ꯈꯔꯥ ꯇꯣꯉꯥꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯅꯦꯁ꯭ꯇꯤꯡꯒꯤ ꯑꯍꯦꯅꯕꯥ ꯊꯥꯛ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯒꯤ ꯃꯍꯨꯠꯇꯥ .input-group-addon, ꯅꯍꯥꯛꯅꯥ .input-group-btnꯕꯇꯅꯁꯤꯡ ꯑꯗꯨ ꯔꯦꯞ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯉꯃꯗꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ꯁꯦꯒꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯕꯇꯅꯁꯤꯡ꯫

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕꯇꯅꯁꯤꯡ꯫

ꯑꯗꯣꯝꯅꯥ ꯃꯥꯌꯀꯩ ꯑꯃꯗꯥ ꯑꯦꯗ-ꯑꯣꯟ ꯑꯃꯈꯛꯇꯃꯛ ꯂꯩꯕꯥ ꯌꯥꯏ ꯑꯗꯨꯕꯨ ꯑꯗꯣꯝꯅꯥ .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ꯅꯚꯁ ꯑꯁꯤꯅꯤ꯫

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

ꯇꯦꯕ ꯄꯦꯅꯦꯂꯁꯤꯡꯒꯤꯗꯃꯛ navs ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯇꯦꯕꯁꯤꯡꯒꯤ ꯄ꯭ꯂꯒꯏꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

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

ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯅꯚꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯍꯅꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯕꯥꯔ ꯑꯃꯥ ꯄꯤꯅꯕꯥ navs ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, role="navigation"ꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯂꯣꯖꯤꯀꯦꯜ ꯑꯣꯏꯕꯥ ꯃꯃꯥꯡꯒꯤ ꯀꯟꯇꯦꯅꯔꯗꯥ a ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ, ꯅꯠꯠꯔꯒꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ <ul>ꯑꯃꯥ ꯔꯦꯞ ꯇꯧ꯫ <nav>ꯊꯧꯗꯥꯡ ꯑꯁꯤ ꯃꯁꯥꯃꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯅꯨ <ul>, ꯃꯔꯃꯗꯤ ꯃꯁꯤꯅꯥ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯅꯥ ꯇꯁꯦꯡꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯉꯃꯍꯜꯂꯣꯏ꯫

ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯅꯥ ꯕꯦꯖ ꯀ꯭ꯂꯥꯁ .nav-tabsꯑꯗꯨ ꯃꯊꯧ ꯇꯥꯏ ꯍꯥꯌꯕꯥ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫.nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

768px ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯄꯥꯀꯄꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯇꯦꯕ ꯅꯠꯠꯔꯒꯥ ꯄꯤꯂꯁꯤꯡ ꯐꯖꯅꯥ .nav-justifiedꯁꯦꯝꯃꯨ꯫ ꯑꯄꯤꯀꯄꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ, ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯦꯛ ꯇꯧꯏ꯫

ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯅꯦꯚꯕꯥꯔ ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯁꯐꯔꯤ ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯅꯚꯁꯤꯡ꯫

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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

ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯏꯝꯄꯦꯛꯇ ꯇꯧꯗꯦ꯫

<a>ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ’ ꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ , ꯃꯁꯤꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯀꯅꯤ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯧ꯫

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ꯅꯕꯕꯔ꯫

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

ꯖꯁ꯭ꯇꯤꯐꯥꯏꯗ ꯅꯦꯚꯕꯥꯔ ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯇꯧꯔꯤꯕꯥ ꯀꯟꯇꯦꯟꯇ꯫

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

  1. ꯅꯕꯕꯔ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯆꯥꯡ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯍꯟꯊꯍꯅꯕꯥ꯫
  2. ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖꯁꯤꯡꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯂꯣꯠꯁꯤꯜꯂꯨ .
  3. ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨꯅꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯔꯕꯥ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯃꯣꯗꯀꯤ ꯃꯔꯛꯇꯥ ꯍꯣꯡꯗꯣꯛ ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯥ ꯄꯣꯏꯟꯇ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯤꯌꯨ @grid-float-breakpointꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

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

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

ꯊꯨꯒꯥꯏꯔꯕꯥ ꯃꯣꯕꯥꯏꯜ ꯅꯕꯕꯥꯔ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯍꯣꯡꯗꯣꯀꯄꯥ꯫

ꯚꯤꯎꯄꯣꯔꯠ ꯑꯁꯤꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯅꯦꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯚꯔꯇꯤꯀꯦꯜ ꯃꯣꯕꯥꯏꯜ ꯚꯤꯎꯗꯥ ꯀꯣꯂꯥꯞꯁ ꯇꯧꯏ @grid-float-breakpoint, ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯑꯁꯤ ꯌꯥꯃꯗ꯭ꯔꯕꯗꯥ @grid-float-breakpointꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯅꯟ-ꯃꯣꯕꯥꯏꯜ ꯚꯤꯎꯗꯥ ꯄꯥꯀꯊꯣꯛ ꯆꯥꯎꯊꯣꯀꯏ꯫ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨ ꯀꯣꯂꯥꯞꯁ/ꯑꯦꯛꯁꯄꯥꯟꯗ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯂꯦꯁ ꯁꯣꯔꯁꯇꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯁꯤ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧ꯫ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯑꯁꯤ 768px(ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ "ꯑꯄꯤꯀꯄꯥ" ꯅꯠꯠꯔꯒꯥ "ꯇꯦꯕꯂꯦꯠ" ꯁ꯭ꯛꯔꯤꯟ)ꯅꯤ꯫

ꯅꯕꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯑꯣꯏꯍꯅꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯣꯏꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ <nav>ꯅꯠꯠꯔꯒꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ aꯒꯨꯝꯕꯥ ꯍꯦꯟꯅꯥ ꯖꯦꯅꯦꯔꯦꯜ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ , ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯦꯟꯗꯃꯥꯔꯛ ꯔꯤꯖꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯈꯉꯗꯣꯛꯅꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ <div>a ꯍꯥꯄꯆꯤꯜꯂꯨ꯫role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ꯇꯦꯛꯁꯠ ꯑꯗꯨ <img>. ꯃꯁꯤꯒꯤ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯍꯥꯏꯠ ꯂꯩꯕꯅꯥ .navbar-brand, ꯅꯍꯥꯛꯀꯤ ꯏꯃꯦꯖꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯍꯥꯛꯅꯥ CSS ꯈꯔꯗꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

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

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯀꯤ ꯀꯦꯚꯦꯠꯁꯤꯡ꯫

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

ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯌꯥꯑꯣꯗ꯭ꯔꯕꯗꯤ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯐꯣꯔꯃꯁꯤꯡꯗꯥ ꯑꯋꯥꯕꯥ ꯃꯥꯌꯣꯛꯅꯒꯅꯤ꯫ .sr-onlyꯍꯥꯌꯔꯤꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯃꯁꯤꯡ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ, ꯅꯍꯥꯛꯅꯥ ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯂꯦꯕꯦꯂꯁꯤꯡ ꯂꯣꯠꯄꯥ ꯌꯥꯏ꯫ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯄꯤꯕꯒꯤ ꯃꯈꯥ ꯇꯥꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯄꯥꯝꯕꯩꯁꯤꯡ ꯂꯩꯔꯤ, ꯃꯗꯨꯗꯤ aria-label, aria-labelledbyꯅꯠꯔꯒꯥ titleꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯠꯔꯕꯗꯤ, ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ placeholderꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯇꯦꯡ ꯂꯧꯕꯥ ꯌꯥꯏ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ, ꯑꯗꯨꯕꯨ placeholderꯑꯇꯩ ꯂꯦꯕꯦꯂꯤꯡ ꯃꯦꯊꯗꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯎꯇꯥꯛ ꯄꯤꯗꯦ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫

.navbar-btnꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯅꯕꯕꯥꯔꯗꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ aꯗꯥ <button>ꯂꯩꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫<form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

ꯀꯟꯇꯦꯛꯁ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯑꯣꯏꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯕꯇꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯨꯝꯅꯥ , .navbar-btnꯑꯣꯟ <a>ꯑꯃꯁꯨꯡ <input>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, .navbar-btnꯅꯠꯔꯒꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ ꯕꯇꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡ <a>ꯑꯁꯤ .navbar-nav.

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

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftꯅꯠꯠꯔꯒꯥ .navbar-rightꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ, ꯅꯦꯚ ꯂꯤꯉ꯭ꯀꯁꯤꯡ, ꯐꯣꯔꯃꯁꯤꯡ, ꯕꯇꯅꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯇꯦꯛꯁꯇꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧ꯫ ꯀ꯭ꯂꯥꯁ ꯑꯅꯤꯃꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯥꯌꯀꯩ ꯑꯗꯨꯗꯥ CSS ꯐ꯭ꯂꯣꯠ ꯑꯃꯥ ꯍꯥꯄꯀꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, nav ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ, ꯃꯈꯣꯌꯗꯨ <ul>ꯃꯁꯥ ꯃꯁꯥꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯃꯗꯥ ꯊꯝꯃꯨ꯫

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

ꯃꯜꯇꯤꯄꯜ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯔꯥꯏꯠ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

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

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤ v4 ꯗꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯏꯕꯥ ꯉꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯌꯦꯡꯒꯅꯤ꯫

ꯁꯦꯟꯇꯔ ꯑꯃꯁꯨꯡ ꯄꯦꯗ ꯅꯕꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ .navbar-fixed-topꯑꯃꯁꯨꯡ ꯌꯥꯑꯣꯍꯅꯕꯥ꯫.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

ꯍꯀꯆꯥꯡꯒꯤ ꯄꯦꯗꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

paddingꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯇꯣꯞꯄꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯣꯚꯔꯂꯦꯏ ꯇꯧꯒꯅꯤ, ꯅꯍꯥꯛꯅꯥ <body>. ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯣꯠꯅꯕꯤꯌꯨ ꯅꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ꯫ ꯄꯥꯎꯇꯥꯛ: ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯅꯦꯚꯕꯥꯔ ꯑꯁꯤ 50px ꯋꯥꯡꯏ꯫

body { padding-top: 70px; }

ꯃꯁꯤ ꯀꯣꯔ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫

ꯁꯦꯟꯇꯔ ꯑꯃꯁꯨꯡ ꯄꯦꯗ ꯅꯕꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ .navbar-fixed-bottomꯑꯃꯁꯨꯡ ꯌꯥꯑꯣꯍꯅꯕꯥ꯫.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

ꯍꯀꯆꯥꯡꯒꯤ ꯄꯦꯗꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

paddingꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯇꯣꯞꯄꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯣꯚꯔꯂꯦꯏ ꯇꯧꯒꯅꯤ, ꯅꯍꯥꯛꯅꯥ <body>. ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯣꯠꯅꯕꯤꯌꯨ ꯅꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯕꯤꯌꯨ꯫ ꯄꯥꯎꯇꯥꯛ: ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯅꯦꯚꯕꯥꯔ ꯑꯁꯤ 50px ꯋꯥꯡꯏ꯫

body { padding-bottom: 70px; }

ꯃꯁꯤ ꯀꯣꯔ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫

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

ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯗꯅꯥ .navbar-fixed-*, ꯑꯗꯣꯝꯅꯥ ꯄꯦꯗꯤꯡ ꯑꯃꯠꯇꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯃꯊꯧ ꯇꯥꯗꯦ body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

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

<nav class="navbar navbar-inverse">
  ...
</nav>

ꯕ꯭ꯔꯦꯗꯛꯔꯥꯃꯁꯤꯡ꯫

ꯅꯦꯚꯤꯒꯦꯁꯅꯦꯜ ꯍꯥꯏꯔꯔꯀꯤ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯐꯝ ꯑꯗꯨ ꯇꯥꯀꯎ.

ꯁꯦꯄꯥꯔꯦꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ :beforeꯑꯃꯁꯨꯡ content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

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

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ꯫

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯂꯦꯕꯦꯜ ꯇꯧꯕꯥ꯫

<nav>ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤ ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁ꯭ꯛꯔꯤꯟ ꯇꯧꯅꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯁꯛ ꯈꯪꯗꯣꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯀꯨꯄꯁꯤꯅꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯄꯦꯖ ꯑꯃꯗꯥ ꯍꯥꯟꯅꯅꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯃꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯂꯩꯕꯥ ꯌꯥꯕꯒꯤ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯂꯩꯕꯅꯥ (ꯍꯦꯗꯇꯥ ꯂꯩꯕꯥ ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯥ, ꯅꯠꯠꯔꯒꯥ ꯁꯥꯏꯗꯕꯥꯔ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯥ), ꯃꯁꯤꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯗꯨ ꯐꯣꯡꯗꯣꯛꯂꯤꯕꯥ aria-labelꯑꯗꯨꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯇꯤꯕ ꯑꯃꯥ ꯄꯤꯕꯥ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯐꯩ꯫ <nav>ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤ ꯁꯥꯔꯆ ꯔꯤꯖꯜꯇ ꯁꯦꯠ ꯑꯃꯒꯤ ꯃꯔꯛꯇꯥ ꯅꯦꯚꯤꯒꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ aria-label="Search results pages".

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

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

ꯑꯩꯈꯣꯌꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯑꯦꯛꯇꯤꯕ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯁꯣꯞ ꯇꯧꯅꯕꯥ ꯇꯀꯁꯤꯜꯂꯤ <span>, ꯅꯠꯠꯔꯒꯥ ꯃꯃꯥꯡꯒꯤ/ꯃꯊꯪꯒꯤ ꯑꯦꯔꯣꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ ꯑꯦꯉ꯭ꯀꯔ ꯑꯗꯨ ꯂꯧꯊꯣꯛꯅꯕꯥ, ꯏꯅꯇꯦꯟꯗ ꯇꯧꯔꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯊꯃꯗꯨꯅꯥ ꯀ꯭ꯂꯤꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯂꯧꯊꯣꯛꯅꯕꯥ꯫

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

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

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ꯄꯦꯖꯔ ꯇꯧꯕꯥ꯫

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

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

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ꯂꯦꯕꯦꯂꯁꯤꯡ꯫

ꯈꯨꯗꯝ

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫
ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯍꯦꯗꯤꯡ ꯑꯅꯧꯕꯥ꯫
<h3>Example heading <span class="label label-default">New</span></h3>

ꯐꯪꯂꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡ꯫

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

ꯗꯤꯐꯣꯜꯇ ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯁꯥꯛꯁꯦꯁ ꯏꯅꯐꯣ ꯋꯥꯔꯅꯤꯡ ꯈꯨꯗꯣꯡꯊꯤꯕꯥ꯫
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ꯂꯦꯕꯦꯜ ꯇꯟ ꯀꯌꯥ ꯂꯩꯕ꯭ꯔꯥ?

ꯑꯗꯣꯝꯅꯥ ꯑꯄꯤꯀꯄꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯏꯅꯂꯥꯏꯟ ꯂꯦꯕꯦꯜ ꯗꯖꯟ ꯀꯌꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯁꯃꯁ꯭ꯌꯥꯁꯤꯡ ꯂꯥꯀꯄꯥ ꯌꯥꯏ, ꯃꯈꯣꯌ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ inline-blockꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ (ꯑꯥꯏꯀꯟ ꯑꯃꯒꯨꯝꯅꯥ) ꯌꯥꯑꯣꯏ꯫ ꯃꯁꯤꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯂꯝꯕꯤ ꯑꯁꯤ ꯁꯦꯇꯤꯡ display: inline-block;. ꯀꯟꯇꯦꯛꯁ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯝ ꯑꯃꯒꯤꯗꯃꯛ, #13219 ꯌꯦꯡꯕꯤꯌꯨ꯫

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

<span class="badge">ꯂꯤꯉ꯭ꯀꯁꯤꯡ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯅꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯗꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯐꯖꯅꯥ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧ꯫

ꯏꯅꯕꯛꯁ ꯇꯧꯕꯥ꯫꯴꯲ ꯂꯩ꯫

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ꯃꯁꯥꯅꯥ ꯃꯁꯥꯕꯨ ꯂꯥꯀꯁꯤꯟꯖꯕꯥ꯫

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

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯔꯥꯔ ꯸ꯗꯥ ꯕꯦꯖꯁꯤꯡ ꯑꯁꯤ ꯃꯁꯥꯅꯥ ꯃꯁꯥꯕꯨ ꯀꯣꯀꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ ꯃꯔꯃꯗꯤ ꯃꯁꯤꯗꯥ :emptyꯁꯦꯂꯦꯛꯇꯔꯒꯤ ꯁꯄꯣꯔꯠ ꯂꯩꯇꯦ꯫

ꯑꯦꯛꯇꯤꯕ ꯅꯦꯚ ꯔꯥꯖ꯭ꯌꯁꯤꯡꯗꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯏ꯫

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ꯖꯝꯕꯣꯠꯔꯣꯟ꯫

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

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

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

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ꯖꯝꯕꯣꯠꯔꯣꯟ ꯑꯗꯨ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯄꯥꯀꯄꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ, ꯑꯃꯁꯨꯡ ꯒꯣꯜꯗ ꯀꯣꯟꯅꯥ ꯊꯝꯃꯨ, ꯃꯗꯨ .containers ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯄꯥꯟꯗꯥ ꯊꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ .containerꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ꯄꯦꯖ ꯍꯦꯗ ꯇꯧꯕꯥ꯫

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ꯊꯝꯕꯤꯕꯥ꯫

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

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

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

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ꯀꯁ꯭ꯇꯝ ꯀꯟꯇꯦꯟꯇ꯫

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

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

ꯀꯨꯗꯥꯝ ꯀꯨꯗꯥꯝ

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

ꯀꯨꯗꯥꯝ ꯀꯨꯗꯥꯝ

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫

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

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

ꯀꯨꯗꯥꯝ ꯀꯨꯗꯥꯝ

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

ꯑꯦꯂꯔꯇꯁꯤꯡ ꯄꯤꯔꯤ꯫

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

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

ꯗꯤꯐꯣꯜꯇ ꯀ꯭ꯂꯥꯁ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ꯊꯥꯗꯣꯀꯄꯥ ꯌꯥꯕꯥ ꯑꯦꯂꯔꯇꯁꯤꯡ꯫

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯦꯂꯔꯠ ꯄ꯭ꯂꯒꯏꯟ ꯃꯊꯧ ꯇꯥꯏ꯫

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯕꯥ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯀꯥ <button>ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫data-dismiss="alert"

.alert-linkꯑꯦꯂꯔꯠ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯃꯦꯆꯤꯡ ꯃꯆꯨꯒꯤ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯊꯨꯅꯥ ꯄꯤꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡ꯫

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

ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯏꯐꯦꯛꯇ ꯈꯔꯗꯤ ꯐꯪꯅꯕꯥ CSS3 ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯐꯤꯆꯔꯁꯤꯡ ꯑꯁꯤ ꯏꯟꯇꯔꯅꯦꯠ ꯑꯦꯛꯁꯞꯂꯣꯌꯥꯔ 9 ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯐꯥꯏꯔꯐꯛꯁꯀꯤ ꯑꯔꯤꯕꯥ ꯚꯔꯁꯅꯁꯤꯡꯗꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫ ꯑꯣꯄꯦꯔꯥ ꯱꯲ꯅꯥ ꯑꯦꯅꯤꯃꯦꯁꯅꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫

ꯀꯟꯇꯦꯟꯇ ꯁꯦꯛꯌꯨꯔꯤꯇꯤ ꯄꯣꯂꯤꯁꯤ (CSP) ꯀꯝꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯋꯦꯕꯁꯥꯏꯠꯇꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯗꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯁꯦꯛꯌꯨꯔꯤꯇꯤ ꯄꯣꯂꯤꯁꯤ (CSP) ꯑꯃꯥ ꯂꯩꯔꯕꯗꯤ , ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔ ꯋꯥꯏꯗꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯅꯕꯥ style-src 'unsafe-inline'ꯏꯅꯂꯥꯏꯟ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫ styleꯑꯀꯅꯕꯥ CSPꯁꯤꯡꯒꯥ ꯀꯣꯟꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯋꯥꯏꯗꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯅꯕꯒꯤ ꯑꯂꯇꯔꯅꯦꯇꯤꯕ ꯃꯦꯊꯗꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯁ꯭ꯇꯝ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ (ꯁꯦꯠ ꯇꯧꯏ element.style.width) ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔ꯫

꯶꯰% ꯃꯄꯨꯡ ꯐꯥꯔꯦ꯫
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ꯂꯦꯕꯦꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯎꯕꯥ ꯉꯝꯕꯥ ꯆꯥꯗꯥ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯒꯤ ꯃꯅꯨꯡꯗꯒꯤ <span>ꯋꯤꯊ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ꯫.sr-only

꯶꯰% ꯑꯣꯏꯈꯤ꯫
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

min-widthꯂꯦꯕꯦꯜ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯆꯥꯗꯥ ꯅꯦꯝꯕꯥ ꯑꯣꯏꯔꯕꯁꯨ ꯂꯦꯖꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ, ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯕꯥꯔꯗꯥ a ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫

꯰% ꯑꯣꯏꯈꯤ꯫
꯲% ꯑꯃꯁꯨꯡ ꯑꯦꯟ.
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

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

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

꯴꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯃꯥꯏꯄꯥꯀꯄꯥ)
꯲꯰% ꯃꯄꯨꯡ ꯐꯥꯔꯦ꯫
꯶꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯋꯥꯔꯅꯤꯡ)
꯸꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯈꯨꯗꯣꯡꯊꯤꯕꯥ)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

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

ꯁ꯭ꯠꯔꯥꯏꯞ ꯏꯐꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯑꯥꯏ.ꯏ.꯹ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯐꯪꯗꯦ꯫

꯴꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯃꯥꯏꯄꯥꯀꯄꯥ)
꯲꯰% ꯃꯄꯨꯡ ꯐꯥꯔꯦ꯫
꯶꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯋꯥꯔꯅꯤꯡ)
꯸꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯈꯨꯗꯣꯡꯊꯤꯕꯥ)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

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

ꯁ꯭ꯠꯔꯥꯏꯄꯁꯤꯡ ꯑꯗꯨ ꯔꯥꯏꯠ ꯇꯨ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨ ꯑꯦꯅꯤꯃꯦꯠ .activeꯇꯧꯅꯕꯥ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .progress-bar-stripedꯑꯥꯏ.ꯏ.꯹ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯐꯪꯗꯦ꯫

꯴꯵% ꯃꯄꯨꯡ ꯐꯥꯔꯦ꯫
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ꯁ꯭ꯇꯦꯛ ꯇꯧꯔꯕꯥ꯫

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

꯳꯵% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯃꯥꯏꯄꯥꯀꯄꯥ)
꯲꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯋꯥꯔꯅꯤꯡ)
꯱꯰% ꯃꯄꯨꯡ ꯐꯥꯅꯥ (ꯈꯨꯗꯣꯡꯊꯤꯕꯥ)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ꯫

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

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

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

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

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

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

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

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

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

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

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

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

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ ꯀꯃꯣꯗꯣ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ꯀ꯭ꯂꯥꯁꯁꯤꯡ .pull-leftꯑꯃꯁꯨꯡ .pull-rightꯃꯁꯤꯁꯨ ꯂꯩꯔꯤ ꯑꯃꯁꯨꯡ ꯃꯃꯥꯡꯗꯥ ꯃꯦꯗꯤꯌꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯝꯃꯤ, ꯑꯗꯨꯕꯨ v3.3.0 ꯐꯥꯑꯣꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯆꯥꯎꯔꯥꯛꯅꯥ .media-leftꯑꯃꯁꯨꯡ , html ꯗꯥ ꯂꯩꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ .media-rightꯅꯠꯇꯅꯥ꯫.media-right.media-body

ꯃꯤꯗꯤꯌꯥ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

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

ꯃꯊꯛꯀꯤ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

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

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

ꯃꯤꯗꯜ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

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

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

ꯕꯣꯇꯣꯝ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

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

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

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

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

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

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

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

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

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

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

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

    ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ ꯀꯃꯣꯗꯣ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ꯫

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

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

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

  • ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯃꯣꯔꯕꯤ ꯂꯤꯑꯣ ꯔꯤꯁꯨꯁ꯫
  • ꯄꯣꯔꯇꯥ ꯑꯦꯁꯤ ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯁꯤ꯫
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

  • ꯱꯴ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯃꯣꯔꯕꯤ ꯂꯤꯑꯣ ꯔꯤꯁꯨꯁ꯫
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ꯂꯤꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ꯫

<div>ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯑꯦꯉ꯭ꯀꯔ ꯇꯦꯒꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯂꯤꯉ꯭ꯀꯤꯐꯥꯏ ꯇꯧꯕꯥ (ꯃꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯃꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯃꯁꯨ ꯍꯥꯌꯕꯅꯤ <ul>)꯫ ꯏꯂꯤꯃꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯁꯤꯡꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ꯕꯇꯟ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ꯫

<div>ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯕꯇꯟ ꯑꯣꯏꯕꯥ ꯌꯥꯏ (ꯃꯁꯤꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯃꯥ ꯍꯥꯌꯕꯁꯨ ꯌꯥꯏ <ul>)꯫ ꯏꯂꯤꯃꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯁꯤꯡꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗ .btnꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯒꯅꯨ꯫

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

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

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯎꯕꯥ ꯐꯪꯅꯕꯥ ꯒ꯭ꯔꯦ ꯑꯥꯎꯠ ꯇꯧꯅꯕꯥ .disabledaꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ꯫
  • ꯄꯣꯔꯇꯥ ꯑꯦꯁꯤ ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯁꯤ꯫
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ꯀꯁ꯭ꯇꯝ ꯀꯟꯇꯦꯟꯇ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯂꯤꯉ꯭ꯛ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯤꯗꯃꯛꯇꯁꯨ, ꯃꯅꯨꯡꯗꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ HTML ꯑꯃꯠꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ꯄꯦꯅꯦꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

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

ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, .panelꯇꯧꯔꯤꯕꯥ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ ꯌꯥꯎꯍꯟꯅꯕꯥ ꯕꯦꯁꯤꯛ ꯕꯣꯔꯗꯔ ꯑꯃꯁꯨꯡ ꯄꯦꯗꯤꯡ ꯈꯔꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯅꯤ꯫

ꯕꯦꯁꯤꯛ ꯄꯦꯅꯦꯂꯒꯤ ꯈꯨꯗꯝ꯫
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ꯍꯦꯗꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯅꯦꯜ꯫

ꯂꯣꯌꯅꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯄꯦꯅꯦꯂꯗꯥ ꯍꯦꯗꯤꯡ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯐꯖꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .panel-heading. ꯅꯍꯥꯛꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯌꯥꯑꯣꯍꯅꯕꯥ ꯌꯥꯏ <h1>- ꯄ꯭ꯔꯤ-ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯍꯦꯗꯤꯡ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯀ꯭ꯂꯥꯁ <h6>ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, -ꯒꯤ .panel-titleꯐꯣꯟꯇ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯁꯤ .<h1><h6>.panel-heading

ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯂꯤꯉ꯭ꯛ ꯀꯂꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯍꯦꯗꯤꯡꯁꯤꯡꯗꯥ ꯁꯣꯏꯗꯅꯥ ꯊꯝꯃꯨ .panel-title.

ꯇꯥꯏꯇꯜ ꯌꯥꯑꯣꯗꯅꯥ ꯄꯦꯅꯦꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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

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

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯤꯡꯊꯣꯜ꯫

ꯄꯦꯅꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ꯫
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ꯇꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

.tableꯁꯤꯃꯂꯦꯁ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯄꯦꯅꯦꯜ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯟ-ꯕꯣꯔꯗꯔ ꯑꯃꯠꯇꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯂꯩꯔꯕꯗꯤ .panel-body, ꯑꯩꯈꯣꯌꯅꯥ ꯇꯣꯉꯥꯟꯅꯥ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯕꯂꯒꯤ ꯃꯊꯛꯇꯥ ꯑꯍꯦꯅꯕꯥ ꯕꯣꯔꯗꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫

ꯄꯦꯅꯦꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯄꯥꯈꯪ ꯑꯗꯨ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯄꯦꯅꯦꯂꯒꯤ ꯍꯀꯆꯥꯡ ꯂꯩꯠꯔꯕꯗꯤ, ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯄꯦꯅꯦꯜ ꯍꯦꯗ ꯑꯃꯗꯒꯤ ꯇꯦꯕꯜ ꯑꯃꯗꯥ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯅꯥ ꯆꯪꯁꯤꯜꯂꯤ꯫

ꯄꯦꯅꯦꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
# ꯑꯍꯥꯟꯕ ꯃꯤꯡ ꯑꯀꯣꯟꯕ ꯃꯤꯡ ꯌꯨꯖꯔꯅꯦꯝ꯫
ꯃꯥꯔꯛ ꯇꯧꯕꯥ꯫ ꯑꯣꯇꯣ꯫ @mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫
ꯌꯥꯀꯣꯕ꯫ ꯊꯣꯔꯅꯇꯟ꯫ @ꯑꯅꯣꯏꯕ
ꯂꯥꯔꯤ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯄꯥꯈꯪ ꯑꯗꯨ꯫ @twitter ꯗꯥ ꯊꯥꯕꯤꯔꯀꯎ꯫
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯄꯦꯅꯦꯜ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯐꯖꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯥ꯫

ꯄꯦꯅꯦꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

  • ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯃꯣꯔꯕꯤ ꯂꯤꯑꯣ ꯔꯤꯁꯨꯁ꯫
  • ꯄꯣꯔꯇꯥ ꯑꯦꯁꯤ ꯀꯟꯁꯦꯛꯇꯇꯨꯔ ꯑꯦꯁꯤ꯫
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯑꯦꯝꯕꯦꯗ ꯇꯧꯕꯥ꯫

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

<iframe>ꯔꯨꯂꯁꯤꯡ ꯑꯁꯤ , <embed>, <video>, ꯑꯃꯁꯨꯡ <object>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯆꯠꯅꯩ ; .embed-responsive-itemꯑꯇꯣꯞꯄꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯗꯨ ꯃꯦꯆ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯗꯤꯁꯦꯟꯗꯦꯟꯇ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯄ꯭ꯔꯣ-ꯇꯤꯞ ꯇꯧꯕꯥ! ꯑꯩꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯒꯤꯗꯃꯛ ꯃꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯗꯣꯝꯅꯥ frameborder="0"ꯑꯗꯣꯃꯒꯤ s ꯗꯥ ꯌꯥꯑꯣꯍꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

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

ꯐꯖꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯇꯧꯕꯥ꯫

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

ꯌꯦꯡꯎ, ꯑꯩꯅꯥ ꯀꯨꯌꯣꯝ ꯑꯃꯗꯥ ꯂꯩꯔꯤ!
<div class="well">...</div>

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

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

ꯌꯦꯡꯎ, ꯑꯩꯅꯥ ꯑꯆꯧꯕꯥ ꯀꯨꯌꯣꯝ ꯑꯃꯗꯥ ꯂꯩꯔꯤ!
<div class="well well-lg">...</div>
ꯌꯦꯡꯎ, ꯑꯩꯅꯥ ꯑꯄꯤꯀꯄꯥ ꯀꯨꯌꯣꯝ ꯑꯃꯗꯥ ꯂꯩꯔꯤ!
<div class="well well-sm">...</div>