ਬੂਟਸਟਰੈਪ

ਬੂਟਸਟਰੈਪ ਨਾਲ ਘੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਦੇ CSS ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਹੋਰ ਦਾ ਫਾਇਦਾ ਲੈਣ ਲਈ LESS , ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਨੁਕੂਲਿਤ ਅਤੇ ਵਿਸਤਾਰ ਕਰੋ ।

ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ

ਘੱਟ ਕਿਉਂ?

ਬੂਟਸਟਰੈਪ ਨੂੰ ਇਸਦੇ ਮੂਲ ਵਿੱਚ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਗਤੀਸ਼ੀਲ ਸਟਾਈਲਸ਼ੀਟ ਭਾਸ਼ਾ ਜੋ ਸਾਡੇ ਚੰਗੇ ਦੋਸਤ, ਅਲੈਕਸਿਸ ਸੇਲੀਅਰ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਹੈ । ਇਹ ਸਿਸਟਮ-ਆਧਾਰਿਤ CSS ਨੂੰ ਤੇਜ਼, ਆਸਾਨ ਅਤੇ ਹੋਰ ਮਜ਼ੇਦਾਰ ਬਣਾਉਂਦਾ ਹੈ।

ਕੀ ਸ਼ਾਮਲ ਹੈ?

CSS ਦੇ ਇੱਕ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਰੂਪ ਵਿੱਚ, LESS ਵਿੱਚ ਵੇਰੀਏਬਲ, ਕੋਡ ਦੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਸਨਿੱਪਟ ਲਈ ਮਿਕਸਿਨ, ਸਧਾਰਨ ਗਣਿਤ ਲਈ ਓਪਰੇਸ਼ਨ, ਨੇਸਟਿੰਗ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਰੰਗ ਫੰਕਸ਼ਨ ਵੀ ਸ਼ਾਮਲ ਹਨ।

ਜਿਆਦਾ ਜਾਣੋ

ਘੱਟ CSS

ਹੋਰ ਜਾਣਨ ਲਈ http://lesscss.org/ 'ਤੇ ਅਧਿਕਾਰਤ ਵੈੱਬਸਾਈਟ 'ਤੇ ਜਾਓ ।

ਵੇਰੀਏਬਲ

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 #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

ਬੂਟਸਟਰੈਪ ਮਿਕਸਿਨ

ਮਿਸ਼ਰਣ ਬਾਰੇ

ਬੁਨਿਆਦੀ ਮਿਸ਼ਰਣ

ਇੱਕ ਬੁਨਿਆਦੀ ਮਿਸ਼ਰਣ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ CSS ਦੇ ਸਨਿੱਪਟ ਲਈ ਇੱਕ ਸ਼ਾਮਲ ਜਾਂ ਅੰਸ਼ਕ ਹੁੰਦਾ ਹੈ। ਉਹ ਇੱਕ CSS ਕਲਾਸ ਵਾਂਗ ਲਿਖੇ ਗਏ ਹਨ ਅਤੇ ਕਿਤੇ ਵੀ ਬੁਲਾਏ ਜਾ ਸਕਦੇ ਹਨ।

  1. . ਤੱਤ {
  2.   . clearfix ();
  3. }

ਪੈਰਾਮੀਟ੍ਰਿਕ ਮਿਸ਼ਰਣ

ਇੱਕ ਪੈਰਾਮੀਟ੍ਰਿਕ ਮਿਕਸਿਨ ਇੱਕ ਬੁਨਿਆਦੀ ਮਿਕਸਿਨ ਦੀ ਤਰ੍ਹਾਂ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਹ ਵਿਕਲਪਿਕ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਪੈਰਾਮੀਟਰ (ਇਸ ਲਈ ਨਾਮ) ਨੂੰ ਵੀ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ।

  1. . ਤੱਤ {
  2.   . ਬਾਰਡਰ - ਰੇਡੀਅਸ ( 4px );
  3. }

ਆਸਾਨੀ ਨਾਲ ਆਪਣੇ ਆਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ

ਬੂਟਸਟਰੈਪ ਦੇ ਲਗਭਗ ਸਾਰੇ ਮਿਕਸਿਨ 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() ਕੋਈ ਨਹੀਂ ਆਪਣੀ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖਣ ਲਈ ਇੱਕ ਖਿਤਿਜੀ ਕੇਂਦਰਿਤ ਕੰਟੇਨਰ ਬਣਾਓ
#grid > .core() @gridColumnWidth, @gridGutterWidth n ਕਾਲਮਾਂ ਅਤੇ x ਪਿਕਸਲ ਚੌੜੇ ਗਟਰ ਦੇ ਨਾਲ ਇੱਕ ਪਿਕਸਲ ਗਰਿੱਡ ਸਿਸਟਮ (ਕੰਟੇਨਰ, ਕਤਾਰ ਅਤੇ ਕਾਲਮ) ਤਿਆਰ ਕਰੋ
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth n ਕਾਲਮਾਂ ਅਤੇ x % ਚੌੜੇ ਗਟਰ ਦੇ ਨਾਲ ਇੱਕ ਮੌਜੂਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਤਿਆਰ ਕਰੋ

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 ਇੱਕ ਗਰੇਡੀਐਂਟ ਅਤੇ ਥੋੜ੍ਹਾ ਗੂੜਾ ਬਾਰਡਰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਬਟਨਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ

ਘੱਟ ਨਾਲ ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕਰਨਾ

ਨੋਟ: ਜੇਕਰ ਤੁਸੀਂ ਸੋਧੇ ਹੋਏ CSS ਨਾਲ GitHub ਨੂੰ ਇੱਕ ਪੁੱਲ ਬੇਨਤੀ ਦਰਜ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਵੀ ਢੰਗ ਰਾਹੀਂ CSS ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਟੂਲ

ਮੇਕਫਾਈਲ ਨਾਲ ਨੋਡ

ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ LESS ਕਮਾਂਡ ਲਾਈਨ ਕੰਪਾਈਲਰ ਅਤੇ uglify-js ਨੂੰ npm ਨਾਲ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਸਥਾਪਿਤ ਕਰੋ:

$ npm install -g less ugliify-js

ਇੱਕ ਵਾਰ ਇੰਸਟਾਲ ਹੋਣ 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 'ਤੇ ਹੈ ।