बूटस्ट्रॅपसह कमी वापरणे

बूटस्ट्रॅपचे CSS तयार करण्यासाठी वापरल्या जाणार्‍या व्हेरिएबल्स, मिक्सिन्स आणि अधिकचा फायदा घेण्यासाठी LESS, CSS प्रीप्रोसेसरसह बूटस्ट्रॅप सानुकूलित करा आणि विस्तारित करा.

कमी का?

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

काय समाविष्ट आहे?

CSS चा विस्तार म्हणून, LESS मध्ये व्हेरिएबल्स, कोडच्या पुन्हा वापरता येण्याजोग्या स्निपेट्ससाठी मिक्सिन्स, साध्या गणितासाठी ऑपरेशन्स, नेस्टिंग आणि अगदी कलर फंक्शन्स समाविष्ट आहेत.

अधिक जाणून घ्या

अधिक जाणून घेण्यासाठी http://lesscss.org/ येथे अधिकृत वेबसाइटला भेट द्या .

चल

CSS मध्ये रंग आणि पिक्सेल मूल्ये व्यवस्थापित करणे थोडे कष्टदायक असू शकते, सहसा कॉपी आणि पेस्टने भरलेले असते. कमी असले तरी नाही—रंग किंवा पिक्सेल व्हॅल्यू व्हेरिएबल्स म्हणून नियुक्त करा आणि ते एकदा बदला.

मिक्सन्स

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

ऑपरेशन्स

ऑपरेशन्ससह फ्लाय ऑन फ्लाय गणित करून तुमचा ग्रिड, अग्रगण्य आणि अधिक लवचिक बनवा. गुणाकार, भागाकार, जोडा आणि वजाबाकी CSS बुद्धीकडे जा.

हायपरलिंक्स

`@linkColor`	#08c	डीफॉल्ट लिंक मजकूर रंग
`@linkColorHover`	`darken(@linkColor, 15%)`	डीफॉल्ट लिंक मजकूर होव्हर रंग

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

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	६.३८२९७८७२३%
`@fluidGridGutterWidth`	2.127659574%

टायपोग्राफी

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

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

`@black`	#000
`@grayDarker`	#२२२
`@grayDark`	#३३३
`@gray`	#५५५
`@grayLight`	#९९९
`@grayLighter`	#eeee
`@white`	#fff

उच्चारण रंग

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

घटक

बटणे

`@primaryButtonBackground`	`@linkColor`

फॉर्म

`@placeholderText`	`@grayLight`

नवबार

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

फॉर्म राज्ये आणि सूचना

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#४६८८४७
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

मिक्सिन्स बद्दल

मूलभूत मिश्रण

मूलभूत मिक्सिन हे CSS च्या स्निपेटसाठी मूलत: समाविष्ट किंवा आंशिक असते. ते CSS वर्गाप्रमाणेच लिहिलेले आहेत आणि कुठेही कॉल केले जाऊ शकतात.

. घटक {
  . clearfix ();
}

पॅरामेट्रिक मिश्रण

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

. घटक {
  . सीमा - त्रिज्या ( 4px );
}

आपले स्वतःचे सहज जोडा

जवळपास सर्व बूटस्ट्रॅपचे मिश्रण 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`	फॉन्ट फॅमिली सेरिफवर सेट करा आणि आकार, वजन आणि अग्रगण्य नियंत्रित करा
`#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 % रुंद गटर असलेली एक अगोदरची ग्रीड प्रणाली तयार करा

CSS3 गुणधर्म

मिक्सिन	पॅरामीटर्स	वापर
`.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`	ग्रेडियंट आणि किंचित गडद सीमा नियुक्त करण्यासाठी बटणांसाठी वापरले जाते

टीप: तुम्ही सुधारित CSS सह GitHub वर पुल विनंती सबमिट करत असल्यास, तुम्ही यापैकी कोणत्याही पद्धतीद्वारे CSS पुन्हा कंपाइल करणे आवश्यक आहे.

संकलित करण्यासाठी साधने

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

खालील आदेश चालवून LESS कमांड लाइन कंपाइलर आणि uglify-js npm सह जागतिक स्तरावर स्थापित करा:

$npm install -g less ugliify-js

एकदा इंस्‍टॉल makeकेल्‍यावर तुमच्‍या बूटस्ट्रॅप डिरेक्‍ट्रीच्‍या रूटमधून रन करा आणि तुम्‍ही तयार आहात.

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

कमांड लाइन

नोडद्वारे LESS कमांड लाइन टूल स्थापित करा आणि खालील कमांड चालवा:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressतुम्ही काही बाइट्स सेव्ह करण्याचा प्रयत्न करत असल्यास त्या कमांडमध्ये नक्की समाविष्ट करा!

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

नवीनतम Less.js डाउनलोड करा आणि त्यात त्याचा मार्ग (आणि बूटस्ट्रॅप) समाविष्ट करा <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less फाइल्स पुन्हा संकलित करण्यासाठी, फक्त त्या जतन करा आणि तुमचे पृष्ठ रीलोड करा. Less.js त्यांना संकलित करते आणि स्थानिक स्टोरेजमध्ये संग्रहित करते.

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

अनधिकृत Mac अॅप .less फाइल्सच्या डिरेक्टरी पाहतो आणि पाहिल्या गेलेल्या .less फाइलच्या प्रत्येक सेव्हनंतर स्थानिक फाइल्समध्ये कोड संकलित करतो.

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

कमी सह बांधले

कमी का?

काय समाविष्ट आहे?

अधिक जाणून घ्या

चल

मिक्सन्स

ऑपरेशन्स

बूटस्ट्रॅप व्हेरिएबल्स कमी व्हेरिएबल्स, त्यांची मूल्ये आणि वापर मार्गदर्शक तत्त्वे

हायपरलिंक्स

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

टायपोग्राफी

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

उच्चारण रंग

घटक

बटणे

फॉर्म

नवबार

फॉर्म राज्ये आणि सूचना

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

मिक्सिन्स बद्दल

मूलभूत मिश्रण

पॅरामेट्रिक मिश्रण

आपले स्वतःचे सहज जोडा

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

उपयुक्तता

फॉर्म

टायपोग्राफी

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

CSS3 गुणधर्म

पार्श्वभूमी आणि ग्रेडियंट

कमी सह बूटस्ट्रॅप संकलित करत आहे

संकलित करण्यासाठी साधने

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

कमांड लाइन

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

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

अधिक Mac अॅप्स

क्रंच

कोडकिट

साधे