Bootstrap – Grid System In Hindi

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

जिस तरह हम पानी को जिस बर्तन में रखते हैं पानी उसी का आकार ले लेता है , उसी तरह Responsive Website का मतलब होता है एक ऐसा वेबसाइट जिसे हम जब किसी कंप्यूटर के Moniter पर खोलें तो वह बहुत अच्छे से खुल जाए और जब किसी Mobile पर खोलें तो भी वह बहुत अच्छे से खुल जाए और उसके डिजाइन में कोई खराबी ना हो | मतलब की एक ऐसा वेबसाइट जिसका डिजाइन cell phones, tablets, laptops और desktops सबके लिए उपयुक्त (suitable) हो |

responsive-website

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 Part 2 :-