gyaniansinfo@gmail.com
Follow on

Bootstrap Kya Hai – Responsive Website Kaise Banaye?

Bootstrap Kya Hai – Responsive Website Kaise Banaye - GyaniansHello Gyanians, आज बात करेंगे की 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 करने में कोई परेशानी नही होगी.

 

5 Reasons क्यों आपकी Website Responsive होनी चाइये?

1) Search Engine Prefer Responsive Websites – सभी search engines (google, bing) responsive website को ज्यादा prefer करते है. अगर आपकी website responsive है तो search engines में आपकी rank भी अच्छी होगी और सबसे ज्यादा traffic भी तो search engines से मिलता है.

2) Mobile Use is on the Rise – इस दुनिया (earth) पर जितने लोग नही है उससे ज्यादा इस दुनिया में mobiles मोजूद है. यानी अब ज्यादातर लोग internet चलाने के लिए अलग-अलग screen size के mobiles का use करते है, यहाँ तक की अपने bathroom में भी. अब अगर आप चाहते हो की आपकी website हर तरह के screen size पर सही से चले तो website का responsive होना जरुरी है.

3) Positive User Experience – Responsive website पर उसके visitors को अच्छा experience मिलता है, क्योंकि वो responsive website पर आसानी से navigate कर लेता है और आपकी website की bounce rate भी कम रहती है. इससे आपकी website और business की reputation भी अच्छी बनती है.

4) Responsive Website is Preferred for SEO – Responsive website होना भी SEO का एक बहुत important factor है. Responsive website की loading speed भी fast होती है.

5) An Investment for the Future – कल का किसे पता है की कौन-कौन से screen size की computers, mobile आ जाये लेकिन अगर आज आपके पास responsive website है तो आपको कल की चिंता करने की कोई जरूरत नही है.

 

Responsive Website Kaise Banaye?

Responsive website बनाना बहुत ज्यादा कठिन काम नही है आपको बस HTML और CSS की अच्छी knowledge होनी चाइये, अगर आपको HTML और CSS नही का use करना नही आता है तो आप मेरी posts को पढ़ सकते है जिन्हें पढने के बाद आप 100% HTML और CSS सीख जायेंगे. CSS के use से आप responsive website बना तो सकते है लेकिन आपको उसके लिए बहुत मेहनत (code) करना पड़ेगा.

 

 

हर 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 Kya Hai और कैसे Bootstrap से आप device responsive website बना सकते है.

 

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 JavaScript से बना हुआ framework है जिसे responsive, mobile-first websites को design करने के लिए बनाया गया है. Twitter company के employee Mark Otto and Jacob ने August 2011 में Bootstrap को GitHub पर as a open source product released किया था. June 2014 में Bootstrap GitHub पर No.1 project बन गया था.

Acutal में Bootstrap में ये किया गया है की HTML, CSS और JavaScript की help से Bootstrap component बनांये गये है जिन्हें आप simple copy-paste करके अपने webpages में use कर सकते हो. Bootstrap developers ने जो भी HTML components बनाएं है उन्हें CSS classes देकर और JavaScripts का use करके responsive और stylish बना दिया है और इसलिए आपको ज्यादा कुछ मेहनत नही करनी होती आपको तो बस वो बने हुए components को use करना होता है.

 

Why Use Bootstrap?

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 और JavaScript 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 Kya Hai Aur Bootstrap Kaise Sikhen?

अब आप ये तो समझ गये की Responsive website के क्या-क्या advantage है, Responsive website कैसे बना सकते है और Bootstrap Kya Hai. अब हम बात करेंगे कैसे आप Bootstrap सीख कर responsive website बना सकते हो. अगर आप मेरे बताएं हुए तरीके को follow करेंगे तो आप बहुत easy तरीके से Bootstrap से website बना सकते है.

Bootstrap को आप 2 तरह से use कर सकते हो पहला उसे Download करके और दूसरा CDN के जरिये. मैं आपको suggest करूंगा की आप CDN के जरिये use करिये क्योंकि ये तरीका बहुत आसान है और best भी. Bootstrap use करने के लिए आपको bootstrap CSS, JavaScript और Ajax के CDN को अपने HTML code में जोड़ना होगा. नीचे मैंने आपको example दिया है.

 

 

 

ऊपर दिए गये code को करने के बाद आप Bootstrap के सभी ready made component (container, grid, Typography, Images, Jumbotron, Forms, Menubar इत्यादि) को simple copy – paste करके use कर सकते हो और आप चाहो तो अपने Custom CSS code से इनकी style भी change कर सकते हो. मुझे उम्मीद है अब आप अच्छे से समझ गये होंगे की Bootstrap Kya Hai और कैसे Bootstrap से आप device responsive website बना सकते है.

Extra Tip – Bootstrap Kya Hai और उसके tutorials आपको video और text दोनों formats में hindi और english में मिल जाते है. इसलिए अगर आपको HTML और CSS की basic भी knowledge है तो आप बहुत आसानी से online tutorials से Bootstrap सीख सकते हो, उसके लिए आप W3School और YouTube की help ले सकते है.

 

Hello Gyanians, आशा करता हूँ की आपको ये “Bootstrap Kya Hai – Responsive Website Kaise Banaye?” post पसंद आई होगी. अगर आपको इस post से related कोई सवाल या सुझाव है तो नीचे comment करें और इस post को अपने दोस्तों के साथ जरुर share करें.

About the Author

Hello gyanians, मेरा नाम Neeraj Parmar (Neel) है और में India की Taj City (Agra) में रहता हूँ. मैंने computer science से engineering की है. By Profession मैं computer science teacher और web developer हूँ और इसके साथ-साथ ही मैं part time blogging भी करता हूँ. Read More >>

4 Comments

4 responses to “Bootstrap Kya Hai – Responsive Website Kaise Banaye?”

  1. Thãkûr says:

    nice

  2. thank you so much sir for share this information

Leave a Reply

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

Get In Touch
gyaniansinfo@gmail.com
Copyright 2017 By Gyanians (All Right Reserved) | Design & Developed By WebAtoZ.in