बूटस्ट्रैप

बूटस्ट्रैप के साथ LESS का प्रयोग

बूटस्ट्रैप कें CSS कें निर्माण कें लेल उपयोग कैल जाय वाला चर, मिक्सिन, आ बेसि कें लाभ उठावय कें लेल LESS , एकटा CSS प्रीप्रोसेसर कें साथ बूटस्ट्रैप कें अनुकूलित आ विस्तारित करूं .

LESS के साथ निर्मित

कम कियैक ?

बूटस्ट्रैप अपन मूल में LESS के साथ बनाओल गेल अछि, एकटा गतिशील स्टाइलशीट भाषा जे हमर नीक दोस्त, Alexis Sellier द्वारा बनाओल गेल अछि . इ सिस्टम आधारित सीएसएस कें विकास कें तेज, आसान आ मजेदार बनायत छै.

की शामिल अछि ?

CSS कें विस्तार कें रूप मे, LESS मे चर, कोड कें पुन: उपयोग करय योग्य स्निपेट कें लेल मिक्सिन, सरल गणित, नेस्टिंग, आ यहां तक ​​कि रंग फंक्शन कें लेल ऑपरेशन शामिल छै.

और जानें

कम सीएसएस

अधिक जानय लेल आधिकारिक वेबसाइट http://lesscss.org/ पर जाउ.

चर

सीएसएस म॑ रंग आरू पिक्सेल मान क॑ प्रबंधित करना कनी दर्दनाक होय सकै छै, जे आमतौर प॑ कॉपी आरू पेस्ट स॑ भरलऽ छै । यद्यपि LESS के साथ नै—रंग या पिक्सेल मान के चर के रूप में असाइन करू आ एक बेर बदलू.

मिक्सिन

ओ तीनू सीमा-त्रिज्या घोषणा अहाँ के नियमित ol' CSS में करय के जरूरत अछि? आब ओ सभ मिक्सिन के मदद सं एक लाइन पर उतरि गेल अछि, कोड के स्निपेट जेकरा अहां कतहु दोबारा इस्तेमाल क सकय छी.

संचालन

ऑपरेशन के साथ मक्खी पर गणित क क अपन ग्रिड, लीडिंग, आओर बेसी सुपर लचीला बनाउ. CSS सेनिटी के लेल अपन तरीका के गुणा करू, विभाजित करू, जोड़ू, आ घटाउ.

बूटस्ट्रैप चर LESS चर, ओकर मान, आ उपयोग दिशा निर्देश

मचान एवं लिंक

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

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

@gridColumns 12
@gridColumnWidth 60px के
@gridGutterWidth 20px के
@fluidGridColumnWidth ६.३८२९७८७२३% अछि ।
@fluidGridGutterWidth २.१२७६५९५७४% २.

टाइपोग्राफी

@sansFontFamily "हेल्वेटिका न्यू", हेल्वेटिका, एरियल, बिना सेरिफ
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily मेनलो, मोनाको, "कूरियर नया", मोनोस्पेस
@baseFontSize 13px के पिक्सेल हेबाक चाही
@baseFontFamily @sansFontFamily
@baseLineHeight 18px के पिक्सेल हेबाक चाही
@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 # fff

उच्चारण रंग

@blue # 049सीडीबी
@green # 46क546
@red # 9d261d
@yellow # ffc40d
@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 # f3edd2
@errorText # ख94क48
@errorBackground # च2दे
@successText # 468847
@successBackground # dff0d8
@infoText # 3a87ad
@infoBackground # d9edf7

नवबर

@navbarHeight 40px के
@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

हीरो इकाई

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

बूटस्ट्रैप मिक्सिन

मिक्सिन के बारे में

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

बेसिक मिक्सिन अनिवार्य रूप सं सीएसएस कें एकटा स्निपेट कें लेल एकटा शामिल या आंशिक छै. ई सब ठीक सीएसएस क्लास के तरह लिखल गेल अछि आ एकरा कतहु कहल जा सकैत अछि.

  1. . तत्व { 1।
  2.   . क्लियरफिक्स ();
  3. } .

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

पैरामेट्रिक मिक्सिन ठीक एक बेसिक मिक्सिन के तरह छै, लेकिन ई वैकल्पिक डिफ़ॉल्ट मान के साथ पैरामीटर (अतः नाम) भी स्वीकार करै छै.

  1. . तत्व { 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() कोनो नहि कोनो तत्व के 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 कॉलम कें उपयोग करय कें बनाऊं

पृष्ठभूमि एवं ढाल

मिक्सिन पैरामीटर प्रयोग
#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 के साथ बूटस्ट्रैप संकलित करब

नोट: यदि अहां संशोधित CSS कें साथ GitHub कें लेल कोनों पुल अनुरोध जमा करय रहल छी, त अहां कें अइ मे सं कोनों विधि कें माध्यम सं CSS कें पुनः संकलित करनाय होयत .

संकलन के लिये उपकरण

मेकफाइल के साथ नोड

निम्नलिखित कमांड चला कए LESS कमांड लाइन कंपाइलर आओर uglify-js कए npm क संग ग्लोबल रूप स इंस्टॉल करू:

$ npm स्थापित -g कम uglify-js

एक बेर इंस्टॉल भ गेलाक बाद बस makeअपन बूटस्ट्रैप डाइरेक्टरी के रूट सं चलाउ आओर अहां सभ सेट भ जाएब.

एकर अतिरिक्त, यदि अहां कें पास watchr इंस्टॉल छै, त अहां make watchहर बेर जखन अहां bootstrap lib मे कोनों फाइल कें संपादित करय छी तखन bootstrap कें स्वचालित रूप सं पुनर्निर्माण करय कें लेल चला सकय छी (ई आवश्यक नहि छै, बस एकटा सुविधा विधि छै).

कमांड लाइन

नोड के माध्यम स LESS कमांड लाइन टूल इंस्टॉल करू आओर निम्नलिखित कमांड चलाउ:

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

--compressजँ अहाँ किछु बाइट सहेजबाक प्रयास क' रहल छी तँ ओहि कमांड मे अवश्य शामिल करू !

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

नवीनतम Less.js डाउनलोड करू आओर एकर पथ (आ बूटस्ट्रैप) मे शामिल करू <head>.

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

.less फाइलकेँ पुनः संकलित करबाक लेल, बस ओकरा सहेजू आ अपन पृष्ठकेँ पुनः लोड करू। Less.js ओकरा संकलित करयत छै आ ओकरा स्थानीय भंडारण मे संग्रहीत करयत छै.

अनौपचारिक मैक ऐप

अनौपचारिक मैक ऐप .less फाइल कें डायरेक्टरी कें देखयत छै आ देखल गेल .less फाइल कें हर सेव कें बाद कोड कें स्थानीय फाइल मे संकलित करयत छै.

अगर अहां चाहय छी त अहां ऐप मे वरीयता कए ऑटोमैटिक मिनिफाइंग क लेल टॉगल क सकय छी आओर संकलित फाइल कोन डाइरेक्टरी मे खतम भ जाएत अछि.

अधिक मैक ऐप्स

क्रंच

क्रंच एडोब एयर पर बनल एकटा बढ़िया देखय वाला LESS एडिटर आ कंपाइलर अछि.

कोडकिट

अनौपचारिक मैक ऐप केरऽ समान आदमी द्वारा बनालऽ गेलऽ कोडकिट एगो मैक ऐप छै जे LESS, SASS, Stylus, आरू CoffeeScript क॑ संकलित करै छै ।

सरलताहीन

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