बूटस्ट्रैप कें CSS कें निर्माण कें लेल उपयोग कैल जाय वाला चर, मिक्सिन, आ बेसि कें लाभ उठावय कें लेल LESS , एकटा CSS प्रीप्रोसेसर कें साथ बूटस्ट्रैप कें अनुकूलित आ विस्तारित करूं .
बूटस्ट्रैप अपन मूल में LESS के साथ बनाओल गेल अछि, एकटा गतिशील स्टाइलशीट भाषा जे हमर नीक दोस्त, Alexis Sellier द्वारा बनाओल गेल अछि . इ सिस्टम आधारित सीएसएस कें विकास कें तेज, आसान आ मजेदार बनायत छै.
CSS कें विस्तार कें रूप मे, LESS मे चर, कोड कें पुन: उपयोग करय योग्य स्निपेट कें लेल मिक्सिन, सरल गणित, नेस्टिंग, आ यहां तक कि रंग फंक्शन कें लेल ऑपरेशन शामिल छै.
सीएसएस म॑ रंग आरू पिक्सेल मान क॑ प्रबंधित करना कनी दर्दनाक होय सकै छै, जे आमतौर प॑ कॉपी आरू पेस्ट स॑ भरलऽ छै । यद्यपि LESS के साथ नै—रंग या पिक्सेल मान के चर के रूप में असाइन करू आ एक बेर बदलू.
ओ तीनू सीमा-त्रिज्या घोषणा अहाँ के नियमित ol' CSS में करय के जरूरत अछि? आब ओ सभ मिक्सिन के मदद सं एक लाइन पर उतरि गेल अछि, कोड के स्निपेट जेकरा अहां कतहु दोबारा इस्तेमाल क सकय छी.
ऑपरेशन के साथ मक्खी पर गणित क क अपन ग्रिड, लीडिंग, आओर बेसी सुपर लचीला बनाउ. CSS सेनिटी के लेल अपन तरीका के गुणा करू, विभाजित करू, जोड़ू, आ घटाउ.
@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-block IE7 समर्थन प्राप्त करबाक लेल नियमित के अलावा प्रयोग करू |
.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() |
कोनो नहि | कोनो तत्वकेँ ग्रिड कॉलम जकाँ फ्लोट करू |
मिक्सिन | पैरामीटर | प्रयोग |
---|---|---|
.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 स्थापित -g कम
एक बेर इंस्टॉल भ गेलाक बाद बस 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 पर अछि .