बूटस्ट्रैप कन्नै LESS दा इस्तेमाल करना

बूटस्ट्रैप दे CSS बनाने लेई बरते गेदे चर, मिक्सिन, ते होर मते दा फायदा लैने आस्तै LESS , इक CSS प्रीप्रोसेसर कन्नै बूटस्ट्रैप गी अनुकूलित ते विस्तार करो .

LESS क्यों?

बूटस्ट्रैप अपने मूल च LESS कन्नै बनाया गेदा ऐ, इक गतिशील स्टाइलशीट भाशा जेह् ड़ी साढ़े अच्छे दोस्त, एलेक्सिस सेलियर आसेआ बनाई गेदी ऐ . एह् सिस्टम-आधारत सीएसएस गी विकसित करने गी तेज़, आसान ते मता मजेदार बनांदा ऐ।

क्या शामिल ऐ?

CSS दे विस्तार दे रूप च, LESS च चर, कोड दे पुन: उपयोग करने योग्य स्निपेटें आस्तै मिक्सिन, सरल गणित आस्तै ऑपरेशन, नेस्टिंग, ते इत्थूं तगर जे रंग फंक्शनें गी बी शामल कीता गेआ ऐ।

और जानें

कम सीएसएस दा

होर मती जानकारी लेई आधिकारिक वेबसाइट http://lesscss.org/ पर जाओ ।

चर करने वाले

CSS च रंगें ते पिक्सेल मूल्यें गी प्रबंधत करना थोड़ा दर्द हो सकदा ऐ, आमतौर पर कापी ते पेस्ट कन्नै भरोचे दा ऐ। हालांकि LESS कन्नै नेईं—रंगें जां पिक्सेल मूल्यें गी चर दे रूप च असाइन करो ते उनेंगी इक बारी बदलो।

मिक्सिन

उन त्रै सीमा-त्रिज्या घोषणाएं गी तुसेंगी नियमित ओल 'सीएसएस च बनाने दी लोड़ ऐ? हुण ओह मिक्सिन दी मदद कन्नै इक लाइन तगर पुज्जी गेदे न, कोड दे स्निपेट तुस कुतै बी दुबारा इस्तेमाल करी सकदे ओ।

संचालन करना

ऑपरेशनें कन्नै मक्खी पर गणित करियै अपनी ग्रिड, लीडिंग, ते होर सुपर लचीला बनाओ। सीएसएस सेनिटी दा अपना रास्ता गुणा करो, बंडो, जोड़ो, ते घटाओ।

मचान ते लिंक

@bodyBackground @white पेज पृष्ठभूमि रंग
@textColor @grayDark पूरे शरीर, हेडिंग, ते होर मते आस्तै डिफ़ॉल्ट पाठ रंग
@linkColor #08c डिफ़ॉल्ट लिंक पाठ रंग
@linkColorHover darken(@linkColor, 15%) डिफ़ॉल्ट लिंक पाठ होवर रंग

ग्रिड प्रणाली

@gridColumns 12 दा
@gridColumnWidth 60पीएक्स ऐ
@gridGutterWidth 20पीएक्स ऐ
@fluidGridColumnWidth ६.३८२९७८७२३% ऐ।
@fluidGridGutterWidth २.१२७६५९५७४% ऐ।

टाइपोग्राफी दा

@sansFontFamily "हेल्वेटिका न्यूए", हेल्वेटिका, एरियल, सैंस-सेरिफ
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily मेनलो, मोनाको, "कूरियर नई", मोनोस्पेस
@baseFontSize 13पीएक्स ऐ पिक्सेल होना जरूरी ऐ
@baseFontFamily @sansFontFamily
@baseLineHeight 18पीएक्स ऐ पिक्सेल होना जरूरी ऐ
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

तालिकाएं

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

ग्रेस्केल रंग

@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 ऐ

घटक ऐ

बटन दे

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

रूप दे

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

राज्यें ते अलर्ट बनाओ

@warningText # सी09853 ऐ
@warningBackground # च 3 एड्ड 2
@errorText # ख 94 ए 48
@errorBackground # च2देदे
@successText # 468847 ऐ
@successBackground # डीएफएफ0डी8 ऐ
@infoText # 3 ए 87 ऐड
@infoBackground # d9edf7 ऐ

नवबर जी

@navbarHeight 40पीएक्स ऐ
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

ड्रॉपडाउन

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

हीरो इकाई

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

मिक्सिन दे बारे च

