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

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯀꯣꯂꯝ ꯱꯲ꯒꯤ ꯒ꯭ꯔꯤꯗꯁꯤꯡ, ꯂꯦꯑꯥꯎꯇꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ꯫

HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯃꯊꯧ ꯇꯥꯏ꯫

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

  1. <!DOCTYPE html> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
  2. <html ꯂ꯭ꯌꯥꯡ = "ꯑꯦꯟ" > ꯫
  3. ...
  4. </html> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫

ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯀꯁꯤꯡ꯫

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

  • marginꯍꯀꯆꯥꯡꯗꯥ ꯂꯧꯊꯣꯀꯎ꯫
  • ꯁꯦꯠ background-color: white;ꯇꯧꯕꯥ꯫body
  • @baseFontFamily, @baseFontSize, ꯑꯃꯁꯨꯡ @baseLineHeightꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯕꯦꯖ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
  • ꯒ꯭ꯂꯣꯕꯦꯜ ꯂꯤꯉ꯭ꯛ ꯃꯆꯨꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧ @linkColorꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯑꯟꯗꯔꯂꯥꯏꯅꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫:hover

ꯍꯥꯌꯔꯤꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯀꯦꯐꯣꯜꯗꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯪꯒꯅꯤ꯫less .

ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯔꯤꯁꯦꯠ ꯇꯧꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯔꯤꯕꯥ ꯔꯤꯁꯦꯠ ꯕ꯭ꯂꯣꯛ ꯑꯁꯤ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ.ꯁꯤ.ꯑꯦꯁ.ꯀꯤ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯊꯥꯗꯣꯀꯈ꯭ꯔꯦ , ꯃꯁꯤ ꯅꯤꯀꯣꯂꯥꯁ ꯒ꯭ꯌꯥꯂꯥꯘꯔ ꯑꯃꯁꯨꯡ ꯖꯣꯅꯥꯊꯟ ꯅꯤꯂꯅꯥ ꯁꯦꯝꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯅꯤ ꯃꯁꯤꯅꯥ HTML5 ꯕꯣꯏꯂꯔꯞꯂꯦꯠꯁꯨ ꯄꯥꯋꯔ ꯄꯤꯔꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ reset.less ꯒꯤ ꯃꯅꯨꯡꯗꯥ Normalize ꯒꯤ ꯑꯌꯥꯝꯕꯥ ꯁꯔꯨꯛ ꯁꯤꯖꯤꯟꯅꯔꯤꯉꯩꯗꯥ , ꯑꯩꯈꯣꯌꯅꯥ Bootstrap ꯒꯤꯗꯃꯛ ꯑꯀꯛꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫

ꯂꯥꯏꯚ ꯒ꯭ꯔꯤꯗꯀꯤ ꯈꯨꯗꯝ꯫

ꯗꯤꯐꯣꯜꯇ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯝ ꯱꯲ ꯁꯤꯖꯤꯟꯅꯩ , ꯃꯁꯤꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯤꯆꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯗꯅꯥ ꯹꯴꯰px ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯤ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ CSS ꯐꯥꯏꯜ ꯍꯥꯄꯆꯤꯜꯂꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ 724px ꯑꯃꯁꯨꯡ 1170px ꯋꯥꯏꯗ ꯑꯣꯏꯅꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯏ꯫ 767px ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯈꯥꯗꯥ, ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯏꯔꯀꯏ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯏ꯫

ꯕꯦꯁꯤꯛ ꯒ꯭ꯔꯤꯗ HTML꯫

ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯒꯤꯗꯃꯛ, ꯑꯃꯥ ꯁꯦꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯣꯂꯝ .rowꯃꯁꯤꯡ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .span*ꯃꯁꯤ ꯀꯣꯂꯝ ꯱꯲ꯒꯤ ꯒ꯭ꯔꯤꯗ ꯑꯃꯥ ꯑꯣꯏꯕꯅꯥ, ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯀꯣꯂꯝ .span*꯱꯲ ꯑꯗꯨꯒꯤ ꯃꯁꯤꯡ ꯑꯃꯥ ꯁ꯭ꯄꯦꯟ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯔꯣ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ (ꯅꯠꯔꯒꯥ ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯝ ꯃꯁꯤꯡ) ꯱꯲ ꯐꯥꯑꯣꯕꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯸" > ... </div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯈꯨꯗꯝ ꯑꯁꯤ ꯄꯤꯔꯒꯥ, ꯑꯩꯈꯣꯌꯅꯥ .span4ꯑꯃꯁꯨꯡ .span8, ꯑꯄꯨꯅꯕꯥ ꯀꯣꯂꯝ ꯱꯲ ꯑꯃꯁꯨꯡ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯔꯣ ꯑꯃꯥ ꯁꯦꯝꯂꯤ꯫

ꯑꯣꯐꯁꯦꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

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

꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯲
꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯱
꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯲
꯶ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯳
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳ ꯑꯣꯐꯁꯦꯠ꯲" > ... </div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯅꯦꯁ꯭ꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

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

ꯂꯦꯚꯦꯜ ꯱ꯒꯤ ꯀꯣꯂꯝ꯫
ꯊꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯲
ꯊꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯲
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯹" >
  3. ꯂꯦꯚꯦꯜ ꯱ꯒꯤ ꯀꯣꯂꯝ꯫
  4. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
  5. <div class = "span6" > ꯂꯦꯚꯦꯜ ꯲ </div>
  6. <div class = "span3" > ꯂꯦꯚꯦꯜ ꯲ </div>
  7. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  8. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯂꯥꯏꯚ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗꯀꯤ ꯈꯨꯗꯝ꯫

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

꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ

ꯕꯦꯁꯤꯛ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗ HTML

ꯔꯣ ꯑꯃꯍꯦꯛꯇꯕꯨ "ꯐ꯭ꯂꯨꯏꯗ" ꯑꯣꯏꯅꯥ .rowꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ .row-fluid. ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯅꯥ ꯂꯩ, ꯃꯁꯤꯅꯥ ꯐꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯐ꯭ꯂꯤꯞ ꯇꯧꯕꯗꯥ ꯂꯥꯏꯍꯜꯂꯤ꯫

  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯸" > ... </div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯐꯁꯦꯇꯤꯡ ꯇꯧꯕꯥ꯫

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

꯴ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯴
꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯳
꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯳
꯶ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯶
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴ ꯑꯣꯐꯁꯦꯠ꯲" > ... </div>
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯐ꯭ꯂꯨꯏꯗ ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫

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

ꯐ꯭ꯂꯨꯏꯗ ꯱꯲ ꯂꯩ꯫
ꯐ꯭ꯂꯨꯏꯗ ꯶
ꯐ꯭ꯂꯨꯏꯗ ꯶
ꯐ꯭ꯂꯨꯏꯗ ꯶
ꯐ꯭ꯂꯨꯏꯗ ꯶
  1. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯲" >
  3. ꯐ꯭ꯂꯨꯏꯗ ꯱꯲ ꯂꯩ꯫
  4. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  5. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯶" >
  6. ꯐ꯭ꯂꯨꯏꯗ ꯶
  7. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  8. <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
  9. <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
  10. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  11. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  12. <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
  13. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  14. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  15. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯂꯦꯑꯥꯎꯠ꯫

ꯃꯊꯧ ꯇꯥꯕꯥ ꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯐꯤꯛꯁ-ꯋꯥꯏꯗ (ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ) ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ <div class="container">ꯄꯤꯔꯤ꯫

  1. <ꯍꯀꯆꯥꯡ>꯫
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯇꯦꯅꯔ" >
  3. ...
  4. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  5. </body>ꯒꯤ ꯃꯇꯥꯡꯗꯥ

ꯐ꯭ꯂꯨꯏꯗ ꯂꯦꯑꯥꯎꯠ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯨꯏꯗ, ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯄꯦꯖ ꯑꯃꯥ ꯁꯦꯝꯃꯨ <div class="container-fluid">—ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ꯫

  1. <div class = "ꯀꯟꯇꯦꯅꯔ-ꯐ꯭ꯂꯨꯏꯗ" >
  2. <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
  3. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲" >
  4. <!--ꯁꯥꯏꯗꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ-->꯫
  5. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  6. <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯰" >
  7. <!--ꯍꯀꯆꯥꯡꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ-->
  8. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  9. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  10. </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯐꯤꯆꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫

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

  1. <meta name = "ꯚꯤꯎꯄꯣꯔꯠ" ꯀꯟꯇꯦꯟꯇ = "ꯄꯥꯀꯄꯥ=ꯗꯤꯚꯥꯏꯁ-ꯋꯥꯏꯗ, ꯏꯅꯤꯁꯤꯑꯦꯜ-ꯁ꯭ꯀꯦꯜ=1.0" >
  2. <link href = "ꯑꯦꯁꯦꯠꯁꯤꯡ/ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ./ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ-ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ" rel = "ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ" >

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯇꯥꯡꯗꯥ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ꯫

ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯅꯥ ꯀꯟꯗꯤꯁꯟ ꯀꯌꯥꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯤ-ꯔꯦꯁꯤꯑꯣ, ꯋꯥꯏꯗ, ꯗꯤꯁꯞꯂꯦ ꯃꯈꯜ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ-ꯑꯗꯨꯕꯨ ꯃꯍꯧꯁꯥꯅꯥ ꯑꯀꯣꯌꯕꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯂꯤ min-widthꯑꯃꯁꯨꯡ max-width.

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

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

ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ꯫

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

