बूटस्ट्रैप के साथ LESS के इस्तेमाल कइल जा रहल बा

बूटस्ट्रैप के CSS बनावे खातिर इस्तेमाल होखे वाला चर, मिक्सिन आ अउरी चीज सभ के फायदा उठावे खातिर LESS , एगो CSS प्रीप्रोसेसर के साथ बूटस्ट्रैप के अनुकूलित आ बिस्तार करीं ।

काहे कम बा?

बूटस्ट्रैप के अपना मूल में LESS के साथ बनावल गइल बा, एगो गतिशील स्टाइलशीट भाषा जवन हमनी के बढ़िया दोस्त, एलेक्सिस सेलियर द्वारा बनावल गइल बा । ई सिस्टम आधारित सीएसएस के बिकास के तेज, आसान आ मजेदार बनावे ला।

का शामिल बा?

CSS के एक्सटेंशन के रूप में, LESS में चर, कोड के दोबारा इस्तेमाल करे लायक स्निपेट खातिर मिक्सिन, सरल गणित खातिर ऑपरेशन, नेस्टिंग, आ इहाँ तक कि रंग फंक्शन सभ के सामिल कइल जाला।

अउरी जाने खातिर देखीं

अधिक जानकारी खातिर आधिकारिक वेबसाइट http://lesscss.org/ पर जाईं .

चर के बारे में बतावल गइल बा

सीएसएस में रंग आ पिक्सेल मान के प्रबंधित कइल तनी दर्दनाक हो सकेला, आमतौर पर कॉपी आ पेस्ट से भरल होला। हालांकि LESS के साथ ना—रंग भा पिक्सेल मान सभ के चर के रूप में असाइन करीं आ एक बेर बदल दीं।

मिक्सिन के नाम से जानल जाला

ऊ तीन गो सीमा-त्रिज्या घोषणा रउरा नियमित ol' CSS में करे के जरूरत बा? अब ऊ लोग मिक्सिन के मदद से एक लाइन पर उतर गइल बा, कोड के स्निपेट जवना के रउरा कहीं भी दोबारा इस्तेमाल कर सकीलें.

संचालन के बा

ऑपरेशन के साथ मक्खी पर गणित करके आपन ग्रिड, अग्रणी, आ अउरी सुपर लचीला बनाईं। सीएसएस सेनिटी के रास्ता के गुणा, भाग, जोड़, आ घटाव।

मचान आ लिंक के बारे में बतावल गइल बा

`@bodyBackground`	`@white`	पृष्ठ के पृष्ठभूमि के रंग
`@textColor`	`@grayDark`	पूरा बॉडी, हेडिंग आ अउरी बहुत कुछ खातिर डिफ़ॉल्ट टेक्स्ट रंग
`@linkColor`	`#08c`	डिफ़ॉल्ट लिंक पाठ के रंग बा
`@linkColorHover`	`darken(@linkColor, 15%)`	डिफ़ॉल्ट लिंक पाठ होवर रंग बा

ग्रिड सिस्टम के बारे में बतावल गइल बा

`@gridColumns`	12 के बा
`@gridColumnWidth`	60px के बा
`@gridGutterWidth`	20px के बा
`@fluidGridColumnWidth`	6.382978723% के बा।
`@fluidGridGutterWidth`	2.127659574% के बा।

टाइपोग्राफी के बारे में बतावल गइल बा

`@sansFontFamily`	"हेल्वेटिका न्यू", हेल्वेटिका, एरियल, सैंस-सेरिफ के नाम से जानल जाला
`@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`	#ईईई के बा
`@white`	#fff के बा

लहजा के रंग के बा

`@blue`	#049सीडीबी के बा
`@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`	# ग09853 के बा
`@warningBackground`	# f3edd2 के बा
`@errorText`	# ख94ए48 के बा
`@errorBackground`	# च2देदे के बा
`@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`

मिक्सिन के बारे में बतावल गइल बा

बेसिक मिक्सिन के बा

बेसिक मिक्सिन मूल रूप से सीएसएस के स्निपेट खातिर शामिल भा आंशिक होला। ई लोग ठीक सीएसएस क्लास नियर लिखल गइल बा आ कहीं भी बोलावल जा सके ला।

. तत्व { 1 बा।
  . क्लियरफिक्स कइल गइल ();
} के बा।

पैरामीटरिक मिक्सिन के बा

पैरामेट्रिक मिक्सिन ठीक बेसिक मिक्सिन नियर होला, बाकी ई वैकल्पिक डिफ़ॉल्ट मान सभ के साथ पैरामीटर सभ के भी स्वीकार करे ला (एही से नाँव पड़ल)।

