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

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

LESS कित्याक?

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

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

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

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

चड जाणून घेवपा खातीर 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 .
  हें . सीमा - त्रिज्या ( 4px );
} हें .

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

Bootstrap च्या लागीं लागीं सगळे मिक्सिन mixins.less त सांठयल्ले आसात, एक अद्भुत उपयुक्तताय .less फायल जी तुमकां टूलकिटांतल्या खंयच्याय .less फायलींनी मिक्सिन वापरपाक सक्षम करता.

तर, मुखार वचून सद्याचे वापरात वा तुमकां जाय तशी तुमचीं जोडपाक मेकळीक दिवची.

मिक्सिनांचो आस्पाव केला

उपयुक्तताय

मिक्सिन हें नांव	मापदंड	वापर
`.clearfix()`	कांयच ना	भितर फ्लोट निवळ करपाक खंयच्याय पालकांत जोडात
`.tab-focus()`	कांयच ना	वेबकिट फोकस शैली आनी वाटकुळी फायरफॉक्स बाह्यरेखा लागू करात
`.center-block()`	कांयच ना	ऑटो सेंटर एक ब्लॉक-स्तरीय घटक वापरून`margin: auto`
`.ie7-inline-block()`	कांयच ना	`display: inline-block`IE7 आदार मेळोवपाक नेमान व्यतिरिक्त वापरात
`.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 फायलीन दरेक सेव्ह केल्या उपरांत कोड थळाव्या फायलींनी संकलित करता.

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

LESS च्या आदारान बांदिल्लें

LESS कित्याक?

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

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

चड-उणें

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

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

बूटस्ट्रॅप चड-उणें LESS चड-उणें, तांचीं मोलां, आनी वापर मार्गदर्शक तत्वां

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

जाळी पद्दत

मुद्रणकला

कोश्टकां

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

उच्चार रंग

घटकांचो आस्पाव जाता

बटणां घालतात

रूपां

राज्यां आनी सावधानताय तयार करात

नवबर हें नांव

ड्रॉपडावन करतात

नायक एकक

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

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

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

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

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

मिक्सिनांचो आस्पाव केला

उपयुक्तताय

रूपां

मुद्रणकला

जाळी पद्दत

CSS3 गुणधर्म

पार्श्वभूंय आनी प्रवणताय

LESS कडेन बूटस्ट्रॅप संकलित करप

संकलन करपाखातीर साधनां

मेकफायल आशिल्ली नोड

आदेश ओळ

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

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

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

क्रंच करप

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

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