बढ़ाएँ · बूटस्ट्रैप हिंदी में

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

कम क्यों?

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

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

क्या शामिल है?

CSS के विस्तार के रूप में, LESS में वेरिएबल्स, कोड के पुन: प्रयोज्य स्निपेट के लिए मिक्सिन, सरल गणित के लिए संचालन, नेस्टिंग और यहां तक कि रंग फ़ंक्शन भी शामिल हैं।

और अधिक जानें

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

चूंकि हमारा सीएसएस कम के साथ लिखा गया है और चर और मिश्रण का उपयोग करता है, इसलिए इसे अंतिम उत्पादन कार्यान्वयन के लिए संकलित करने की आवश्यकता है। ऐसे।

नोट: यदि आप संशोधित सीएसएस के साथ गिटहब को पुल अनुरोध सबमिट कर रहे हैं, तो आपको इनमें से किसी भी तरीके से सीएसएस को फिर से संकलित करना होगा ।

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

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

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

$ npm इंस्टॉल -g कम jshint अवकाश uglify-js

एक बार इंस्टाल होने के बाद बस makeअपने बूटस्ट्रैप डायरेक्टरी के रूट से चलाएं और आप पूरी तरह तैयार हैं।

इसके अतिरिक्त, यदि आपके पास वॉचर स्थापित है, तो आप make watchबूटस्ट्रैप को हर बार बूटस्ट्रैप लिब में किसी फ़ाइल को संपादित करने के लिए स्वचालित रूप से फिर से बनाने के लिए चला सकते हैं (यह आवश्यक नहीं है, बस एक सुविधा विधि है)।

कमांड लाइन

नोड के माध्यम से LESS कमांड लाइन टूल इंस्टॉल करें और निम्न कमांड चलाएँ:

$lessc ./less/bootstrap.less > bootstrap.css

--compressयदि आप कुछ बाइट सहेजने का प्रयास कर रहे हैं तो उस आदेश में शामिल करना सुनिश्चित करें !

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

नवीनतम कम.जेएस डाउनलोड करें और इसके लिए पथ (और बूटस्ट्रैप) को <head>.

<लिंक rel = "स्टाइलशीट/कम" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less फ़ाइलों को पुन: संकलित करने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। कम.जेएस उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है।

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

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

और ऐप

संकट

क्रंच एक बेहतरीन दिखने वाला LESS एडिटर और कंपाइलर है जिसे Adobe Air पर बनाया गया है।

कोडकिट

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

सरल

कम फ़ाइलों के संकलन को खींचने और छोड़ने के लिए मैक, लिनक्स और विंडोज ऐप। साथ ही, सोर्स कोड GitHub पर है ।

संकलित या लघुकृत CSS और JS में छोड़ कर किसी भी वेब प्रोजेक्ट को शीघ्रता से प्रारंभ करें। आसान उन्नयन और आगे बढ़ने के लिए अलग से कस्टम शैलियों पर परत।

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

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

  अनुप्रयोग/
      लेआउट/
      टेम्पलेट/
  जनता/
      सीएसएस/
          बूटस्ट्रैप.मिन.सीएसएस
      जेएस/
          बूटस्ट्रैप.मिन.जेएस
      आईएमजी/
          ग्लिफ़िकॉन्स-हाफलिंग्स.png
          ग्लिफ़िकॉन्स-हाफलिंग्स-व्हाइट.पीएनजी

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

आरंभ करने के लिए निम्नलिखित आधार HTML को कॉपी करें।

<html>
  <सिर>
    <शीर्षक> बूटस्ट्रैप 101 टेम्पलेट </शीर्षक>
    <!-- बूटस्ट्रैप -->
    <लिंक href = "सार्वजनिक/css/bootstrap.min.css" rel = "स्टाइलशीट" >  
  </सिर>
  <शरीर>
    <h1> नमस्कार, दुनिया! </h1>
    <!-- बूटस्ट्रैप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

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

अपने स्वयं के अलग सीएसएस और जेएस फाइलों के साथ बूटस्ट्रैप को अपना बनाने के लिए अपने कस्टम सीएसएस, जेएस, और अधिक में काम करें।

<html>
  <सिर>
    <शीर्षक> बूटस्ट्रैप 101 टेम्पलेट </शीर्षक>
    <!-- बूटस्ट्रैप -->
    <लिंक href = "सार्वजनिक/css/bootstrap.min.css" rel = "स्टाइलशीट" >  
    <!-- परियोजना -->
    <लिंक href = "सार्वजनिक/css/application.css" rel = "स्टाइलशीट" >  
  </सिर>
  <शरीर>
    <h1> नमस्कार, दुनिया! </h1>
    <!-- बूटस्ट्रैप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- परियोजना -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

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

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