Saturday, July 4, 2020
Home Tutorials Bootstrap Tutorial in Hindi

Bootstrap Tutorial in Hindi [Latest Version]

इस आर्टिकल में हम आपको Bootstrap Tutorial in Hindi की पूरी जानकारी देंगे। Bootstrap क्या है? Bootstrap क्यों यूज़ की जाती है? Bootstrap कैसे यूज़ करें? इसके Features, लाभ(Advantages) , Bootstrap के Examples आदि।

हमारे साथ जुड़े रहिये ऐसे ही और Hindi Tutorials के लिए।

शुरू करतें हैं :

What is Bootstrap in Hindi?

Bootstrap एक front-end फ्रेमवर्क है। यह एक open source framework है इसका अर्थ यह है कि यह बिलकुल फ्री है और इसके डेवलपमेंट में कोई भी हिस्सा ले सकता है।

इसका उपयोग web development के लिए किया जाता है। यह web डेवलपमेंट को बहुत ही faster और आसान बना देता है।

Front End फ्रेमवर्क का अर्थ होता है जो हमारे User Interface को develop करने के इस्तेमाल में आये। यानी की किसी वेबसाइट की ऊपर से दिखने वाली डिज़ाइन।

यह एक CSS फ्रेमवर्क है। Bootstrap की सहायता से हम बहुत आसानी से Responsive Designs बना सकते हैं।

Responsive Design क्या होता है?

Responsive Design उसे कहते हैं जो डिज़ाइन अपने आप को हर device और screen के हिसाब से ढाल ले। एक Website को यूज़र Laptop, मोबाइल, टैबलेट किसी भी डिवाइस में ओपन कर सकता है।

ऐसी स्थितियों के लिए ही Responsive Design का इस्तेमाल किया जाता है।

Bootstrap tutorial in hindi responsive design
Responsive Design

Responsive Designs हर स्क्रीन पर अच्छी लगती हैं।

Bootstrap की History

Bootstrap को Mark Otto और Jacob Thornton ने डेवेलप किया था। यह दोनों twitter में काम करते थे और वहीं उन्होंने Bootstrap को develop किया था।

परन्तु Bootstrap का नाम पहले Twitter Blueprint था जिसको बाद में बदल के Bootstrap कर दिया गया था ।

Bootstrap के versions

  • Bootstrap का पहला version 19 अगस्त, 2011 में रिलीज़ किया गया था।
  • इसके बाद Bootstrap का दूसरा version 2012 में और तीसरा 2013 में रिलीज़ हुआ था।
  • Bootstrap का लेटेस्ट version 4 है जो कि 2018 में पूरी तरह से रिलीज़ हुआ था।
  • इसके अतिरिक्त Bootstrap के version 5 पर अभी काम चल रहा है और वो अभी रिलीज़ नहीं हुआ है।

जून 2014 में Bootstrap को GitHub पर No. 1 प्रोजेक्ट का दर्ज़ा मिला था।

Bootstrap के Features

Bootstrap Framework के बहुत सारे features है, जो कि निम्नलिखित हैं :

यह Bootstrap tutorial in Hindi का बहुत important सेक्शन है क्यूंकि यह इंटरव्यू में भी अक्सर पूछा जाता है।

Bootstrap Features

1. Easy to Use

Bootstrap Framework को इस्तेमाल करना बहुत ही आसान है। इसको सीखना बहुत ही सरल है। जिसको भी HTML, CSS की बेसिक जानकारी है वो Bootstrap बहुत आसानी से सीख सकता है।

यह फ्रेमवर्क easy to use और easy to learn है।

2. Responsive

Bootstrap का सबसे बड़ा फीचर इसका responsive होना है। आज कल बहुत सारी डिवाइस मार्किट में है और खासकर मोबाइल बहुत ज्यादा इस्तेमाल होता है।

अगर आपकी वेबसाइट या कोई भी वेब प्रोजेक्ट लैपटॉप पर अच्छा दिखता है मगर मोबाइल या टैबलेट पर नहीं तो यह बहुत बड़ी कमी है। इससे अच्छा यूज़र एक्सपीरियंस नहीं मिलता।

इसीलिए आज कल Responsive design ही यूज़ की जाती है।

जिससे आपका वेब प्रोजेक्ट हर डिवाइस पर अच्छा दिखता है।

3. Mobile Friendly

यह framework Mobile-First approach को फॉलो करता है।

इसमें बहुत सारे पहले से बने मोबाइल के डिज़ाइन मिल जाते हैं जो की बहुत लाभकारी साबित होते हैं।

Mobile-First approach का सीधा मतलब यह है कि इसमें डिजाइनिंग पहले मोबाइल को ध्यान में रखके की जाती है।

इंटरनेट के यूज़र्स मोबाइल को ज्यादा प्रेफर करते हैं।

4. Good Documentation

Bootstrap के साथ बहुत अच्छी documentation भी प्रोवाइडेड है जिसमे बहुत सारे examples बने हुए हैं।

इस documentation की वजह से Bootstrap को सीखना और भी आसान हो जाता है। Bootstrap का डॉक्यूमेंटेशन इंग्लिश भाषा में है।

