विस्तार · बूटस्ट्रैप संस्कृत

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

LESS किमर्थम् ?

Bootstrap इत्यस्य एकः निर्माता अस्य विषये द्रुतं ब्लॉग् पोस्ट् लिखितवान् , अत्र सारांशतः:

Bootstrap Sass इत्यस्य तुलने Less इत्यनेन सह द्रुततरं ~6x द्रुतं संकलयति
जावास्क्रिप्ट् मध्ये न्यूनं लिखितम् अस्ति, येन अस्माकं कृते Ruby with Sass इत्यस्य तुलने गोताखोरी, patch च सुलभं भवति ।
न्यूनं अधिकं भवति; वयं इदं अनुभवितुम् इच्छामः यत् वयं CSS लिखामः तथा च Bootstrap सर्वेषां कृते सुलभं कुर्मः।

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

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

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

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

यतः अस्माकं CSS Less इत्यनेन लिखितं भवति तथा च variables तथा mixins इत्यस्य उपयोगं करोति, अतः अन्तिम-उत्पादन-कार्यन्वयनार्थं तस्य संकलनं करणीयम् अस्ति । अत्र कथं।

नोट्: यदि भवान् परिवर्तितेन CSS सह GitHub कृते पुल अनुरोधं प्रस्तौति तर्हि एतेषु कस्यापि पद्धत्या CSS पुनः संकलितव्यम् ।

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

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

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

$ npm स्थापित -g कम jshint अवकाश 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 सञ्चिकायाः प्रत्येकं रक्षणस्य अनन्तरं स्थानीयसञ्चिकासु कोडं संकलयति। यदि भवान् इच्छति तर्हि स्वयमेव लघुकरणार्थं एप् मध्ये प्राधान्यानि टोग्ल् कर्तुं शक्नोति तथा च संकलितसञ्चिकाः कस्मिन् निर्देशिकायां अन्ते गच्छन्ति।

अधिकानि एप्स

क्रन्च इति

Crunch एडोब एयर इत्यत्र निर्मितः एकः महान् दृश्यमानः LESS सम्पादकः संकलकः च अस्ति ।

कोडकिट

अनधिकृत Mac app इत्यस्य समानेन वयस्केन निर्मितं CodeKit इति Mac app अस्ति यत् LESS, SASS, Stylus, CoffeeScript च संकलयति।

सरलम्

LESS सञ्चिकानां drag and drop संकलनार्थं Mac, Linux, Windows app च । अधिकं, स्रोतसङ्केतः GitHub इत्यत्र अस्ति ।

संकलितं वा लघुकृतं वा CSS तथा JS इत्येतत् त्यक्त्वा शीघ्रं किमपि जालप्रकल्पं आरभत । अग्रे गच्छन् सुलभ-उन्नयनार्थं अनुरक्षणार्थं च पृथक् पृथक् कस्टम्-शैल्याः उपरि स्तरं कुर्वन्तु ।

सञ्चिका संरचना सेटअप करें

नवीनतमं संकलितं Bootstrap डाउनलोड् कृत्वा स्वस्य परियोजनायां स्थापयन्तु। यथा, भवतः किमपि एतादृशं भवेत् ।

  एप्/ .
      विन्यासाः/ २.
      टेम्पलेट्/ 1 .
  सार्वजनिक/
      css/ 1 .
          बूटस्ट्रैप.मिन.सीएस.एस
      जस्/ ९.
          बूटस्ट्रैप.मिन.जे.एस
      इमग्/ ९.
          ग्लिफिकोन्स-अर्धलिंग्स्.png
          ग्लिफिकोन्स-अर्धलिंग-श्वेत.png

स्टार्टर टेम्पलेट का उपयोग करें

आरम्भार्थं निम्नलिखितम् आधार HTML प्रतिलिख्यताम् ।

<html> इति
  <शिरः> इति
    <title> बूटस्ट्रैप 101 टेम्पलेट </title>
    <!-- बूटस्ट्रैप -->
    <link href = "सार्वजनिक/css/bootstrap.min.css" rel = "शैलीपत्रक" >  
  </head> इति
  <शरीरं> इति
    <h1> नमस्कार, जगत् ! </h1> इति
    <!-- बूटस्ट्रैप -->
    <script src = "सार्वजनिक/जेएस/बूटस्ट्रैप.मिन.जेएस" ></script> 
  </body> इति
</html> इति

कस्टम कोड पर लेयर

Bootstrap इत्येतत् स्वस्य पृथक् CSS तथा JS सञ्चिकाभिः सह स्वकीयं कर्तुं आवश्यकं यथावत् स्वस्य कस्टम् CSS, JS, इत्यादिषु कार्यं कुर्वन्तु ।

<html> इति
  <शिरः> इति
    <title> बूटस्ट्रैप 101 टेम्पलेट </title>
    <!-- बूटस्ट्रैप -->
    <link href = "सार्वजनिक/css/bootstrap.min.css" rel = "शैलीपत्रक" >  
    <!-- परियोजना -->
    <link href = "सार्वजनिक/css/अनुप्रयोग.css" rel = "शैलीपत्रक" >  
  </head> इति
  <शरीरं> इति
    <h1> नमस्कार, जगत् ! </h1> इति
    <!-- बूटस्ट्रैप -->
    <script src = "सार्वजनिक/जेएस/बूटस्ट्रैप.मिन.जेएस" ></script> 
    <!-- परियोजना -->
    <script src = "सार्वजनिक/js/अनुप्रयोग.js" ></script> 
  </body> इति
</html> इति

बूटस्ट्रैप को विस्तार करना

LESS इत्यनेन निर्मितम्