बूटस्ट्रैप के साथ 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

हीरो यूनिट

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

मूल मिश्रण

एक बुनियादी मिश्रण अनिवार्य रूप से सीएसएस के एक स्निपेट के लिए एक शामिल या आंशिक है। वे बिल्कुल CSS क्लास की तरह लिखे गए हैं और इन्हें कहीं भी बुलाया जा सकता है।

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

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

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

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

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

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

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

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

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

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

एक बार इंस्टाल होने के बाद बस 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 एडिटर और कंपाइलर है जिसे Adobe Air पर बनाया गया है।

कोडकिट

अनौपचारिक मैक ऐप के समान व्यक्ति द्वारा बनाया गया, कोडकिट एक मैक ऐप है जो कम, एसएएसएस, स्टाइलस और कॉफीस्क्रिप्ट को संकलित करता है।

सरल

कम फ़ाइलों के संकलन को खींचने और छोड़ने के लिए मैक, लिनक्स और पीसी ऐप। साथ ही, सोर्स कोड GitHub पर है