Bootstrap Tutorial in Hindi

What is Bootstrap? (बूटस्ट्रैप क्या है)

  • बूटस्ट्रैप तेज और आसान वेब विकास के लिए एक मुफ्त फ्रंट-एंड फ्रेमवर्क है
  • बूटस्ट्रैप में टाइपोग्राफी, फ़ॉर्म, बटन, टेबल, नेविगेशन, मोडल, इमेज कार्सल्स और कई अन्य, साथ ही वैकल्पिक जावास्क्रिप्ट प्लगइन्स के लिए HTML और सीएसएस आधारित डिज़ाइन टेम्पलेट शामिल हैं।
  • बूटस्ट्रैप आपको आसानी से उत्तरदायी डिजाइन बनाने की क्षमता भी देता है

Why to Learn Bootstrap?(बूटस्ट्रैप क्यों सीखें?)

  • मोबाइल का पहला तरीका – बूटस्ट्रैप 3, फ्रेमवर्क में अलग-अलग फाइलों के बजाय पूरे पुस्तकालय में मोबाइल की पहली शैलियाँ होती हैं।
  • ब्राउज़र समर्थन – यह सभी लोकप्रिय ब्राउज़रों द्वारा समर्थित है।
  • आरंभ करने में आसान – केवल HTML और CSS के ज्ञान से कोई भी बूटस्ट्रैप के साथ आरंभ कर सकता है। साथ ही बूटस्ट्रैप आधिकारिक साइट पर एक अच्छा दस्तावेज है।
  • Responsive design उत्तरदायी डिजाइन – बूटस्ट्रैप के उत्तरदायी सीएसएस डेस्कटॉप, टैबलेट और मोबाइल के लिए समायोजित करता है। उत्तरदायी डिजाइन के बारे में अधिक अध्याय बूटस्ट्रैप उत्तरदायी डिजाइन में है।
  • डेवलपर्स के लिए एक इंटरफेस बनाने के लिए एक साफ और एक समान समाधान प्रदान करता है।
  • इसमें सुंदर और कार्यात्मक अंतर्निहित घटक शामिल हैं जो अनुकूलित करना आसान है।
  • यह वेब आधारित अनुकूलन भी प्रदान करता है।
  • और सबसे अच्छा यह एक खुला स्रोत है।

What You Can Do with Bootstrap?(आप बूटस्ट्रैप के साथ क्या कर सकते हैं)

बहुत अधिक चीजें हैं जो आप बूटस्ट्रैप के साथ कर सकते हैं।

  • आप आसानी से उत्तरदायी वेबसाइट बना सकते हैं।
  • आप पूर्व-परिभाषित कक्षाओं के साथ बहु-स्तंभ लेआउट जल्दी से बना सकते हैं।
  • आप जल्दी से विभिन्न प्रकार के फॉर्म लेआउट बना सकते हैं।
  • आप जल्दी से नेविगेशन बार के विभिन्न प्रकार बना सकते हैं।
  • आप आसानी से किसी भी JS कोड को लिखे बिना कंपोजिशन, मोडल आदि जैसे घटक बना सकते हैं।
  • आप बड़ी मात्रा में सामग्री का प्रबंधन करने के लिए आसानी से गतिशील टैब बना सकते हैं।
  • आप आसानी से टूलटिप्स बना सकते हैं और संकेत पाठ दिखाने के लिए पॉपओवर कर सकते हैं।
  • आप अपनी सामग्री दिखाने के लिए आसानी से हिंडोला या छवि स्लाइडर बना सकते हैं।
  • आप जल्दी से विभिन्न प्रकार के अलर्ट बॉक्स बना सकते हैं।

सूची यहां समाप्त नहीं होती है, कई अन्य दिलचस्प चीजें हैं जो आप बूटस्ट्रैप के साथ कर सकते हैं। आप आने वाले अध्यायों में उन सभी के बारे में विस्तार से जानेंगे।

Advantages of Using Bootstrap(बूटस्ट्रैप का उपयोग करने के लाभ)

यदि आपको किसी भी फ्रंट-एंड फ्रेमवर्क के साथ कुछ अनुभव हुआ है, तो आप सोच रहे होंगे कि बूटस्ट्रैप क्या इतना खास बनाता है। यहां कुछ फायदे दिए गए हैं कि किसी को बूटस्ट्रैप ढांचे के लिए क्यों चुनना चाहिए:

  • बहुत समय बचाएं – आप बूटस्ट्रैप पूर्वनिर्धारित डिजाइन टेम्पलेट्स और कक्षाओं का उपयोग करके बहुत सारे समय और प्रयासों को बचा सकते हैं और अन्य विकास कार्यों पर ध्यान केंद्रित कर सकते हैं।
  • उत्तरदायी विशेषताएं – बूटस्ट्रैप का उपयोग करके आप आसानी से उत्तरदायी वेबसाइट बना सकते हैं जो मार्कअप में किसी भी बदलाव के बिना विभिन्न उपकरणों और स्क्रीन प्रस्तावों पर अधिक उचित रूप से दिखाई देते हैं।
  • सुसंगत डिजाइन – सभी बूटस्ट्रैप घटक एक ही डिजाइन टेम्पलेट्स और शैलियों को एक केंद्रीय पुस्तकालय के माध्यम से साझा करते हैं, इसलिए आपके वेब पृष्ठों का डिज़ाइन और लेआउट सुसंगत होगा।
  • उपयोग करने में आसान – बूटस्ट्रैप का उपयोग करना बहुत आसान है। HTML, सीएसएस और जावास्क्रिप्ट के बुनियादी काम के ज्ञान के साथ कोई भी बूटस्ट्रैप के साथ विकास शुरू कर सकता है।
  • ब्राउज़रों के साथ संगत – बूटस्ट्रैप आधुनिक वेब ब्राउज़र के साथ बनाया गया है और यह क्रोम, फ़ायरफ़ॉक्स, सफारी, इंटरनेट एक्सप्लोरर, आदि जैसे सभी आधुनिक ब्राउज़रों के साथ संगत है।
  • ओपन सोर्स – और सबसे अच्छी बात यह है, यह डाउनलोड और उपयोग करने के लिए पूरी तरह से स्वतंत्र है।

Exampl

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: