ਬੂਟਸਟਰੈਪ ਨਾਲ ਘੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਬੂਟਸਟਰੈਪ ਦੇ CSS ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਹੋਰ ਦਾ ਫਾਇਦਾ ਲੈਣ ਲਈ LESS , ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਨੁਕੂਲਿਤ ਅਤੇ ਵਿਸਤਾਰ ਕਰੋ ।
ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ
ਘੱਟ ਕਿਉਂ?
ਬੂਟਸਟਰੈਪ ਇਸ ਦੇ ਕੋਰ ਵਿੱਚ ਘੱਟ ਦੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਗਤੀਸ਼ੀਲ ਸਟਾਈਲਸ਼ੀਟ ਭਾਸ਼ਾ ਜੋ ਸਾਡੇ ਚੰਗੇ ਦੋਸਤ, ਅਲੈਕਸਿਸ ਸੇਲੀਅਰ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਹੈ । ਇਹ ਸਿਸਟਮ-ਆਧਾਰਿਤ CSS ਨੂੰ ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਹੋਰ ਮਜ਼ੇਦਾਰ ਬਣਾਉਂਦਾ ਹੈ।
ਕੀ ਸ਼ਾਮਲ ਹੈ?
CSS ਦੇ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਰੂਪ ਵਿੱਚ, LESS ਵਿੱਚ ਵੇਰੀਏਬਲ, ਕੋਡ ਦੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਸਨਿੱਪਟ ਲਈ ਮਿਕਸਿਨ, ਸਧਾਰਨ ਗਣਿਤ ਲਈ ਓਪਰੇਸ਼ਨ, ਨੇਸਟਿੰਗ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਰੰਗ ਫੰਕਸ਼ਨ ਵੀ ਸ਼ਾਮਲ ਹਨ।
ਵੇਰੀਏਬਲ
CSS ਵਿੱਚ ਰੰਗਾਂ ਅਤੇ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਥੋੜਾ ਜਿਹਾ ਦਰਦ ਹੋ ਸਕਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਨਾਲ ਭਰਿਆ ਹੁੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਘੱਟ ਦੇ ਨਾਲ ਨਹੀਂ — ਵੇਰੀਏਬਲ ਦੇ ਰੂਪ ਵਿੱਚ ਰੰਗ ਜਾਂ ਪਿਕਸਲ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਬਦਲੋ।
ਮਿਕਸਿਨ
ਉਹ ਤਿੰਨ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਘੋਸ਼ਣਾਵਾਂ ਜੋ ਤੁਹਾਨੂੰ ਨਿਯਮਤ ol' CSS ਵਿੱਚ ਕਰਨ ਦੀ ਲੋੜ ਹੈ? ਹੁਣ ਉਹ ਮਿਕਸਿਨ, ਕੋਡ ਦੇ ਸਨਿੱਪਟ ਦੀ ਮਦਦ ਨਾਲ ਇੱਕ ਲਾਈਨ 'ਤੇ ਹਨ, ਤੁਸੀਂ ਕਿਤੇ ਵੀ ਮੁੜ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਸੰਚਾਲਨ
ਓਪਰੇਸ਼ਨਾਂ ਦੇ ਨਾਲ ਫਲਾਈ 'ਤੇ ਗਣਿਤ ਕਰ ਕੇ ਆਪਣੇ ਗਰਿੱਡ ਨੂੰ, ਮੋਹਰੀ ਅਤੇ ਵਧੇਰੇ ਲਚਕਦਾਰ ਬਣਾਓ। CSS ਸਿਆਣਪ ਲਈ ਆਪਣੇ ਤਰੀਕੇ ਨਾਲ ਕਈ, ਵੰਡੋ, ਜੋੜੋ ਅਤੇ ਘਟਾਓ।
ਬੂਟਸਟਰੈਪ ਵੇਰੀਏਬਲ ਘੱਟ ਵੇਰੀਏਬਲ, ਉਹਨਾਂ ਦੇ ਮੁੱਲ, ਅਤੇ ਵਰਤੋਂ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼
ਹਾਈਪਰਲਿੰਕਸ
@linkColor |
#08c | ਪੂਰਵ-ਨਿਰਧਾਰਤ ਲਿੰਕ ਟੈਕਸਟ ਰੰਗ | |
@linkColorHover |
darken(@linkColor, 15%) |
ਡਿਫੌਲਟ ਲਿੰਕ ਟੈਕਸਟ ਹੋਵਰ ਰੰਗ |
ਗਰਿੱਡ ਸਿਸਟਮ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
ਟਾਈਪੋਗ੍ਰਾਫੀ
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
ਗ੍ਰੇਸਕੇਲ ਰੰਗ
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
ਲਹਿਜ਼ੇ ਦੇ ਰੰਗ
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
ਕੰਪੋਨੈਂਟਸ
ਬਟਨ
@primaryButtonBackground |
@linkColor |
ਫਾਰਮ
@placeholderText |
@grayLight |
ਨਵਬਾਰ
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
ਫਾਰਮ ਸਟੇਟਸ ਅਤੇ ਅਲਰਟ
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
ਬੂਟਸਟਰੈਪ ਮਿਕਸਿਨ
ਮਿਸ਼ਰਣ ਬਾਰੇ
ਬੁਨਿਆਦੀ ਮਿਸ਼ਰਣ
ਇੱਕ ਬੁਨਿਆਦੀ ਮਿਸ਼ਰਣ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ CSS ਦੇ ਸਨਿੱਪਟ ਲਈ ਇੱਕ ਸ਼ਾਮਲ ਜਾਂ ਅੰਸ਼ਕ ਹੁੰਦਾ ਹੈ। ਉਹ ਇੱਕ CSS ਕਲਾਸ ਵਾਂਗ ਲਿਖੇ ਗਏ ਹਨ ਅਤੇ ਕਿਤੇ ਵੀ ਬੁਲਾਏ ਜਾ ਸਕਦੇ ਹਨ।
- . ਤੱਤ {
- . clearfix ();
- }
ਪੈਰਾਮੀਟ੍ਰਿਕ ਮਿਸ਼ਰਣ
ਇੱਕ ਪੈਰਾਮੀਟ੍ਰਿਕ ਮਿਕਸਿਨ ਇੱਕ ਬੁਨਿਆਦੀ ਮਿਕਸਿਨ ਦੀ ਤਰ੍ਹਾਂ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਹ ਵਿਕਲਪਿਕ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਪੈਰਾਮੀਟਰ (ਇਸ ਲਈ ਨਾਮ) ਨੂੰ ਵੀ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ।
- . ਤੱਤ {
- . ਬਾਰਡਰ - ਰੇਡੀਅਸ ( 4px );
- }
ਆਸਾਨੀ ਨਾਲ ਆਪਣੇ ਆਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ
ਬੂਟਸਟਰੈਪ ਦੇ ਲਗਭਗ ਸਾਰੇ ਮਿਕਸਿਨ mixins.less ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਇੱਕ ਸ਼ਾਨਦਾਰ ਉਪਯੋਗਤਾ .less ਫਾਈਲ ਜੋ ਤੁਹਾਨੂੰ ਟੂਲਕਿੱਟ ਵਿੱਚ ਕਿਸੇ ਵੀ .less ਫਾਈਲਾਂ ਵਿੱਚ ਇੱਕ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ।
ਇਸ ਲਈ, ਅੱਗੇ ਵਧੋ ਅਤੇ ਮੌਜੂਦਾ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਾਂ ਆਪਣੀ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਆਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ।
ਮਿਸ਼ਰਣ ਸ਼ਾਮਲ ਹਨ
ਸਹੂਲਤ
| ਮਿਕਸਿਨ | ਪੈਰਾਮੀਟਰ | ਵਰਤੋਂ |
|---|---|---|
.clearfix() |
ਕੋਈ ਨਹੀਂ | ਅੰਦਰ ਫਲੋਟਸ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ |
.tab-focus() |
ਕੋਈ ਨਹੀਂ | ਵੈਬਕਿੱਟ ਫੋਕਸ ਸ਼ੈਲੀ ਅਤੇ ਗੋਲ ਫਾਇਰਫਾਕਸ ਰੂਪਰੇਖਾ ਲਾਗੂ ਕਰੋ |
.center-block() |
ਕੋਈ ਨਹੀਂ | ਵਰਤ ਕੇ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ ਨੂੰ ਆਟੋ ਸੈਂਟਰmargin: auto |
.ie7-inline-block() |
ਕੋਈ ਨਹੀਂ | display: inline-blockIE7 ਸਹਾਇਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਨਿਯਮਤ ਤੋਂ ਇਲਾਵਾ ਵਰਤੋਂ |
.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() |
ਕੋਈ ਨਹੀਂ | ਇੱਕ ਤੱਤ ਬਣਾਓ ਇੱਕ 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() |
ਕੋਈ ਨਹੀਂ | ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਰੱਖਣ ਲਈ ਇੱਕ ਨਿਸ਼ਚਿਤ-ਚੌੜਾਈ (ਨਾਲ ਸੈੱਟ @siteWidth) ਕੰਟੇਨਰ ਪ੍ਰਦਾਨ ਕਰੋ |
.columns() |
@columns: 1 |
ਇੱਕ ਗਰਿੱਡ ਕਾਲਮ ਬਣਾਓ ਜੋ ਕਾਲਮਾਂ ਦੀ ਕਿਸੇ ਵੀ ਸੰਖਿਆ ਵਿੱਚ ਫੈਲਦਾ ਹੈ (1 ਕਾਲਮ ਲਈ ਡਿਫੌਲਟ) |
.offset() |
@columns: 1 |
ਖੱਬੇ ਹਾਸ਼ੀਏ ਦੇ ਨਾਲ ਇੱਕ ਗਰਿੱਡ ਕਾਲਮ ਨੂੰ ਆਫਸੈੱਟ ਕਰੋ ਜੋ ਕਾਲਮਾਂ ਦੀ ਕਿਸੇ ਵੀ ਸੰਖਿਆ ਵਿੱਚ ਫੈਲਦਾ ਹੈ |
.gridColumn() |
ਕੋਈ ਨਹੀਂ | ਇੱਕ ਤੱਤ ਨੂੰ ਇੱਕ ਗਰਿੱਡ ਕਾਲਮ ਵਾਂਗ ਫਲੋਟ ਬਣਾਓ |
CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
| ਮਿਕਸਿਨ | ਪੈਰਾਮੀਟਰ | ਵਰਤੋਂ |
|---|---|---|
.border-radius() |
@radius: 5px |
ਕਿਸੇ ਤੱਤ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਗੋਲ ਕਰੋ। ਇੱਕ ਸਿੰਗਲ ਮੁੱਲ ਜਾਂ ਚਾਰ ਸਪੇਸ-ਵੱਖ ਕੀਤੇ ਮੁੱਲ ਹੋ ਸਕਦੇ ਹਨ |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ਕਿਸੇ ਤੱਤ ਵਿੱਚ ਇੱਕ ਡਰਾਪ ਸ਼ੈਡੋ ਸ਼ਾਮਲ ਕਰੋ |
.transition() |
@transition |
CSS3 ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, 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 |
ਇੱਕ ਗਰੇਡੀਐਂਟ ਅਤੇ ਥੋੜ੍ਹਾ ਗੂੜਾ ਬਾਰਡਰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਬਟਨਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ |
ਘੱਟ ਨਾਲ ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕਰਨਾ
ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਟੂਲ
ਮੇਕਫਾਈਲ ਨਾਲ ਨੋਡ
ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ npm ਨਾਲ ਘੱਟ ਕਮਾਂਡ ਲਾਈਨ ਕੰਪਾਈਲਰ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ:
$ npm ਘੱਟ ਇੰਸਟਾਲ ਕਰੋ
ਇੱਕ ਵਾਰ ਇੰਸਟਾਲ ਹੋਣ makeਤੋਂ ਬਾਅਦ ਤੁਹਾਡੀ ਬੂਟਸਟਰੈਪ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਤੋਂ ਚਲਾਓ ਅਤੇ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤਿਆਰ ਹੋ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਵਾਚਰ ਸਥਾਪਤ ਹੈ, ਤਾਂ ਤੁਸੀਂ make watchਬੂਟਸਟਰੈਪ ਲਿਬ ਵਿੱਚ ਹਰ ਵਾਰ ਇੱਕ ਫਾਈਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ 'ਤੇ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ ਦੌੜ ਸਕਦੇ ਹੋ (ਇਸਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਿਰਫ਼ ਇੱਕ ਸਹੂਲਤ ਵਿਧੀ)।
ਕਮਾਂਡ ਲਾਈਨ
ਨੋਡ ਦੁਆਰਾ ਘੱਟ ਕਮਾਂਡ ਲਾਈਨ ਟੂਲ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ ਅਤੇ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:
$lessc ./lib/bootstrap.less > bootstrap.css
--compressਜੇ ਤੁਸੀਂ ਕੁਝ ਬਾਈਟਾਂ ਨੂੰ ਬਚਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਉਸ ਕਮਾਂਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ !
ਜਾਵਾਸਕ੍ਰਿਪਟ
ਨਵੀਨਤਮ Less.js ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਵਿੱਚ ਇਸ (ਅਤੇ ਬੂਟਸਟਰੈਪ) ਦਾ ਮਾਰਗ ਸ਼ਾਮਲ ਕਰੋ <head>।
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less ਫਾਈਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ ਅਤੇ ਆਪਣੇ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕਰੋ। Less.js ਉਹਨਾਂ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਥਾਨਕ ਸਟੋਰੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਦਾ ਹੈ।
ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ
ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ .less ਫਾਈਲਾਂ ਦੀਆਂ ਡਾਇਰੈਕਟਰੀਆਂ ਦੇਖਦਾ ਹੈ ਅਤੇ ਇੱਕ ਦੇਖੀ ਗਈ .less ਫਾਈਲ ਦੇ ਹਰ ਸੇਵ ਤੋਂ ਬਾਅਦ ਕੋਡ ਨੂੰ ਸਥਾਨਕ ਫਾਈਲਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ।
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ, ਤਾਂ ਤੁਸੀਂ ਐਪ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਮਿਨਿਫਾਇੰਗ ਲਈ ਤਰਜੀਹਾਂ ਨੂੰ ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਕਿਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ।
ਹੋਰ ਮੈਕ ਐਪਸ
ਕਰੰਚ
ਕਰੰਚ ਅਡੋਬ ਏਅਰ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਇੱਕ ਵਧੀਆ ਦਿੱਖ ਵਾਲਾ ਘੱਟ ਸੰਪਾਦਕ ਅਤੇ ਕੰਪਾਈਲਰ ਹੈ।
ਕੋਡਕਿੱਟ
ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ ਦੇ ਰੂਪ ਵਿੱਚ ਉਸੇ ਵਿਅਕਤੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ, ਕੋਡਕਿਟ ਇੱਕ ਮੈਕ ਐਪ ਹੈ ਜੋ ਘੱਟ, SASS, ਸਟਾਈਲਸ, ਅਤੇ ਕੌਫੀ ਸਕ੍ਰਿਪਟ ਨੂੰ ਕੰਪਾਇਲ ਕਰਦੀ ਹੈ।
ਸਰਲ
ਘੱਟ ਫਾਈਲਾਂ ਦੇ ਡਰੈਗ ਅਤੇ ਡ੍ਰੌਪ ਕੰਪਾਈਲਿੰਗ ਲਈ ਮੈਕ, ਲੀਨਕਸ, ਅਤੇ PC ਐਪ। ਨਾਲ ਹੀ, ਸਰੋਤ ਕੋਡ GitHub 'ਤੇ ਹੈ ।