बूटस्ट्रैप के साथ LESS का उपयोग करना
बूटस्ट्रैप के सीएसएस को बनाने के लिए उपयोग किए जाने वाले चर, मिक्सिन और अधिक का लाभ उठाने के लिए, एक सीएसएस प्रीप्रोसेसर, LESS के साथ बूटस्ट्रैप को अनुकूलित और विस्तारित करें ।
LESS . के साथ निर्मित
कम क्यों?
बूटस्ट्रैप को इसके मूल में LESS के साथ बनाया गया है, हमारे अच्छे दोस्त, एलेक्सिस सेलियर द्वारा बनाई गई एक गतिशील स्टाइलशीट भाषा । यह विकासशील सिस्टम-आधारित CSS को तेज़, आसान और अधिक मज़ेदार बनाता है।
क्या शामिल है?
CSS के विस्तार के रूप में, LESS में वेरिएबल्स, कोड के पुन: प्रयोज्य स्निपेट के लिए मिक्सिन, सरल गणित के लिए संचालन, नेस्टिंग और यहां तक कि रंग फ़ंक्शन भी शामिल हैं।
चर
CSS में रंगों और पिक्सेल मानों को प्रबंधित करना थोड़ा मुश्किल हो सकता है, आमतौर पर कॉपी और पेस्ट से भरा होता है। हालांकि LESS के साथ नहीं—रंगों या पिक्सेल मानों को वेरिएबल के रूप में असाइन करें और उन्हें एक बार बदलें।
मिक्सिन्स
उन तीन सीमा-त्रिज्या घोषणाओं को आपको नियमित ol 'CSS में करने की आवश्यकता है? अब वे मिक्सिंस, कोड के स्निपेट्स की मदद से एक लाइन में आ गए हैं, जिन्हें आप कहीं भी दोबारा इस्तेमाल कर सकते हैं।
संचालन
संचालन के साथ तुरंत गणित करके अपने ग्रिड को अग्रणी, और अधिक लचीला बनाएं। सीएसएस विवेक के लिए अपना रास्ता गुणा करें, विभाजित करें, जोड़ें और घटाएं।
बूटस्ट्रैप चर कम चर, उनके मान और उपयोग दिशानिर्देश
हाइपरलिंक
@linkColor |
#08सी | डिफ़ॉल्ट लिंक टेक्स्ट रंग | |
@linkColorHover |
darken(@linkColor, 15%) |
डिफ़ॉल्ट लिंक टेक्स्ट होवर रंग |
ग्रिड प्रणाली
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
टाइपोग्राफी
@baseFontSize |
13 पिक्सल |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18पीएक्स |
ग्रेस्केल रंग
@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 |
अवयव
बटन
@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 क्लास की तरह लिखे गए हैं और इन्हें कहीं भी बुलाया जा सकता है।
- . तत्व {
- . क्लियरफिक्स ();
- }
पैरामीट्रिक मिश्रण
एक पैरामीट्रिक मिश्रण एक मूल मिश्रण की तरह है, लेकिन यह वैकल्पिक डिफ़ॉल्ट मानों के साथ पैरामीटर (इसलिए नाम) को भी स्वीकार करता है।
- . तत्व {
- . सीमा - त्रिज्या ( 4px );
- }
आसानी से अपना जोड़ें
बूटस्ट्रैप के लगभग सभी मिक्सिन मिक्सिन्स.लेस में संग्रहीत हैं, एक अद्भुत उपयोगिता .लेस फ़ाइल जो आपको टूलकिट में किसी भी .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() |
कोई भी नहीं | एक तत्व को बिना-सेरिफ़ फ़ॉन्ट स्टैक का उपयोग करें |
#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 |
एक ग्रेडिएंट और थोड़ा गहरा बॉर्डर असाइन करने के लिए बटन के लिए उपयोग किया जाता है |
कम के साथ बूटस्ट्रैप संकलित करना
संकलन के लिए उपकरण
मेकफ़ाइल के साथ नोड
निम्न कमांड चलाकर npm के साथ विश्व स्तर पर LESS कमांड लाइन कंपाइलर और uglify-js स्थापित करें:
$ npm इंस्टॉल-जी कम बदसूरत-जेएस
एक बार इंस्टॉल हो जाने के बाद बस makeअपनी बूटस्ट्रैप निर्देशिका की जड़ से चलाएं और आप पूरी तरह तैयार हैं।
इसके अतिरिक्त, यदि आपके पास वॉचर स्थापित है, तो आप make watchबूटस्ट्रैप को हर बार बूटस्ट्रैप लिब में किसी फ़ाइल को संपादित करने के लिए स्वचालित रूप से फिर से बनाने के लिए चला सकते हैं (यह आवश्यक नहीं है, बस एक सुविधा विधि है)।
कमांड लाइन
नोड के माध्यम से LESS कमांड लाइन टूल इंस्टॉल करें और निम्न कमांड चलाएँ:
$lessc ./lib/bootstrap.less >bootstrap.css
--compressयदि आप कुछ बाइट सहेजने का प्रयास कर रहे हैं तो उस आदेश में शामिल करना सुनिश्चित करें !
जावास्क्रिप्ट
नवीनतम कम.जेएस डाउनलोड करें और इसके लिए पथ (और बूटस्ट्रैप) को <head>.
<लिंक rel = "स्टाइलशीट/कम" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less फ़ाइलों को पुन: संकलित करने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। कम.जेएस उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है।
अनौपचारिक मैक ऐप
अनौपचारिक मैक ऐप .less फ़ाइलों की निर्देशिका देखता है और देखे गए .less फ़ाइल के प्रत्येक सहेजने के बाद कोड को स्थानीय फ़ाइलों में संकलित करता है।
यदि आप चाहें, तो आप स्वचालित रूप से छोटा करने के लिए ऐप में वरीयताओं को टॉगल कर सकते हैं और संकलित फ़ाइलें किस निर्देशिका में समाप्त होती हैं।
अधिक मैक ऐप्स
संकट
क्रंच एक बेहतरीन दिखने वाला LESS एडिटर और कंपाइलर है जो Adobe Air पर बनाया गया है।
कोडकिट
अनौपचारिक मैक ऐप के समान व्यक्ति द्वारा बनाया गया, कोडकिट एक मैक ऐप है जो कम, एसएएसएस, स्टाइलस और कॉफीस्क्रिप्ट को संकलित करता है।
सरल
कम फ़ाइलों के संकलन को खींचने और छोड़ने के लिए मैक, लिनक्स और पीसी ऐप। साथ ही, सोर्स कोड GitHub पर है ।