बूटस्ट्रैप के साथ LESS के इस्तेमाल कइल जा रहल बा
बूटस्ट्रैप के CSS बनावे खातिर इस्तेमाल होखे वाला चर, मिक्सिन आ अउरी चीज सभ के फायदा उठावे खातिर LESS , एगो CSS प्रीप्रोसेसर के साथ बूटस्ट्रैप के अनुकूलित आ बिस्तार करीं ।
कम से बनल बा
काहे कम बा?
बूटस्ट्रैप के अपना मूल में LESS के साथ बनावल गइल बा, एगो गतिशील स्टाइलशीट भाषा जवन हमनी के बढ़िया दोस्त, एलेक्सिस सेलियर द्वारा बनावल गइल बा । ई सिस्टम आधारित सीएसएस के बिकास के तेज, आसान आ मजेदार बनावे ला।
का शामिल बा?
CSS के एक्सटेंशन के रूप में, LESS में चर, कोड के दोबारा इस्तेमाल करे लायक स्निपेट खातिर मिक्सिन, सरल गणित खातिर ऑपरेशन, नेस्टिंग, आ इहाँ तक कि रंग फंक्शन सभ के सामिल कइल जाला।
चर के बारे में बतावल गइल बा
सीएसएस में रंग आ पिक्सेल मान के प्रबंधित कइल तनी दर्दनाक हो सकेला, आमतौर पर कॉपी आ पेस्ट से भरल होला। हालांकि LESS के साथ ना—रंग भा पिक्सेल मान सभ के चर के रूप में असाइन करीं आ एक बेर बदल दीं।
मिक्सिन के नाम से जानल जाला
ऊ तीन गो सीमा-त्रिज्या घोषणा रउरा नियमित ol' CSS में करे के जरूरत बा? अब ऊ लोग मिक्सिन के मदद से एक लाइन पर उतर गइल बा, कोड के स्निपेट जवना के रउरा कहीं भी दोबारा इस्तेमाल कर सकीलें.
संचालन के बा
ऑपरेशन के साथ मक्खी पर गणित करके आपन ग्रिड, अग्रणी, आ अउरी सुपर लचीला बनाईं। सीएसएस सेनिटी के रास्ता के गुणा, भाग, जोड़, आ घटाव।
बूटस्ट्रैप चर LESS चर, इनहन के मान, आ इस्तेमाल के गाइडलाइन
हाइपरलिंक के बारे में बतावल गइल बा
@linkColor |
#08ग के बा | डिफ़ॉल्ट लिंक पाठ के रंग बा | |
@linkColorHover |
darken(@linkColor, 15%) |
डिफ़ॉल्ट लिंक पाठ होवर रंग बा |
ग्रिड सिस्टम के बारे में बतावल गइल बा
@gridColumns |
12 के बा |
@gridColumnWidth |
60px के बा |
@gridGutterWidth |
20px के बा |
@fluidGridColumnWidth |
6.382978723% के बा। |
@fluidGridGutterWidth |
2.127659574% के बा। |
टाइपोग्राफी के बारे में बतावल गइल बा
@baseFontSize |
13px के बा |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px के बा |
ग्रेस्केल के रंग के बा
@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 के बा |
घटक के बारे में बतावल गइल बा
बटन के बा
@primaryButtonBackground |
@linkColor |
फार्म के रूप में बा
@placeholderText |
@grayLight |
नवबर के बा
@navbarHeight |
40px के बा | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
राज्य आ अलर्ट बनावे के बा
@warningText |
# ग09853 के बा | |
@warningBackground |
# f3edd2 के बा | |
@errorText |
# ख94ए48 के बा | |
@errorBackground |
# च2देदे के बा | |
@successText |
#468847 के बा | |
@successBackground |
# dff0d8 के बा | |
@infoText |
#3a87ad के बा | |
@infoBackground |
# d9edf7 के बा |
बूटस्ट्रैप मिक्सिन के बा
मिक्सिन के बारे में बतावल गइल बा
बेसिक मिक्सिन के बा
बेसिक मिक्सिन मूल रूप से सीएसएस के स्निपेट खातिर शामिल भा आंशिक होला। ई लोग ठीक सीएसएस क्लास नियर लिखल गइल बा आ कहीं भी बोलावल जा सके ला।
- . तत्व { 1 बा।
- . क्लियरफिक्स कइल गइल ();
- } के बा।
पैरामीटरिक मिक्सिन के बा
पैरामेट्रिक मिक्सिन ठीक बेसिक मिक्सिन नियर होला, बाकी ई वैकल्पिक डिफ़ॉल्ट मान सभ के साथ पैरामीटर सभ के भी स्वीकार करे ला (एही से एकर नाँव पड़ल)।
- . तत्व { 1 बा।
- . सीमा - त्रिज्या ( 4px ) के बा;
- } के बा।
आसानी से आपन जोड़ दीं
बूटस्ट्रैप के लगभग सभ मिक्सिन mixins.less में संग्रहीत बा, एगो अद्भुत उपयोगिता .less फाइल जवन रउआ के टूलकिट में कवनो .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() |
कवनो ना | कवनो तत्व के 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 इंस्टॉल करीं -g कम uglify-js
एक बेर इंस्टॉल हो गइला का बाद बस makeअपना बूटस्ट्रैप डाइरेक्टरी के रूट से चलाईं आ रउरा सभे सेट हो जाईं.
एकरे अलावा, अगर रउआँ लगे watchr इंस्टॉल बा, त रउआँ make watchहर बेर जब रउआँ बूटस्ट्रैप lib में कौनों फाइल के संपादित करीं तब बूटस्ट्रैप के स्वचालित रूप से रिबिल्ट करावे खातिर चल सकत बानी (एह के जरूरत नइखे, बस एगो सुविधा तरीका बा)।
कमांड लाइन के बा
नोड के माध्यम से LESS कमांड लाइन टूल इंस्टॉल करीं आ निम्नलिखित कमांड चलाईं:
$ lessc ./lib/bootstrap.less > बूटस्ट्रैप.सीएसएस के बा
--compressअगर रउआ कुछ बाइट सेव करे के कोशिश कर रहल बानी त ओह कमांड में जरूर शामिल करीं !
जावास्क्रिप्ट के बा
नवीनतम Less.js डाउनलोड करीं आ एकरा खातिर रास्ता (आ बूटस्ट्रैप) के <head>.
<link rel = "स्टाइलशीट/कम" href = "/पथ/से/बूटस्ट्रैप.कम" > <स्क्रिप्ट src = "/पथ/से/कम.js" ></script>
.less फाइल सभ के दोबारा संकलित करे खातिर, बस इनहन के सेव करीं आ आपन पन्ना के रिलोड करीं। Less.js इनहन के संकलित करे ला आ लोकल स्टोरेज में स्टोर करे ला।
अनऑफिसियल मैक ऐप बा
अनऑफिसियल मैक ऐप .less फाइल के डाइरेक्टरी के देखत बा अवुरी देखल गईल .less फाइल के हर सेव के बाद कोड के स्थानीय फाइल में संकलित करेला।
अगर रउरा चाहत बानी त रउरा ऐप में पसंद के टॉगल क के ऑटोमैटिक मिनिफाइंग कर सकेनी आ संकलित फाइल कवना डाइरेक्टरी में खतम हो जाला.
अउरी मैक ऐप बा
क्रंच हो गइल बा
क्रंच एगो बढ़िया देखाई देवे वाला LESS एडिटर आ कंपाइलर बा जवन एडोब एयर पर बनल बा।
कोडकिट के बा
अनऑफिसियल मैक ऐप के समान आदमी के बनावल कोडकिट एगो मैक ऐप ह जवन कि लेस, सैस, स्टाइलस, अवुरी कॉफीस्क्रिप्ट के संकलित करेला।
सादगी के बा
कम फाइल के ड्रैग एंड ड्रॉप संकलन खातिर मैक, लिनक्स, आ पीसी ऐप। एकरा अलावे, स्रोत कोड गिटहब पर बा ।