या पोस्टमध्ये आपण बूटस्ट्रॅप साइटचे लेआउट पाहू या ओपन सोर्स फ्रेमवर्कच्या अद्भुत क्षमता प्रदर्शित करण्यासाठी. मध्ये मागील लेख आम्ही आमचे काम सुलभ करण्यासाठी विकास वातावरण आणि आवश्यक प्लगइन स्थापित केले आहेत.
चे सामग्री व्यवस्थापक म्हणून लक्षात ठेवा 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 पिक्सेलच्या स्क्रीनसाठी वापरले जाते.
- लांबी: lg म्हणून ओळखले जाते 992 पिक्सेलच्या स्क्रीनसाठी वापरले जाते.
- अतिरिक्त लांब: यात आयडेंटिफायर एलजी आहे आणि 1200 पिक्सेलच्या स्क्रीनवर शैली लागू करते.
- अतिरिक्त अतिरिक्त लांब: अभिज्ञापक xxl सह चिन्हांकित, हे 1400 पिक्सेलच्या स्क्रीनवर डिझाइन लागू करण्यासाठी वापरले जाते.
हे आकार आकस्मिकपणे निवडले गेले नाहीत प्रत्येक ब्रेकपॉईंटमध्ये कंटेनर असू शकतात ज्यांची रुंदी 12 च्या पटीत आहे. ते विशिष्ट उपकरणासाठी देखील लक्ष्यित नसतात, परंतु त्याऐवजी डिव्हाइसेस आणि स्क्रीन आकारांच्या भिन्न श्रेणींमध्ये जुळवून घेतात.
वेगवेगळ्या स्क्रीन आकारांमध्ये आम्हाला कंटेनर सापडतात. हे विशिष्ट उपकरण किंवा ग्राफिक विंडोमध्ये साइटची सामग्री होस्टिंग, भरणे आणि संरेखित करण्यासाठी जबाबदार आहेत.
;