Bootstrap क्या है – Responsive Website कैसे बनाए
आज बात करेंगे की Bootstrap Kya Hai और कैसे Bootstrap से आप Device Responsive Website बना सकते है.
जैसा की आप जानते है की अब वो Time गया जब लोग Internet सिर्फ Laptop या Desktop पर चलाते थे लेकिन अब 55% Internet User’s Internet चलाने के लिए Mobile Device का Use करते है. इसलिए लिए आपकी Website (blog) का Layout और Content हर Devices (platform) के लिए User Friendly होनी चाइये.
अगर आपके Website के Visitors को आपके Layout and Content को देखने के लिए बार-बार Zoom In-Out करना पड़ा तो 99% Chances है की वो आपकी Website को बहुत जल्दी ही बंद कर दें.
अगर आपकी Website Responsive है तो किसी भी Device पर उसका Layout and Content Automatically Adjust हो जायेगा जिससे आपके Website के Visitors को आपकी Website Use करने में कोई परेशानी नही होगी.
Table of Contents
Bootstrap Kya Hai
अगर आप कभी Notice करो तो ज्यादातर Website का Design and Layout Same सा ही होता है, वो इसलिए क्योंकि जब कोई Web Designer किसी भी Web Project पर काम करता है तो वो हर बार फिर से CSS Code नही लिखता है वो अपने पुराने Web Project को Copy Paste करके Use कर लेता है.
उन्हें सिर्फ CSS File की Classes और ID ( Selectors) को अपने New Project के Html Elements में Use करना होता है. इससे उनका बहुत Time और मेहनत बच जाती है
लेकिन हर Web Designers के पास इतना अच्छा Experience और Knowledge नही होती की वो एक बेहतरीन CSS Foundation Style File (Framework) बना सकें जो हर तरह की Website की Design Requirement को पूरा कर सकें.
आपको शुक्रिया करना चाइये उन Developers and Companies जिन्होंने हजारों Hours बहुत मेहनत से Code करके अलग-अलग CSS Framework तैयार किये है और जिनका Use करके आप बहुत कम Time और मेहनत से बेहतरीन Website Design कर सकते हो.
इतने सारे अलग-अलग CSS Framework में मेरा जो Favorite है वो है Bootstrap, जिसे पूरी दुनिया में सबसे ज्यादा Use किया जाता है. Bootstrap Html, CSS and Java Script से बना हुआ Framework है जिसे Responsive, Mobile-First Websites को Design करने के लिए बनाया गया है.
Twitter Company के Employee Mark Otto and Jacob ने August 2011 में Bootstrap को Git Hub पर as A Open Source Product Released किया था. June 2014 में Bootstrap Git Hub पर No.1 Project बन गया था.
Actual में Bootstrap में ये किया गया है की Html, CSS और Java Script की Help से Bootstrap Component बनांये गये है जिन्हें आप Simple Copy-Paste करके अपने Webpages में Use कर सकते हो.
Bootstrap Developers ने जो भी Html Components बनाएं है उन्हें CSS Classes देकर और Java Scripts का Use करके Responsive और Stylish बना दिया है और इसलिए आपको ज्यादा कुछ मेहनत नही करनी होती आपको तो बस वो बने हुए Components को Use करना होता है.
Bootstrap Kyu Use Kare
Easy to Use – जिस किसी को Html and CSS की Basic Knowledge है वो बहुत आसानी से Bootstrap को Use कर सकता है. अपने Experience से बताऊ तो Html and CSS की Basic Knowledge होने के बाद Bootstrap को Use करना बच्चों का खेल है.
Save Time – Bootstrap Framework में आपको Readymade Code जिसे आपको बस सही जगह Use करना होता है. ऐसा करने से आपको अपने हर Project के लिए Complete Html, CSS और Java Script Code नही कर पड़ता है और आपका बहुत Time Save हो जाता है.
Responsiveness – Bootstrap को बनाया ही गया है Responsive Website बनाने के लिए. Bootstrap से आप जो भी Website बनायेंगे उसे आप Desktop, Laptop, Tablet, Mobile इत्यादि किसी भी Device पर Open करें आपको Website बिलकुल Fit to Device नजर आएगी.
Customizable – अगर आप Bootstrap की In-Built Style को Change करना चाहो तो कर सकते हो, उसके लिए आपको अपना CSS Code लिख कर Bootstrap Code को Overwrite करना होगा बस.
Bootstrap Kaise Sikhe
अब आप ये तो समझ गये की Responsive Website के क्या-क्या Advantage है, Responsive Website कैसे बना सकते है. अब हम बात करेंगे कैसे आप Bootstrap सीख कर Responsive Website बना सकते हो. अगर आप मेरे बताएं हुए तरीके को Follow करेंगे तो आप बहुत Easy तरीके से Bootstrap से Website बना सकते है.
Bootstrap को आप 2 तरह से Use कर सकते हो पहला उसे Download करके और दूसरा Cdn के जरिये. मैं आपको Suggest करूंगा की आप Cdn के जरिये Use करिये क्योंकि ये तरीका बहुत आसान है और Best भी. Bootstrap Use करने के लिए आपको Bootstrap CSS, Java Script और Ajax के Cdn को अपने Html Code में जोड़ना होगा. नीचे मैंने आपको Example दिया है.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="wIDth=device-wIDth, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"> </head> <body> <H1> Hello Gyanians </H1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
- Doubtnut App क्या है – के बारे में पूरी जानकारी | Doubtnut App Download
- BYJU’s App क्या है – BYJU’s मे Job कैसे पाए | BYJU’s App Download
ऊपर दिए गए Code को करने के बाद आप Bootstrap के सभी Ready Made Component ( Container, GRID, Typography, Images, Jumbotron, Forms, Menu bar इत्यादि) को Simple Copy – Paste करके Use कर सकते हो और आप चाहो तो अपने Custom CSS Code से इनकी Style भी Change कर सकते हैं.
Extra Tip – Tutorials आपको Video और Text दोनों Formats में Hindi और English में मिल जाते है. इसलिए अगर आपको Html और CSS की Basic भी Knowledge है तो आप बहुत आसानी से Online Tutorials से Bootstrap सीख सकते हो, उसके लिए आप W3 School और YouTube की Help ले सकते है.
Responsive Website Kaise Banaye
Responsive Website बनाना बहुत ज्यादा कठिन काम नही है आपको बस Html और CSS की अच्छी Knowledge होनी चाइये, अगर आपको Html और CSS नही का Use करना नही आता है तो आप मेरी Posts को पढ़ सकते है जिन्हें पढने के बाद आप 100% Html और CSS सीख जायेंगे. CSS के Use से आप Responsive Website बना तो सकते है लेकिन आपको उसके लिए बहुत मेहनत (code) करना पड़ेगा.
- HTML क्या है, HTML से Website कैसे बनाए, HTML कैसे सीखे
- Read: CSS Kya Hai Aur CSS Se Blog Ko Design Kaise Kare?
हर Screen Size के लिए Website के Content and Layout को Manage करने के लिए CSS में बहुत सारी Media Queries को Use करना पड़ेगा. Media Queries की Help से आप Screen Size के Based पर Html Structure को Style (manage) देते हो.
सच कहूँ तो एक Beginners के लिए सिर्फ CSS का Use करके Responsive Website बनाना बहुत कठिन और मेहनत का काम है. अगर आप बहुत आसानी से Responsive Website बनाना चाहते हो तो इसमें Bootstrap Framework आपकी बहुत Help कर सकता है इसलिए आइये जानते है की Bootstrap से आप Device Responsive Website बना सकते है.
- O Level क्या होता है, OLevel के फायदे, Syllabus, Course,Fees
- Google Search Console क्या होता है – Ranking कैसे Check करे
5 Reasons क्यों आपकी Website Responsive होनी चाइये?
- Search Engine Prefer Responsive Websites – सभी Search Engines ( Google, Bing) Responsive Website को ज्यादा Prefer करते है. अगर आपकी Website Responsive है तो Search Engines में आपकी Rank भी अच्छी होगी और सबसे ज्यादा Traffic भी तो Search Engines से मिलता है.
- Mobile Use Is on The Rise – इस दुनिया (earth) पर जितने लोग नही है उससे ज्यादा इस दुनिया में Mobiles मोजूद है. यानी अब ज्यादातर लोग Internet चलाने के लिए अलग-अलग Screen Size के Mobiles का Use करते है, यहाँ तक की अपने Bathroom में भी. अब अगर आप चाहते हो की आपकी Website हर तरह के Screen Size पर सही से चले तो Website का Responsive होना जरुरी है.
- Positive User Experience – Responsive Website पर उसके Visitors को अच्छा Experience मिलता है, क्योंकि वो Responsive Website पर आसानी से Navigate कर लेता है और आपकी Website की Bounce Rate भी कम रहती है. इससे आपकी Website और Business की Reputation भी अच्छी बनती है.
- Responsive Website Is Preferred for Seo – Responsive Website होना भी Seo का एक बहुत Important Factor है. Responsive Website की Loading Speed भी Fast होती है.
- An Investment for The Future – कल का किसे पता है की कौन-कौन से Screen Size की Computers, Mobile आ जाये लेकिन अगर आज आपके पास Responsive Website है तो आपको कल की चिंता करने की कोई जरूरत नही है.
आशा करता हूँ की आपको ये bootstrap Kya Hai और Responsive Website Kaise Banaye पोस्ट पसंद आई होगी. अगर आपको इस Post से Related कोई सवाल या सुझाव है तो नीचे Comment करें और इस Post को अपने दोस्तों के साथ जरुर Share करें.
- CCC Certificate Download कैसे करें, Signature Validation
- HTTPS क्या है, HTTPS कैसे काम करता है, S का मतलब, ErrorCodes
- EDGE क्या है, EDGE के क्या Features हैं, History, Advancement
- Biometric Device क्या है, कैसे काम करता है, फायदे, प्रकार
- Ring Topology क्या है, कैसे काम करता है, फायदे नुक्सान, प्रकार
- 3G क्या है, 3G Spectrum क्या है, Services के फायदे, इस्तेमाल
nice
thank you, keep visiting ~
thank you so much sir for share this information
My pleasure brother … keep visiting ~
sir port kya hai bata do please
Main aapka question nhi smjha… ye kis chij se realted hai .. baise port to hum bahut si jagho par use karte hain
Bahut achha article sir.
Mujhe SEO se related baat krni hai aose.
Can you plz contact me on htips7@gmail.com
Thanks brother .. u can send me your questions on my email~
Me abhi blogger par blogging karta hu Mera blog Hai https://indiasparam.blogspot.com
Sir me WordPress par website banana chahta hu I have some knowledge in HTML but I nothing to no in css
So please help and give me
Hello Brother tell me what can i do for you?
Hello brother mai apne blog ka menu bar change karna chahata hu kaise karu
Brother use theme builder plugin ~
Thanks for sharing this useful and informative article.
Thanks for compliments, keep visiting ~
its really amazing infotmation