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

समावेश शैलीहरू र कम्पोनेन्टहरू, साथै कम चर र मिक्सिनहरूको फाइदा लिनको लागि बुटस्ट्र्याप विस्तार गर्नुहोस्।

कम CSS

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

किन कम?

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

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

के समावेश छ?

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

अझै सिक

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

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

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

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

कमाण्ड लाइन

कमाण्ड लाइन मार्फत कम्पाइल गर्नको लागि GitHub मा प्रोजेक्ट readme मा निर्देशनहरू पालना गर्नुहोस् ।

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

नवीनतम 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 प्रतिलिपि गर्नुहोस्।

  1. <html>
  2. <head>
  3. <title> बुटस्ट्र्याप १०१ टेम्प्लेट </title>
  4. <!-- बुटस्ट्र्याप -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <body>
  8. <h1> नमस्ते, संसार! </h1>
  9. <!-- बुटस्ट्र्याप -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

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

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

  1. <html>
  2. <head>
  3. <title> बुटस्ट्र्याप १०१ टेम्प्लेट </title>
  4. <!-- बुटस्ट्र्याप -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- परियोजना -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <body>
  10. <h1> नमस्ते, संसार! </h1>
  11. <!-- बुटस्ट्र्याप -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- परियोजना -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>