बूटस्ट्रैप के साथ LESS का उपयोग करना

बूटस्ट्रैप के सीएसएस को बनाने के लिए उपयोग किए जाने वाले चर, मिक्सिन और अधिक का लाभ उठाने के लिए, एक सीएसएस प्रीप्रोसेसर, LESS के साथ बूटस्ट्रैप को अनुकूलित और विस्तारित करें ।

कम क्यों?

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

क्या शामिल है?

CSS के विस्तार के रूप में, LESS में वेरिएबल्स, कोड के पुन: प्रयोज्य स्निपेट के लिए मिक्सिन, सरल गणित के लिए संचालन, नेस्टिंग और यहां तक कि रंग फ़ंक्शन भी शामिल हैं।

और अधिक जानें

अधिक जानने के लिए आधिकारिक वेबसाइट http://lesscss.org/ पर जाएं ।

चर

CSS में रंगों और पिक्सेल मानों को प्रबंधित करना थोड़ा मुश्किल हो सकता है, आमतौर पर कॉपी और पेस्ट से भरा होता है। हालांकि 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`	13 पिक्सल	पिक्सेल होना चाहिए
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18पीएक्स	पिक्सेल होना चाहिए
`@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`	#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 क्लास की तरह लिखे गए हैं और इन्हें कहीं भी बुलाया जा सकता है।

. तत्व {
  . क्लियरफिक्स ();
}

पैरामीट्रिक मिश्रण

एक पैरामीट्रिक मिश्रण एक मूल मिश्रण की तरह है, लेकिन यह वैकल्पिक डिफ़ॉल्ट मानों के साथ पैरामीटर (इसलिए नाम) को भी स्वीकार करता है।

. तत्व {
  . सीमा - त्रिज्या ( 4px );
}

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

बूटस्ट्रैप के लगभग सभी मिक्सिन मिक्सिन्स.लेस में संग्रहीत हैं, एक अद्भुत उपयोगिता .लेस फ़ाइल जो आपको टूलकिट में किसी भी .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()`	कोई भी नहीं	एक तत्व को बिना-सेरिफ़ फ़ॉन्ट स्टैक का उपयोग करें
`#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`	एक ग्रेडिएंट और थोड़ा गहरा बॉर्डर असाइन करने के लिए बटन के लिए उपयोग किया जाता है

नोट: यदि आप संशोधित सीएसएस के साथ गिटहब को पुल अनुरोध सबमिट कर रहे हैं, तो आपको इनमें से किसी भी तरीके से सीएसएस को फिर से संकलित करना होगा ।

संकलन के लिए उपकरण

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

निम्न कमांड चलाकर npm के साथ विश्व स्तर पर LESS कमांड लाइन कंपाइलर और uglify-js स्थापित करें:

$ npm इंस्टॉल-जी कम बदसूरत-जेएस

एक बार इंस्टाल होने के बाद बस makeअपने बूटस्ट्रैप डायरेक्टरी के रूट से चलाएं और आप पूरी तरह तैयार हैं।

इसके अतिरिक्त, यदि आपके पास वॉचर स्थापित है, तो आप make watchबूटस्ट्रैप को हर बार बूटस्ट्रैप लिब में किसी फ़ाइल को संपादित करने के लिए स्वचालित रूप से फिर से बनाने के लिए चला सकते हैं (यह आवश्यक नहीं है, बस एक सुविधा विधि है)।

कमांड लाइन

नोड के माध्यम से LESS कमांड लाइन टूल इंस्टॉल करें और निम्न कमांड चलाएँ:

$lessc ./less/bootstrap.less > bootstrap.css

--compressयदि आप कुछ बाइट सहेजने का प्रयास कर रहे हैं तो उस आदेश में शामिल करना सुनिश्चित करें !

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

नवीनतम कम.जेएस डाउनलोड करें और इसके लिए पथ (और बूटस्ट्रैप) को <head>.

<लिंक rel = "स्टाइलशीट/कम" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less फ़ाइलों को पुन: संकलित करने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। कम.जेएस उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है।

अनौपचारिक मैक ऐप

अनौपचारिक मैक ऐप .less फ़ाइलों की निर्देशिका देखता है और देखे गए .less फ़ाइल के प्रत्येक सहेजने के बाद कोड को स्थानीय फ़ाइलों में संकलित करता है।

यदि आप चाहें, तो आप स्वचालित रूप से छोटा करने के लिए ऐप में वरीयताओं को टॉगल कर सकते हैं और संकलित फ़ाइलें किस निर्देशिका में समाप्त होती हैं।

LESS . के साथ निर्मित

कम क्यों?

क्या शामिल है?

और अधिक जानें

चर

मिक्सिन्स

संचालन

बूटस्ट्रैप चर कम चर, उनके मान और उपयोग दिशानिर्देश

मचान और लिंक

ग्रिड प्रणाली

टाइपोग्राफी

टेबल

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

एक्सेंट रंग

अवयव

बटन

फार्म

फॉर्म स्टेट्स और अलर्ट

नेवबार

नीचे की ओर फैलने वाला बिंदु

हीरो यूनिट

बूटस्ट्रैप मिश्रण

मिश्रण के बारे में

मूल मिश्रण

पैरामीट्रिक मिश्रण

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

शामिल मिश्रण

उपयोगिताओं

फार्म

टाइपोग्राफी

ग्रिड प्रणाली

CSS3 के गुण

पृष्ठभूमि और ढाल

कम के साथ बूटस्ट्रैप संकलित करना

संकलन के लिए उपकरण

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

कमांड लाइन

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

अनौपचारिक मैक ऐप

अधिक मैक ऐप्स

संकट

कोडकिट

सरल