ꯃꯃꯤꯡ ꯊꯥꯟꯕ ꯂꯦꯑꯥꯎꯇꯀꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ꯫ ꯀꯣꯂꯃꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫ ꯒꯇꯔꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫
ꯑꯆꯧꯕꯥ ꯗꯤꯁꯞꯂꯦ꯫ ꯱꯲꯰꯰px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ ꯷꯰ꯄꯤ.ꯑꯦꯛꯁ ꯳꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯹꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ ꯶꯰ꯄꯤ.ꯑꯦꯛꯁ ꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯄꯣꯠꯊꯥꯕꯥ ꯇꯦꯕꯂꯁꯤꯡ꯫ ꯷꯶꯸px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ ꯴꯲ꯄꯤ.ꯑꯦꯛꯁ ꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯐꯣꯅꯁꯤꯡꯗꯒꯤ ꯇꯦꯕꯂꯁꯤꯡ ꯐꯥꯑꯣꯕꯥ꯫ ꯷꯶꯷px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫
ꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ ꯴꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫
  1. /* ꯑꯆꯧꯕꯥ ꯗꯦꯁ꯭ꯀꯇꯣꯞ */
  2. @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : ꯱꯲꯰꯰px ) { ... } .
  3.  
  4. /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯇꯥ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
  5. @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : 768px ) ꯑꯃꯁꯨꯡ ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : 979px ) { ... } .
  6.  
  7. /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯟ ꯇꯨ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
  8. @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯷꯶꯷px ) { ... } .
  9.  
  10. /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯥꯎꯟ */
  11. @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯴꯸꯰px ) { ... } .

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

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

ꯀ꯭ꯂꯥꯁ ꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫꯷꯶꯷px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ ꯇꯦꯕꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫꯹꯷꯹px ꯗꯒꯤ ꯷꯶꯸px ꯐꯥꯑꯣꯕꯥ ꯂꯩ꯫ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ꯫ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ
.visible-phone ꯎꯕꯥ ꯐꯪꯏ꯫
.visible-tablet ꯎꯕꯥ ꯐꯪꯏ꯫
.visible-desktop ꯎꯕꯥ ꯐꯪꯏ꯫
.hidden-phone ꯎꯕꯥ ꯐꯪꯏ꯫ ꯎꯕꯥ ꯐꯪꯏ꯫
.hidden-tablet ꯎꯕꯥ ꯐꯪꯏ꯫ ꯎꯕꯥ ꯐꯪꯏ꯫
.hidden-desktop ꯎꯕꯥ ꯐꯪꯏ꯫ ꯎꯕꯥ ꯐꯪꯏ꯫

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

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯇꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯀꯦꯁ꯫

ꯃꯊꯛꯀꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯀꯎ ꯅꯠꯠꯔꯒꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯂꯣꯗ ꯇꯧ꯫

ꯌꯦꯡꯕꯥ ꯌꯥꯕꯥ...

ꯒ꯭ꯔꯤꯟ ꯆꯦꯀꯃꯥꯔꯀꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯀ꯭ꯂꯥꯁ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯏ꯫

  • ꯐꯣꯟ✔ ꯐꯣꯟ ꯇꯧꯕꯥ꯫
  • ꯇꯦꯕꯜ ꯑꯃꯥ꯫✔ ꯇꯦꯕꯜ ꯇꯧꯕꯥ꯫
  • ꯗꯦꯁ꯭ꯀꯇꯣꯞ ꯇꯧꯕꯥ꯫✔ ꯗꯦꯁ꯭ꯀꯇꯣꯞ ꯇꯧꯕꯥ꯫

ꯂꯣꯠꯁꯤꯜꯂꯕꯥ...

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

  • ꯐꯣꯟ✔ ꯐꯣꯟ ꯇꯧꯕꯥ꯫
  • ꯇꯦꯕꯜ ꯑꯃꯥ꯫✔ ꯇꯦꯕꯜ ꯇꯧꯕꯥ꯫
  • ꯗꯦꯁ꯭ꯀꯇꯣꯞ ꯇꯧꯕꯥ꯫✔ ꯗꯦꯁ꯭ꯀꯇꯣꯞ ꯇꯧꯕꯥ꯫