Web Technologies : CSS Framework Bootstrap

बूटस्ट्रैप क्या है? 

बूटस्ट्रैप सीएसएस और जावास्क्रिप्ट फ्रेमवर्क है जिसका उपयोग कम कोडिंग की सहायता से वेब पेज में सीएसएस को अप्लाई करना होता है। 

जैसा कि हम जानते हैं कि सीएसएस जिसका की फुल फॉर्म है कैस्केडिंग स्टाइल शीट्स की मदद से वेब पेज के किसी भी एलिमेंट को स्टाइल दिया जा सकता है। आमतौर पर कोई भी वेब डेवलपर जब सीएसएस की मदद से किसी भी पेज के एलिमेंट की स्टायलिंग करता है तो इसमें उसे ज्यादा कोडिंग करना होता है और कोड में फॉल्ट होने पर कोड की डिबगिंग करना भी मुश्किल होता है। साथ ही स्टाइल को रेस्पॉन्सिव बनाने की समस्या अलग से होती है। 

इन सब समस्याओं से निजात के लिए बूटस्ट्रैप नामक सीएसएस फ्रेमवर्क का उपयोग किया जाता है। सबसे पहले इस फ्रेमवर्क का उपयोग ट्विटर में किया गया था बाद में यह फ्रेमवर्क ओपन सोर्स के रूप में उपलब्ध हो गया और आज दुनिया भर की वेबसाइट में सीएसएस की स्टाइलिंग के लिए बूटस्ट्रैप नामक फ्रेमवर्क का उपयोग किया जाता है। बूटस्ट्रैप की सहायता से स्टाइलिंग करना अत्यंत ही सरल है। एक दो सप्ताह के भीतर कोई भी वेब डेवलपर इसको सरलता से सीख सकता है बशर्ते वह मनोयोग से इसका अध्ययन करें।

किसी भी वेब पेज के किसी एलिमेंट की स्टाइलिंग करने के लिए बूटस्ट्रैप के क्लास का उपयोग करना होता है। क्लास का अभिप्राय CSS के क्लास से ही होता है जो किसी वेब टैग में अप्लाई किया जाता है। इस बने बनाए क्लास के डेफिनिशन को हम बूटस्ट्रैप की सीएसएस के सोर्स कोड में देख सकते हैं।

बूटस्ट्रैप की सबसे बड़ी खासियत यह है कि रेस्पॉन्सिव वेब डिजाइनिंग में मदद करता है और यह मोबाइल फर्स्ट एप्रोच को फॉलो करता है। रेस्पॉन्सिव वेब डिजाइनिंग का अभिप्राय यह है कि वेब पेज पर की गई स्टाइलिंग अलग-अलग तरह के स्क्रीन साइज के डिवाइसेज पर बिगड़ता नहीं है बल्कि इसमें इतनी फ्लैक्सिबिलिटी यानी लचीलापन होती है कि अलग-अलग स्क्रीन साइज पर भी स्टाइल सुंदर बना रहता है। यहां स्क्रीन साइज से अभिप्राय व्यूपोर्ट की साइज से है। व्यूपोर्ट से अभिप्राय स्क्रीन की लंबाई और चौड़ाई से है जिसके भीतर कोई दृश्य देखा जाता है। आमतौर पर व्यूपोर्ट के बारे में meta टैग में वर्णन किया जाता है।

जैसा कि हम जानते हैं कि मोबाइल, टेबलेट, डेस्कटॉप, लैपटॉप और टीवी स्क्रीन पर अगर किसी भी वेब पेज को देखा जाए तो उनके व्यूपोर्ट की साइज अलग-अलग होती है परंतु अगर उसके पेज की स्टाइलिंग बूटस्ट्रैप की मदद से की जाती है तो अलग-अलग व्यूपोर्ट के होने पर भी यह पेज की स्टाइलिंग को बिगड़ती नहीं देता। 

अलग-अलग साइज के व्यूपोर्ट के लिए विभिन्न सिंबल का प्रयोग बूटस्ट्रैप में किया जाता है जैसे xs, sm, md, lg, xl इन सिंबल को हम एक्स्ट्रा स्मॉल, स्मॉल, मीडियम, लार्ज, एक्स्ट्रा लार्ज कहते हैं। हम आगे देखेंगे कि इन सिंबल्स का प्रयोग किस प्रकार किया जाता है। 

बूटस्ट्रैप ग्रिड

अब हम बूटस्ट्रैप के एक बहुत ही महत्वपूर्ण कंसेप्ट को समझेंगे जिसको की ग्रिड कहते हैं।

