Bootstrap इत्यनेन सह LESS इत्यस्य उपयोगः
Bootstrap इत्यस्य CSS इत्यस्य निर्माणार्थं प्रयुक्तानां चरानाम्, mixins, इत्यादीनां लाभं ग्रहीतुं LESS , CSS पूर्वसंसाधकेन सह Bootstrap इत्यस्य अनुकूलनं विस्तारं च कुर्वन्तु ।
LESS इत्यनेन निर्मितम्
LESS किमर्थम् ?
Bootstrap इत्यस्य मूलं LESS इत्यनेन सह निर्मितम् अस्ति, अस्माकं सुहृद्, Alexis Sellier इत्यनेन निर्मितं गतिशीलं शैलीपत्रकभाषा । एतेन सिस्टम्-आधारित-CSS-विकासः द्रुततरः, सुलभः, अधिकः च मजेयः भवति ।
किं समाविष्टम् अस्ति ?
CSS इत्यस्य विस्ताररूपेण LESS इत्यत्र चराः, कोडस्य पुनःप्रयोज्यस्निपेट् कृते मिक्सिन्, सरलगणितस्य कृते क्रियाः, नेस्टिङ्ग्, अपि च वर्णकार्यं च समाविष्टम् अस्ति ।
चर
CSS मध्ये वर्णानाम्, पिक्सेलमूल्यानां च प्रबन्धनं किञ्चित् दुःखं भवितुम् अर्हति, प्रायः प्रतिलिपि-चिनोतिभिः पूर्णम् । न तु LESS इत्यनेन सह—वर्णान् वा पिक्सेलमूल्यानि वा चररूपेण नियुक्तं कृत्वा एकवारं परिवर्तयन्तु ।
मिक्सिन्
तानि त्रीणि सीमा-त्रिज्या-घोषणानि भवन्तः नियमितरूपेण ol' CSS मध्ये कर्तुं आवश्यकाः? इदानीं ते mixins इत्यस्य साहाय्येन एकां पङ्क्तिं यावत् अधः सन्ति, कोडस्य स्निपेट् भवन्तः कुत्रापि पुनः उपयोक्तुं शक्नुवन्ति ।
संचालन
ऑपरेशनों के साथ मक्खी पर गणित करके अपनी जाल, अग्रणी, और अधिक सुपर लचीला करें। CSS sanity इत्यस्य मार्गं गुणयतु, विभज्य, योजयतु, घटयतु च ।
बूटस्ट्रैप् चर LESS चर, तेषां मूल्यानि, उपयोगमार्गदर्शिकाः च
हाइपरलिङ्क्स्
@linkColor |
# 08ग | पूर्वनिर्धारित लिङ्क पाठ रंग | |
@linkColorHover |
darken(@linkColor, 15%) |
पूर्वनिर्धारित लिङ्क पाठ होवर रंग |
जाल प्रणाली
@gridColumns |
१२ |
@gridColumnWidth |
६०px इति |
@gridGutterWidth |
२०px इति |
@fluidGridColumnWidth |
६.३८२९७८७२३% २. |
@fluidGridGutterWidth |
२.१२७६५९५७४% २. |
टाइपोग्राफी
@baseFontSize |
१३px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
१८px इति |
ग्रेस्केल रंग
@black |
# 000 | |
@grayDarker |
# 222 | |
@grayDark |
# 333 | |
@gray |
# 555 | |
@grayLight |
# 999 | |
@grayLighter |
# ईई | |
@white |
# fff |
उच्चारण रंग
@blue |
# 049cdb | |
@green |
# ४६अ५४६ | |
@red |
# 9d261d | |
@yellow |
# ffc40d | |
@orange |
# च८९४०६ | |
@pink |
# ग3325च | |
@purple |
# ७अ४३ख६ |
घटकाः
बटन्स्
@primaryButtonBackground |
@linkColor |
रूपाणि
@placeholderText |
@grayLight |
नवबर
@navbarHeight |
४०px इति | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
अवस्थाएँ एवं अलर्ट बनाएँ
@warningText |
# ग09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# ख९४अ४८ | |
@errorBackground |
# च२देदे | |
@successText |
# ४६८८४७ | |
@successBackground |
# dff0d8 इति | |
@infoText |
# ३अ८७अद् | |
@infoBackground |
# घ९एडफ७ |
बूटस्ट्रैप मिक्सिन
मिक्सिन के बारे में
मूलभूत मिक्सिन
मूलभूतं 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-blockIE7 समर्थनं प्राप्तुं नियमितस्य अतिरिक्तं उपयोगं कुर्वन्तु |
.size() |
@height: 5px, @width: 5px |
एकस्मिन् रेखायां शीघ्रं ऊर्ध्वतां विस्तारं च सेट् कुर्वन्तु |
.square() |
@size: 5px |
.size()विस्तारं ऊर्ध्वतां च समानमूल्येन सेट् कर्तुं निर्माणं करोति |
.opacity() |
@opacity: 100 |
पूर्णसङ्ख्यासु, अस्पष्टताप्रतिशतम् (उदा., "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 % विस्तृत नाली के साथ एक पूर्व जाल प्रणाली उत्पन्न करें |
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 |
ढालं किञ्चित् कृष्णतरं च सीमां नियुक्तुं बटन् कृते उपयुज्यते |
LESS इत्यनेन सह Bootstrap इत्यस्य संकलनम्
संकलनार्थं साधनानि
मेकफाइल सहित नोड
निम्नलिखित आदेशं चालयित्वा npm इत्यनेन सह LESS आदेशपङ्क्तिसंकलकं तथा uglify-js वैश्विकरूपेण संस्थापयन्तु:
$ npm संस्थापन -g कम uglify-js
एकदा संस्थापितं जातं चेत् केवलं makeभवतः bootstrap निर्देशिकायाः मूलतः चालयन्तु तथा च भवन्तः सर्वे सेट् भवन्ति ।
अतिरिक्तरूपेण, यदि भवतां समीपे 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 सञ्चिकायाः प्रत्येकं रक्षणस्य अनन्तरं स्थानीयसञ्चिकासु कोडं संकलयति।
यदि भवान् इच्छति तर्हि स्वयमेव लघुकरणार्थं एप् मध्ये प्राधान्यानि टोग्ल् कर्तुं शक्नोति तथा च संकलितसञ्चिकाः कस्मिन् निर्देशिकायां समाप्ताः भवन्ति।
अधिकानि Mac एप्स
क्रन्च इति
Crunch एडोब एयर इत्यत्र निर्मितः एकः महान् दृश्यमानः LESS सम्पादकः संकलकः च अस्ति ।
कोडकिट
अनधिकृत Mac app इत्यस्य समानेन वयस्केन निर्मितं CodeKit इति Mac app अस्ति यत् LESS, SASS, Stylus, CoffeeScript च संकलयति।
सरलम्
LESS सञ्चिकानां drag and drop संकलनार्थं Mac, Linux, PC app च । अधिकं, स्रोतसङ्केतः GitHub इत्यत्र अस्ति ।