Bootstrap चो CSS तयार करपाक वापरिल्ल्या चड-उणें, मिक्सिन आनी हेरांचो फायदो घेवपाक LESS , एक CSS प्रीप्रोसेसर, कडेन Bootstrap पसंतीचें आनी विस्तार करचें .
बूटस्ट्रॅप ताच्या मुळाक LESS कडेन तयार केला, आमचो बरो इश्ट, Alexis Sellier हांणी तयार केल्ली एक गतिशील स्टाइलशीट भास . ताका लागून प्रणाली आदारीत CSS विकसीत करप बेगीन, सोंपें आनी चड मजा जाता.
CSS चो विस्तार म्हूण, LESS हातूंत चड-उणें, कोडाच्या परत वापरपाक येवपी स्निपेटांखातीर मिक्सिन, साद्या गणिताखातीर ऑपरेशनां, नेस्टिंग, आनी रंग कार्यां लेगीत आसतात.
CSS त रंग आनी पिक्सेल मोलां वेवस्थापन करप मात्शी वेदना जावंक शकता, चड करून कॉपी आनी पेस्ट भरून. LESS कडेन तरी न्हय-रंग वा पिक्सेल मोलां चड-उणें म्हणून नेमून एकदां बदलात.
तीं तीन शिमे-त्रिज्या घोशणां तुमकां नियमित ol' CSS त करपाक जाय? आतां ते मिक्सिनाच्या आदारान एक ओळी मेरेन देंवल्यात, कोडाचे स्निपेट तुमी खंयच्याय सुवातेर परत वापरूं येता.
ऑपरेशनां सयत गणित माशीचेर करून तुमची ग्रिड, लीडिंग, आनी चड सुपर लवचीक करात. CSS sanity कडेन तुमचो मार्ग गुणाकार करचो, भाग करचो, जोडचो आनी वजा करचो.
@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 |
# 46a546 हें नांव | |
@red |
# 9d261d हें नांव | |
@yellow |
# ffc40d हें नांव | |
@orange |
# f89406 हें नांव | |
@pink |
# c3325f हें नांव | |
@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 |
# f2दे हें नांव | |
@successText |
# 468847 हें नांव | |
@successBackground |
# dff0d8 हें नांव | |
@infoText |
# 3a87ad हें नांव | |
@infoBackground |
# d9edf7 हें नांव |
मुळावो मिक्सिन हो मुळाव्यान 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: 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 |
फॉन्ट कुटुंब serif कडेन सेट करात, आनी आकार, वजन, आनी लीडिंग नियंत्रीत करात |
#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 प्रतिष्ठापीत आसल्यार, तुमी bootstrap lib त फायल संपादीत करतना दर खेपे bootstrap आपसूक परतून तयार करपाक धांवपाक शकतात make watch
(हाची गरज ना, फकत सोयीची पद्दत).
Node वरवीं LESS आदेश ओळी साधन प्रतिष्ठापीत करात आनी सकयल दिल्लो आदेश चालीक लावचो:
$ lessc ./lib/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 चेर आसा .