विस्तार · बूटस्ट्रैप मैथिली भाषा में

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

कम कियैक ?

बूटस्ट्रैप के एकटा निर्माता एहि बारे में एकटा त्वरित ब्लॉग पोस्ट लिखने छथि , एतय संक्षेप में:

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

की शामिल अछि ?

CSS कें विस्तार कें रूप मे, LESS मे चर, कोड कें पुन: उपयोग करय योग्य स्निपेट कें लेल मिक्सिन, सरल गणित, नेस्टिंग, आ यहां तक कि रंग फंक्शन कें लेल ऑपरेशन शामिल छै.

और जानें

अधिक जानय लेल आधिकारिक वेबसाइट http://lesscss.org/ पर जाउ.

चूँकि हमरऽ सीएसएस लेस स॑ लिखलऽ जाय छै आरू चर आरू मिक्सिन के उपयोग करै छै, एकरा अंतिम उत्पादन कार्यान्वयन लेली संकलित करै के जरूरत छै । एतय कोना।

नोट: यदि अहां संशोधित CSS कें साथ GitHub कें लेल कोनों पुल अनुरोध जमा करय रहल छी, त अहां कें अइ मे सं कोनों विधि कें माध्यम सं CSS कें पुनः संकलित करनाय होयत .

संकलन के लिये उपकरण

मेकफाइल के साथ नोड

निम्नलिखित कमांड चला कए npm क संग LESS कमांड लाइन कंपाइलर, JSHint, Recess, आओर uglify-js कए वैश्विक रूप स इंस्टॉल करू:

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

एक बेर इंस्टॉल भ गेलाक बाद बस makeअपन बूटस्ट्रैप डाइरेक्टरी के रूट सं चलाउ आओर अहां सभ सेट भ जाएब.

एकर अतिरिक्त, यदि अहां कें पास watchr इंस्टॉल छै, त अहां make watchहर बेर जखन अहां bootstrap lib मे कोनों फाइल कें संपादित करय छी तखन bootstrap कें स्वचालित रूप सं पुनर्निर्माण करय कें लेल चला सकय छी (ई आवश्यक नहि छै, बस एकटा सुविधा विधि छै).

कमांड लाइन

नोड के माध्यम स LESS कमांड लाइन टूल इंस्टॉल करू आओर निम्नलिखित कमांड चलाउ:

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

--compressजँ अहाँ किछु बाइट सहेजबाक प्रयास क' रहल छी तँ ओहि कमांड मे अवश्य शामिल करू !

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

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

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

.less फाइलकेँ पुनः संकलित करबाक लेल, बस ओकरा सहेजू आ अपन पृष्ठकेँ पुनः लोड करू। Less.js ओकरा संकलित करयत छै आ ओकरा स्थानीय भंडारण मे संग्रहीत करयत छै.

अनौपचारिक मैक ऐप

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

और ऐप

क्रंच

क्रंच एडोब एयर पर बनल एकटा बढ़िया देखय वाला LESS एडिटर आ कंपाइलर अछि.

कोडकिट

अनौपचारिक मैक ऐप के समान लड़का द्वारा बनाओल गेल कोडकिट एकटा मैक ऐप अछि जे LESS, SASS, Stylus, आ CoffeeScript के संकलित करैत अछि |

सरलहीन

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

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

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

नवीनतम संकलित बूटस्ट्रैप डाउनलोड करू आ अपन प्रोजेक्ट मे राखू। जेना, अहाँक पास किछु एहन भ' सकैत अछि:

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

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

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

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

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

बूटस्ट्रैप कें अपन अलग-अलग CSS आ JS फाइल कें साथ अपन बनावा कें लेल आवश्यक रूप सं अपन कस्टम CSS, JS, आओर बेसि मे काज करूं.

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

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

LESS के साथ निर्मित