ਬੂਟਸਟਰੈਪ

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

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

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

ਘੱਟ ਕਿਉਂ?

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

ਕੀ ਸ਼ਾਮਲ ਹੈ?

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

ਜਿਆਦਾ ਜਾਣੋ

ਘੱਟ CSS

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

ਵੇਰੀਏਬਲ

CSS ਵਿੱਚ ਰੰਗਾਂ ਅਤੇ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਥੋੜਾ ਜਿਹਾ ਦਰਦ ਹੋ ਸਕਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਕਾਪੀ ਅਤੇ ਪੇਸਟ ਨਾਲ ਭਰਿਆ ਹੁੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ ਘੱਟ ਦੇ ਨਾਲ ਨਹੀਂ — ਵੇਰੀਏਬਲ ਦੇ ਰੂਪ ਵਿੱਚ ਰੰਗ ਜਾਂ ਪਿਕਸਲ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਬਦਲੋ।

ਮਿਕਸਿਨਸ

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

ਸੰਚਾਲਨ

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

ਬੂਟਸਟਰੈਪ ਵੇਰੀਏਬਲ ਘੱਟ ਵੇਰੀਏਬਲ, ਉਹਨਾਂ ਦੇ ਮੁੱਲ, ਅਤੇ ਵਰਤੋਂ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼

ਸਕੈਫੋਲਡਿੰਗ ਅਤੇ ਲਿੰਕ

@bodyBackground @white ਪੰਨਾ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ
@textColor @grayDark ਪੂਰੇ ਸਰੀਰ, ਸਿਰਲੇਖਾਂ ਅਤੇ ਹੋਰ ਲਈ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਟੈਕਸਟ ਰੰਗ
@linkColor #08c ਪੂਰਵ-ਨਿਰਧਾਰਤ ਲਿੰਕ ਟੈਕਸਟ ਰੰਗ
@linkColorHover darken(@linkColor, 15%) ਡਿਫੌਲਟ ਲਿੰਕ ਟੈਕਸਟ ਹੋਵਰ ਰੰਗ

ਗਰਿੱਡ ਸਿਸਟਮ

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

ਟਾਈਪੋਗ੍ਰਾਫੀ

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily ਮੇਨਲੋ, ਮੋਨਾਕੋ, "ਕੁਰੀਅਰ ਨਿਊ", ਮੋਨੋਸਪੇਸ
@baseFontSize 13px ਪਿਕਸਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ਪਿਕਸਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

ਟੇਬਲ

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

ਗ੍ਰੇਸਕੇਲ ਰੰਗ

@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

ਕੰਪੋਨੈਂਟਸ

ਬਟਨ

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

ਫਾਰਮ

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

ਫਾਰਮ ਸਟੇਟਸ ਅਤੇ ਅਲਰਟ

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

ਨਵਬਾਰ

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

ਡ੍ਰੌਪਡਾਊਨ

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor

ਹੀਰੋ ਯੂਨਿਟ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

ਮਿਸ਼ਰਣ ਬਾਰੇ

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

