इस पोस्ट में हम एक बूटस्ट्रैप साइट का लेआउट देखेंगे इस ओपन सोर्स फ्रेमवर्क की अद्भुत क्षमताओं को प्रदर्शित करने के लिए। में पिछले लेख हमने अपने काम को सुविधाजनक बनाने के लिए एक विकास वातावरण और आवश्यक प्लगइन्स स्थापित किए थे।
के सामग्री प्रबंधक के रूप में इसे याद रखें Linux Adictos यह मुझे GitHub पर अपलोड किए गए उदाहरणों का कोड डालने की अनुमति नहीं देता है। उन्हें डाउनलोड करने के लिए आपको अपने वितरण पर Git पैकेज इंस्टॉल करना होगा और फिर निम्नलिखित कमांड लिखना होगा:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
नई फ़ाइलों को डाउनलोड करने के लिए आपको समय-समय पर इन दो आदेशों को चलाने की आवश्यकता होगी।
कोड का विश्लेषण
अब फाइल एक्सप्लोरर में VSCodium के साथ example2.html खोलें। (दाएं बटन से खोलें) हम निम्नलिखित देखते हैं:
- पंक्ति 1 में हम ब्राउज़र को दस्तावेज़ का प्रकार बताते हैं ताकि वह जानता हो कि उसे कैसे प्रस्तुत करना है।
- पंक्ति 2 साइट की भाषा को इंगित करती है जो ब्राउज़र को इंगित करती है कि कुछ वर्णों का प्रतिनिधित्व कैसे करें और खोज इंजन को सामग्री की भाषा जो स्थिति की सुविधा प्रदान करती है। हमारे कोड में इसे es के रूप में परिभाषित किया गया है लेकिन स्पेन से स्पेनिश के लिए es_ES या अर्जेंटीना से स्पेनिश के लिए es_AR जैसे क्षेत्रीय रूप हैं।
- लाइन 3 से हमारे पास टैग के बीच स्थित मेटाडेटा कंटेनर है यू . मेटाडेटा दस्तावेज़ के बारे में जानकारी प्रदान करता है। हमारे उदाहरण में:
- पंक्ति 4 वर्ण एन्कोडिंग के लिए उपयोग किए जाने वाले मानक को इंगित करती है। शायद आपने कभी-कभी देखा होगा कि हीरे के अंदर उच्चारित वर्णों या विशेष प्रतीकों के बजाय एक प्रश्न चिह्न प्रदर्शित होता है। ऐसा इसलिए है क्योंकि ब्राउज़र अनुचित एन्कोडिंग का उपयोग करता है। लाइन 8 पर दिया गया बयान इसे स्पष्ट रूप से घोषित करके टालता है।
- पंक्ति 5 में हम ब्राउज़र को बताते हैं कि उसे विभिन्न स्क्रीन प्रारूपों के अनुकूल कैसे होना चाहिए।
- हम पंक्ति 6 में जो शीर्षक सेट करते हैं वह ब्राउज़र के शीर्ष बार और खोज इंजन में प्रदर्शित होगा।
- लाइन 7 पर हम ब्राउजर को बताते हैं कि स्टाइल से संबंधित बूटस्ट्रैप फ्रेमवर्क तत्वों को कहां खोजना है।
- लाइन 10 से कंटेनर शुरू होता है। मुख्य भाग में वेब पेज की सामग्री और बूटस्ट्रैप स्क्रिप्ट का लिंक शामिल होता है जो हमारी साइट को अन्तरक्रियाशीलता प्रदान करेगा।
- पंक्ति 13 दस्तावेज़ के अंत को इंगित करती है।
बूटस्ट्रैप साइट का लेआउट
बूटस्ट्रैप साइट के लेआउट के लिए मुख्य अवधारणाएँ
जैसा कि हमने पिछले लेखों में कहा था, बूटस्ट्रैप मोबाइल का पहला तरीका अपनाता है। जब इस दृष्टिकोण को लागू किया जाता है, तो डिज़ाइन को डिवाइस के साथ सबसे छोटे स्क्रीन आकार को ध्यान में रखकर किया जाता है, और फिर परतों को बाद के आकारों में अनुकूलित करने के लिए जोड़ा जाता है।
यहां हमें दो प्रमुख अवधारणाओं को ध्यान में रखना चाहिए:
- ब्रेकप्वाइंट।
- मीडिया परामर्श।
ब्रेकप्वाइंट इंगित करते हैं कि किस स्क्रीन चौड़ाई से लेआउट संशोधित किया गया है।, मीडिया क्वेरीज़ कुछ ब्राउज़र और ऑपरेटिंग सिस्टम विशेषताओं के आधार पर शैली पैरामीटर लागू करती हैं। दूसरे शब्दों में, प्रत्येक ब्रेकपॉइंट की एक समान शैली होगी।
बूटस्ट्रैप छह पूर्वनिर्धारित ब्रेकप्वाइंट के साथ आता है जिसे अधिक उन्नत प्रोग्रामर द्वारा संशोधित किया जा सकता है। डिफ़ॉल्ट बिंदु हैं:
- एक्स्ट्रा स्मॉल: इसमें प्रीसेट आइडेंटिफायर नहीं होता है और यह 576 पिक्सल से कम चौड़ी स्क्रीन पर लागू होता है।
- छोटा: इसे sm से पहचाना जाता है और इसका उपयोग 576 पिक्सेल की स्क्रीन के लिए किया जाता है।
- माध्यम: इसकी पहचान md से की जाती है और इसका उपयोग 768 पिक्सेल की स्क्रीन के लिए किया जाता है।
- लंबाई: 992 पिक्सल से स्क्रीन के लिए एलजी के रूप में पहचाना जाता है।
- अतिरिक्त लंबा: इसमें पहचानकर्ता lg होता है और यह शैलियों को 1200 पिक्सेल से स्क्रीन पर लागू करता है।
- अतिरिक्त अतिरिक्त लंबा: पहचानकर्ता xxl के साथ चिह्नित, इसका उपयोग डिज़ाइन को 1400 पिक्सेल से स्क्रीन पर लागू करने के लिए किया जाता है।
इन आकारों को आकस्मिक रूप से नहीं चुना गया था प्रत्येक ब्रेकपॉइंट में कंटेनर हो सकते हैं जिनकी चौड़ाई 12 के गुणक हैं। वे किसी विशिष्ट उपकरण के लिए भी लक्षित नहीं होते हैं, बल्कि विभिन्न श्रेणियों के उपकरणों और स्क्रीन आकारों के अनुकूल होते हैं।
विभिन्न स्क्रीन आकारों के भीतर हमें कंटेनर मिलते हैं। ये एक निश्चित डिवाइस या ग्राफिक विंडो में साइट की सामग्री को होस्ट करने, भरने और संरेखित करने के लिए जिम्मेदार हैं।
;