Bootstrap – Grid System In Hindi

अगले पाठ में आपने Bootstrap grid system का Basic Introduction पढ़ा था इस पाठ में आप Bootstrap grid system को Practically Use करना सीखेंगे:-

 

नीचे के चित्रों को ठीक से देखिए किस तरह से col-xs को अलग-अलग हिस्सों में बांटा गया है |

 

col-xs-12-images

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 बना सकते हैं |

Bootstrap Grid System Part-3 In Hindi :-