Bootstrap CSS Overview In Hindi?

हेलो दोस्तों आज के इस ब्लॉग पोस्ट(Bootstrap CSS Overview In Hindi) में हम आपको Bootstrap infrastructure के बारे में कुछ के पॉइंट्स हिंदी में बताने वाले है | और इस पोस्ट के माध्यम से हम आपको वह एप्रोच भी बताएँगे जिससे Bootstrap के साथ वेब डेवलपमेंट को और भी तेज़, अच्छा और मजबूत बनाया जा सकता है |Bootstrap CSS Overview In Hindi|

HTML5 doctype : Bootstrap CSS Overview In Hindi

अगर आप Bootstrap के लेटेस्ट version का उपयोग कर रहे है तो फिर आपको बता दे कि Bootstrap HTML और CSS के कुछ ऐसी प्रॉपर्टीज का use करता है जिनको HTML5 document की जरुरत होती है | इसे आपको अपने प्रोजेक्ट के begining में ही रखना पड़ता है | जैसे की आप example निचे देख सकते है |Bootstrap CSS Overview In Hindi|

<!DOCTYPE html>
<html>
   ....
</html>

Mobile first strategy : Bootstrap CSS Overview In Hindi

देखिये आज कल के समय जहाँ पर अब लोग mobile device का बहुत use करते है ऐसे समय पर अब web development Bootstrap का कोड स्ट्रक्चर भी थोड़ा बदल दिया गया है | जहाँ पहले बड़े डिवाइस जैसे की लैपटॉप और डेस्कटॉप के लिए code हर लाइब्रेरी में होता था और mobile डिवाइस के लिए कोड एक सेपरेट फाइल में रखा जाता था |

पर अब आज के समय में मोबाइल डिवाइस के लिए सपोर्टिंग कोड हर लाइब्रेरी में include होते है बजाये की उन्हें एक separate फाइल में रख दिया जाये | इसी प्रोसेस को हम mobile first strategy भी कहते है | यह टेक्नोलॉजी Bootstrap 3 के launch के साथ ही Bootstrap के पैकेज में आ गयी थी |

बस यहाँ पर आपको head के अंदर viewport meta tag add करने की जरुरत है | इससे मोबाइल डिवाइस के सभी प्रकार के zooming touch मैनेज हो जाते है |

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

यहाँ पर width प्रॉपर्टीज डिवाइस की विड्थ कण्ट्रोल करने के काम आती है | अगर हम इसे device width सेट कर देते है तो फिर यह डिवाइस विड्थ(mobile , ipad , laptop ) के अनुसार ही width ले लेगी |

initial scale 1.0 का मतलब यह होता है कि जब भी आपका वेब पेज लोड होगा तब आपका वेब पेज 1:1 के ratio में render होगा | और यहाँ पर अलग से कोई भी zooming applied नहीं होगी |

content attribute में user-scalable = no करने का मतलब यह है की कोई भी मोबाइल डिवाइस में कोई भी वेब पेज को zoom नहीं कर पायेगा | वह केवल content को ऊपर और नीचे scroll कर सकता है पर ज़ूम नहीं कर सकता है |

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Responsive image :

Bootstrap 3 जो है वो आपको facilities देती है किसी भी इमेज को रेस्पॉन्सिव बनाने का | आप आसानी से टैग में .img-responsive क्लास जोड़कर अपनी इमेज को रेस्पॉन्सिव बना सकते है | इस क्लास में max -width 100 % और हाइट auto एप्लाइड होती है | और इस बजह से यह बहुत ही अच्छे तरीके से scalable होती है अपने पैरेंट एलिमेंट के लिए |

<img src = "..." class = "img-responsive" alt = "Responsive image">

Typography & links :

Bootstrap जो है वो एक Basic global display (black), Typography, और links स्टाइल सेट करता है :

Basic global display :

यह body एलिमेंट पर बैकग्राउंड कलर #fff set करता है |

टाइपोग्राफी(Typography):

इन attributes @font-family-base, @font-size-base, and @line-height-base को टाइपोग्राफी बेस की तरह use करते है |

लिंक स्टाइल(Link Style):

@link-color attribute की मदद से ग्लोबल लिंक कलर सेट करता है | और केवल :hover element पर ही लिंक underlines अप्लाई करता है |

Normalize :

Bootstrap normalize का उपयोग cross browser consistency के लिए करता है | मतलब की सभी ब्राउज़र पर कोड अच्छे से चले और रेस्पॉन्सिव रहे |

normalize .CSS कोड एक modern code है और यह HTML5 ready कोड है जो की CSS reset का एक अच्छा alternative है | यह छोटी सी CSS code file क्रॉस बउर consistency को अच्छी तरह से सुनिश्चित करती है |

कंटेनर्स(Container):

पूरे कंटेंट को wrap करने के लिए हम .container क्लास का उपयोग करते है | और बहुत ही आसानी से कंटेंट को centered करते है जैसे कि नीचे दिए हुए example में दिखया गया है |

<div class = "container">
   ...
</div>

Bootstrap.css फ़ाइल में .container class पर एक नज़र डालें –

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

ध्यान दें कि, पैडिंग और निश्चित चौड़ाई के कारण, container डिफ़ॉल्ट रूप से घोंसला बनाने योग्य नहीं होते हैं।

Bootstrap.css फ़ाइल पर एक नज़र डालें –

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

यहां आप देख सकते हैं कि सीएसएस में चौड़ाई वाले कंटेनरों के लिए मीडिया-क्वेरी हैं। यह प्रतिक्रियात्मकता को लागू करने में मदद करता है और उनके भीतर ग्रिड सिस्टम को ठीक से प्रस्तुत करने के लिए कंटेनर वर्ग को तदनुसार संशोधित किया जाता है।

Conclusion:

तो दोस्तों इस ब्लॉग पोस्ट(Bootstrap CSS Overview In Hindi) में हमने Bootstrap के कुछ बेसिक infrastructure को समझा और जाना | यहाँ पर हमने Bootstrap से रिलेटेड कुछ Basic terminology को जाना जैसे की HTML5 doctype , mobile first strategy , responsive image , typography एंड links , normalize , कॉन्टेनर एंड etc |

इस ब्लॉग(Bootstrap CSS Overview In Hindi) को लेकर आपके मन में कोई भी प्रश्न है तो आप हमें इस पते [email protected]पर ईमेल लिख सकते है|

आशा करता हूँ, कि आपने इस पोस्ट(Bootstrap CSS Overview In Hindi) को खूब एन्जॉय किया होगा|

आप स्वतंत्रता पूर्वक अपना बहुमूल्य फीडबैक और कमेंट यहाँ पर दे सकते है|Bootstrap CSS Overview In Hindi|

आपका समय शुभ हो|

Anurag

I am a blogger by passion, a software engineer by profession, a singer by consideration and rest of things that I do is for my destination.

Leave a Reply

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