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

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

हेड अप! यी कागजातहरू v2.3.2 का लागि हुन्, जुन अब आधिकारिक रूपमा समर्थित छैन। Bootstrap को नवीनतम संस्करण जाँच गर्नुहोस्!
कम 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 ले तिनीहरूलाई कम्पाइल गर्छ र तिनीहरूलाई स्थानीय भण्डारणमा भण्डार गर्छ।

अनौपचारिक म्याक एप

अनौपचारिक म्याक एपले कम फाइलहरूको डाइरेक्टरीहरू हेर्छ र हेरिएको कम फाइलको प्रत्येक बचत पछि स्थानीय फाइलहरूमा कोड कम्पाइल गर्छ। यदि तपाइँ चाहनुहुन्छ भने, तपाइँ एपमा प्राथमिकताहरू टगल गर्न सक्नुहुन्छ स्वचालित minifying र कुन डाइरेक्टरीमा कम्पाइल गरिएका फाइलहरू समाप्त हुन्छन्।

थप एपहरू

क्रन्च

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>