ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯀꯣꯂꯝ ꯱꯲ꯒꯤ ꯒ꯭ꯔꯤꯗꯁꯤꯡ, ꯂꯦꯑꯥꯎꯇꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯗꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ HTML5 ꯗꯣꯛꯇꯥꯏꯞ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯀꯛꯅꯕꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯍꯧꯔꯀꯐꯃꯗꯥ ꯃꯁꯤ ꯌꯥꯑꯣꯍꯅꯒꯗꯕꯅꯤ꯫
- <!DOCTYPE html> ꯇꯧꯕꯥ ꯌꯥꯏ꯫
- <html ꯂ꯭ꯌꯥꯡ = "ꯑꯦꯟ" > ꯫
- ...
- </html> ꯍꯥꯌꯅꯥ ꯃꯤꯡꯊꯣꯅꯕꯥ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯕꯦꯁꯤꯛ ꯒ꯭ꯂꯣꯕꯦꯜ ꯗꯤꯁꯞꯂꯦ, ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤ, ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯃꯔꯨꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ:
margin
ꯍꯀꯆꯥꯡꯗꯥ ꯂꯧꯊꯣꯀꯎ꯫background-color: white;
ꯇꯧꯕꯥ꯫body
@baseFontFamily
, @baseFontSize
, ꯑꯃꯁꯨꯡ @baseLineHeight
ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯥꯏꯄꯣꯒ꯭ꯔꯥꯐꯤꯛ ꯕꯦꯖ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫@linkColor
ꯑꯃꯁꯨꯡ ꯂꯤꯉ꯭ꯛ ꯑꯟꯗꯔꯂꯥꯏꯅꯁꯤꯡ ꯈꯛꯇꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫:hover
ꯍꯥꯌꯔꯤꯕꯥ ꯃꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯀꯦꯐꯣꯜꯗꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯐꯪꯒꯅꯤ꯫less .
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯲ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯔꯤꯕꯥ ꯔꯤꯁꯦꯠ ꯕ꯭ꯂꯣꯛ ꯑꯁꯤ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ.ꯁꯤ.ꯑꯦꯁ.ꯀꯤ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯊꯥꯗꯣꯀꯈ꯭ꯔꯦ , ꯃꯁꯤ ꯅꯤꯀꯣꯂꯥꯁ ꯒ꯭ꯌꯥꯂꯥꯘꯔ ꯑꯃꯁꯨꯡ ꯖꯣꯅꯥꯊꯟ ꯅꯤꯂꯅꯥ ꯁꯦꯝꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯅꯤ ꯃꯁꯤꯅꯥ HTML5 ꯕꯣꯏꯂꯔꯞꯂꯦꯠꯁꯨ ꯄꯥꯋꯔ ꯄꯤꯔꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ reset.less ꯒꯤ ꯃꯅꯨꯡꯗꯥ Normalize ꯒꯤ ꯑꯌꯥꯝꯕꯥ ꯁꯔꯨꯛ ꯁꯤꯖꯤꯟꯅꯔꯤꯉꯩꯗꯥ , ꯑꯩꯈꯣꯌꯅꯥ Bootstrap ꯒꯤꯗꯃꯛ ꯑꯀꯛꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯥ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫
ꯗꯤꯐꯣꯜꯇ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯝ ꯱꯲ ꯁꯤꯖꯤꯟꯅꯩ , ꯃꯁꯤꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯐꯤꯆꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯗꯅꯥ ꯹꯴꯰px ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯤ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ CSS ꯐꯥꯏꯜ ꯍꯥꯄꯆꯤꯜꯂꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ 724px ꯑꯃꯁꯨꯡ 1170px ꯋꯥꯏꯗ ꯑꯣꯏꯅꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯏ꯫ 767px ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯒꯤ ꯃꯈꯥꯗꯥ, ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯏꯔꯀꯏ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯏ꯫
ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯒꯤꯗꯃꯛ, ꯑꯃꯥ ꯁꯦꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯀꯣꯂꯝ .row
ꯃꯁꯤꯡ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .span*
ꯃꯁꯤ ꯀꯣꯂꯝ ꯱꯲ꯒꯤ ꯒ꯭ꯔꯤꯗ ꯑꯃꯥ ꯑꯣꯏꯕꯅꯥ, ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯀꯣꯂꯝ .span*
꯱꯲ ꯑꯗꯨꯒꯤ ꯃꯁꯤꯡ ꯑꯃꯥ ꯁ꯭ꯄꯦꯟ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯔꯣ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ (ꯅꯠꯔꯒꯥ ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯂꯩꯕꯥ ꯀꯣꯂꯝ ꯃꯁꯤꯡ) ꯱꯲ ꯐꯥꯑꯣꯕꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯸" > ... </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯈꯨꯗꯝ ꯑꯁꯤ ꯄꯤꯔꯒꯥ, ꯑꯩꯈꯣꯌꯅꯥ .span4
ꯑꯃꯁꯨꯡ .span8
, ꯑꯄꯨꯅꯕꯥ ꯀꯣꯂꯝ ꯱꯲ ꯑꯃꯁꯨꯡ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯔꯣ ꯑꯃꯥ ꯁꯦꯝꯂꯤ꯫
.offset*
ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯗꯥ ꯂꯧꯊꯣꯀꯎ꯫ ꯀ꯭ꯂꯥꯁ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯀꯣꯂꯝ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯍꯦꯅꯒꯠꯍꯜꯂꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯣꯂꯝ ꯃꯔꯤꯒꯤ ꯃꯊꯛꯇꯥ .offset4
ꯆꯠꯂꯤ꯫.span4
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯳ ꯑꯣꯐꯁꯦꯠ꯲" > ... </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯅꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯅꯧꯕꯥ .row
ꯑꯃꯁꯨꯡ .span*
ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .span*
ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯌꯥꯑꯣꯒꯗꯕꯅꯤ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯹" >
- ꯂꯦꯚꯦꯜ ꯱ꯒꯤ ꯀꯣꯂꯝ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ" >꯫
- <div class = "span6" > ꯂꯦꯚꯦꯜ ꯲ </div>
- <div class = "span3" > ꯂꯦꯚꯦꯜ ꯲ </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯄꯤꯛꯁꯦꯂꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯆꯥꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯐꯤꯛꯁ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯀꯦꯄꯦꯕꯤꯂꯤꯇꯤꯁꯤꯡ ꯂꯩꯔꯤ, ꯃꯁꯤꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯖꯣꯂꯨꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯄ꯭ꯔꯣꯄꯣꯔꯁꯅꯁꯤꯡ ꯁꯣꯏꯗꯅꯥ ꯐꯪꯍꯜꯂꯤ꯫
ꯔꯣ ꯑꯃꯍꯦꯛꯇꯕꯨ "ꯐ꯭ꯂꯨꯏꯗ" ꯑꯣꯏꯅꯥ .row
ꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ .row-fluid
. ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯅꯥ ꯂꯩ, ꯃꯁꯤꯅꯥ ꯐꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯐ꯭ꯂꯤꯞ ꯇꯧꯕꯗꯥ ꯂꯥꯏꯍꯜꯂꯤ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯸" > ... </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯣꯐꯁꯦꯇꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯑꯣꯄꯔꯦꯠ ꯇꯧꯏ: .offset*
ꯀꯣꯂꯝ ꯀꯌꯥ ꯑꯃꯅꯥ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯀꯣꯂꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴" > ... </div>
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯴ ꯑꯣꯐꯁꯦꯠ꯲" > ... </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗꯁꯤꯡꯅꯥ ꯅꯦꯁ꯭ꯇꯤꯡ ꯑꯁꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ: ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯊꯥꯛ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯀꯣꯂꯝ ꯱꯲ ꯐꯥꯑꯣꯕꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯐ꯭ꯂꯨꯏꯗ ꯒ꯭ꯔꯤꯗꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯄꯤꯛꯁꯦꯜ ꯅꯠꯇꯦ ꯆꯥꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯲" >
- ꯐ꯭ꯂꯨꯏꯗ ꯱꯲ ꯂꯩ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯶" >
- ꯐ꯭ꯂꯨꯏꯗ ꯶
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
- <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <div class = "span6" > ꯐ꯭ꯂꯨꯏꯗ ꯶ </div>
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
ꯃꯊꯧ ꯇꯥꯕꯥ ꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯐꯤꯛꯁ-ꯋꯥꯏꯗ (ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ) ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ <div class="container">
ꯄꯤꯔꯤ꯫
- <ꯍꯀꯆꯥꯡ>꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯀꯟꯇꯦꯅꯔ" >
- ...
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </body>ꯒꯤ ꯃꯇꯥꯡꯗꯥ
ꯐ꯭ꯂꯨꯏꯗ, ꯀꯣꯂꯝ ꯑꯅꯤꯒꯤ ꯄꯦꯖ ꯑꯃꯥ ꯁꯦꯝꯃꯨ <div class="container-fluid">
—ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ꯫
- <div class = "ꯀꯟꯇꯦꯅꯔ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯔꯣ-ꯐ꯭ꯂꯨꯏꯗ" >
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯲" >
- <!--ꯁꯥꯏꯗꯕꯥꯔ ꯀꯟꯇꯦꯟꯇ-->꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- <div ꯀ꯭ꯂꯥꯁ = "ꯁ꯭ꯄꯦꯅ꯱꯰" >
- <!--ꯍꯀꯆꯥꯡꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ-->
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
- </div> ꯍꯥꯌꯅꯥ ꯐꯣꯡꯗꯣꯀꯈꯤ꯫
<head>
ꯅꯍꯥꯛꯀꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯦꯇꯥ ꯇꯦꯒ ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯌꯥꯎꯍꯟꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯗꯨꯗꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ CSS ꯑꯣꯟꯊꯣꯀꯎ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯃꯔ ꯄꯦꯖꯗꯒꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯃꯦꯇꯥ ꯇꯦꯒ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯌꯥꯎꯍꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫
- <meta name = "ꯚꯤꯎꯄꯣꯔꯠ" ꯀꯟꯇꯦꯟꯇ = "ꯄꯥꯀꯄꯥ=ꯗꯤꯚꯥꯏꯁ-ꯋꯥꯏꯗ, ꯏꯅꯤꯁꯤꯑꯦꯜ-ꯁ꯭ꯀꯦꯜ=1.0" >
- <link href = "ꯑꯦꯁꯦꯠꯁꯤꯡ/ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ./ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ-ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ" rel = "ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ" >
ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ!ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯃꯇꯝ ꯑꯁꯤꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯐꯤꯆꯔꯁꯤꯡ ꯌꯥꯑꯣꯗꯦ ꯃꯔꯃꯗꯤ ꯄꯨꯝꯅꯃꯛ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯗꯥ ꯐꯤꯆꯔ ꯑꯁꯤ ꯂꯧꯊꯣꯛꯅꯕꯥ ꯄꯨꯛꯅꯤꯡ ꯊꯧꯒꯠꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯁꯤ ꯏꯅꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯐꯤꯒꯔ ꯇꯧꯏ꯫
ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯅꯥ ꯀꯟꯗꯤꯁꯟ ꯀꯌꯥꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯤ-ꯔꯦꯁꯤꯑꯣ, ꯋꯥꯏꯗ, ꯗꯤꯁꯞꯂꯦ ꯃꯈꯜ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ-ꯑꯗꯨꯕꯨ ꯃꯍꯧꯁꯥꯅꯥ ꯑꯀꯣꯌꯕꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯂꯤ min-width
ꯑꯃꯁꯨꯡ max-width
.
ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯃꯣꯕꯥꯏꯜ ꯑꯣꯗꯤꯁꯅꯁꯤꯡꯗꯥ ꯍꯧꯗꯣꯀꯄꯥ ꯑꯣꯏꯅꯥ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯆꯧꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯗꯦꯗꯤꯀꯦꯇꯦꯗ ꯀꯣꯗ ꯕꯦꯖꯁꯤꯡ ꯈꯟꯅꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯒꯤ ꯂꯦꯌꯔꯁꯤꯡ ꯅꯠꯇꯦ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡ ꯑꯗꯨ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯖꯣꯂꯨꯁꯅꯁꯤꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯆꯨꯅꯕꯥ ꯑꯣꯏꯍꯅꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯐꯥꯏꯜ ꯑꯃꯈꯛꯇꯗꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯈꯔꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ:
ꯃꯃꯤꯡ ꯊꯥꯟꯕ | ꯂꯦꯑꯥꯎꯇꯀꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ꯫ | ꯀꯣꯂꯃꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫ | ꯒꯇꯔꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫ |
---|---|---|---|
ꯑꯆꯧꯕꯥ ꯗꯤꯁꯞꯂꯦ꯫ | ꯱꯲꯰꯰px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ | ꯷꯰ꯄꯤ.ꯑꯦꯛꯁ | ꯳꯰ꯄꯤ.ꯑꯦꯛꯁ |
ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ | ꯹꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ | ꯶꯰ꯄꯤ.ꯑꯦꯛꯁ | ꯲꯰ꯄꯤ.ꯑꯦꯛꯁ |
ꯄꯣꯠꯊꯥꯕꯥ ꯇꯦꯕꯂꯁꯤꯡ꯫ | ꯷꯶꯸px ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩ꯫ | ꯴꯲ꯄꯤ.ꯑꯦꯛꯁ | ꯲꯰ꯄꯤ.ꯑꯦꯛꯁ |
ꯐꯣꯅꯁꯤꯡꯗꯒꯤ ꯇꯦꯕꯂꯁꯤꯡ ꯐꯥꯑꯣꯕꯥ꯫ | ꯷꯶꯷px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ | ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫ | |
ꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ | ꯴꯸꯰px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ | ꯐ꯭ꯂꯨꯏꯗ ꯀꯂꯃꯁꯤꯡ, ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ꯫ |
- /* ꯑꯆꯧꯕꯥ ꯗꯦꯁ꯭ꯀꯇꯣꯞ */
- @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : ꯱꯲꯰꯰px ) { ... } .
- /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯑꯃꯁꯨꯡ ꯗꯦꯁ꯭ꯀꯇꯣꯄꯇꯥ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
- @media ( ꯃꯤꯟ - ꯋꯥꯏꯗ : 768px ) ꯑꯃꯁꯨꯡ ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : 979px ) { ... } .
- /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯟ ꯇꯨ ꯄꯣꯔꯠꯔꯦꯠ ꯇꯦꯕꯜ */
- @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯷꯶꯷px ) { ... } .
- /* ꯂꯦꯟꯗꯁ꯭ꯀꯦꯞ ꯐꯣꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯗꯥꯎꯟ */
- @media ( ꯃꯦꯛꯁ - ꯋꯥꯏꯗ : ꯴꯸꯰px ) { ... } .
ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯃꯣꯕꯥꯏꯜ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇꯒꯤꯗꯃꯛ, ꯗꯤꯚꯥꯏꯁ ꯑꯃꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯀꯟꯇꯦꯟꯇ ꯎꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯈꯥꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯕꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯗꯥ (ꯗꯤꯚꯥꯏꯁꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯂꯦꯕꯦꯜ ꯇꯧꯕꯥ) ꯃꯈꯣꯌꯒꯤ ꯏꯐꯦꯛꯇꯀꯤ ꯇꯦꯕꯜ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ responsive.less
.
ꯀ꯭ꯂꯥꯁ | ꯐꯣꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫꯷꯶꯷px ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯂꯩ꯫ | ꯇꯦꯕꯂꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫꯹꯷꯹px ꯗꯒꯤ ꯷꯶꯸px ꯐꯥꯑꯣꯕꯥ ꯂꯩ꯫ | ꯗꯦꯁ꯭ꯀꯇꯣꯄꯁꯤꯡ꯫ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ |
---|---|---|---|
.visible-phone |
ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ |
.visible-tablet |
ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ |
.visible-desktop |
ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯎꯕꯥ ꯐꯪꯏ꯫ |
.hidden-phone |
ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯎꯕꯥ ꯐꯪꯏ꯫ |
.hidden-tablet |
ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ | ꯎꯕꯥ ꯐꯪꯏ꯫ |
.hidden-desktop |
ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯎꯕꯥ ꯐꯪꯏ꯫ | ꯂꯣꯠꯇꯨꯅ ꯊꯕ |
ꯂꯤꯃꯤꯇꯦꯗ ꯕꯦꯁꯤꯁ꯭ꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ ꯑꯃꯁꯨꯡ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁꯥꯏꯠ ꯑꯗꯨꯒꯤ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯚꯔꯁꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯔꯣꯏꯗꯕꯅꯤ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯃꯈꯣꯌꯗꯨ ꯗꯤꯚꯥꯏꯁ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯄ꯭ꯔꯖꯦꯟꯇꯦꯁꯟ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯣꯏꯗꯕꯅꯤ, ꯑꯃꯁꯨꯡ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫
ꯃꯊꯛꯀꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯁꯥꯏꯖ ꯍꯣꯡꯗꯣꯀꯎ ꯅꯠꯠꯔꯒꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯂꯣꯗ ꯇꯧ꯫
ꯒ꯭ꯔꯤꯟ ꯆꯦꯀꯃꯥꯔꯀꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯀ꯭ꯂꯥꯁ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯏ꯫
ꯃꯐꯝ ꯑꯁꯤꯗꯥ, ꯒ꯭ꯔꯤꯟ ꯆꯦꯀꯃꯥꯔꯀꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛꯀꯤ ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯀ꯭ꯂꯥꯁ ꯂꯣꯠꯂꯤ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯏ꯫