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

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

ਘੱਟ ਕਿਉਂ?

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

ਕੀ ਸ਼ਾਮਲ ਹੈ?

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

ਜਿਆਦਾ ਜਾਣੋ

ਹੋਰ ਜਾਣਨ ਲਈ 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`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

ਹੀਰੋ ਯੂਨਿਟ

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

ਮਿਸ਼ਰਣ ਬਾਰੇ

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

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

. ਤੱਤ {
  . clearfix ();
}

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

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

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

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

ਬੂਟਸਟਰੈਪ ਦੇ ਲਗਭਗ ਸਾਰੇ ਮਿਕਸਿਨ mixins.less ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਇੱਕ ਸ਼ਾਨਦਾਰ ਉਪਯੋਗਤਾ .less ਫਾਈਲ ਜੋ ਤੁਹਾਨੂੰ ਟੂਲਕਿੱਟ ਵਿੱਚ ਕਿਸੇ ਵੀ .less ਫਾਈਲਾਂ ਵਿੱਚ ਇੱਕ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ।

ਇਸ ਲਈ, ਅੱਗੇ ਵਧੋ ਅਤੇ ਮੌਜੂਦਾ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਾਂ ਆਪਣੀ ਲੋੜ ਅਨੁਸਾਰ ਆਪਣੇ ਆਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ।

ਮਿਸ਼ਰਣ ਸ਼ਾਮਲ ਹਨ

ਸਹੂਲਤ

ਮਿਕਸਿਨ	ਪੈਰਾਮੀਟਰ	ਵਰਤੋਂ
`.clearfix()`	ਕੋਈ ਨਹੀਂ	ਅੰਦਰ ਫਲੋਟਸ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ
`.tab-focus()`	ਕੋਈ ਨਹੀਂ	ਵੈਬਕਿੱਟ ਫੋਕਸ ਸ਼ੈਲੀ ਅਤੇ ਗੋਲ ਫਾਇਰਫਾਕਸ ਰੂਪਰੇਖਾ ਲਾਗੂ ਕਰੋ
`.center-block()`	ਕੋਈ ਨਹੀਂ	ਵਰਤ ਕੇ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ ਨੂੰ ਆਟੋ ਸੈਂਟਰ`margin: auto`
`.ie7-inline-block()`	ਕੋਈ ਨਹੀਂ	`display: inline-block`IE7 ਸਹਾਇਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਨਿਯਮਤ ਤੋਂ ਇਲਾਵਾ ਵਰਤੋਂ
`.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 ਕਾਲਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ
`.hyphens()`	`@mode: auto`	CSS3 ਹਾਈਫਨੇਸ਼ਨ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਚਾਹੁੰਦੇ ਹੋ (ਸ਼ਾਮਲ `word-wrap: break-word`ਹੈ)

ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਗਰੇਡੀਐਂਟ

ਮਿਕਸਿਨ	ਪੈਰਾਮੀਟਰ	ਵਰਤੋਂ
`#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 ਕਮਾਂਡ ਲਾਈਨ ਕੰਪਾਈਲਰ, JSHint, Recess, ਅਤੇ uglify-js ਨੂੰ npm ਨਾਲ ਗਲੋਬਲ ਤੌਰ 'ਤੇ ਸਥਾਪਿਤ ਕਰੋ:

$npm install -g less jshint recess 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 ਫਾਈਲ ਦੇ ਹਰ ਸੇਵ ਤੋਂ ਬਾਅਦ ਕੋਡ ਨੂੰ ਸਥਾਨਕ ਫਾਈਲਾਂ ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ, ਤਾਂ ਤੁਸੀਂ ਐਪ ਵਿੱਚ ਆਟੋਮੈਟਿਕ ਮਿਨਿਫਾਇੰਗ ਲਈ ਤਰਜੀਹਾਂ ਨੂੰ ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਕਿਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ।

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

ਘੱਟ ਕਿਉਂ?

ਕੀ ਸ਼ਾਮਲ ਹੈ?

ਜਿਆਦਾ ਜਾਣੋ

ਵੇਰੀਏਬਲ

ਮਿਕਸਿਨ

ਸੰਚਾਲਨ

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

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

ਗਰਿੱਡ ਸਿਸਟਮ

ਟਾਈਪੋਗ੍ਰਾਫੀ

ਟੇਬਲ

ਗ੍ਰੇਸਕੇਲ ਰੰਗ

ਲਹਿਜ਼ੇ ਦੇ ਰੰਗ

ਕੰਪੋਨੈਂਟਸ

ਬਟਨ

ਫਾਰਮ

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

ਨਵਬਾਰ

ਡ੍ਰੌਪਡਾਊਨ

ਹੀਰੋ ਯੂਨਿਟ

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

ਮਿਸ਼ਰਣ ਬਾਰੇ

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

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

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

ਮਿਸ਼ਰਣ ਸ਼ਾਮਲ ਹਨ

ਸਹੂਲਤ

ਫਾਰਮ

ਟਾਈਪੋਗ੍ਰਾਫੀ

ਗਰਿੱਡ ਸਿਸਟਮ

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

ਬੈਕਗ੍ਰਾਊਂਡ ਅਤੇ ਗਰੇਡੀਐਂਟ

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

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

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

ਕਮਾਂਡ ਲਾਈਨ

ਜਾਵਾਸਕ੍ਰਿਪਟ

ਅਣਅਧਿਕਾਰਤ ਮੈਕ ਐਪ

ਹੋਰ ਮੈਕ ਐਪਸ

ਕਰੰਚ

ਕੋਡਕਿੱਟ

ਸਰਲ