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

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

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

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

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

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

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

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

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

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

ꯑꯅꯧꯕꯥ ꯔꯤꯁꯦꯠ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ reset.less ꯗꯥ ꯐꯪꯒꯅꯤ , ꯑꯗꯨꯕꯨ ꯕ꯭ꯔꯦꯚꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯌꯨꯔꯦꯁꯤꯒꯤꯗꯃꯛ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯌꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫

꯱

꯴

꯸

꯶

꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯄꯤꯔꯤꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ 724px, 940px (ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ CSS ꯌꯥꯎꯗꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ), ꯑꯃꯁꯨꯡ 1170pxꯒꯤ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯀꯣꯂꯝ 12 ꯁꯤꯖꯤꯟꯅꯩ꯫ 767px ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯈꯥꯗꯥ, ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯏꯔꯀꯏ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯏ꯫

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

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

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

꯴

꯴ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯴

꯳ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯳

꯸ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ ꯴

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

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

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

ꯈꯨꯗꯝ

ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯌꯥꯑꯣꯒꯗꯕꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ .span3ꯀꯣꯂꯝ ꯑꯅꯤ ꯑꯁꯤ .span6.

ꯀꯣꯂꯃꯒꯤ ꯂꯦꯚꯦꯜ ꯱꯫

ꯊꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯲

<div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫ 
  <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯶" > 
    ꯂꯦꯚꯦꯜ ꯱ꯒꯤ ꯀꯣꯂꯝ꯫
    <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫ 
      <div class = "span3" > ꯂꯦꯚꯦꯜ ꯲ </div> 
      <div class = "span3" > ꯂꯦꯚꯦꯜ ꯲ </div> 
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ꯫

꯱

꯴

꯸

꯶

꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ

ꯆꯥꯗꯥ, ꯄꯤꯛꯁꯦꯜ ꯅꯠꯇꯦ꯫

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

ꯐ꯭ꯂꯨꯏꯗ ꯔꯣꯁꯤꯡ꯫

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

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

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

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

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

ꯐ꯭ꯂꯨꯏꯗ ꯱꯲ ꯂꯩ꯫

ꯐ꯭ꯂꯨꯏꯗ ꯶

<div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" > 
  <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯲" > 
    ꯀꯣꯂꯃꯒꯤ ꯂꯦꯚꯦꯜ ꯱꯫
    <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" > 
      <div class = "span6" > ꯂꯦꯚꯦꯜ ꯲ </div> 
      <div class = "span6" > ꯂꯦꯚꯦꯜ ꯲ </div> 
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯕꯥ꯫	ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯕꯥ ꯚꯦꯜꯌꯨ꯫	ꯋꯥꯔꯣꯜ
`@gridColumns`	꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ	ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ꯫
`@gridColumnWidth`	꯶꯰ꯄꯤ.ꯑꯦꯛꯁ	ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫
`@gridGutterWidth`	꯲꯰ꯄꯤ.ꯑꯦꯛꯁ	ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯁ꯭ꯄꯦꯁ ꯂꯩꯕꯥ꯫

ꯂꯦꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁꯦꯃꯈꯤꯕꯥ ꯑꯁꯤ ꯃꯊꯛꯇꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯗꯤꯐꯣꯜꯇ 940px ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯃꯁꯤꯡ ꯈꯔꯥ ꯂꯩ꯫ ꯒ꯭ꯔꯤꯗꯀꯤꯗꯃꯛꯇꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯄꯨꯝꯅꯃꯛ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯗꯥ ꯊꯝꯂꯤ꯫less.

ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯗꯒꯦ꯫

ꯒ꯭ꯔꯤꯗ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯍꯥꯌꯕꯁꯤ @grid*ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯍꯨꯝ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯍꯥꯌꯕꯅꯤ꯫ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ.ꯂꯦꯁꯇꯥ ꯒ꯭ꯔꯤꯗ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯣꯡꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯥ ꯗꯣꯀꯨꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯃꯑꯣꯡ ꯃꯔꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ . ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯣꯂꯝ ꯍꯦꯟꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯗꯤ, grid.less ꯗꯥ ꯂꯩꯕꯁꯤꯡꯒꯤꯗꯃꯛ CSS ꯑꯗꯨ ꯁꯣꯌꯗꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯂꯩꯕꯥ꯫

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

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