5. Browser Compatible

Bootstrap लगभग हर मॉडर्न browser के साथ compatible(अनुकूल) है।

Browsers जैसे कि Chrome, Internet Explorer, Safari, Firefox और Opera Bootstrap को सपोर्ट करते हैं।

6. Grid Styling

Bootstrap ग्रिड स्टाइलिंग पर आधारित है।

Bootstrap Framework मैं डिफ़ॉल्ट रूप से 12 कॉलम grid होती है। इसका अर्थ है की एक स्क्रीन को 12 grid में बांटा गया है।

इससे वेबसाइट का layout बनाना बहुत आसान हो जाता है। यह grid फिक्स्ड और responsive दोनों ही तरह की हो सकती है।

7. Pre-Styled Components

Bootstrap में बहुत सारे components पहले से ही बने हुए यानी कि Pre-Styled कंपोनेंट्स उपलब्ध होते हैं।

इन कंपोनेंट्स का आसानी से इस्तेमाल किया जा सकता है।

Bootstrap के कुछ Pre-Styled कंपोनेंट्स हैं – Navbar, Button, Alerts आदि।

8. Easy Integration

Bootstrap को किसी दुसरे प्लेटफार्म या फ्रेमवर्क से integrate(जोड़ना) बहुत ही आसान है।

इसे किसी existing वेबसाइट के साथ integrate करना भी बहुत आसान है।

Bootstrap को अपने Website में कैसे use करें?

Bootstrap को अपने वेबसाइट या वेब प्रोजेक्ट में इस्तेमाल करने के लिए आपको इसे या तो डाउनलोड या इम्पोर्ट करना होगा।

इसके लिए आप नीचे दिए गए दोनों तरीको में से कोई भी यूज़ कर सकते हैं :

  1. Download the Bootstrap
  2. Include the Bootstrap CDN

Downloading the Bootstrap

Bootstrap को डाउनलोड करने के लिए नीचे दिए हुए steps फॉलो करें :

  • getbootstrap.com वेबसाइट पर जाएँ।
  • वहाँ पर आप ‘Download’ के बटन पर क्लिक करें।
  • आप अपने मनचाहे Bootstrap के version को डाउनलोड कर सकते हैं।

आपने Bootstrap को download कर लिया तो आप उसे बिना इंटरनेट के भी इस्तेमाल कर सकते हैं।

अगर आप Bootstrap को डाउनलोड नहीं करना चाहते तो नीचे वाला स्टेप फॉलो कीजिये।

Bootstrap CDN

Bootstrap CDN का इस्तेमाल करना बहुत आसान है। इसमें आपको Bootstrap को डाउनलोड करने की जरूरत नहीं पड़ती।

परन्तु इसका आप इंटरनेट के साथ ही कर सकते हैं अगर आपका इंटरनेट नहीं चल रहा तो उस वक्त आप इसका इस्तेमाल नहीं कर सकते।

CDN का पूरा नाम ‘Content Delivery Network’ होता है। इसका कार्य कंटेंट को नेटवर्क पर प्रोवाइड करने का होता है।

Bootstrap का CDN use करने के लिए नीचे वाले स्टेप्स को फॉलो करें :

  • अगर आपको Bootstrap के लेटेस्ट version का CDN चाइये तो आप यहाँ से डाउनलोड कर सकते हैं।
  • या फिर आप नीचे दिए हुए कोड को आपके वेबसाइट के HTML फाइल में डाल दीजिये।
  • इस code को आपको <head> </head> सेक्शन में डालना है।
<!--  CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!--  JS  -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Bootstrap Example: Create Web Page with Bootstrap 4

Bootstrap के फीचर्स हमने पढ़ लिए, इसे कैसे डाउनलोड करना है वो भी जान लिया। अब प्रैक्टिकल स्टेप्स पर चलते हैं।

अब हम Bootstrap का यूज़ करके वेब पेज बनाते हैं। नीचे दिए हुए स्टेप्स फॉलो करें :

इसके लिए आपको पहले से दो चीजों की जरूरत होगी – Text Editor, Internet.

HTML फाइल create करें

Bootstrap का use करने के लिए सबसे पहले आपको एक HTML फाइल की जरूरत पड़ेगी।

html फाइल को क्रिएट करने के लिए आप किसी text फाइल को .html या .htm extension से सेव करें।

बस आपकी HTML फाइल तैयार है।

HTML doctype add करें

आपके html फाइल में अब नीचे दिया हुआ कोड कॉपी पेस्ट करें।

हमें इस कोड की आवश्यकता इसलिए पड़ती है क्यूंकि Bootstrap HTML और CSS के elements का use करता है इसलिए HTML5 doctype को डिक्लेअर करना पड़ता है।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Meta viewport set करें

Bootstrap 4 में मोबाइल फर्स्ट एप्रोच फॉलो होती है।

इसलिए हम viewport सेट करना होता है। इससे हर डिवाइस पर सही से रेंडरिंग और ज़ूमिंग हो जाती है।

<meta> टैग को <head> टैग के अंदर प्लेस किया जाता है। नीचे दिया हुआ कोड आपकी फाइल के <head> सेक्शन के अंदर डालें।

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width : इससे आपके पेज का width डिवाइस के width के हिसाब से सेट हो जाता है।

initial-scale=1 : यह वेब पेज का शुरुवाती ज़ूम लेवेल सेट करने के लिए होता है।

Bootstrap के Containers

Bootstrap में वेबसाइट के एलिमेंट्स को wrap करने के लिए Containers का इस्तेमाल होता है। इसमें container की दो classes होती हैं।

Bootstrap Container Classes :

  • .container
  • .container-fluid

.Container class

अगर हम Bootstrap की .container क्लास का इस्तेमाल करते हैं तो हमें एक Responsive fixed width container मिलता है। जिसका अर्थ है कि container की width(चौड़ाई) फिक्स होती है।

यह कुछ ऐसा दिखता है :

Bootstrap tutorial in hindi-container class
Bootstrap tutorial in hindi

.Container-fluid class

अगर हम Bootstrap की .container-fluid क्लास का इस्तेमाल करते हैं तो हमें एक full width container मिलता है। जिसका अर्थ है कि container की width(चौड़ाई) पूरे viewport के बराबर होती है।

यह कुछ ऐसा दिखता है :

Bootstrap tutorial in hindi-container-fluid class

Bootstrap Complete Example

इन स्टेप्स को फॉलो करके आप Bootstrap का वेब पेज बना सकते हैं।

पूरा कोड :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

	<!--  JS  -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </head>

  <body>

  <div class="container-fluid">
    <h1>Bootstrap Web Page</h1>
    <p>This is a Paragraph</p>
    <button class="btn btn-primary">this is a Button</button>
  </div>

</body>
</html>

Output :

bootstrap tutorial in hindi example
Output : bootstrap tutorial in hindi

सारांश : Bootstrap Tutorial in Hindi

इस पोस्ट में आपने Bootstrap tutorial in hindi को पूरा समझा। हम आशा करते हैं कि आपको अब पता चल गया है Bootstrap क्या हैं? कैसे चलता है?

  • Bootstrap एक open source framework हैं।
  • यह Twitter के द्वारा डेवेलोप किया गया था।
  • यह एक HTML – CSS पर चलने वाला फ्रेमवर्क है।
  • इसे रेस्पॉन्सिव वेब पेज बनाने के लिए इस्तेमाल किया जाता है।
  • इसे सीखना बहुत ही आसान है।

अगर आपको इस Bootstrap tutorial in hindi में कोई चीज़ समझ न आयी हो तो हमें comment में बताएं, हम आपके डाउट क्लियर करेंगे।

Stay Connected

172FansLike
0FollowersFollow
0FollowersFollow
2FollowersFollow
0SubscribersSubscribe

Must Read

15 मिनट के अंदर Jio SIM को ब्लॉक करें – How to Block Jio Sim Fast [2020]

How to Block Jio SIM की इस गाइड में हम आपको किसी Jio Sim को block अथवा बंद करने की प्रक्रिया की...

Jio SIM को activate कैसे करें -How to activate Jio SIM Step by Step [2020]

How to activate Jio SIM के इस गाइड में हम आपको किसी Jio SIM को activate करने की प्रक्रिया की Step by...

PHP Tutorial in Hindi Free – PHP सीखें आसान हिंदी में [2020]

इस PHP tutorial in Hindi में हम PHP scripting लैंग्वेज की पूरी जानकारी सीखेंगे। PHP क्या है? इसे...

JQuery Tutorial in Hindi Exclusive Guide – सीखें आसान भाषा में [2020]

इस आर्टिकल JQuery Tutorial in Hindi में हम आपको JQuery के बारे में सारी जानकारी देंगे। JQuery Tutorial...

Related News

15 मिनट के अंदर Jio SIM को ब्लॉक करें – How to Block Jio Sim Fast [2020]

How to Block Jio SIM की इस गाइड में हम आपको किसी Jio Sim को block अथवा बंद करने की प्रक्रिया की...

Jio SIM को activate कैसे करें -How to activate Jio SIM Step by Step [2020]

How to activate Jio SIM के इस गाइड में हम आपको किसी Jio SIM को activate करने की प्रक्रिया की Step by...

PHP Tutorial in Hindi Free – PHP सीखें आसान हिंदी में [2020]

इस PHP tutorial in Hindi में हम PHP scripting लैंग्वेज की पूरी जानकारी सीखेंगे। PHP क्या है? इसे...

JQuery Tutorial in Hindi Exclusive Guide – सीखें आसान भाषा में [2020]

इस आर्टिकल JQuery Tutorial in Hindi में हम आपको JQuery के बारे में सारी जानकारी देंगे। JQuery Tutorial...

योग दिवस के बारे में सारी जानकारी -International Yog Divas 2020

International Yog Divas/योग दिवस 2020 रविवार 21 जून को है। अंतराष्ट्रीय योग दिवस / International Yog divas 2014 से 21 जून को...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Theहिन्दीTV 

समाचार पत्रिका

 हमारे न्यूज़लेटर की सदस्यता लें और अपडेट रहें।

Stay connected