हेलो दोस्तों आज के इस ब्लॉग पोस्ट(What Is Bootstrap In Hindi) में मैं आपको Bootstrap के बारे में हिंदी में विस्तृत जानकारी देने वाला हूँ |
वैसे तो जो लोग डेवलपमेंट फील्ड में काम करते है या फिर सॉफ्टवेयर अथवा वेबसाइट develop करते है वो लोग Bootstrap(What Is Bootstrap In Hindi) के बारे में जरूर जानते होंगे |
Bootstrap(What Is Bootstrap In Hindi) को Mark Otto और Jacob Thornton द्वारा डेवेलोप किया गया था जो कि ट्विटर में काम करते थे |
और अगस्त 2011 में इसे open source product की तरह GitHub में release किया गया था|What Is Bootstrap In Hindi|
जहाँ से कोई भी इसके source code को access कर सकता था और अपनी वेबसाइट में use कर सकता था |What Is Bootstrap In Hindi|
पर अगर आप फिर भी इसके बारे में नहीं जानते है तो आप बिलकुल चिंता मत करिये इस ब्लॉग पोस्ट में हम आपको Bootstrap के बारे में विस्तार से जानकारी देंगे |What Is Bootstrap In Hindi|
कभी कभी ये होता है न कि आप अपनी वेबसाइट बना कर लांच कर देते है और अपने कुछ दोस्तों और रिस्तेदारो को भी लिंक शेयर कर के बता देते है |
और फिर आपको कुछ फीडबैक ऐसे भी मिलते है कि यार तेरी वेबसाइट मेरे system में गड़बड़ नज़र आ रही है |What Is Bootstrap In Hindi|
हैडर ऊपर जा रहा है | footer दिखाई नहीं दे रहा है| साइड में ज्यादा स्पेस खाली है | इमेज ओवरलैप हो रही है, मोबाइल में वेबसाइट बिलकुल ही खराब दिख रही है, etc|What Is Bootstrap In Hindi|
तो दोस्तों ऐसी बहुत सी problems आपकी वेबसाइट में तब आती है जब आपकी वेबसाइट Responsive नहीं होती है |
अब manually हर एक स्क्रीन के हिसाब से तो HTML और css कोड लिख नहीं सकते है |What Is Bootstrap In Hindi|
तो फिर यहाँ पर आपको अपनी वेबसाइट को respnsive बनाने के लिए Bootstrap के उपयोग करना चाहिए |
Bootstrap आपकी सभी डिज़ाइन प्रॉब्लम को हैंडल कर लेता है चाहे आपकी वेबसाइट किसी भी device में ओपन हो |
Bootstrap आखिर होता क्या है ?
देखिये Bootstrap एक फ्रेमवर्क है जिससे हम किसी भी वेब पेज अथवा वेबसाइट को Responsive बनाते है |
मतलब कि आप अपनी वेबसाइट किसी भी डिवाइस में खोले वो Responsive ही रहेगी और उसकी डिज़ाइन में कोई खराबी नहीं आएगी |
Bootstrap फ्रेम वर्क के अंदर वेबसाइट को Responsive बनाने के लिए CSS , HTML और Java Script का use किया जाता है |
अब यहाँ पर अगर आपको यह मालूम नहीं है कि Responsive वेबसाइट क्या होती है या वेबसाइट को Responsive क्यों बनाया जता है|
तो आप चिंता मत करें पहले हम आपको यही बताते है |
Responsive website अथवा web page क्या होते है ?
मान लीजिये आपने किसी वेबसाइट अथवा वेब पेज को अपने desktop में ओपन किया तो आपको वेबसाइट की डिज़ाइन अच्छी दिखाई दी |
पर जब आप इसी वेबसाइट को अपने लैपटॉप, ipad , अथवा मोबाइल में ओपन करते है तो फिर आपको वेबसाइट की डिज़ाइन में कुछ गड़बड़ी दिखने लगती है |
गड़बड़ी जैसे की button अपनी जगह पर सही नहीं है, कुछ वेबसाइट कंटेंट को आप देख ही नहीं पा रहे है |
और कुछ वेबसाइट पैराग्राफ एक दूसरे के ऊपर चढ़ रहे है |
तो अगर आपको यह सब गड़बड़ी वेबसाइट में दिखती है तो समझ लीजिये की वेबसाइट Responsive नहीं है | मोबाइल में वेबसाइट view सही नहीं है |
कहने का मतलब जब कोई web page अथवा website की अलग अलग डिवाइस में खोलने पर design गड़बड़ दिखने लगती है तो समझ लेना की website रेस्पॉन्सिवे नहीं है |
क्योकि अगर कोई वेबसाइट अथवा वेब पेज Responsive होता है तो फिर आप अपनी वेबसाइट को किसी भी डिवाइस अथवा किसी भी स्क्रीन साइज के ऊपर ओपन करिये|
वो आपको हमेशा सही डिज़ाइन में डिवाइस के अनुसार आकर ले कर दिखेगी |
मतलब Responsive वेबसाइट डिवाइस के according अपनी डिज़ाइन को सही ढंग से बदल लेती है और पूरा कंटेंट आपको अच्छे से विज़िबल होता है |
तो यह होता है responsiveness और आज कल यह आपको सभी वेबसाइट अथवा वेब पेज में देखने को मिलेगा |
क्योकि आज कल बहुत सरे डिवाइस मार्किट में अवेलेबल है और कोई भी आपकी वेबसाइट को किसी भी डिवाइस में खोल सकता है |
Twitter bootstrap आज के समय में सबसे पॉपुलर front end framework है|
इसकी मदद से बहुत ही फ़ास्ट और पावरफुल फ्रंट एन्ड को आसानी से develop किया जा सकता है |
तो bootstrap के अंदर केवल HTML , css , और Java scropt की मदद से ही यह Responsive फ्रंट एन्ड क्रिएट करते है |
Bootstrap का use करना बहुत ही आसान है बस आपको इसका basics पता होना चाहिए |
तो हम छोटे छोटे ब्लॉग के माध्यम से आपको पूरा bootstrap के बारे में बताएँगे |
bootstrap क्यों सीखना चाहिए? इसकी जरुरत क्या है ?
देखिये bootstrap से हमें बहुत से फायदे है जो की आज के टाइम में वेबसाइट में बहुत ही जरुरी है |
सबसे पहली बात तो आपकी वेबसाइट Responsive रहती है और यह हर डिवाइस में प्रोपर तरीके से align रहती है |
इसकी वजह से आप वेबसाइट के main logics और coding पर ज्यादा ध्यान दे सकते है बजाये की आप वेबसाइट की डिज़ाइन में ज्यादा टाइम लगाए |
Bootstrap आपके लिए डिज़ाइन को पूरी तरह से मैनेज किये रहती है |
दूसरा benefits यह है की लगभग सभी पॉपुलर ब्राउज़र द्वारा bootstrap को सपोर्ट किया जाता है|
इसलिए bootstrap की मदद से वेबसाइट को Responsive बनाना बहुत ही अच्छा विकल्प है |
bootstrap से वेबसाइट डेवेलोप करना बहुत ही आसान है इसके लिए आपको basic HTML और css का नॉलेज होना चाहिए तो आप आसानी से इसका use करके अपनी Responsive website develop कर सकते है |
bootstrap के application क्या है ?
bootstrap के सभी application निम्नलिखित है :
Scaffolding :
bootstrap हमें ग्रिड सिस्टम, लिंक स्टाइल, और background के साथ एक बेसिक स्ट्रक्चर प्रोवाइड करता है |
इसे हम लोग bootstrap basic structure में डिटेल में कवर करेंगे |
css :
bootstrap जो है वो एक ग्लोबल css setting फीचर रखता है |
यहाँ पर fundamental HTML के साथ स्टाइल और उससे रिलेटेड inhanced क्लासेज, ग्रिड सिस्टम बहुत कुछ होता है |
इससे हम bootstrap with css section में डिटेल में पढ़ेंगे |
component :
बूटस्ट्रॉप के अंदर बहुत सारे कम्पोनेट होते है जो की हमें वेबसाइट को Responsive बनाने में मदद करते है |
इसमें बहुत सरे reusable component होते है | Iconography , dropdown , नेविगेशन, अलर्ट, पॉप-ओवर, ऐसे बहुत सारे bootstrap component को हम layout component section के अंतर्गत पढ़ेंगे |
Java Script plugins :
bootstrap के अंदर दर्जन भर कस्टम jquery plugins होते है |
आप अपनी सुविधा अनुसार इनमे से कोई भी plugin को अपनी वेबसाइट के लिए use कर सकते है |
इन सारे plugins को हम bootstrap प्लगिन्स section के अंतर्गत पढ़ेंगे |
customize :
आप आसानी से अपने bootstrap component , LESS variable , और jquery plugins को customize कर सकते है|
और अपने bootstrap को एक नए version के साथ update कर सकते है |
bootstrap का उपयोग हम अपनी वेबसाइट में कैसे करते है ?
वैसे तो हम इसके लिए एक अलग dedicated blog पोस्ट लिखने वाले है पर फिर भी आपको एक आईडिया यहाँ पर दे देते है |
Bootstrap का use करने के लिए आपको पहले तो bootstrap को डाउनलोड करना होता है |
और फिर इसके बाद अपनी वेबसाइट folder में paste करके आप इसकी classes को अपने web page में include करके…
…bootstrap के HTML और css grid व अन्य चीज़ो का उपयोग अपनी वेबसाइट अथवा web pages में कर सकते है |
suppose कीजिये आप Netbeans का use करके वेबसाइट develop कर रहे है |
तो bootstrap के फोल्डर को download करके आप को अपने वेबसाइट फोल्डर के अंदर bootstrop को रखना है|
जैसे की आपके वेबसाइट में इमेज व अन्य फोल्डर रहते है |
और इसके बाद आप इसकी क्लासेज को import करके अपने वेब पेज में bootstrap का कोड implement कर सकते है |
अगर अभी समझ में नहीं आया है तो चिंता मत कीजिये हम इसके लिए एक अलग ब्लॉग ले कर आएंगे जो सिर्फ उसी पर केंद्रित होगा |
यहाँ पर नीचे आप एक hello world program देख सकते है जिसमे bootstrap का use किया गया है |
Hello World program bootstrap के साथ:
<!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>You can also go through a few more extensive blog links related to Bootstrap:
Bootstrap Typography In Hindi…
Bootstrap CSS Overview In Hindi…
What Is Bootstrap Grid System In Hindi…
How To Setup Bootstrap In Hindi…
What Is Bootstrap In Hindi…
How to display bootstrap code in Hindi…
Quick Q&A:
What is Bootstrap and why it is used? Bootstrap क्या होता है और इसका उपयोग क्यों करते है ?
Bootstrap एक free, open source front-end development framework है |
इसका उपयोग हम website और web apps को develop करने के लिए करते है |
इसको लाने के पीछे main कारण website को responsive बनाना था |
Bootstrap जो है वो template designs के लिए syntax का एक collection प्रोवाइड करता है |
When to use Bootstrap? Bootstrap को कब use करते है ?
bootstrap का उपयोग हम निम्नलिखित कारणों से करते है:
Responsive website बनाने के लिए, bootstrap की मदद से वेबसाइट desing करना बहुत ही आसान होता है |
bootstrap के उपयोग से आपका बहुत समय बचता है |
bootstrap में syntax का एक बड़ा कलेक्शन होता है जिससे आप अपनी वेबसाइट के लिए template design कर सकते है |
What are the advantages of Bootstrap? bootstrap के क्या क्या advantages है?
bootstrap के advantages निम्नलिखित है:
It’s responsive.
It automatically resizes images and elements.
It’s grid-based.
It includes major components.
It’s built on JavaScript and CSS.
It can easily be customized.
It has a thriving community.
It has many templates.
Is Bootstrap a compiler? क्या bootstrap एक compiler है ?
Bootstrap का उपयोग हम एक self -hosting compiler produce करने के लिए करते है |
Self -hosting compiler वो होता है जो अपने source code को खुद ही compile कर लेता है |
Bootstrap compiler के use से आप compiler को compile करते है |
और फिर इस compiled compiler को आप और सभी task complete करने के लिए use करते है |
What are the components of Bootstrap? Bootstrap के components क्या होते है?
Bootstrap के कुछ मुख्य components निम्नलिखित है:
Glyphicons.
Dropdowns.
Button groups.
Button dropdowns.
Input groups.
Navbar.
Jumbotron.
Alerts.
Conclusion:
तो दोस्तों इस ब्लॉग पोस्ट(What Is Bootstrap In Hindi) में हमने bootstrap के बेसिक को जाना कि bootstrap आखिर में होता क्या है और इसका use कहा पर होता है | दोस्तों अगर आपको HTML और css का basic नॉलेज है तो आप bootstrap framework में आसानी से काम कर सकते है | और अगर आप को HTML और css का ज्ञान नहीं है तो चिंता की कोई बात नहीं है आप किसी भी बेसिक tutorial का उपयोग करके HTML और css के बारे में सीख सकते है | और फिर bootstrap का उपयोग करके अपनी वेबसाइट और वेब पेज को Responsive बना सकते है |
इस ब्लॉग(What Is Bootstrap In Hindi) को लेकर आपके मन में कोई भी प्रश्न है तो आप हमें इस पते support@a5theory.comपर ईमेल लिख सकते है|
आशा करता हूँ, कि आपने इस पोस्ट What Is Bootstrap In Hindi को खूब एन्जॉय किया होगा|
आप स्वतंत्रता पूर्वक अपना बहुमूल्य फीडबैक और कमेंट यहाँ पर दे सकते है|What Is Bootstrap In Hindi|
आपका समय शुभ हो|
