बूटस्ट्रैप के विस्तार कइल जा रहल बा

शामिल शैली आ घटक सभ के फायदा उठावे खातिर बूटस्ट्रैप के बिस्तार करीं, साथ ही साथ LESS चर आ मिक्सिन सभ के भी।

कम सीएसएस के बा

बूटस्ट्रैप के अपना मूल में LESS के साथ बनावल गइल बा, एगो गतिशील स्टाइलशीट भाषा जवन हमनी के बढ़िया दोस्त, एलेक्सिस सेलियर द्वारा बनावल गइल बा । ई सिस्टम आधारित सीएसएस के बिकास के तेज, आसान आ मजेदार बनावे ला।

काहे कम बा?

बूटस्ट्रैप के एगो निर्माता एह बारे में एगो त्वरित ब्लॉग पोस्ट लिखले बाड़न , जवना के संक्षेप में इहाँ दिहल गइल बा:

  • बूटस्ट्रैप सास के तुलना में कम के साथ तेजी से ~6x तेजी से संकलित करेला
  • जावास्क्रिप्ट में कम लिखल बा, जवना से हमनी के रूबी विद सैस के मुक़ाबले गोता लगावे अवुरी पैच करे में आसानी हो जाई।
  • कम त अधिका होला; हम महसूस कइल चाहत बानी कि हमनी का सीएसएस लिखत बानी जा आ बूटस्ट्रैप के सभका खातिर सुलभ बनावत बानी जा.

का शामिल बा?

CSS के एक्सटेंशन के रूप में, LESS में चर, कोड के दोबारा इस्तेमाल करे लायक स्निपेट खातिर मिक्सिन, सरल गणित खातिर ऑपरेशन, नेस्टिंग, आ इहाँ तक कि रंग फंक्शन सभ के सामिल कइल जाला।

अउरी जाने खातिर देखीं

अधिक जानकारी खातिर आधिकारिक वेबसाइट http://lesscss.org/ पर जाईं .

चूँकि हमनी के सीएसएस लेस से लिखल जाला आ चर आ मिक्सिन के इस्तेमाल करेला एहसे एकरा के अंतिम उत्पादन कार्यान्वयन खातिर संकलित करे के जरूरत बा. इहाँ कईसे देखल गईल बा।

नोट: अगर रउआँ संशोधित CSS के साथ GitHub पर पुल अनुरोध जमा कर रहल बानी, त रउआँ के एह में से कौनों तरीका के माध्यम से CSS के फिर से संकलित करे के पड़ी ।

संकलन खातिर औजार बा

कमांड लाइन के बा

कमांड लाइन के माध्यम से संकलन खातिर GitHub पर प्रोजेक्ट readme में दिहल निर्देश के पालन करीं ।

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

नवीनतम Less.js डाउनलोड करीं आ एकरा खातिर रास्ता (आ बूटस्ट्रैप) के <head>.

<link rel = "स्टाइलशीट/कम" href = "/पथ/से/बूटस्ट्रैप.कम" > <स्क्रिप्ट src = "/पथ/से/कम.js" ></script>  
 

.less फाइल सभ के दोबारा संकलित करे खातिर, बस इनहन के सेव करीं आ आपन पन्ना के रिलोड करीं। Less.js इनहन के संकलित करे ला आ लोकल स्टोरेज में स्टोर करे ला।

अनऑफिसियल मैक ऐप बा

अनऑफिसियल मैक ऐप .less फाइल के डाइरेक्टरी के देखत बा अवुरी देखल गईल .less फाइल के हर सेव के बाद कोड के स्थानीय फाइल में संकलित करेला। अगर रउरा चाहत बानी त रउरा ऐप में पसंद के टॉगल क के ऑटोमैटिक मिनिफाइंग कर सकेनी आ संकलित फाइल कवना डाइरेक्टरी में खतम हो जाला.

अउरी ऐप बा

क्रंच हो गइल बा

