Bootstrap इत्यनेन सह LESS इत्यस्य उपयोगः

Bootstrap इत्यस्य CSS इत्यस्य निर्माणार्थं प्रयुक्तानां चरानाम्, mixins, इत्यादीनां लाभं ग्रहीतुं LESS , CSS पूर्वसंसाधकेन सह Bootstrap इत्यस्य अनुकूलनं विस्तारं च कुर्वन्तु ।

LESS किमर्थम् ?

Bootstrap इत्यस्य मूलं LESS इत्यनेन सह निर्मितम् अस्ति, अस्माकं सुहृद्, Alexis Sellier इत्यनेन निर्मितं गतिशीलं शैलीपत्रकभाषा । एतेन सिस्टम्-आधारित-CSS-विकासः द्रुततरः, सुलभः, अधिकः च मजेयः भवति ।

किं समाविष्टम् ?

CSS इत्यस्य विस्ताररूपेण LESS इत्यत्र चराः, कोडस्य पुनःप्रयोज्यस्निपेट् कृते मिक्सिन्, सरलगणितस्य कृते क्रियाः, नेस्टिङ्ग्, अपि च वर्णकार्यं च समाविष्टम् अस्ति ।

अधिकं ज्ञातुं शक्नुवन्ति

अधिकं ज्ञातुं http://lesscss.org/ इति आधिकारिकजालस्थलं पश्यन्तु ।

चर

CSS मध्ये वर्णानाम्, पिक्सेलमूल्यानां च प्रबन्धनं किञ्चित् दुःखं भवितुम् अर्हति, प्रायः प्रतिलिपि-चिनोतिभिः पूर्णम् । न तु LESS इत्यनेन सह—वर्णान् वा पिक्सेलमूल्यानि वा चररूपेण नियुक्तं कृत्वा एकवारं परिवर्तयन्तु ।

मिक्सिन्

तानि त्रीणि सीमा-त्रिज्या-घोषणानि भवन्तः नियमितरूपेण ol' CSS मध्ये कर्तुं आवश्यकाः? इदानीं ते mixins इत्यस्य साहाय्येन एकां पङ्क्तिं यावत् अधः सन्ति, कोडस्य स्निपेट् भवन्तः कुत्रापि पुनः उपयोक्तुं शक्नुवन्ति ।

संचालन

ऑपरेशनों के साथ मक्खी पर गणित करके अपनी जाल, अग्रणी, और अधिक सुपर लचीला करें। CSS sanity इत्यस्य मार्गं गुणयतु, विभज्य, योजयतु, घटयतु च ।

मचान एवं लिंक

`@bodyBackground`	`@white`	पृष्ठ पृष्ठभूमि रंग
`@textColor`	`@grayDark`	सम्पूर्णशरीरस्य, शीर्षकस्य, इत्यादीनां कृते पूर्वनिर्धारितपाठवर्णः
`@linkColor`	`#08c`	पूर्वनिर्धारित लिङ्क पाठ रंग
`@linkColorHover`	`darken(@linkColor, 15%)`	पूर्वनिर्धारित लिङ्क पाठ होवर रंग

जाल प्रणाली

`@gridColumns`	१२
`@gridColumnWidth`	६०px इति
`@gridGutterWidth`	२०px इति
`@fluidGridColumnWidth`	६.३८२९७८७२३% २.
`@fluidGridGutterWidth`	२.१२७६५९५७४% २.

टाइपोग्राफी

`@sansFontFamily`	"हेल्वेटिका न्यू", हेल्वेटिका, एरियल, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	मेनलो, मोनाको, "कूरियर नई", मोनोस्पेस
`@baseFontSize`	१३px	पिक्सेलः भवितुमर्हति
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	१८px इति	पिक्सेलः भवितुमर्हति
`@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`	# 049cdb
`@green`	# ४६अ५४६
`@red`	# 9d261d
`@yellow`	# ffc40d
`@orange`	# च८९४०६
`@pink`	# ग3325च
`@purple`	# ७अ४३ख६

घटकाः

बटन्स्

`@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`	# ख९४अ४८
`@errorBackground`	# च२देदे
`@successText`	# ४६८८४७
`@successBackground`	# dff0d8 इति
`@infoText`	# ३अ८७अद्
`@infoBackground`	# घ९एडफ७

नवबर

`@navbarHeight`	४०px इति
`@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`

नायक इकाई

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

मिक्सिन के बारे में

मूलभूत मिक्सिन

मूलभूतं mixin मूलतः CSS इत्यस्य स्निपेट् कृते include अथवा partial भवति । ते CSS वर्ग इव लिखिताः सन्ति तथा च कुत्रापि आह्वयितुं शक्यन्ते।

. तत्व { .
  . clearfix ();
} इति ।

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

पैरामीटर् मिक्सिन् मूलभूतमिक्सिन् इव भवति, परन्तु वैकल्पिकपूर्वनिर्धारितमूल्यानां सह पैरामीटर् (अतः नाम) अपि स्वीकुर्वति ।

. तत्व { .
  . सीमा - त्रिज्या ( 4px );
} इति ।

सहजतया स्वस्य योजयन्तु

Bootstrap इत्यस्य प्रायः सर्वाणि mixins mixins.less इत्यत्र संगृहीताः सन्ति, एषा अद्भुता उपयोगिता .less सञ्चिका अस्ति या भवन्तं toolkit मध्ये .less सञ्चिकासु कस्यापि मध्ये mixin इत्यस्य उपयोगं कर्तुं समर्थयति

अतः, अग्रे गत्वा विद्यमानानाम् उपयोगं कुर्वन्तु अथवा आवश्यकतानुसारं स्वस्य योजयितुं निःशङ्कं भवन्तु।

मिक्सिन शामिल हैं

उपयोगिताएँ

मिक्सिन्	पैरामीटर्	प्रयोगः
`.clearfix()`	न कश्चित्	अन्तः प्लवकानि स्पष्टीकर्तुं कस्मिन् अपि मातापितरं योजयन्तु
`.tab-focus()`	न कश्चित्	Webkit फोकस शैली तथा गोल Firefox outline प्रयोजयन्तु
`.center-block()`	न कश्चित्	Auto center एक ब्लॉक-स्तरीय तत्व का उपयोग करते हुए`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()`	न कश्चित्	एकं तत्वं serif font stack इत्यस्य उपयोगं कुर्वन्तु
`#font > #family > .sans-serif()`	न कश्चित्	sans-serif font stack इत्यस्य उपयोगं कृत्वा element इत्यस्य उपयोगं कुर्वन्तु
`#font > #family > .monospace()`	न कश्चित्	एकं एलिमेण्ट् एकं monospace font stack इत्यस्य उपयोगं कुर्वन्तु
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	फॉन्ट आकारः, भारः, अग्रणी च सुलभतया सेट् कुर्वन्तु
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	font family इत्येतत् serif इत्यत्र सेट् कुर्वन्तु, तथा च आकारं, भारं, leading च नियन्त्रयन्तु
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	font family इत्येतत् sans-serif इत्यत्र सेट् कुर्वन्तु, तथा च आकारं, भारं, leading च नियन्त्रयन्तु
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	font family इत्येतत् monospace इत्यत्र सेट् कुर्वन्तु, तथा च आकारं, भारं, leading च नियन्त्रयन्तु

जाल प्रणाली

मिक्सिन्	पैरामीटर्	प्रयोगः
`.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 स्तम्भानां उपयोगं कुर्वन्तु

पृष्ठभूमि एवं ढाल

मिक्सिन्	पैरामीटर्	प्रयोगः
`#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 आदेशपङ्क्तिसंकलकं तथा uglify-js वैश्विकरूपेण संस्थापयन्तु:

$ npm संस्थापन -g कम uglify-js

एकदा संस्थापितं जातं चेत् केवलं makeभवतः bootstrap निर्देशिकायाः मूलतः चालयन्तु तथा च भवन्तः सर्वे सेट् भवन्ति ।

अतिरिक्तरूपेण, यदि भवतां समीपे 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 इत्यनेन सह Bootstrap इत्यस्य संकलनम्

संकलनार्थं साधनानि

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

आदेशपङ्क्तिः

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

अनधिकृत मैक एप्लिकेशन

अधिकानि Mac एप्स

क्रन्च इति

कोडकिट

सरलम्