बुटस्ट्र्यापको साथ कम प्रयोग गर्दै
बुटस्ट्र्यापको CSS निर्माण गर्न प्रयोग हुने चरहरू, मिक्सिनहरू र थपको फाइदा लिनको लागि LESS , CSS प्रीप्रोसेसरको साथ बुटस्ट्र्यापलाई अनुकूलित र विस्तार गर्नुहोस् ।
कम संग निर्मित
किन कम?
बुटस्ट्र्याप यसको मूलमा LESS को साथ बनाइएको छ, हाम्रो असल मित्र, एलेक्सिस सेलियर द्वारा सिर्जना गरिएको गतिशील स्टाइलसिट भाषा । यसले प्रणालीमा आधारित CSS लाई छिटो, सजिलो र थप रमाइलो बनाउँछ।
के समावेश छ?
CSS को विस्तारको रूपमा, LESS मा चरहरू, कोडको पुन: प्रयोज्य स्निपेटहरूका लागि मिक्सिनहरू, साधारण गणितका लागि अपरेशनहरू, नेस्टिङ, र रङ कार्यहरू पनि समावेश हुन्छन्।
चरहरू
CSS मा रङ र पिक्सेल मानहरू प्रबन्ध गर्न अलिकति पीडा हुन सक्छ, सामान्यतया प्रतिलिपि र टाँस्ने। कम भए तापनि - चरको रूपमा रङ वा पिक्सेल मानहरू असाइन गर्नुहोस् र तिनीहरूलाई एक पटक परिवर्तन गर्नुहोस्।
मिक्सन
ती तीन सीमाना-त्रिज्य घोषणाहरू तपाईंले नियमित ol' CSS मा गर्न आवश्यक छ? अब तिनीहरू मिक्सिनको मद्दतले एक लाइनमा तल छन्, कोडको स्निपेटहरू जुन तपाईंले कहिँ पनि पुन: प्रयोग गर्न सक्नुहुन्छ।
सञ्चालनहरू
आफ्नो ग्रिड, अग्रणी, र थप सुपर लचिलो बनाउनुहोस् अपरेसनहरूसँग उडानमा गणित गरेर। CSS सेनिटीमा तपाईंको बाटोमा गुणन, विभाजन, थप्नुहोस् र घटाउनुहोस्।
बुटस्ट्र्याप चर कम चर, तिनीहरूको मान, र उपयोग दिशानिर्देशहरू
मचान र लिङ्कहरू
@bodyBackground |
@white |
पृष्ठ पृष्ठभूमि रङ | |
@textColor |
@grayDark |
सम्पूर्ण शरीर, शीर्षकहरू, र थपको लागि पूर्वनिर्धारित पाठ रङ | |
@linkColor |
#08c |
पूर्वनिर्धारित लिङ्क पाठ रङ | |
@linkColorHover |
darken(@linkColor, 15%) |
पूर्वनिर्धारित लिङ्क पाठ होभर रंग |
ग्रिड प्रणाली
@gridColumns |
१२ |
@gridColumnWidth |
६० पिक्सेल |
@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 कक्षा जस्तै लेखिएका छन् र जहाँ पनि कल गर्न सकिन्छ।
- । तत्व {
- । clearfix ();
- }
प्यारामेट्रिक मिश्रण
एक प्यारामेट्रिक मिक्सिन आधारभूत मिक्सन जस्तै हो, तर यसले वैकल्पिक पूर्वनिर्धारित मानहरूसँग प्यारामिटरहरू (यसैले नाम) पनि स्वीकार गर्दछ।
- । तत्व {
- । किनारा - त्रिज्या ( 4px );
- }
सजिलै आफ्नो आफ्नो थप्नुहोस्
बुटस्ट्र्यापका लगभग सबै मिक्सिनहरू 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 |
ग्रेडियन्ट र थोरै गाढा किनारा तोक्न बटनहरूको लागि प्रयोग गरिन्छ |
कम संग बुटस्ट्र्याप कम्पाइल गर्दै
संकलनका लागि उपकरणहरू
मेकफाइलको साथ नोड
निम्न आदेश चलाएर कम कमाण्ड लाइन कम्पाइलर, JSHint, Recess, र uglify-js लाई विश्वव्यापी रूपमा npm को साथ स्थापना गर्नुहोस्:
$ npm install -g less jshint recess uglify-js
एकचोटि स्थापना भएपछि makeतपाईको बुटस्ट्र्याप डाइरेक्टरीको रूटबाट चलाउनुहोस् र तपाई सबै सेट हुनुहुन्छ।
थप रूपमा, यदि तपाइँसँग वाचर स्थापना भएको छ भने, तपाइँले बुटस्ट्र्याप लिबमा फाइल सम्पादन गर्दा प्रत्येक चोटि बुटस्ट्र्याप स्वचालित रूपमा पुन: निर्माण गर्न चलाउन make watchसक्नुहुन्छ (यो आवश्यक छैन, केवल एक सुविधा विधि)।
कमाण्ड लाइन
नोड मार्फत कम कमाण्ड लाइन उपकरण स्थापना गर्नुहोस् र निम्न आदेश चलाउनुहोस्:
$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 ले तिनीहरूलाई कम्पाइल गर्छ र तिनीहरूलाई स्थानीय भण्डारणमा भण्डार गर्छ।
अनौपचारिक म्याक एप
अनौपचारिक म्याक एपले कम फाइलहरूको डाइरेक्टरीहरू हेर्छ र हेरिएको कम फाइलको प्रत्येक बचत पछि स्थानीय फाइलहरूमा कोड कम्पाइल गर्छ।
यदि तपाइँ चाहनुहुन्छ भने, तपाइँ एपमा प्राथमिकताहरू टगल गर्न सक्नुहुन्छ स्वचालित मिनिफाइङ र कुन डाइरेक्टरीमा कम्पाइल गरिएका फाइलहरू समाप्त हुन्छन्।
थप म्याक एपहरू
क्रन्च
Crunch Adobe Air मा निर्मित उत्कृष्ट देखिने कम सम्पादक र कम्पाइलर हो।
कोडकिट
अनौपचारिक म्याक एपको रूपमा उही केटाद्वारा सिर्जना गरिएको, कोडकिट एउटा म्याक एप हो जसले कम, SASS, स्टाइलस, र कफीस्क्रिप्ट कम्पाइल गर्छ।
सरल
म्याक, लिनक्स र कम फाइलहरूको कम्पाइलिङ ड्र्याग र ड्रपको लागि PC एप। साथै, स्रोत कोड GitHub मा छ ।