बूटस्ट्रैप के साथ 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() |
कवनो ना | @siteWidthअपना सामग्री के रखे खातिर एगो निश्चित-चौड़ाई (के साथ सेट) कंटेनर उपलब्ध कराईं |
.columns() |
@columns: 1 |
एगो ग्रिड कॉलम बनाईं जवन कवनो संख्या में कॉलम में फैलल होखे (डिफ़ॉल्ट रूप से 1 कॉलम) |
.offset() |
@columns: 1 |
बाईं ओर के मार्जिन वाला ग्रिड कॉलम के ऑफसेट करीं जवन कवनो संख्या में कॉलम में फैलल होखे |
.gridColumn() |
कवनो ना | कवनो तत्व के ग्रिड कॉलम नियर तैरत बनाईं |
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 कमांड लाइन कंपाइलर के ग्लोबल रूप से इंस्टॉल करीं:
$ npm इंस्टॉल करीं -जी कम बा
एक बेर इंस्टॉल हो गइला का बाद बस makeअपना बूटस्ट्रैप डाइरेक्टरी के रूट से चलाईं आ रउरा सभे सेट हो जाईं.
एकरे अलावा, अगर रउआँ लगे watchr इंस्टॉल बा, त रउआँ make watchहर बेर जब रउआँ बूटस्ट्रैप lib में कौनों फाइल के संपादित करीं तब बूटस्ट्रैप के स्वचालित रूप से रिबिल्ट करावे खातिर चल सकत बानी (एह के जरूरत नइखे, बस एगो सुविधा तरीका बा)।
कमांड लाइन के बा
Install the LESS command line tool via Node and run the following command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Be sure to include --compress in that command if you're trying to save some bytes!
Javascript
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Unofficial Mac app
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Simpless
Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.