क्रंच एगो बढ़िया देखाई देवे वाला LESS एडिटर आ कंपाइलर बा जवन एडोब एयर पर बनल बा।

कोडकिट के बा

अनऑफिसियल मैक ऐप के समान आदमी के बनावल कोडकिट एगो मैक ऐप ह जवन कि लेस, सैस, स्टाइलस, अवुरी कॉफीस्क्रिप्ट के संकलित करेला।

सादगी के बा

कम फाइल के ड्रैग एंड ड्रॉप कंपाइलिंग खातिर मैक, लिनक्स, आ विंडोज ऐप। एकरा अलावे, स्रोत कोड गिटहब पर बा

संकलित भा लघुकृत सीएसएस आ जेएस में छोड़ के कवनो वेब प्रोजेक्ट के जल्दी से शुरू करीं . आगे बढ़त आसान अपग्रेड आ रखरखाव खातिर कस्टम स्टाइल पर अलग से परत।

फाइल संरचना के सेटअप करीं

नवीनतम संकलित बूटस्ट्रैप डाउनलोड करीं आ अपना प्रोजेक्ट में राखीं. जइसे कि रउरा लगे कुछ अइसन हो सकेला:

  एप/ के बा।
      लेआउट के बारे में बतावल गइल बा/
      टेम्पलेट के बारे में बतावल गइल बा/
  जनता/
      सीएसएस/ के बा।
          बूटस्ट्रैप.मिन.सीएसएस के बा
      जेएस/ के बा।
          बूटस्ट्रैप.मिन.जेएस के बा
      img/ के बा।
          ग्लिफिकॉन्स-हाफलिंग्स.पीएनजी के बा
          ग्लिफिकॉन्स-हाफलिंग-सफेद.पीएनजी के बा

स्टार्टर टेम्पलेट के उपयोग करीं

शुरू करे खातिर निम्नलिखित बेस एचटीएमएल के कॉपी करीं।

  1. <html> के बा
  2. <सिर> के बा
  3. <title> बूटस्ट्रैप 101 टेम्पलेट </title> बा
  4. <!-- बूटस्ट्रैप --> के बा
  5. <link href = "public/css/bootstrap.min.css" rel = "स्टाइलशीट" > बा
  6. </head> के बा
  7. <शरीर> के बा
  8. <h1> नमस्कार बा, दुनिया! </h1> के बा
  9. <!-- बूटस्ट्रैप --> के बा
  10. <script src = "पब्लिक/जेएस/बूटस्ट्रैप.मिनट.जेएस" ></स्क्रिप्ट>
  11. </body> के बा
  12. </html> के बा

कस्टम कोड पर परत बा

बूटस्ट्रैप के आपन अलग-अलग CSS आ JS फाइल के साथ आपन बनावे खातिर जरूरत के हिसाब से अपना कस्टम CSS, JS, आ अउरी बहुत कुछ में काम करीं।

  1. <html> के बा
  2. <सिर> के बा
  3. <title> बूटस्ट्रैप 101 टेम्पलेट </title> बा
  4. <!-- बूटस्ट्रैप --> के बा
  5. <link href = "public/css/bootstrap.min.css" rel = "स्टाइलशीट" > बा
  6. <!-- परियोजना --> के बा
  7. <link href = "सार्वजनिक/css/एप्लीकेशन.css" rel = "स्टाइलशीट" >
  8. </head> के बा
  9. <शरीर> के बा
  10. <h1> नमस्कार बा, दुनिया! </h1> के बा
  11. <!-- बूटस्ट्रैप --> के बा
  12. <script src = "पब्लिक/जेएस/बूटस्ट्रैप.मिनट.जेएस" ></स्क्रिप्ट>
  13. <!-- परियोजना --> के बा
  14. <script src = "पब्लिक/जेएस/एप्लीकेशन.जेएस" ></स्क्रिप्ट>
  15. </body> के बा
  16. </html> के बा