ꯁꯤꯉ꯭ꯒꯜ <div class="container">.

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

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

<div class="container-fluid">ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯄꯦꯖ ꯁ꯭ꯠꯔꯀꯆꯔ, ꯃꯤꯟ- ꯑꯃꯁꯨꯡ ꯃꯦꯛꯁ-ꯋꯥꯏꯗꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯁꯥꯏꯗꯕꯥꯔ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ ꯃꯁꯤ ꯑꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯣꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯆꯧꯕꯥ ꯑꯃꯅꯤ꯫

<div class = "ꯀꯟꯇꯦꯅꯔ-ꯐ꯭ꯂꯨꯏꯗ" > 
  <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" > 
    <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲" > 
      <!--ꯁꯥꯏꯗꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ-->꯫
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
    <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯰" > 
      <!--ꯍꯀꯆꯥꯡꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ-->
    </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
  </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
</div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫

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

ꯃꯈꯣꯌꯅꯥ ꯇꯧꯔꯤꯕꯥ ꯊꯕꯀꯁꯤꯡ꯫

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

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

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

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

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

ꯃꯃꯤꯡ ꯊꯥꯟꯕ	ꯂꯦꯑꯥꯎꯇꯀꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ꯫	ꯀꯣꯂꯃꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫	ꯒꯇꯔꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫
ꯁ꯭ꯃꯥꯔꯇꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫	꯴꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫	ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫
ꯁ꯭ꯃꯥꯔꯇꯐꯣꯅꯁꯤꯡꯗꯒꯤ ꯇꯦꯕꯂꯁꯤꯡ ꯐꯥꯑꯣꯕꯥ꯫	꯷꯶꯷px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫	ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫
ꯄꯣꯠꯊꯥꯕꯥ ꯇꯦꯕꯂꯁꯤꯡ꯫	꯷꯶꯸px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫	꯴꯲ꯄꯤ.ꯑꯦꯛꯁ	꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	꯹꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯂꯩ꯫	꯶꯰ꯄꯤ.ꯑꯦꯛꯁ	꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯑꯆꯧꯕꯥ ꯗꯤꯁꯞꯂꯦ꯫	꯱꯲꯰꯰px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫	꯷꯰ꯄꯤ.ꯑꯦꯛꯁ	꯳꯰ꯄꯤ.ꯑꯦꯛꯁ

ꯃꯦꯇꯥ ꯇꯦꯒ ꯃꯊꯧ ꯇꯥꯏ꯫

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

<meta name = "ꯚꯤꯎꯄꯣꯔꯠ" ꯀꯟꯇꯦꯟꯇ = "ꯄꯥꯀꯄꯥ=ꯗꯤꯚꯥꯏꯁ-ꯋꯥꯏꯗ, ꯏꯅꯤꯁꯤꯑꯦꯜ-ꯁ꯭ꯀꯦꯜ=1.0" >

ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

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

ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯚ ꯚꯔꯁꯟ, bootstrap-responsive.css ꯁꯤꯖꯤꯟꯅꯧ꯫
@import "responsive.less" ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ Bootstrap ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫
responsive.less ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯐꯥꯏꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ꯫

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

  /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯥꯎꯟ */
  @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯴꯸꯰px ) { ... } .     
 
  /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯟ ꯇꯨ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
  @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯷꯶꯷px ) { ... } .     
 
  /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯇꯥ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
  @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : 768px ) ꯑꯃꯁꯨꯡ ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : 979px ) { ... } .        
 
  /* ꯑꯆꯧꯕꯥ ꯗꯦꯁ꯭ꯀꯇꯣꯞ */
  @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : ꯱꯲꯰꯰px ) { ... } .

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

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

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

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

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

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

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

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

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

ꯇꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯀꯦꯁ ꯑꯃꯥ꯫

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

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

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

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

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

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

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