विस्तार · बुटस्ट्र्याप नेपाली मा

बुटस्ट्र्याप यसको मूलमा LESS को साथ बनाइएको छ, हाम्रो असल मित्र, एलेक्सिस सेलियर द्वारा बनाईएको एक गतिशील स्टाइलसिट भाषा । यसले प्रणालीमा आधारित CSS लाई छिटो, सजिलो र थप रमाइलो बनाउँछ।

किन कम?

बुटस्ट्र्यापका सिर्जनाकर्ताहरू मध्ये एकले यसको बारेमा द्रुत ब्लग पोष्ट लेखे , यहाँ संक्षेप गरिएको छ:

बुटस्ट्र्यापले सासको तुलनामा कमसँग ~6x छिटो कम्पाइल गर्छ
जाभास्क्रिप्टमा कम लेखिएको छ, यसले हामीलाई साससँग रुबीको तुलनामा डुब्न र प्याच गर्न सजिलो बनाउँछ।
कम अधिक; हामी CSS लेख्दै र बुटस्ट्र्यापलाई सबैको लागि पहुँचयोग्य बनाउने जस्तो महसुस गर्न चाहन्छौं।

के समावेश छ?

CSS को विस्तारको रूपमा, LESS मा चरहरू, कोडको पुन: प्रयोज्य स्निपेटहरूका लागि मिक्सिनहरू, साधारण गणितका लागि अपरेशनहरू, नेस्टिङ, र रङ कार्यहरू पनि समावेश हुन्छन्।

अझै सिक

थप जान्नको लागि http://lesscss.org/ मा आधिकारिक वेबसाइटमा जानुहोस् ।

हाम्रो CSS ले कम लेखिएको हुनाले र चर र मिक्सिनहरू प्रयोग गर्छ, यसलाई अन्तिम उत्पादन कार्यान्वयनको लागि कम्पाइल गर्न आवश्यक छ। यहाँ कसरी छ।

नोट: यदि तपाइँ परिमार्जित CSS को साथ GitHub मा पुल अनुरोध पेश गर्दै हुनुहुन्छ भने, तपाइँ यी विधिहरू मध्ये कुनै पनि मार्फत CSS पुन: कम्पाइल गर्नुपर्छ ।

संकलनका लागि उपकरणहरू

मेकफाइलको साथ नोड

निम्न आदेश चलाएर कम कमाण्ड लाइन कम्पाइलर, 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, स्टाइलस, र कफीस्क्रिप्ट कम्पाइल गर्छ।

सरल

म्याक, लिनक्स, र विन्डोज एप कम फाइलहरूको कम्पाइलिङ ड्र्याग र ड्रपको लागि। साथै, स्रोत कोड GitHub मा छ ।

कम्पाइल गरिएको वा मिनिफाइड CSS र JS मा छोडेर कुनै पनि वेब परियोजना तुरुन्तै सुरु गर्नुहोस्। सजिलो स्तरवृद्धि र मर्मतसम्भार अगाडि बढ्नको लागि छुट्टै अनुकूलन शैलीहरूमा तह।

फाइल संरचना सेटअप गर्नुहोस्

भर्खरको कम्पाइल गरिएको बुटस्ट्र्याप डाउनलोड गर्नुहोस् र तपाईंको प्रोजेक्टमा राख्नुहोस्। उदाहरण को लागी, तपाईसँग केहि हुन सक्छ:

  एप/
      लेआउट/
      टेम्प्लेटहरू/
  सार्वजनिक/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

स्टार्टर टेम्प्लेट प्रयोग गर्नुहोस्

सुरु गर्न निम्न आधार HTML प्रतिलिपि गर्नुहोस्।

<html>
  <head>
    <title> Bootstrap 101 टेम्प्लेट </title>
    <!-- बुटस्ट्र्याप -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> नमस्ते, संसार! </h1>
    <!-- बुटस्ट्र्याप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

अनुकूलन कोडमा तह

बुटस्ट्र्यापलाई आफ्नै छुट्टै CSS र JS फाइलहरू प्रयोग गरेर आफ्नो आफ्नै बनाउनको लागि आवश्यक अनुसार आफ्नो अनुकूलन CSS, JS, र थपमा काम गर्नुहोस्।

<html>
  <head>
    <title> Bootstrap 101 टेम्प्लेट </title>
    <!-- बुटस्ट्र्याप -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- परियोजना -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> नमस्ते, संसार! </h1>
    <!-- बुटस्ट्र्याप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- परियोजना -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

बुटस्ट्र्याप विस्तार गर्दै

कम संग निर्मित