बेसिक मिक्सिन

इक बुनियादी मिक्सिन जरूरी रूप कन्नै सीएसएस दे इक स्निपेट आस्तै इक समावेश जां आंशिक ऐ। एह् सीएसएस क्लास दी तर्ज पर लिखे दे न ते कुतै बी बुलाया जाई सकदा ऐ।

  1. ऐ . तत्व { ऐ .
  2. ऐ . साफ करना ();
  3. } ऐ।

पैरामीटरिक मिक्सिन

पैरामीटरिक मिक्सिन सिर्फ इक बुनियादी मिक्सिन दी तर्ज पर ऐ , पर एह् वैकल्पिक डिफाल्ट मूल्यें कन्नै पैरामीटर (इस करी नांऽ) बी स्वीकार करदा ऐ ।

  1. ऐ . तत्व { ऐ .
  2. ऐ . सीमा - त्रिज्या ( 4px );
  3. } ऐ।

आसानी से अपना जोड़ना

बूटस्ट्रैप दे लगभग सारे मिक्सिन mixins.less च संग्रहीत कीते गेदे न, इक अद्भुत उपयोगिता .less फाइल जेह् ड़ी तुसेंगी टूलकिट च .less फाइलें च कुसै बी मिक्सिन दा इस्तेमाल करने च सक्षम बनांदी ऐ.

तो, अग्गे वद्धो ते मौजूदा दा इस्तेमाल करो या बेझिझक अपनी जरूरत दे अनुसार जोड़ो।

मिक्सिन शामिल कीते गे

उपयोगिताएं दा

