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

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

LESS किमर्थम् ?

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

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

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

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

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

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

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

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

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

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

आदेशपङ्क्तिद्वारा संकलनार्थं GitHub इत्यत्र readme इति परियोजनायां निर्देशान् अनुसृत्य कार्यं कुर्वन्तु ।

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

नवीनतमं Less.js डाउनलोड् कृत्वा तस्य मार्गं (तथा Bootstrap) <head>.

<link rel="शैलीपत्रिका/कम" href="/मार्ग/प्रति/bootstrap.less"> rel = "शैलीपत्रक/कम" href = "/मार्ग/प्रति/बूटस्ट्रैप.कम" > 
<script src="/मार्ग/to/less.js"></script> इति<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 इत्यनेन निर्मितम्