विस्तार करो · बूटस्ट्रैप डोगरी भाशा च

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

LESS क्यों?

बूटस्ट्रैप दे इक निर्माता ने इस बारे च इक त्वरित ब्लॉग पोस्ट लिखी , इत्थें संक्षेप च:

बूटस्ट्रैप Sass दी तुलना च Less कन्नै तेज़ ~6x तेज़ संकलित करदा ऐ
जावास्क्रिप्ट च कम लिखे दा ऐ, जिस कन्नै सास कन्नै रूबी दी तुलना च असेंगी गोता लाना ते पैच करना सखल्ला होई जंदा ऐ।
कम ही ज्यादा; अस एह् महसूस करना चांह् ने आं जे अस CSS लिखने आं ते बूटस्ट्रैप गी सारें लेई नेड़में बना करदे आं।

क्या शामिल ऐ?

CSS दे विस्तार दे रूप च, LESS च चर, कोड दे पुन: उपयोग करने योग्य स्निपेटें आस्तै मिक्सिन, सरल गणित आस्तै ऑपरेशन, नेस्टिंग, ते इत्थूं तगर जे रंग फंक्शनें गी बी शामल कीता गेआ ऐ।

और जानें

होर मती जानकारी लेई आधिकारिक वेबसाइट http://lesscss.org/ पर जाओ ।

चूंकि साढ़ा सीएसएस लेस कन्नै लिखे दा ऐ ते चर ते मिक्सिन दा उपयोग करदा ऐ , इस करियै इसगी अंतिम उत्पादन लागू करने आस्तै संकलित करने दी लोड़ ऐ । यहां दिखे कैसे।

नोट: जेकर तुस संशोधित CSS कन्नै GitHub गी इक पुल अनुरोध जमा करा करदे ओ तां तुसेंगी इनें तरीकें च कुसै बी तरीके कन्नै CSS गी दुबारा संकलित करना होग .

संकलन करने दे औजार

मेकफाइल कन्नै नोड

निम्नलिखित कमांड चलाइयै npm कन्नै LESS कमांड लाइन कंपाइलर, JSHint, Recess, ते uglify-js गी वैश्विक रूप कन्नै स्थापित करो:

$ npm स्थापित -जी कम jshint अवकाश uglify-जे एस

इक बारी इंस्टॉल होने पर बस makeअपनी बूटस्ट्रैप डायरेक्टरी दे रूट थमां चलाओ ते तुस सारे सेट होई गेदे ओ.

इसदे अलावा, जेकर तुंदे कोल watchr इंस्टॉल ऐ तां तुस make watchहर बारी बूटस्ट्रैप lib च इक फाइल गी संपादत करने पर बूटस्ट्रैप गी स्वतः दुबारा बनाने लेई चला सकदे ओ (इसदी लोड़ नेईं ऐ, सिर्फ इक सुविधा विधि)।

कमांड लाइन

नोड दे राहें LESS कमांड लाइन टूल गी इंस्टॉल करो ते निम्नलिखित कमांड चलाओ:

$ lessc ./less/bootstrap.less > बूटस्ट्रैप.सीएसएस

--compressजेकर तुस कुसै बाइटें गी बचाने दी कोशश करा दे ओ तां उस कमांड च शामल करना ज़रूरी ऐ !

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

नवीनतम Less.js डाउनलोड करो ते इसदे लेई रस्ता (ते बूटस्ट्रैप) गी <head>.

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

.less फाइलें गी दुबारा संकलित करने आस्तै, बस उनेंगी सेव करो ते अपने पेज गी दुबारा लोड करो. Less.js उनेंगी संकलित करदा ऐ ते उनेंगी लोकल स्टोरेज च संग्रहीत करदा ऐ।

गैर-सरकारी मैक ऐप

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

होर ऐप

क्रंच करना

क्रंच एडोब एयर पर बने दा इक शानदार दिखने आला LESS एडिटर ते कंपाइलर ऐ।

कोडकिट ऐ

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

सादगी

LESS फाइलें दे ड्रैग ते ड्रॉप संकलन आस्तै मैक, लिनक्स, ते विंडोज ऐप। प्लस, स्रोत कोड GitHub पर ऐ .

संकलित जां मिनीफाइड सीएसएस ते जेएस च छोड़ियै कुसै बी वेब प्रोजेक्ट गी जल्दी शुरू करो . अग्गें बधने आस्तै आसान अपग्रेड ते रखरखाव आस्तै कस्टम शैलियें पर बक्ख-बक्ख परत।

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

नवीनतम संकलित बूटस्ट्रैप डाउनलोड करो ते अपने प्रोजेक्ट च रक्खो। मसलन, तुंदे कोल इस चाल्ली दी कोई गल्ल होई सकदी ऐ:

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

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

शुरू करने लेई निम्नलिखित बेस एचटीएमएल दी नकल करो।

<html> ऐ
  <सिर> दा
    <title> बूटस्ट्रैप 101 टेम्पलेट </title> ऐ
    <!-- बूटस्ट्रैप --> ऐ
    <link href = "सार्वजनिक / सीएसएस / बूटस्ट्रैप.मिन.सीएस" rel = "स्टाइलशीट" >  
  </head> दा
  <शरीर> दा
    <h1> नमस्कार, दुनिया! </h1> दा
    <!-- बूटस्ट्रैप --> ऐ
    <script src = "सार्वजनिक / जेएस / बूटस्ट्रैप.मिनट.जेएस" ></स्क्रिप्ट> 
  </body> दा
</html> ऐ

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

अपने खुद दे बक्ख-बक्ख CSS ते JS फाइलें कन्नै बूटस्ट्रैप गी अपना बनाने आस्तै अपने कस्टम CSS, JS, ते होर मते च कम्म करो.

<html> ऐ
  <सिर> दा
    <title> बूटस्ट्रैप 101 टेम्पलेट </title> ऐ
    <!-- बूटस्ट्रैप --> ऐ
    <link href = "सार्वजनिक / सीएसएस / बूटस्ट्रैप.मिन.सीएस" rel = "स्टाइलशीट" >  
    <!-- परियोजना --> ऐ
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

बूटस्ट्रैप दा विस्तार करना

LESS दे नाल बनाया गया