समावेश शैलीहरू र कम्पोनेन्टहरू, साथै कम चर र मिक्सिनहरूको फाइदा लिनको लागि बुटस्ट्र्याप विस्तार गर्नुहोस्।
बुटस्ट्र्याप यसको मूलमा LESS को साथ बनाइएको छ, हाम्रो असल मित्र, एलेक्सिस सेलियर द्वारा बनाईएको एक गतिशील स्टाइलसिट भाषा । यसले प्रणालीमा आधारित CSS लाई छिटो, सजिलो र थप रमाइलो बनाउँछ।
बुटस्ट्र्यापका सिर्जनाकर्ताहरू मध्ये एकले यसको बारेमा द्रुत ब्लग पोस्ट लेखे , यहाँ संक्षेप गरिएको छ:
CSS को विस्तारको रूपमा, LESS मा चरहरू, कोडको पुन: प्रयोज्य स्निपेटहरूका लागि मिक्सिनहरू, साधारण गणितका लागि अपरेशनहरू, नेस्टिङ, र रङ कार्यहरू पनि समावेश हुन्छन्।
थप जान्नको लागि http://lesscss.org/ मा आधिकारिक वेबसाइटमा जानुहोस् ।
हाम्रो 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 प्रतिलिपि गर्नुहोस्।
- <html>
- <head>
- <title> बुटस्ट्र्याप १०१ टेम्प्लेट </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> बुटस्ट्र्याप १०१ टेम्प्लेट </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>