बूटस्ट्रैप कन्नै LESS दा इस्तेमाल करना
बूटस्ट्रैप दे CSS बनाने लेई बरते गेदे चर, मिक्सिन, ते होर मते दा फायदा लैने आस्तै LESS , इक CSS प्रीप्रोसेसर कन्नै बूटस्ट्रैप गी अनुकूलित ते विस्तार करो .
LESS दे नाल बनाया गया
LESS क्यों?
बूटस्ट्रैप अपने मूल च LESS कन्नै बनाया गेदा ऐ, इक गतिशील स्टाइलशीट भाशा जेह् ड़ी साढ़े अच्छे दोस्त, एलेक्सिस सेलियर आसेआ बनाई गेदी ऐ . एह् सिस्टम-आधारत सीएसएस गी विकसित करने गी तेज़, आसान ते मता मजेदार बनांदा ऐ।
क्या शामिल ऐ?
CSS दे विस्तार दे रूप च, LESS च चर, कोड दे पुन: उपयोग करने योग्य स्निपेटें आस्तै मिक्सिन, सरल गणित आस्तै ऑपरेशन, नेस्टिंग, ते इत्थूं तगर जे रंग फंक्शनें गी बी शामल कीता गेआ ऐ।
चर करने वाले
CSS च रंगें ते पिक्सेल मूल्यें गी प्रबंधत करना थोड़ा दर्द हो सकदा ऐ, आमतौर पर कापी ते पेस्ट कन्नै भरोचे दा ऐ। हालांकि LESS कन्नै नेईं—रंगें जां पिक्सेल मूल्यें गी चर दे रूप च असाइन करो ते उनेंगी इक बारी बदलो।
मिक्सिन
उन त्रै सीमा-त्रिज्या घोषणाएं गी तुसेंगी नियमित ओल 'सीएसएस च बनाने दी लोड़ ऐ? हुण ओह मिक्सिन दी मदद कन्नै इक लाइन तगर पुज्जी गेदे न, कोड दे स्निपेट तुस कुतै बी दुबारा इस्तेमाल करी सकदे ओ।
संचालन करना
ऑपरेशनें कन्नै मक्खी पर गणित करियै अपनी ग्रिड, लीडिंग, ते होर सुपर लचीला बनाओ। सीएसएस सेनिटी दा अपना रास्ता गुणा करो, बंडो, जोड़ो, ते घटाओ।
बूटस्ट्रैप चर LESS चर, उंदे मूल्य, ते उपयोग दिशा-निर्देश
हाइपरलिंक दा
@linkColor |
# 08ग ऐ | डिफ़ॉल्ट लिंक पाठ रंग | |
@linkColorHover |
darken(@linkColor, 15%) |
डिफ़ॉल्ट लिंक पाठ होवर रंग |
ग्रिड प्रणाली
@gridColumns |
12 दा |
@gridColumnWidth |
60पीएक्स ऐ |
@gridGutterWidth |
20पीएक्स ऐ |
@fluidGridColumnWidth |
६.३८२९७८७२३% ऐ। |
@fluidGridGutterWidth |
२.१२७६५९५७४% ऐ। |
टाइपोग्राफी दा
@baseFontSize |
13पीएक्स ऐ |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18पीएक्स ऐ |
ग्रेस्केल रंग
@black |
# 000 ऐ | |
@grayDarker |
# 222 ऐ | |
@grayDark |
# 333 ऐ | |
@gray |
# 555 दा | |
@grayLight |
# 999 ऐ | |
@grayLighter |
# ईईई | |
@white |
# फ़्फ़्फ़ |
लहजे रंग
@blue |
# 049सीडीबी ऐ | |
@green |
# 46 ए 546 ऐ | |
@red |
# 9 डी 261 डी | |
@yellow |
# एफएफसी40डी | |
@orange |
# च89406 ऐ | |
@pink |
# सी 3325 च | |
@purple |
# 7 ए 43 बी 6 ऐ |
घटक ऐ
बटन दे
@primaryButtonBackground |
@linkColor |
रूप दे
@placeholderText |
@grayLight |
नवबर जी
@navbarHeight |
40पीएक्स ऐ | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
राज्यें ते अलर्ट बनाओ
@warningText |
# सी09853 ऐ | |
@warningBackground |
# च 3 एड्ड 2 | |
@errorText |
# ख 94 ए 48 | |
@errorBackground |
# च2देदे | |
@successText |
# 468847 ऐ | |
@successBackground |
# डीएफएफ0डी8 ऐ | |
@infoText |
# 3 ए 87 ऐड | |
@infoBackground |
# d9edf7 ऐ |
बूटस्ट्रैप मिक्सिन
मिक्सिन दे बारे च
बेसिक मिक्सिन
इक बुनियादी मिक्सिन जरूरी रूप कन्नै सीएसएस दे इक स्निपेट आस्तै इक समावेश जां आंशिक ऐ। एह् सीएसएस क्लास दी तर्ज पर लिखे दे न ते कुतै बी बुलाया जाई सकदा ऐ।
- ऐ . तत्व { ऐ .
- ऐ . साफ करना ();
- } ऐ।
पैरामीटरिक मिक्सिन
पैरामीटरिक मिक्सिन सिर्फ इक बुनियादी मिक्सिन दी तर्ज पर ऐ , पर एह् वैकल्पिक डिफाल्ट मूल्यें कन्नै पैरामीटर (इस करी नांऽ) बी स्वीकार करदा ऐ ।
- ऐ . तत्व { ऐ .
- ऐ . सीमा - त्रिज्या ( 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() |
कोई नेईं | इक तत्व गी सैंस-सेरिफ फॉन्ट स्टैक दा इस्तेमाल करो बनाओ |
#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 कमांड लाइन कंपाइलर ते uglify-js गी ग्लोबल रूप कन्नै npm कन्नै इंस्टॉल करो:
$ एनपीएम स्थापित -जी कम uglify-जेएस
इक बारी इंस्टॉल होने पर बस makeअपनी बूटस्ट्रैप डायरेक्टरी दे रूट थमां चलाओ ते तुस सारे सेट होई गेदे ओ.
इसदे अलावा, जेकर तुंदे कोल watchr इंस्टॉल ऐ तां तुस make watchहर बारी बूटस्ट्रैप lib च इक फाइल गी संपादत करने पर बूटस्ट्रैप गी स्वतः दुबारा बनाने लेई चला सकदे ओ (इसदी लोड़ नेईं ऐ, सिर्फ इक सुविधा विधि)।
कमांड लाइन
नोड दे राहें LESS कमांड लाइन टूल गी इंस्टॉल करो ते निम्नलिखित कमांड चलाओ:
$ lessc ./lib/bootstrap.less > बूटस्ट्रैप.सीएसएस ऐ
--compressजेकर तुस कुसै बाइटें गी बचाने दी कोशश करा दे ओ तां उस कमांड च शामल करना ज़रूरी ऐ !
जावास्क्रिप्ट
नवीनतम Less.js डाउनलोड करो ते इसदे लेई रस्ता (ते बूटस्ट्रैप) गी <head>.
<link rel = "स्टाइलशीट/कम" href = "/पथ/टू/बूटस्ट्रैप.कम" > <स्क्रिप्ट src = "/पथ/टू/कम.जेएस" ></स्क्रिप्ट>
.less फाइलें गी दुबारा संकलित करने आस्तै, बस उनेंगी सेव करो ते अपने पेज गी दुबारा लोड करो. Less.js उनेंगी संकलित करदा ऐ ते उनेंगी लोकल स्टोरेज च संग्रहीत करदा ऐ।
गैर-सरकारी मैक ऐप
गैर-सरकारी मैक ऐप .less फाइलें दी डायरेक्टरी गी दिक्खदा ऐ ते दिक्खे गेदे .less फाइल दे हर सेव दे बाद कोड गी लोकल फाइलें च संकलित करदा ऐ।
जेकर तुस चांह् दे ओ तां तुस स्वचालित रूप कन्नै मिनीफाइंग करने आस्तै ऐप च प्राथमिकताएं गी टॉगल करी सकदे ओ ते संकलित फाइलें दा अंत कुस डायरेक्टरी च होंदा ऐ।
होर मैक ऐप
क्रंच करना
क्रंच एडोब एयर पर बने दा इक शानदार दिखने आला LESS एडिटर ते कंपाइलर ऐ।
कोडकिट ऐ
अनऑफिसियल मैक ऐप दे समान बंदे द्वारा बनाया गेदा, कोडकिट इक मैक ऐप ऐ जेह् ड़ा LESS, SASS, स्टाइलस, ते कॉफीस्क्रिप्ट गी संकलित करदा ऐ।
सादगी
LESS फाइलें दे ड्रैग ते ड्रॉप संकलन आस्तै मैक, लिनक्स, ते पीसी ऐप। प्लस, स्रोत कोड GitHub पर ऐ .