बूटस्ट्रैप के साथ LESS का प्रयोग
बूटस्ट्रैप कें CSS कें निर्माण कें लेल उपयोग कैल जाय वाला चर, मिक्सिन, आ बेसि कें लाभ उठावय कें लेल LESS , एकटा CSS प्रीप्रोसेसर कें साथ बूटस्ट्रैप कें अनुकूलित आ विस्तारित करूं .
LESS के साथ निर्मित
कम कियैक ?
बूटस्ट्रैप अपन मूल में LESS के साथ बनाओल गेल अछि, एकटा गतिशील स्टाइलशीट भाषा जे हमर नीक दोस्त, Alexis Sellier द्वारा बनाओल गेल अछि . इ सिस्टम आधारित सीएसएस कें विकास कें तेज, आसान आ मजेदार बनायत छै.
की शामिल अछि ?
CSS कें विस्तार कें रूप मे, LESS मे चर, कोड कें पुन: उपयोग करय योग्य स्निपेट कें लेल मिक्सिन, सरल गणित, नेस्टिंग, आ यहां तक कि रंग फंक्शन कें लेल ऑपरेशन शामिल छै.
चर
सीएसएस म॑ रंग आरू पिक्सेल मान क॑ प्रबंधित करना कनी दर्दनाक होय सकै छै, जे आमतौर प॑ कॉपी आरू पेस्ट स॑ भरलऽ छै । यद्यपि LESS के साथ नै—रंग या पिक्सेल मान के चर के रूप में असाइन करू आ एक बेर बदलू.
मिक्सिन
ओ तीनू सीमा-त्रिज्या घोषणा अहाँ के नियमित ol' CSS में करय के जरूरत अछि? आब ओ सभ मिक्सिन के मदद सं एक लाइन पर उतरि गेल अछि, कोड के स्निपेट जेकरा अहां कतहु दोबारा इस्तेमाल क सकय छी.
संचालन
ऑपरेशन के साथ मक्खी पर गणित क क अपन ग्रिड, लीडिंग, आओर बेसी सुपर लचीला बनाउ. CSS सेनिटी के लेल अपन तरीका के गुणा करू, विभाजित करू, जोड़ू, आ घटाउ.
बूटस्ट्रैप चर LESS चर, ओकर मान, आ उपयोग दिशा निर्देश
हाइपरलिंक
@linkColor |
# 08ग | डिफ़ॉल्ट लिंक पाठ रंग | |
@linkColorHover |
darken(@linkColor, 15%) |
डिफ़ॉल्ट लिंक पाठ होवर रंग |
ग्रिड प्रणाली
@gridColumns |
12 |
@gridColumnWidth |
60px के |
@gridGutterWidth |
20px के |
@fluidGridColumnWidth |
६.३८२९७८७२३% अछि । |
@fluidGridGutterWidth |
२.१२७६५९५७४% २. |
टाइपोग्राफी
@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 |
# 46क546 | |
@red |
# 9d261d | |
@yellow |
# ffc40d | |
@orange |
# च89406 | |
@pink |
# ग3325च | |
@purple |
# 7 क 43 ख 6 |
घटक
बटन के
@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 |
ढाल आरू कनि गहरे रंग के सीमा असाइन करै लेली बटन लेली प्रयोग करलौ जाय छै |
LESS के साथ बूटस्ट्रैप संकलित करब
संकलन के लिये उपकरण
मेकफाइल के साथ नोड
निम्नलिखित कमांड चला कए LESS कमांड लाइन कंपाइलर आओर uglify-js कए ग्लोबल रूप स npm क संग इंस्टॉल करू:
$ npm स्थापित -g कम uglify-js
एक बेर इंस्टॉल भ गेलाक बाद बस makeअपन बूटस्ट्रैप डाइरेक्टरी के रूट सं चलाउ आओर अहां सभ सेट भ जाएब.
एकर अतिरिक्त, यदि अहां कें पास watchr इंस्टॉल छै, त अहां make watchहर बेर जखन अहां bootstrap lib मे कोनों फाइल कें संपादित करय छी तखन bootstrap कें स्वचालित रूप सं पुनर्निर्माण करय कें लेल चला सकय छी (ई आवश्यक नहि छै, बस एकटा सुविधा विधि छै).
कमांड लाइन
नोड के माध्यम स LESS कमांड लाइन टूल इंस्टॉल करू आओर निम्नलिखित कमांड चलाउ:
$ lessc ./lib/bootstrap.less > बूटस्ट्रैप.css
--compressजँ अहाँ किछु बाइट सहेजबाक प्रयास क' रहल छी तँ ओहि कमांड मे अवश्य शामिल करू !
जावास्क्रिप्ट
नवीनतम Less.js डाउनलोड करू आओर एकर पथ (आ बूटस्ट्रैप) मे शामिल करू <head>.
<link rel = "स्टाइलशीट/कम" href = "/पथ/से/बूटस्ट्रैप.कम" > <script src = "/पथ/से/कम. js" ></script>
.less फाइलकेँ पुनः संकलित करबाक लेल, बस ओकरा सहेजू आ अपन पृष्ठकेँ पुनः लोड करू। Less.js ओकरा संकलित करयत छै आ ओकरा स्थानीय भंडारण मे संग्रहीत करयत छै.
अनौपचारिक मैक ऐप
अनौपचारिक मैक ऐप .less फाइल कें डायरेक्टरी कें देखयत छै आ देखल गेल .less फाइल कें हर सेव कें बाद कोड कें स्थानीय फाइल मे संकलित करयत छै.
अगर अहां चाहय छी त अहां ऐप मे वरीयता कए ऑटोमैटिक मिनिफाइंग क लेल टॉगल क सकय छी आओर संकलित फाइल कोन डाइरेक्टरी मे खतम भ जाएत अछि.
अधिक मैक ऐप्स
क्रंच
क्रंच एडोब एयर पर बनल एकटा बढ़िया देखय वाला LESS एडिटर आ कंपाइलर अछि.
कोडकिट
अनौपचारिक मैक ऐप के समान लड़का द्वारा बनाओल गेल कोडकिट एकटा मैक ऐप अछि जे LESS, SASS, Stylus, आ CoffeeScript के संकलित करैत अछि |
सरलहीन
LESS फाइल कें ड्रैग आ ड्रॉप संकलन कें लेल मैक, लिनक्स, आ पीसी ऐप. प्लस, स्रोत कोड GitHub पर अछि .