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

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

कमी का?

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

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

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

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

कमी CSS

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

चल

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

मिक्सन्स

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

ऑपरेशन्स

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

मचान आणि दुवे

@bodyBackground @white पृष्ठ पार्श्वभूमी रंग
@textColor @grayDark संपूर्ण मुख्य भाग, शीर्षके आणि अधिकसाठी डीफॉल्ट मजकूर रंग
@linkColor #08c डीफॉल्ट लिंक मजकूर रंग
@linkColorHover darken(@linkColor, 15%) डीफॉल्ट लिंक मजकूर होव्हर रंग

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

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

टायपोग्राफी

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@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 #२२२
@grayDark #३३३
@gray #५५५
@grayLight #९९९
@grayLighter #eeee
@white #fff

उच्चारण रंग

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

घटक

बटणे

@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 #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #४६८८४७
@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. . घटक {
  2. . clearfix ();
  3. }

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

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

  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 स्तंभ वापरा
.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 पुन्हा कंपाइल करणे आवश्यक आहे.

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

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

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

$npm install -g less jshint recess ugliify-js

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

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

कमांड लाइन

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

$lessc ./less/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 फाइलच्या प्रत्येक सेव्हनंतर स्थानिक फाइल्समध्ये कोड संकलित करतो.

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

अधिक Mac अॅप्स

क्रंच

Crunch हा Adobe Air वर तयार केलेला एक उत्कृष्ट दिसणारा कमी संपादक आणि कंपाइलर आहे.

कोडकिट

अनधिकृत Mac अॅप सारख्याच व्यक्तीने तयार केलेले, CodeKit एक Mac अॅप आहे जे LESS, SASS, Stylus आणि CoffeeScript संकलित करते.

साधे

कमी फाइल्सच्या ड्रॅग आणि ड्रॉप संकलित करण्यासाठी Mac, Linux आणि PC अॅप. शिवाय, स्त्रोत कोड GitHub वर आहे .