ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ CSS ꯁꯦꯝꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤ ꯀꯥꯟꯅꯕꯥ ꯂꯧꯅꯕꯥ, CSS ꯄ꯭ꯔꯤꯞꯔꯣꯁꯦꯁꯔ ꯑꯃꯥ ꯑꯣꯏꯔꯤꯕꯥ LESS ꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯗ ꯇꯧꯕꯥ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯃꯔꯨꯃꯗꯥ LESS ꯌꯥꯑꯣꯔꯤ, ꯃꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯐꯕꯥ ꯃꯔꯨꯞ, ꯑꯦꯂꯦꯛꯁꯤꯁ ꯁꯦꯂꯤꯌꯔꯅꯥ ꯁꯦꯃꯈꯤꯕꯥ ꯗꯥꯏꯅꯥꯃꯤꯛ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯂꯣꯜ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯁꯤꯁ꯭ꯇꯦꯃꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ, ꯌꯥꯝꯅꯥ ꯂꯥꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯑꯣꯏꯍꯜꯂꯤ꯫
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯦꯛꯁꯇꯦꯟꯁꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯑꯦꯜ.ꯏ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ, ꯀꯣꯗꯀꯤ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯅꯤꯄꯦꯠꯁꯤꯡꯒꯤꯗꯃꯛ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯏꯆꯝ ꯆꯝꯕꯥ ꯃꯦꯊꯁꯀꯤꯗꯃꯛ ꯑꯣꯄꯔꯦꯁꯅꯁꯤꯡ, ꯅꯦꯁ꯭ꯇꯤꯡ, ꯑꯃꯁꯨꯡ ꯃꯆꯨꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯐꯥꯑꯣꯕꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯃꯆꯨ ꯑꯃꯁꯨꯡ ꯄꯤꯛꯁꯦꯜ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯃꯦꯅꯦꯖ ꯇꯧꯕꯥ ꯑꯁꯤ ꯈꯔꯥ ꯑꯋꯥꯕꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ, ꯃꯍꯧꯁꯥꯅꯥ ꯀꯣꯄꯤ ꯑꯃꯁꯨꯡ ꯄꯦꯁ꯭ꯇꯅꯥ ꯊꯜꯂꯕꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ LESSꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯠꯇꯦ—ꯃꯆꯨ ꯅꯠꯠꯔꯒꯥ ꯄꯤꯛꯁꯦꯜ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯍꯣꯡꯗꯣꯀꯎ꯫
ꯑꯗꯣꯝꯅꯥ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯑꯣꯜ’ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯗꯨꯒꯨꯝꯂꯕꯥ ꯕꯣꯔꯗꯔ-ꯔꯦꯗꯤꯌꯁ ꯗꯤꯛꯂꯥꯔꯦꯁꯟ ꯑꯍꯨꯝ ꯑꯗꯨ? ꯍꯧꯖꯤꯛꯇꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯒꯤ ꯃꯇꯦꯡꯅꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯍꯟꯊꯔꯦ, ꯃꯐꯝ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯀꯣꯗꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠꯁꯤꯡ꯫
ꯑꯣꯄꯔꯦꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯊꯁ ꯑꯣꯟ ꯐ꯭ꯂꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯒ꯭ꯔꯤꯗ, ꯂꯤꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯁꯨꯄꯔ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏꯍꯅꯕꯤꯌꯨ꯫ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯁꯦꯅꯤꯇꯤꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯝꯕꯤ ꯑꯗꯨ ꯃꯁꯤꯡ ꯌꯥꯃꯍꯅꯕꯥ, ꯈꯥꯌꯗꯣꯀꯄꯥ, ꯍꯥꯄꯆꯤꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯧꯊꯣꯀꯄꯥ꯫
@linkColor |
#꯰꯸ꯁꯤ | ꯗꯤꯐꯣꯜꯇ ꯂꯤꯉ꯭ꯛ ꯇꯦꯛꯁꯠ ꯃꯆꯨ꯫ | |
@linkColorHover |
darken(@linkColor, 15%) |
ꯗꯤꯐꯣꯜꯇ ꯂꯤꯉ꯭ꯛ ꯇꯦꯛꯁꯠ ꯍꯣꯚꯔ ꯃꯆꯨ꯫ |
@gridColumns |
꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ |
@gridColumnWidth |
꯶꯰ꯄꯤ.ꯑꯦꯛꯁ |
@gridGutterWidth |
꯲꯰ꯄꯤ.ꯑꯦꯛꯁ |
@fluidGridColumnWidth |
꯶.꯳꯸꯲꯹꯷꯸꯷꯲꯳% ꯑꯣꯏꯈꯤ꯫ |
@fluidGridGutterWidth |
꯲.꯱꯲꯷꯶꯵꯹꯵꯷꯴% ꯑꯣꯏꯈꯤ꯫ |
@baseFontSize |
꯱꯳ꯄꯤ.ꯑꯦꯛꯁ.ꯒꯤ ꯑꯣꯏꯕꯥ꯫ |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
꯱꯸ꯄꯤ.ꯑꯦꯛꯁ |
@black |
#꯰꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫ | |
@grayDarker |
#꯲꯲꯲ ꯂꯩ꯫ | |
@grayDark |
#꯳꯳꯳ ꯂꯩ꯫ | |
@gray |
#꯵꯵꯵ ꯂꯩ꯫ | |
@grayLight |
#꯹꯹꯹ ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩ꯫ | |
@grayLighter |
#ꯏ.ꯏ.ꯏ | |
@white |
#fff ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
@blue |
#꯰꯴꯹ꯁꯤ.ꯗꯤ.ꯕꯤ | |
@green |
#꯴꯶ꯑꯦ꯵꯴꯶ ꯂꯩ꯫ | |
@red |
#꯹ꯗꯤ꯲꯶꯱ꯗꯤ | |
@yellow |
#ffc40d ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ | |
@orange |
#f꯸꯹꯴꯰꯶ ꯂꯩ꯫ | |
@pink |
#ꯁꯤ꯳꯳꯲꯵ꯑꯦꯐ | |
@purple |
#꯷ꯑꯦ꯴꯳ꯕꯤ꯶ ꯂꯩ꯫ |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
꯴꯰ꯄꯤ.ꯑꯦꯛꯁ | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#ꯁꯤ꯰꯹꯸꯵꯳ ꯂꯩ꯫ | |
@warningBackground |
#f3edd2 ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ | |
@errorText |
#b94a48 ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ | |
@errorBackground |
#f2dede ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ | |
@successText |
#꯴꯶꯸꯸꯴꯷ ꯂꯩ꯫ | |
@successBackground |
#dff0d8 ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ | |
@infoText |
#꯳ꯑꯦ꯸꯷ꯑꯦ.ꯗꯤ | |
@infoBackground |
#d9edf7 ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫ |
ꯕꯦꯁꯤꯛ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ ꯇꯉꯥꯏꯐꯗꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯁ꯭ꯅꯤꯄꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯏꯅꯛꯂꯨꯖꯟ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯔꯁꯤꯑꯦꯜ ꯑꯃꯅꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯨꯝꯅꯥ ꯏꯔꯤ ꯑꯃꯁꯨꯡ ꯃꯐꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯀꯧꯕꯥ ꯌꯥꯏ꯫
- . ꯑꯦꯂꯤꯃꯦꯟꯇ {
- . ꯀ꯭ꯂꯤꯌꯥꯔꯐꯤꯛꯁ ();
- } .
ꯄꯦꯔꯥꯃꯦꯠꯔꯤꯛ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤ ꯕꯦꯁꯤꯛ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯩ, ꯑꯗꯨꯕꯨ ꯃꯁꯤꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ (ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯃꯤꯡ ꯑꯁꯤ ꯊꯣꯅꯈꯤ)ꯁꯨ ꯌꯥꯖꯩ꯫
- . ꯑꯦꯂꯤꯃꯦꯟꯇ {
- . ꯉꯃꯈꯩ - ꯔꯦꯗꯤꯌꯁ ( ꯴px );
- } .
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯤꯛꯁꯤꯟ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯄꯨꯝꯅꯃꯛ mixins.less ꯗꯥ ꯁ꯭ꯇꯣꯔ ꯇꯧꯏ, ꯃꯁꯤ ꯑꯉꯀꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ .less ꯐꯥꯏꯜ ꯑꯃꯅꯤ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯇꯨꯂꯀꯤꯇꯇꯥ ꯂꯩꯕꯥ .less ꯐꯥꯏꯜ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯃꯤꯛꯁꯤꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫
ꯑꯗꯨꯅꯥ, ꯃꯥꯡꯂꯣꯃꯗꯥ ꯆꯪꯁꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ ꯅꯠꯠꯔꯒꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
.clearfix() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯃꯅꯨꯡꯗꯥ ꯐ꯭ꯂꯣꯇꯁꯤꯡ ꯀ꯭ꯂꯤꯌꯔ ꯇꯧꯅꯕꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ |
.tab-focus() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯋꯦꯕꯀꯤꯠ ꯐꯣꯀꯁ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯁꯨꯡ ꯒꯣꯜꯗ ꯐꯥꯏꯔꯐꯛꯁ ꯑꯥꯎꯇꯂꯥꯏꯟ ꯑꯦꯞꯂꯥꯏ ꯇꯧ꯫ |
.center-block() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯕ꯭ꯂꯣꯛ-ꯂꯦꯚꯦꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯇꯣ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ꯫margin: auto |
.ie7-inline-block() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | display: inline-block IE7 ꯁꯄꯣꯔꯠ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ ꯆꯥꯡ ꯅꯥꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯊꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ |
.size() |
@height: 5px, @width: 5px |
ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯑꯋꯥꯡꯕꯥ ꯑꯃꯁꯨꯡ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯊꯨꯅꯥ ꯁꯦꯠ ꯇꯧ꯫ |
.square() |
@size: 5px |
.size() ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯣꯏꯅꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯕꯤꯜꯗ ꯑꯣꯟ ꯇꯧꯏ꯫ |
.opacity() |
@opacity: 100 |
ꯑꯄꯨꯅꯕꯥ ꯃꯁꯤꯡꯗꯥ, ꯑꯣꯄꯦꯁꯤꯇꯤ ꯆꯥꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, "50" ꯅꯠꯠꯔꯒꯥ "75") ꯁꯦꯠ ꯇꯧ꯫ |
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯇꯦꯛꯁꯠ ꯃꯆꯨ ꯁꯦꯠ ꯇꯧ꯫ |
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
#font > #family > .serif() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯔꯤꯐ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯝꯃꯨ꯫ |
#font > #family > .sans-serif() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯥꯟꯁ-ꯁꯦꯔꯤꯐ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯝꯃꯨ꯫ |
#font > #family > .monospace() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯃꯣꯅꯣꯁ꯭ꯄꯦꯁ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ꯐꯣꯟꯇ ꯁꯥꯏꯖ, ꯑꯔꯨꯝꯕꯥ, ꯑꯃꯁꯨꯡ ꯂꯤꯗꯤꯡ ꯐꯖꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯥ꯫ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ꯐꯣꯟꯇ ꯐꯦꯃꯤꯂꯤ ꯑꯁꯤ ꯁꯦꯔꯤꯐꯇꯥ ꯁꯦꯠ ꯇꯧ, ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ, ꯑꯔꯨꯝꯕꯥ, ꯑꯃꯁꯨꯡ ꯂꯤꯗꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧ꯫ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ꯐꯣꯟꯇ ꯐꯦꯃꯤꯂꯤ ꯑꯁꯤ sans-serif ꯗꯥ ꯁꯦꯠ ꯇꯧ, ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ, ꯑꯣꯖꯟ, ꯑꯃꯁꯨꯡ ꯂꯤꯗꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧ꯫ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ꯐꯣꯟꯇ ꯐꯦꯃꯤꯂꯤ ꯑꯁꯤ ꯃꯣꯅꯣꯁ꯭ꯄꯦꯁꯇꯥ ꯁꯦꯠ ꯇꯧ, ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ, ꯑꯔꯨꯝꯕꯥ, ꯑꯃꯁꯨꯡ ꯂꯤꯗꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧ꯫ |
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
.container-fixed() |
ꯑꯃꯠꯇ ꯅꯠꯇꯦ | ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯊꯝꯅꯕꯒꯤꯗꯃꯛ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ x ꯄꯤꯛꯁꯦꯜ ꯋꯥꯏꯗ ꯒꯇꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯤꯛꯁꯦꯜ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ (ꯀꯟꯇꯦꯅꯔ, ꯔꯣ, ꯑꯃꯁꯨꯡ ꯀꯂꯃꯁꯤꯡ) ꯁꯦꯝꯃꯨ꯫ |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n ꯀꯂꯝ ꯑꯃꯁꯨꯡ x % ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯒꯇꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯃꯥꯡꯒꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
.border-radius() |
@radius: 5px |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯀꯣꯟꯅꯥ ꯀꯨꯄꯁꯤꯜꯂꯨ꯫ ꯚꯦꯜꯌꯨ ꯑꯃꯈꯛꯇꯃꯛ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯄꯦꯁ-ꯁꯦꯄꯥꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯚꯦꯜꯌꯨ ꯃꯔꯤ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯗ꯭ꯔꯣꯞ ꯁꯦꯗꯣꯡ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ |
.transition() |
@transition |
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.꯳ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯏꯐꯦꯛꯇ ꯍꯥꯄꯆꯤꯅꯕꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, all .2s linear ) |
.rotate() |
@degrees |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ n ꯗꯤꯒ꯭ꯔꯤꯗꯥ ꯔꯣꯇꯦꯠ ꯇꯧ꯫ |
.scale() |
@ratio |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯕꯨ ꯃꯗꯨꯒꯤ ꯑꯣꯔꯤꯖꯤꯅꯦꯜ ꯁꯥꯏꯖꯒꯤ n ꯇꯪꯈꯥꯌꯗꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧ꯫ |
.translate() |
@x: 0, @y: 0 |
x ꯑꯃꯁꯨꯡ y ꯄ꯭ꯂꯦꯅꯁꯤꯡꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯆꯠꯂꯨ꯫ |
.background-clip() |
@clip |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯀ꯭ꯔꯣꯞ ꯇꯧꯕꯥ (ꯒꯤꯗꯃꯛ ꯀꯥꯟꯅꯔꯕꯥ border-radius ) . |
.background-size() |
@size |
CSS3ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯏꯃꯦꯖꯁꯤꯡꯒꯤ ꯁꯥꯏꯖ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ꯫ |
.box-sizing() |
@boxmodel |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤꯗꯃꯛ ꯕꯣꯛꯁ ꯃꯣꯗꯦꯜ ꯍꯣꯡꯗꯣꯀꯎ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, border-box ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯋꯥꯏꯗ ꯑꯃꯒꯤꯗꯃꯛ input ) |
.user-select() |
@select |
ꯄꯦꯖ ꯑꯃꯗꯥ ꯇꯦꯛꯁꯠ ꯈꯅꯕꯒꯤ ꯀꯔꯁꯔ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ꯫ |
.resizable() |
@direction: both |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯑꯔꯣꯏꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯔꯤꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯍꯅꯒꯗꯕꯅꯤ꯫ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ CSS3 ꯀꯂꯃꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯁꯦꯝꯃꯨ꯫ |
ꯃꯤꯛꯁꯤꯟ ꯇꯧꯕꯥ꯫ | ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡ꯫ | ꯁꯤꯖꯤꯟꯅꯕꯥ꯫ |
---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨ ꯑꯃꯥ ꯄꯤꯌꯨ꯫ |
#translucent > .border() |
@color: @white, @alpha: 1 |
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇ꯭ꯔꯥꯟꯁꯂꯨꯁꯦꯟꯇ ꯕꯣꯔꯗꯔ ꯃꯆꯨ ꯑꯃꯥ ꯄꯤꯌꯨ꯫ |
#gradient > .vertical() |
@startColor, @endColor |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯚꯔꯇꯤꯀꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradient > .horizontal() |
@startColor, @endColor |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradient > .directional() |
@startColor, @endColor, @deg |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯃꯆꯨ ꯑꯍꯨꯃꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradient > .radial() |
@innerColor, @outerColor |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯔꯦꯗꯤꯑꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradient > .striped() |
@color, @angle |
ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯁ꯭ꯠꯔꯥꯏꯞ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫ |
#gradientBar() |
@primaryColor, @secondaryColor |
ꯒ꯭ꯔꯦꯗꯤꯌꯦꯟꯇ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯂꯨꯕꯥ ꯉꯃꯈꯩ ꯑꯃꯥ ꯑꯦꯁꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯕꯇꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ |
ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯃꯥꯟꯗ ꯑꯁꯤ ꯔꯟ ꯇꯧꯗꯨꯅꯥ LESS ꯀꯃꯥꯟꯗ ꯂꯥꯏꯟ ꯀꯝꯄꯥꯏꯂꯔ ꯑꯃꯁꯨꯡ uglify-js ꯒ꯭ꯂꯣꯕꯦꯜ ꯑꯣꯏꯅꯥ npmꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧ:
$ npm ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ -g less uglify-js
ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ make
ꯅꯍꯥꯛꯀꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯒꯤ ꯔꯨꯇꯇꯒꯤ ꯈꯛꯇꯃꯛ ꯆꯠꯂꯨ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛ ꯄꯨꯝꯅꯃꯛ ꯁꯦꯠ ꯇꯧꯔꯦ꯫
ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ watchr ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ make watch
bootstrap lib ꯗꯥ ꯐꯥꯏꯜ ꯑꯃꯥ ꯑꯦꯗꯤꯠ ꯇꯧꯕꯥ ꯈꯨꯗꯤꯡꯗꯥ bootstrap ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯆꯠꯄꯥ ꯌꯥꯏ (ꯃꯁꯤ ꯃꯊꯧ ꯇꯥꯗꯦ, ꯈꯨꯗꯣꯡꯆꯥꯕꯥ ꯃꯦꯊꯗ ꯈꯛꯇꯅꯤ)꯫
ꯅꯣꯗꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ LESS ꯀꯃꯥꯟꯗ ꯂꯥꯏꯟ ꯇꯨꯜ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯀꯃꯥꯟꯗ ꯑꯁꯤ ꯆꯠꯂꯨ:
$ lessc ./lib/bootstrap.less > ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ
--compress
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯥꯏꯠ ꯈꯔꯗꯤ ꯁꯦꯚ ꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯔꯕꯗꯤ ꯀꯃꯥꯟꯗ ꯑꯗꯨꯗꯥ ꯁꯣꯌꯗꯅꯥ ꯌꯥꯑꯣꯍꯅꯕꯤꯌꯨ !
ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ Less.js ꯗꯥꯎꯅꯂꯣꯗ ꯇꯧꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯂꯝꯕꯤ (ꯑꯃꯁꯨꯡ Bootstrap) ꯑꯗꯨ <head>
.
<link rel = "ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ/ꯂꯦꯁ" href = "/ꯄꯥꯊ/ꯇꯨ/ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ.ꯂꯦꯁ" > <ꯁ꯭ꯛꯔꯤꯞꯇ src = "/ꯄꯥꯊ/ꯇꯨ/ꯂꯦꯁ.js" ></script>
.less ꯐꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯥ, ꯃꯈꯣꯌꯗꯨ ꯁꯦꯚ ꯇꯧ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯄꯦꯖ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯂꯣꯗ ꯇꯧ꯫ Less.jsꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ ꯂꯣꯀꯦꯜ ꯁ꯭ꯇꯣꯔꯦꯖꯗꯥ ꯁ꯭ꯇꯣꯔ ꯇꯧꯏ꯫
ꯑꯅꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯃꯦꯛ ꯑꯦꯞ ꯑꯁꯤꯅꯥ .less ꯐꯥꯏꯂꯁꯤꯡꯒꯤ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯁꯤꯡ ꯌꯦꯡꯏ ꯑꯃꯁꯨꯡ ꯌꯦꯡꯁꯤꯜꯂꯤꯕꯥ .less ꯐꯥꯏꯜ ꯑꯃꯥ ꯁꯦꯚ ꯇꯧꯕꯥ ꯈꯨꯗꯤꯡꯒꯤ ꯀꯣꯗ ꯑꯗꯨ ꯂꯣꯀꯦꯜ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯏ꯫
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯃꯤꯅꯤꯐꯥꯏ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯦꯞ ꯑꯗꯨꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯄꯁꯟꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯐꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯀꯔꯝꯕꯥ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯗꯥ ꯂꯣꯏꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫
ꯀ꯭ꯔꯥꯟꯆ ꯑꯁꯤ ꯑꯦꯗꯣꯕ ꯑꯦꯌꯔꯗꯥ ꯁꯥꯕꯥ ꯑꯆꯧꯕꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯂꯦꯁ ꯑꯦꯗꯤꯇꯔ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯥꯏꯂꯔ ꯑꯃꯅꯤ꯫
ꯑꯅꯑꯣꯐꯤꯁꯤꯑꯦꯜ ꯃꯦꯛ ꯑꯦꯄꯀꯥ ꯃꯥꯟꯅꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯅꯥ ꯁꯦꯃꯈꯤꯕꯥ ꯀꯣꯗꯀꯤꯠ ꯑꯁꯤ ꯂꯦꯁ, ꯑꯦꯁ.ꯑꯦ.ꯑꯦꯁ.ꯑꯦꯁ., ꯁ꯭ꯇꯥꯏꯂꯁ, ꯑꯃꯁꯨꯡ ꯀꯣꯐꯤꯁ꯭ꯛꯔꯤꯞꯇ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯦꯛ ꯑꯦꯞ ꯑꯃꯅꯤ꯫
LESS ꯐꯥꯏꯂꯁꯤꯡ ꯗ꯭ꯔꯦꯒ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯞ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯦꯛ, ꯂꯤꯅꯥꯛꯁ, ꯑꯃꯁꯨꯡ ꯄꯤ.ꯁꯤ. ꯄ꯭ꯂꯥꯁ, ꯁꯣꯔꯁ ꯀꯣꯗ ꯑꯁꯤ GitHub ꯗꯥ ꯂꯩ꯫