Boootstrap (बूटस्ट्रैप) HTML, CSS, JavaScript को मिलाकर बनाया हुआ सबसे बिख्यात framework (फ्रेमवर्क) है जिसका उपयोग Responsive वेबसाइट बनाने में बहुत ज्यादा होता है Responsive वेबसाइट से मतलब है कि ऐसा वेबसाइट जिससे हम किसी भी डिवाइस(कंप्यूटर या मोबाइल) से खोल सकते हैं, मतलब अगर हम वेबसाइट को कंप्यूटर से खुलेंगे तब भी वेबसाइट अच्छे से खुलेगा और अगर हम वेबसाइट को मोबाइल से खोलेंगे तब भी वेबसाइट अच्छे से खुलेगा और वेबसाइट के डिजाइन में कोई खराबी नहीं होगी तो उस वेबसाइट को Responsive वेबसाइट कहते हैं|
Bootstrap framework (फ्रेमवर्क) को Mark Otto(मार्क ओटो) और याकूब थॉर्नटन(Jacob Thornton) द्वारा विकसित किया गया था । यह अगस्त 2011 में GitHub पर फ्री में जारी कर दिया गया था। जिसका उपयोग कोई भी अपने वेबसाइट में कर सकता है।
हम बूटस्ट्रैप का प्रयोग क्यों करें?
- 49-56 percent लोग जो हमारे वेबसाइट का उपयोग मोबाइल से करते है ऐसे में ये बहुत जरुरी है की हमारा वेबसाइट मोबाइल यूजर के लिए भी सही तरीके से काम करता हो और बूटस्ट्रैप का सबसे बड़ा फायदा यही है की बूटस्ट्रैप से बनाये गए वेबसाइट को हम किसी भी डिवाइस (मोबाइल या कंप्यूटर ) से खोले तो वेबसाइट के डिज़ाइन में कोई खराबी नहीं होता है क्योंकि Bootstrap हमें वेबसाइट को 100 % responsive बनाने की आजादी देता है।
- Bootstrap में सीएसएफ के सारे Class पहले से ही बनाए हुए होते हैं हमें बस उन Class का अपने वेबसाइट में उपयोग करना होता है और बहुत ही आसानी से और बहुत ही कम समय में हम एक सुंदर वेबसाइट बना लेते हैं इस तरह Bootstrap हमारे वेबसाइट डेवलपमेंट में लगने वाले समय को कम करता है|
- हम आप अपने जरूरत के हिसाब से Bootstrap framework को customized भी कर सकते हैं और customized framework को अपने वेबसाइट में Use कर सकते हैं|
Bootstrap का अपनी वेबसाइट में उपयोग करने के लिए सबसे पहले हमे Bootstrap फाइल को डाउनलोड करना होता है Bootstrap फाइल को डाउनलोड करने के लिए इस लिंक पर क्लिक करें:-
इसके बाद आपको Download Bootstrap (डाउनलोड बूटस्ट्रैप) बटन पर क्लिक करके Bootstrap(बूटस्ट्रैप) को डाउनलोड करना है यहां और भी दो बटन मौजूद है Source code और Sass के लिए लेकिन आपको उन्हें डाउनलोड नहीं करना है आपको सिर्फ Download Bootstrap (डाउनलोड बूटस्ट्रैप) वाले बटन पर क्लिक करना है
Bootstrap सीखने से पहले आपको HTML और CSS का Basic ज्ञान होना बहुत जरुरी है वरना आपके लिए Bootstrap को समझना मुश्किल हो जाएगा इसलिए मेरी सलाह यह है कि आप Bootstrap सीखने से पहले HTML और CSS को सीखने सीख लीजिए |
ADDING BOOTSTRAP WITH A WEBSITE IN HINDI:-
आज हम बूटस्ट्रैप को अपने वेबसाइट में जोड़ना सीखेंगे|
Boostrap(बूटस्ट्रैप) को अपने वेबसाइट में जोड़ने के लिए सबसे पहले तो आपको Boostrap(बूटस्ट्रैप) के वेबसाइट से इसे Download (डाउनलोड) करना होगा (इसे कैसे डाउनलोड करना है यह मैंने आपको Boostrap(बूटस्ट्रैप) के पहले पाठ में बता दिया है) |
जब Boostrap(बूटस्ट्रैप) के वेबसाइट से Boostrap(बूटस्ट्रैप) को डाउनलोड कर लेते हैं उसके बाद आपको एक जीप फाइल मिलता है (bootstrap-3.3.7-dist.Zip) आपको उस फाइल पर अपने माउस से राइट क्लिक करके Extract Hear (एक्सट्रेक्ट हेयर) पर क्लिक करना होगा उसके बाद आप उस फोल्डर को खोलें वहां आपको css, font, js नाम के 3 अलग-अलग फोल्डर दिखाई देंगे |
याद रखें कि Boostrap(बूटस्ट्रैप) का उपयोग अपने वेबसाइट पर करने के लिए आपको JQuery को भी अपने वेबसाइट से जोड़ना होगा वरना Boostrap(बूटस्ट्रैप) ठीक से काम नहीं करेगा |
JQuery को कैसे डाउनलोड करना है यह मैंने jquery के ट्यूटोरियल में बता दिया है आप उसे एक बार देख लीजिए |
JQuery को डाउनलोड करने के बाद आपको jquery का जो फाइल मिलता है उसे कॉपी करके आपको बूटस्ट्रैप के इस JS वाले फोल्डर के अंदर पेस्ट कर देना है
अब आपको इस फोल्डर को बंद कर देना है और उसके बाद अपने माउस से राइट बटन क्लिक करके इस फोल्डर Rename करना है और इसका नाम bootstrap-3.3.7-dist से बदलकर bootstrap कर दें|
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div> <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div> <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div> </body> </html>
अब इसके बाद आपको ऊपर लिखे कोड को कॉपी करके अपने टेक्स्ट एडिटर पर पेस्ट करना है और उसे first.html नाम से save करना है याद रखें कि इस first.html फाइल को वहीं पर सेव करें जहां पर कि आपने बूटस्ट्रैप फोल्डर को रखा है उदाहरण के लिए अगर आपने बूटस्ट्रैप फोल्डर को अपने डेक्सटॉप पर रखा है तो first.html फाइल को भी अपने डेक्सटॉप के ऊपर ही save करना है|
अब first.html पर डबल क्लिक करके उससे खोलिए |
BOOTSTRAP – GRID SYSTEM IN HINDI
RESPONSIVE WEBSITE क्या होता है ?
जिस तरह हम पानी को जिस बर्तन में रखते हैं पानी उसी का आकार ले लेता है , उसी तरह Responsive Website का मतलब होता है एक ऐसा वेबसाइट जिसे हम जब किसी कंप्यूटर के Moniter पर खोलें तो वह बहुत अच्छे से खुल जाए और जब किसी Mobile पर खोलें तो भी वह बहुत अच्छे से खुल जाए और उसके डिजाइन में कोई खराबी ना हो | मतलब की एक ऐसा वेबसाइट जिसका डिजाइन cell phones, tablets, laptops और desktops सबके लिए उपयुक्त (suitable) हो |
GRID SYSTEM क्या है ?
Bootstrap grid system किसी Website को Responsive बनाने का सबसे तेज और आसान तरीका है ।
Bootstrap grid system में किसी वेबसाइट के चौड़ाई (Width) को 4 भागों में बांट दिया गया है और इन 4 भागों के लिए पहले से ही कुछ CSS Class बनाकर रख दिए गए हैं जिनके उपयोग से हम अपनी वेबसाइट को आकार दे सकते हैं ।
ऐसे Website जिनकी चौड़ाई 1200 PX से ज्यादा है उनके लिये .col-lg-$ का प्रयोग किया जाता है |
ऐसे Website जिनकी चौड़ाई 992 PX से ज्यादा है उनके लिये .col-md-$ का प्रयोग किया जाता है |
ऐसे Website जिनकी चौड़ाई 768 PX से ज्यादा है उनके लिये .col-sm-$ का प्रयोग किया जाता है |
ऐसे Website जिनकी चौड़ाई 768 PX से कम है उनके लिये .col-xs-$ का प्रयोग किया जाता है |
| .col-xs-$ | Extra Small | Phones Less than 768px |
| .col-sm-$ | Small Devices | Tablets 768px and Up |
| .col-md-$ | Medium Devices | Desktops 992px and Up |
| .col-lg-$ | Large Devices | Large Desktops 1200px and Up |
ऊपर आपने जितने भी Class के बारे में पढ़ा है उन सबको Bootstrap grid system में 12 भागों में बांटा गया है मतलब .col-xs-$ को 12 , .col-sm-$ को 12 , .col-md-$ को 12 और .col-lg-$ को 12 हिस्सों में बांटा गया है |
दोस्तों हो सकता है कि यह चीजें अभी आप को ठीक से समझ में ना आ रहा हो तो मैं आपसे यह कहूंगा कि आप घबराइए मत बूटस्ट्रैप सीखने के लिए आपको थोड़ा धैर्य रखना पड़ेगा ।
दोस्तों हो सकता है कि यह चीजें अभी आप को ठीक से समझ में ना आ रहा हो तो मैं आपसे यह कहूंगा कि आप घबराइए मत बूटस्ट्रैप सीखने के लिए आपको थोड़ा धैर्य रखना पड़ेगा ।
एक बार आप Bootstrap grid system को समझने के बाद बाकी बचा पूरा Bootstrap आप 2 हफ्ते में सीख सकते हैं क्योंकि Grid system को समझने के बाद बूटस्ट्रैप में और समझने के लिए बचता ही नहीं है आपको बस क्लास के नाम याद करने होंगे और कुछ नहीं | इसलिए आप Grid system से घबराइए मत थोड़ा धैर्य रखिए |
अगले पाठ में हम Bootstrap grid system के उदाहरण देखेंगे जिसे देख कर आप Bootstrap grid system को धीरे-धीरे से समझने लगेंगे ।
अगले पाठ में आपने Bootstrap grid system का Basic Introduction पढ़ा था इस पाठ में आप Bootstrap grid system को Practically Use करना सीखेंगे:-
नीचे के चित्रों को ठीक से देखिए किस तरह से col-xs को अलग-अलग हिस्सों में बांटा गया है |
col-xs का मतलब है कि 768 PX से कम चौड़ा वेबसाइट जिससे हम अपनी जरूरत के हिसाब से 12 हिस्सों में बांट सकते हैं |
अब मान लीजिए कि मुझे 768 PX से कम चौड़ा वेबसाइट को तीन हिस्सों में बांटना है तो उसके लिए मैं निम्नलिखित class लिखूंगा
<div class="col-xs-4">.col-xs-6</div> <div class="col-xs-4">.col-xs-6</div> <div class="col-xs-4">.col-xs-6</div>
इसी तरह अगर मुझे 992 PX से ज्यादा चौड़ा वेबसाइट को दो हिस्सों में बांटना है तो उसके लिए मैं निम्नलिखित class लिखूंगा
<div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div>
इसी तरह अगर मुझे 1200 PX से ज्यादा चौड़ा वेबसाइट को दो हिस्सों में बांटना है तो उसके लिए मैं निम्नलिखित class लिखूंगा
<div class="col-lg-6">.col-md-6</div> <div class="col-lg-6">.col-md-6</div>
Bootstrap grid system की एक अच्छाई यह है कि अगर हम किसी छोटे size के लिए मतलब की small size(col-xs-$ or ऐसे Website जिनकी चौड़ाई 768 PX से कम है) के लिए कोई class website में लगते है और उससे बड़ा size (ऐसे Website जिनकी चौड़ाई 768 PX से 1200px है) के लिए Website में कोई class नहीं लगते तो भी small size वाला Class Large Size के लिए भी मान्य होगा |मतलब कि col-xs-$ नाम का अगर कोई Class हम अपने वेबसाइट में लगाते हैं तो यह क्लास col-sm-$, col-md-$ और col-lg-$ इन सबके लिए भी मान्य होगा |
लेकिन अगर हम col-lg-$ नाम का कोई class अपने वेबसाइट में लगाते हैं तो यह Class सिर्फ 1200 px के चौड़ाई पर ही मान्य होगा 1200 px से कम Width पर यह क्लास मान्य नहीं होगा | मतलब कि col-lg-$ class बाकी दूसरे छोटे class जैसे की col-md-$, col-sm-$ और col-xs-$ के लिए मान्य नहीं होगा |
अगर हम छोटी Class को अपने वेबसाइट में लगाते हैं तो वह ज्यादा चौड़ाई में भी valid है लेकिन बड़ा Class कम चौड़ाई में Valid नहीं होता है |
दोस्तों आप Grid System से घबराइए मत से धीरे-धीरे समझिए|
अगले पाठ में हम यह देखेंगे कि किस तरह से हम बूटस्ट्रैप Grid System की मदद से किसी वेबसाइट को Responsive बना सकते हैं |
आज के पाठ में हम यह पढ़ेंगे कि किस तरह से हम बूटस्ट्रैप Grid System की मदद से किसी वेबसाइट को Responsive बना सकते हैं |
दोस्तों Bootstrap को अपने वेबसाइट के साथ कैसे जोड़ना है यह मैंने आपको पहले ही बता दिया है | मैं नीचे के उदाहरण में मैं बूटस्ट्रैप और JQuery के CDN के का उपयोग कर रहा हूं | अगर अपने बूटस्ट्रैप को अपने कंप्यूटर पर डाउनलोड कर रखा है और आप चाहते हैं तो आप अपने कंप्यूटर से ही बूटस्ट्रैप को लिंक कर सकते हैं और Bootstrap को कैसे लिंक करना है यह मैं आपको पहले ही बता चुका हूं |
अब नीचे के उदाहरण को देखिए:-
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Grid System</h1>
<div class="col-xs-4 col-sm-5 col-md-3 col-lg-4">
Hi my name is santosh.<br>
I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in
making single page application with AngularJs.I am Very Good In error Solving.
</div>
<div class="col-xs-4 col-sm-5 col-md-3 col-lg-4">
Hi my name is santosh.<br>
I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in making single page application with AngularJs.I am Very Good In error Solving.
</div>
<div class="col-xs-4 col-sm-2 col-md-6 col-lg-4">
Hi my name is santosh.<br>
I have depth understanding of Core PHP, OOPS , MVC Framework like Codeigniter and very Good experience in making single page application with AngularJs.I am Very Good In error Solving.
</div>
</body>
</html>
ऊपर लिखे Code को copy करके अपने Text-Editor पर Paste करिए उसके बाद उसे index.html नाम देखकर अपने कंप्यूटर पर Save करिए फिर उससे अपने Web Browser पर खोलें और अपने Browser के Size को कम करके देखिए की आपको क्या Output मिलता है |
0 Comments