ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯄꯤꯔꯤꯕꯥ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ 940px-ꯋꯥꯏꯗ, 12-ꯀꯣꯂꯝ ꯒ꯭ꯔꯤꯗ ꯑꯃꯅꯤ .

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

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

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

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

ꯈꯨꯗꯝ

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

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

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯁꯦꯃꯈꯤꯕꯥ ꯑꯁꯤ ꯃꯊꯛꯇꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯇꯧꯔꯕꯥ ꯗꯤꯐꯣꯜꯇ 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.

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

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

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

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

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