बूटस्ट्रैप के अंतर्गत किसी भी व्यूपोर्ट को हम 12 कॉलम्स में डिवाइड अर्थात विभाजित करते हैं इसका अभिप्राय क्या है? इसको समझने के लिए हमें बूटस्ट्रैप के कंटेनर container और row क्लास के कंसेप्ट को समझना होगा। container क्लास की मदद से बूटस्ट्रैप के द्वारा किसी भी वेब पेज को अलग-अलग हिस्सों में बांटा जाता है जिसमें कि हम किसी कंटेंट को रखते हैं। अब प्रश्न यह है कि इस क्लास का प्रयोग किस तरह के टैग के साथ किया जाता है। आमतौर पर container क्लास का उपयोग div टैग के साथ किया जाता है। div टैग की मदद से आमतौर पर किसी भी वेब पेज को अलग-अलग अलग-अलग भागों में विभाजित किया जाता है। इसके अलावा सेक्शन section जैसे टैग के साथ भी container क्लास का उपयोग किया जा सकता है।

बूटस्ट्रैप का कंटेनर क्लास content के लिए स्पेस बनाता है जिसके भीतर वेब कंटेंट को रखा जाता है परंतु यह पेज के दोनों छोरों अर्थात मार्जिन में 15 पिक्सेल का मार्जिन छोड़ देता है। इस प्रकार कंटेंट पेज के मध्य में रखने के लिए container टैग का उपयोग किया जाता है। याद रखे कि container टैग वेब पेज के दोनों ओर कुछ जगह छोड़ देता है और बीच के बचे स्थान में कंटेंट को रखा जाता है। 

इसके अलावा container-fluid नाम का भी क्लास बूटस्ट्रैप प्रदान करता है जिसका उपयोग तब करना चाहिए जब आप वेबपेज के दोनों छोरों में किसी प्रकार का गैप नहीं छोड़ना चाहते हैं। जैसा कि मैंने पहले बताया कि container क्लास की मदद से वेबपेज के दोनों साइड में कुछ मार्जिन दे दिया जाता है जबकि container-fluid के केस में वेब पेज के दोनों छोरों पर किसी भी प्रकार का मार्जिन नहीं होता है और कंटेंट बिल्कुल वेबपेज के एक छोर से शुरू होता है और दूसरे छोर तक जाता है।

ऊपर हमने देखा कि यह स्पेसिंग के लिए container और container-fluid नाम के क्लास का उपयोग किया जाता है। अब इस स्पेस को हम कई सारे अलग-अलग कतार या row में बांट सकते हैं और इस काम को करने के लिए बूटस्ट्रैप के row क्लास का उपयोग किया जाता है। अगर आप किसी div के साथ row क्लास का उपयोग करते हैं तो वह div एक row उपलब्ध कराएगा। इस तरीके से एक container के भीतर हम कई सारे row बना सकते हैं।

इसके बाद col क्लास की बारी आती है। col क्लास का उपयोग हम किसी row को अलग-अलग कॉलम्स में बांटने के लिए करते हैं। बूटस्ट्रैप के अंतर्गत किसी भी row को ज्यादा से ज्यादा 12 कॉलम में विभाजित किया जा सकता है। अगर आप इससे ज्यादा कॉलम 1 row में देंगे तो वह एक्स्ट्रा कॉलम नीचे चला जाएगा अर्थात वह उसी row में नहीं रहेगा।

कॉलम की संख्या को दर्शाने के लिए हम col के बाद उस संख्या को लिख देते हैं। जैसे col-2 इसका अर्थ यह है कि यह दो कॉलम के बराबर की जगह लेगा। सामान्य सूत्र हुआ col-n जहां n  का मान 1 से लेकर 12 के बीच में कोई भी पूर्णांक संख्या हो सकती है।

अगर आपको ब्रेकप्वाइंट को भी दर्शाना हो तो col के बाद ब्रेक प्वाइंट और उसके बाद कॉलम्स की संख्या को लिखते हैं उदाहरण के लिए col-md-4 इसका अर्थ बाकी मीडियम साइज के रिपोर्ट में 4 कॉलम के बराबर जगह लेगा। मीडियम साइज के ऊपर के जितने भी स्क्रीन है उसके लिए भी यह चार कॉलम ही लेगा लेकिन अगर मीडियम साइज से कम का कोई स्क्रीन है तो उस हालत में कॉलम की संख्या 4 से कम हो जाएगी। इस तरह की फ्लैक्सिबिलिटी बूटस्ट्रैप की रेस्पॉन्सिव प्रकृति के कारण होती है।

सामान्य सूत्र हुआ col-breakpoint-n जहां n  का मान 1 से लेकर 12 के बीच में कोई भी पूर्णांक संख्या हो सकती है और breakpoint के लिए हम xs, sm, md, lg, xl चिह्नों का उपयोग करते हैं। हमने पहले ही देखा है कि 

इन सिंबल को हम एक्स्ट्रा स्मॉल, स्मॉल, मीडियम, लार्ज, और एक्स्ट्रा लार्ज कहते हैं।

यह समझने वाली है कि प्रत्येक दो कॉलम के बीच में कुछ दूरी होती है जिसको gutter कहते हैं। अगर इस तरह के guttter को नहीं देना हो तो उसके लिए .nogutters नामक क्लास का प्रयोग .row के साथ करते हैं।

लेखक अजीत कुमार