बूटस्ट्रॅपा वांगडा LESS वापरप

Bootstrap चो CSS तयार करपाक वापरिल्ल्या चड-उणें, मिक्सिन आनी हेरांचो फायदो घेवपाक LESS , एक CSS प्रीप्रोसेसर, कडेन Bootstrap पसंतीचें आनी विस्तार करचें .

LESS कित्याक?

बूटस्ट्रॅप ताच्या मुळाक LESS कडेन तयार केला, आमचो बरो इश्ट, Alexis Sellier हांणी तयार केल्ली एक गतिशील स्टाइलशीट भास . ताका लागून प्रणाली आदारीत CSS विकसीत करप बेगीन, सोंपें आनी चड मजा जाता.

कितें आस्पावलां?

CSS चो विस्तार म्हूण, LESS हातूंत चड-उणें, कोडाच्या परत वापरपाक येवपी स्निपेटांखातीर मिक्सिन, साद्या गणिताखातीर ऑपरेशनां, नेस्टिंग, आनी रंग कार्यां लेगीत आसतात.

चड जाणून घेयात

LESS CSS हें नांव

चड जाणून घेवपा खातीर http://lesscss.org/ ह्या अधिकृत संकेतथळाक भेट दिवची .

चड-उणें

CSS त रंग आनी पिक्सेल मोलां वेवस्थापन करप मात्शी वेदना जावंक शकता, चड करून कॉपी आनी पेस्ट भरून. LESS कडेन तरी न्हय-रंग वा पिक्सेल मोलां चड-उणें म्हणून नेमून एकदां बदलात.

मिक्सिन हें वखद

तीं तीन शिमे-त्रिज्या घोशणां तुमकां नियमित ol' CSS त करपाक जाय? आतां ते मिक्सिनाच्या आदारान एक ओळी मेरेन देंवल्यात, कोडाचे स्निपेट तुमी खंयच्याय सुवातेर परत वापरूं येता.

ऑपरेशन्स करतात

ऑपरेशनां सयत गणित माशीचेर करून तुमची ग्रिड, लीडिंग, आनी चड सुपर लवचीक करात. CSS sanity कडेन तुमचो मार्ग गुणाकार करचो, भाग करचो, जोडचो आनी वजा करचो.

पाळणी आनी दुवे

@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 # 46a546 हें नांव
@red # 9d261d हें नांव
@yellow # ffc40d हें नांव
@orange # f89406 हें नांव
@pink # c3325f हें नांव
@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 # f2दे हें नांव
@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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

नायक एकक

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

मिक्सिन हांचेविशीं

मुळावें मिक्सिन

मुळावो मिक्सिन हो मुळाव्यान CSS च्या स्निपेटाखातीर एक समाविष्ट वा आंशिक आसता. तीं फकत CSS वर्गा सारकीं बरयल्लीं आसतात आनी खंयच्याय सुवातेर कॉल करूं येतात.

  1. हें . तत्व { 1 .
  2. हें . स्पश्ट करप ();
  3. } हें .

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

पॅरामीटरिक मिक्सिन हो फकत मुळाव्या मिक्सिन सारकोच आसता, पूण तो पर्यायी मुलभूत मोलां आशिल्ले मापदंडय (देखून नांव) स्वीकारता.

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

सहजतायेन आपलें जोडचें

Bootstrap च्या लागीं लागीं सगळे मिक्सिन 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 फॉन्ट कुटुंब serif कडेन सेट करात, आनी आकार, वजन, आनी लीडिंग नियंत्रीत करात
#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 स्थापन करचें -g कमी jshint अवकाश uglify-js

एकदां प्रतिष्ठापीत केल्या उपरांत फकत makeतुमच्या बूटस्ट्रॅप निर्देशिकेच्या मुळा वयल्यान चालयात आनी तुमी सगळे सेट जाल्यात.

ते भायर, तुमचे कडेन watchr प्रतिष्ठापीत आसल्यार, तुमी bootstrap lib त फायल संपादीत करतना दर खेपे bootstrap आपसूक परतून तयार करपाक धांवपाक शकतात make watch(हाची गरज ना, फकत सोयीची पद्दत).

आदेश ओळ

Node वरवीं LESS आदेश ओळी साधन प्रतिष्ठापीत करात आनी सकयल दिल्लो आदेश चालीक लावचो:

$ lessc ./less/bootstrap.less > बूटस्ट्रॅप.css

--compressतुमी कांय बाइट जतनाय घेवपाचो यत्न करीत जाल्यार त्या आदेशांत आस्पाव करपाची खात्री करात !

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

नवीनतम Less.js डावनलोड करात आनी ताचो मार्ग (आनी Bootstrap) हातूंत समाविष्ट करात <head>.

<link rel = "स्टाइलशीट/उणें" href = "/मार्ग/ते/बूटस्ट्रॅप.उणें" > <script src = "/मार्ग/ते/उणें. js" ></script>  
 

.less फायली परतून संकलित करपाक, फकत तीं जतनाय घेयात आनी तुमचें पान परतून लोड करात. Less.js तांकां संकलित करता आनी थळाव्या सांठवणेंत सांठयता.

अनधिकृत मॅक अॅप

अनधिकृत Mac ऍप्लिकेशन .less फायलींच्यो निर्देशिका पळयता आनी पळयल्ल्या .less फायलीन दरेक सेव्ह केल्या उपरांत कोड थळाव्या फायलींनी संकलित करता.

तुमकां आवडल्यार, तुमी स्वयंचलित ल्हान करपा खातीर ऍप्लिकेशनांत प्राधान्यां टॉगल करूंक शकतात आनी संकलित फायली खंयच्या निर्देशिकेंत सोंपतात.

चड मॅक ऍप्लिकेशनां

क्रंच करप

Crunch हो Adobe Air चेर तयार केल्लो एक उत्कृश्ट दिसपी LESS संपादक आनी संकलक.

कोडकिट हें नांव

अनधिकृत मॅक ऍप्लिकेशनाच्याच मनशान तयार केल्लो, कोडकिट हो एक मॅक अॅप जो LESS, SASS, Stylus, आनी कॉफीस्क्रिप्ट संकलित करता.

सादें नाशिल्लें

LESS फायलींचें ड्रॅग आनी ड्रॉप संकलन करपा खातीर मॅक, लिनक्स, आनी पीसी अॅप. प्लस, स्त्रोत कोड GitHub चेर आसा .