ग्रिड लेआउट के लिए बूटस्ट्रैप 4 सीएसएस के साथ कोणीय सामग्री 2 का उपयोग

Question

Angular Material2 (अल्फा 7) में bootstrap grid system जैसे उत्तरदायी ग्रिड घटक नहीं हैं। बूटस्ट्रैप में लेआउट/ग्रिड सिस्टम उत्तरदायी लेआउट बनाने की अनुमति देता है (जो कस्टम मीडिया प्रश्नों को शामिल करने और ब्रेकपॉइंट्स के लिए पिक्सेल मानों को समझने के बिना लेखन आकार से निपटने के बिना स्क्रीन आकार के अनुकूल है) जो बेहद उपयोगी है।

मैंने सामग्री 2 प्रोजेक्ट में बूटस्ट्रैप सीएसएस सहित सामग्री 2 घटकों के मार्जिन/पैडिंग में मुद्दों को देखा। उदाहरण के लिए: md-card घटक ओवरलैपिंग शुरू करते हैं।

क्या इन 2 पुस्तकालयों को अच्छी तरह से खेलने का कोई तरीका है?

या

वहाँ एक रास्ता बूटस्ट्रैप सीएसएस शामिल किए बिना material2 में उत्तरदायी लेआउट/ग्रिड अच्छाई की तरह बूटस्ट्रैप प्राप्त करने के लिए है?

Answer 1

मुझे लगता है कि आप एक सीएसएस फ़ाइल में ग्रिड के लिए केवल बूटस्ट्रैप 4 के एसएएस कोड को संकलित कर सकते हैं। और इस सीएसएस को अपने कोणीय सामग्री 2 की src/index.html फ़ाइल में लिंक करें।

पहले ग्रिड (और ग्रिड कक्षाओं) के लिए सीएसएस कोड संकलित करें। बूटस्ट्रैप के स्रोत कोड में पहले से ही bootstrap-grid.scss सैस फ़ाइल है। के रूप में अपनी टिप्पणी आपको बता:

// Bootstrap Grid only 
// 
// Includes relevant variables and mixins for the regular (non-flexbox) grid 
// system, as well as the generated predefined classes (e.g., `.col-4-sm`). 

आप सीएसएस कोड में bootstrap-grid.scss बजाय bootstrap.scss संकलित करने के लिए होगा। ध्यान दें कि बूटस्ट्रैप को postCSS autoprefixer चलाने की आवश्यकता है।

सीएसएस फ़ाइल संकलन के बाद आप यह src/index.html फ़ाइल में लिंक कर सकते हैं इस प्रकार है: यदि कोणीय Material2 भी एक सीएसएस रीसेट का उपयोग करता

<link href="bootstrap-gridonly.css" rel="stylesheet"> 

अंत में आप जाँच करनी चाहिए। बूटस्ट्रैप 4 नए Reboot module के साथ जहाज जो Normalize.css का विस्तार है। बूटस्ट्रैप के ग्रिड के लिए रीबूट मॉड्यूल, और विशेष रूप से box-sizing: border-box सेटिंग आवश्यक है।

Answer 2

बूटस्ट्रैप और सामग्री 2 अच्छी तरह से एक साथ खेलते हैं (लगभग)। जिस मुद्दे को मैं अजीब पैडिंग/मार्जिन के साथ सामना कर रहा था वह इसलिए था क्योंकि मैं grid list घटक और बूटस्ट्रैप ग्रिड सिस्टम का एक साथ उपयोग करने की कोशिश कर रहा था और ग्रिड-सूची का उपयोग बंद करने के बाद और पंक्ति/कॉलम लेआउट के लिए पूरी तरह बूटस्ट्रैप पर स्विच करने के बाद समस्या हल हो गई थी। फिर, मैं लेआउट मुद्दों के बिना एमडी कार्ड, आदि जैसे अन्य सामग्री 2 घटकों का उपयोग करने में सक्षम था।

यदि Bootstrap का उपयोग सामग्रीघटक या इसके विपरीत उपयोग से बचने का एक अच्छा विचार हो सकता है। मुझे पूरा यकीन नहीं है कि यह मुद्दा क्यों होता है लेकिन यह मेरे मामले में हुआ।

वैकल्पिक रूप से, यह Bootstrap या grid-list का उपयोग करने की आवश्यकता को खत्म करने के लिए अधिक शक्तिशाली लेआउट प्रबंधन के लिए CSS3 Flexbox सीखने योग्य सार्थक हो सकता है।