ਇੱਕ ਬੁਨਿਆਦੀ ਮਿਸ਼ਰਣ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ 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 @width ਇੱਕ ਲਾਈਨ 'ਤੇ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸੈੱਟ ਕਰੋ
.square() @size .size()ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਸਮਾਨ ਮੁੱਲ ਦੇ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕਰਨ ਲਈ ਬਿਲਡ ਕਰਦਾ ਹੈ
.opacity() @opacity ਪੂਰੀਆਂ ਸੰਖਿਆਵਾਂ ਵਿੱਚ, ਧੁੰਦਲਾਪਨ ਪ੍ਰਤੀਸ਼ਤਤਾ (ਉਦਾਹਰਨ ਲਈ, "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 % ਚੌੜੇ ਗਟਰ ਦੇ ਨਾਲ ਇੱਕ ਮੌਜੂਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਤਿਆਰ ਕਰੋ
#grid > .input() @gridColumnWidth, @gridGutterWidth ਤੱਤਾਂ ਲਈ ਪਿਕਸਲ ਗਰਿੱਡ ਸਿਸਟਮ ਤਿਆਰ ਕਰੋ input, ਪੈਡਿੰਗ ਅਤੇ ਬਾਰਡਰਾਂ ਲਈ ਲੇਖਾ ਜੋਖਾ ਕਰੋ
.makeColumn @columns: 1, @offset: 0 ਕਲਾਸਾਂ divਤੋਂ ਬਿਨਾਂ ਕਿਸੇ ਵੀ ਨੂੰ ਗਰਿੱਡ ਕਾਲਮ ਵਿੱਚ ਬਦਲੋ.span*

CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਮਿਕਸਿਨ ਪੈਰਾਮੀਟਰ ਵਰਤੋਂ
.border-radius() @radius ਕਿਸੇ ਤੱਤ ਦੇ ਕੋਨਿਆਂ ਨੂੰ ਗੋਲ ਕਰੋ। ਇੱਕ ਸਿੰਗਲ ਮੁੱਲ ਜਾਂ ਚਾਰ ਸਪੇਸ-ਵੱਖ ਕੀਤੇ ਮੁੱਲ ਹੋ ਸਕਦੇ ਹਨ
.box-shadow() @shadow ਕਿਸੇ ਤੱਤ ਵਿੱਚ ਇੱਕ ਡਰਾਪ ਸ਼ੈਡੋ ਸ਼ਾਮਲ ਕਰੋ
.transition() @transition CSS3 ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, all .2s linear)
.rotate() @degrees ਇੱਕ ਤੱਤ n ਡਿਗਰੀ ਘੁੰਮਾਓ
.scale() @ratio ਕਿਸੇ ਤੱਤ ਨੂੰ ਇਸਦੇ ਅਸਲ ਆਕਾਰ n ਗੁਣਾ ਤੱਕ ਸਕੇਲ ਕਰੋ
.translate() @x, @y x ਅਤੇ y ਪਲੇਨਾਂ ਉੱਤੇ ਇੱਕ ਤੱਤ ਨੂੰ ਮੂਵ ਕਰੋ
.background-clip() @clip ਕਿਸੇ ਤੱਤ ਦੇ ਪਿਛੋਕੜ ਨੂੰ ਕੱਟੋ (ਲਈ ਲਾਭਦਾਇਕ border-radius)
.background-size() @size CSS3 ਦੁਆਰਾ ਬੈਕਗ੍ਰਾਉਂਡ ਚਿੱਤਰਾਂ ਦੇ ਆਕਾਰ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰੋ
.box-sizing() @boxmodel ਇੱਕ ਤੱਤ ਲਈ ਬਾਕਸ ਮਾਡਲ ਬਦਲੋ (ਉਦਾਹਰਨ border-boxਲਈ, ਇੱਕ ਪੂਰੀ-ਚੌੜਾਈ ਲਈ input)
.user-select() @select ਇੱਕ ਪੰਨੇ 'ਤੇ ਟੈਕਸਟ ਦੀ ਕਰਸਰ ਚੋਣ ਨੂੰ ਕੰਟਰੋਲ ਕਰੋ
.backface-visibility() @visibility: visible CSS 3D ਪਰਿਵਰਤਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਸਮਗਰੀ ਦੇ ਝਪਕਣ ਨੂੰ ਰੋਕੋ
.resizable() @direction: both ਸੱਜੇ ਅਤੇ ਹੇਠਾਂ ਕਿਸੇ ਵੀ ਤੱਤ ਨੂੰ ਮੁੜ ਆਕਾਰ ਦੇਣ ਯੋਗ ਬਣਾਓ
.content-columns() @columnCount, @columnGap: @gridGutterWidth ਕਿਸੇ ਵੀ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਨੂੰ 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 ./less/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 'ਤੇ ਹੈ ।