बूटस्ट्रैप के साथ 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 बा।
  2. . क्लियरफिक्स कइल गइल ();
  3. } के बा।

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

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

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

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

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

कोडकिट के बा

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

सादगी के बा

कम फाइल के ड्रैग एंड ड्रॉप संकलन खातिर मैक, लिनक्स, आ पीसी ऐप। एकरा अलावे, स्रोत कोड गिटहब पर बा