. तत्व { 1 बा।
  . सीमा - त्रिज्या ( 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 के फिर से संकलित करे के पड़ी ।

संकलन खातिर औजार बा

मेकफाइल के साथ नोड बा

निम्नलिखित कमांड चला के npm के साथ LESS कमांड लाइन कंपाइलर, JSHint, Recess, आ uglify-js के ग्लोबल रूप से इंस्टॉल करीं:

$ npm इंस्टॉल करीं -जी कम jshint अवकाश uglify-js

एक बेर इंस्टॉल हो गइला का बाद बस makeअपना बूटस्ट्रैप डाइरेक्टरी के रूट से चलाईं आ रउरा सभे सेट हो जाईं.

एकरे अलावा, अगर रउआँ लगे watchr इंस्टॉल बा, त रउआँ make watchहर बेर जब रउआँ बूटस्ट्रैप lib में कौनों फाइल के संपादित करीं तब बूटस्ट्रैप के स्वचालित रूप से रिबिल्ट करावे खातिर चल सकत बानी (एह के जरूरत नइखे, बस एगो सुविधा तरीका बा)।

कमांड लाइन के बा

नोड के माध्यम से LESS कमांड लाइन टूल इंस्टॉल करीं आ निम्नलिखित कमांड चलाईं:

$ lessc ./less/bootstrap.less > बूटस्ट्रैप.सीएसएस के बा

--compressअगर रउआ कुछ बाइट सेव करे के कोशिश कर रहल बानी त ओह कमांड में जरूर शामिल करीं !

जावास्क्रिप्ट के बा

नवीनतम Less.js डाउनलोड करीं आ एकरा खातिर रास्ता (आ बूटस्ट्रैप) के <head>.

<link rel = "स्टाइलशीट/कम" href = "/पथ/से/बूटस्ट्रैप.कम" > <स्क्रिप्ट src = "/पथ/से/कम.js" ></script>

.less फाइल सभ के दोबारा संकलित करे खातिर, बस इनहन के सेव करीं आ आपन पन्ना के रिलोड करीं। Less.js इनहन के संकलित करे ला आ लोकल स्टोरेज में स्टोर करे ला।

अनऑफिसियल मैक ऐप बा

अनऑफिसियल मैक ऐप .less फाइल के डाइरेक्टरी के देखत बा अवुरी देखल गईल .less फाइल के हर सेव के बाद कोड के स्थानीय फाइल में संकलित करेला।

अगर रउरा चाहत बानी त रउरा ऐप में पसंद के टॉगल क के ऑटोमैटिक मिनिफाइंग कर सकेनी आ संकलित फाइल कवना डाइरेक्टरी में खतम हो जाला.

कम से बनल बा

काहे कम बा?

का शामिल बा?

अउरी जाने खातिर देखीं

चर के बारे में बतावल गइल बा

मिक्सिन के नाम से जानल जाला

संचालन के बा

बूटस्ट्रैप चर LESS चर, इनहन के मान, आ इस्तेमाल के गाइडलाइन

मचान आ लिंक के बारे में बतावल गइल बा

ग्रिड सिस्टम के बारे में बतावल गइल बा

टाइपोग्राफी के बारे में बतावल गइल बा

टेबल के बारे में बतावल गइल बा

ग्रेस्केल के रंग के बा

लहजा के रंग के बा

घटक के बारे में बतावल गइल बा

बटन के बा

फार्म के रूप में बा

राज्य आ अलर्ट बनावे के बा

नवबर के बा

ड्रॉपडाउन हो गइल बा

हीरो इकाई के बा

बूटस्ट्रैप मिक्सिन के बा

मिक्सिन के बारे में बतावल गइल बा

बेसिक मिक्सिन के बा

पैरामीटरिक मिक्सिन के बा

आसानी से आपन जोड़ दीं

मिक्सिन शामिल बा

उपयोगिता के बारे में बतावल गइल बा

फार्म के रूप में बा

टाइपोग्राफी के बारे में बतावल गइल बा

ग्रिड सिस्टम के बारे में बतावल गइल बा

CSS3 के गुण के बारे में बतावल गइल बा

पृष्ठभूमि आ ढाल के बारे में बतावल गइल बा

कम के साथ बूटस्ट्रैप के संकलन कइल जा रहल बा

संकलन खातिर औजार बा

मेकफाइल के साथ नोड बा

कमांड लाइन के बा

जावास्क्रिप्ट के बा

अनऑफिसियल मैक ऐप बा

अउरी मैक ऐप बा

क्रंच हो गइल बा

कोडकिट के बा

सादगी के बा