मिक्सिन पैरामीटर दा प्रयोग करना
.clearfix() कोई नेईं अंदर फ्लोटें गी साफ करने आस्तै कुसै बी माता-पिता च जोड़ो
.tab-focus() कोई नेईं वेबकिट फोकस शैली ते गोल फायरफॉक्स रूपरेखा लागू करो
.center-block() कोई नेईं ऑटो सेंटर इक ब्लॉक-स्तरीय तत्व दा उपयोग करदे होईmargin: auto
.ie7-inline-block() कोई नेईं display: inline-blockIE7 समर्थन हासल करने लेई नियमित दे अलावा इस्तेमाल करो
.size() @height @width जल्दी जल्दी इक लाइन पर ऊंचाई ते चौड़ाई सेट करो
.square() @size .size()चौड़ाई ते ऊंचाई गी इक गै मान दे रूप च सेट करने आस्तै बिल्ड करदा ऐ
.opacity() @opacity पूर्ण संख्याएं च, अस्पष्टता प्रतिशत सेट करो (जियां, "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 % चौड़ी गटर कन्नै इक प्रतिशत ग्रिड प्रणाली पैदा करो
#grid > .input() @gridColumnWidth, @gridGutterWidth तत्वें लेई पिक्सेल ग्रिड प्रणाली पैदा करो input, पैडिंग ते सीमाएं लेई लेखा
.makeColumn @columns: 1, @offset: 0 क्लासें divदे बगैर कुसै गी बी ग्रिड स्तंभ च बदलो.span*

CSS3 गुण ऐ

मिक्सिन पैरामीटर दा प्रयोग करना
.border-radius() @radius किसी तत्व दे कोने गोल करो। इक इकल मूल्य जां चार स्पेस-अलग कीते गेदे मूल्य हो सकदे न
.box-shadow() @shadow इक तत्व च इक ड्रॉप शैडो जोड़ो
.transition() @transition CSS3 संक्रमण प्रभाव जोड़ो (जैसे, all .2s linear)
.rotate() @degrees इक तत्व गी n डिग्री घुमाओ
.scale() @ratio इक तत्व गी उसदे मूल आकार दा n गुणा स्केल करो
.translate() @x, @y x ते y विमानें पर इक तत्व गी लेई जाओ
.background-clip() @clip इक तत्व दी पृष्ठभूमि फसल करो (के लिए उपयोगी border-radius)
.background-size() @size CSS3 दे राहें पृष्ठभूमि छवियें दे आकार गी नियंत्रत करो
.box-sizing() @boxmodel इक तत्व आस्तै बॉक्स मॉडल बदलो (जियां, border-boxइक पूर्ण-चौड़ाई आस्तै input)
.user-select() @select इक पृष्ठ पर पाठ दे कर्सर चयन गी नियंत्रत करो
.backface-visibility() @visibility: visible CSS 3D ट्रांसफॉर्म दा इस्तेमाल करदे बेल्लै सामग्री दी झिलमिलाहट गी रोकना
.resizable() @direction: both दाएं ते थल्ले कुसै बी तत्व गी आकार बदलने योग्य बनाओ
.content-columns() @columnCount, @columnGap: @gridGutterWidth कुसै बी तत्व दी सामग्री गी CSS3 स्तंभें दा इस्तेमाल करो
.hyphens() @mode: auto CSS3 हाइफनेशन जदूं तुस चांह् दे ओ (शामल ऐ word-wrap: break-word)

पृष्ठभूमि ते ढाल

मिक्सिन पैरामीटर दा प्रयोग करना
#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 ढाल ते थोह् ड़ी-मती गहरी सीमा असाइन करने आस्तै बटनें आस्तै बरतेआ जंदा ऐ
नोट: जेकर तुस संशोधित CSS कन्नै GitHub गी इक पुल अनुरोध जमा करा करदे ओ तां तुसेंगी इनें तरीकें च कुसै बी तरीके कन्नै CSS गी दुबारा संकलित करना होग .

संकलन करने दे औजार

मेकफाइल कन्नै नोड

निम्नलिखित कमांड चलाइयै npm कन्नै LESS कमांड लाइन कंपाइलर, JSHint, Recess, ते uglify-js गी वैश्विक रूप कन्नै स्थापित करो:

$ npm स्थापित -जी कम jshint अवकाश uglify-जे एस

इक बारी इंस्टॉल होने पर बस makeअपनी बूटस्ट्रैप डायरेक्टरी दे रूट थमां चलाओ ते तुस सारे सेट होई गेदे ओ.

इसदे अलावा, जेकर तुंदे कोल watchr इंस्टॉल ऐ तां तुस make watchहर बारी बूटस्ट्रैप lib च इक फाइल गी संपादत करने पर बूटस्ट्रैप गी स्वतः दुबारा बनाने लेई चला सकदे ओ (इसदी लोड़ नेईं ऐ, सिर्फ इक सुविधा विधि)।

कमांड लाइन

नोड दे राहें LESS कमांड लाइन टूल गी इंस्टॉल करो ते निम्नलिखित कमांड चलाओ:

$ lessc ./less/bootstrap.less > बूटस्ट्रैप.सीएसएस

--compressजेकर तुस कुसै बाइटें गी बचाने दी कोशश करा दे ओ तां उस कमांड च शामल करना ज़रूरी ऐ !

जावास्क्रिप्ट

नवीनतम Less.js डाउनलोड करो ते इसदे लेई रस्ता (ते बूटस्ट्रैप) गी <head>.

<link rel = "स्टाइलशीट/कम" href = "/पथ/टू/बूटस्ट्रैप.कम" > <स्क्रिप्ट src = "/पथ/टू/कम.जेएस" ></स्क्रिप्ट>  
 

.less फाइलें गी दुबारा संकलित करने आस्तै, बस उनेंगी सेव करो ते अपने पेज गी दुबारा लोड करो. Less.js उनेंगी संकलित करदा ऐ ते उनेंगी लोकल स्टोरेज च संग्रहीत करदा ऐ।

गैर-सरकारी मैक ऐप

गैर-सरकारी मैक ऐप .less फाइलें दी डायरेक्टरी गी दिक्खदा ऐ ते दिक्खे गेदे .less फाइल दे हर सेव दे बाद कोड गी लोकल फाइलें च संकलित करदा ऐ।

जेकर तुस चांह् दे ओ तां तुस स्वचालित रूप कन्नै मिनीफाइंग करने आस्तै ऐप च प्राथमिकताएं गी टॉगल करी सकदे ओ ते संकलित फाइलें दा अंत कुस डायरेक्टरी च होंदा ऐ।

होर मैक ऐप

क्रंच करना

क्रंच एडोब एयर पर बने दा इक शानदार दिखने आला LESS एडिटर ते कंपाइलर ऐ।

कोडकिट ऐ

अनऑफिसियल मैक ऐप दे समान बंदे द्वारा बनाया गेदा, कोडकिट इक मैक ऐप ऐ जेह् ड़ा LESS, SASS, स्टाइलस, ते कॉफीस्क्रिप्ट गी संकलित करदा ऐ।

सादगी

LESS फाइलें दे ड्रैग ते ड्रॉप संकलन आस्तै मैक, लिनक्स, ते पीसी ऐप। प्लस, स्रोत कोड GitHub पर ऐ .