बूटस्ट्रैप 3 बॉक्स-साइज़िंग पर क्यों गया: बॉर्डर-बॉक्स?

Question

मैं अपने बूटस्ट्रैप थीम को v2.3.2 से v3.0.0 तक माइग्रेट कर रहा हूं और एक बात जो मैंने देखी है कि बूटस्ट्रैप में निम्नलिखित शैलियों के कारण बहुत सारे आयाम अलग-अलग गणना किए जाते हैं।

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

क्या कोई समझा सकता है कि बूटस्ट्रैप सभी तत्वों के बॉक्स-साइज़ को बॉर्डर-बॉक्स में क्यों स्विच करता है? मुझे संदेह है कि इसका नई ग्रिड प्रणाली के प्रतिशत आधारित होने के साथ क्या करना है, लेकिन ऊपर का चयनकर्ता केवल ग्रिड तत्वों पर ही लागू नहीं होता है।

थोड़ा कट्टरपंथी imho लगता है :-)

किसी को कुछ अंतर्दृष्टि देने के लिए परवाह है?

Comments

CSS स्निपेट के लिए धन्यवाद; यह बिल्कुल वही है जो मैं इसे गैर-बूटस्ट्रैप परियोजना में लागू करने के लिए देख रहा था। :)

— बर्टो

किसी को पता है कि क्यों *: से पहले और *: के बाद की जरूरत है?

— 23

@Healthcoder *:beforeऔर *:afterइस बॉक्स मॉडल को :beforeऔर :afterछद्म तत्वों पर भी लागू करने की आवश्यकता है ।

— बसचोटेन्स

* चयनकर्ता डेवलपर्स के लिए सीएसएस में कहीं भी सामग्री-बॉक्स या पैडिंग-बॉक्स का उपयोग करना मुश्किल बनाता है। स्क्रैच से एक नई परियोजना शुरू करते समय सबसे अच्छा अभ्यास है html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— जारेक प्रेजीगोद्स्की

Answer 1

रिलीज नोट आपको बताते हैं: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

डिफ़ॉल्ट रूप से बेहतर बॉक्स मॉडल। बूटस्ट्रैप में सब कुछ बॉक्स-साइजिंग हो जाता है: बॉर्डर-बॉक्स, आसान आकार के विकल्प और एक बढ़ी हुई ग्रिड प्रणाली के लिए बना।

व्यक्तिगत रूप से मुझे लगता है कि अधिकांश लाभ ग्रिड प्रणाली में जाते हैं। ट्विटर के बूटस्ट्रैप में सभी ग्रिड तरल होते हैं। कॉलम को कुल चौड़ाई के प्रतिशत के रूप में परिभाषित किया गया है। लेकिन पिक्सेल में नाली की एक निश्चित चौड़ाई होती है। डिफ़ॉल्ट रूप से कॉलम के दोनों ओर 15px की पैडिंग। पिक्सल और प्रतिशत में चौड़ाई का संयोजन जटिल हो सकता है। इसके साथ border-boxगणना करना आसान है क्योंकि border-boxमूल्य (सामग्री-बॉक्स डिफ़ॉल्ट के विपरीत) अंतिम प्रदान किए गए बॉक्स को घोषित चौड़ाई बनाता है, और बॉक्स के अंदर कोई भी सीमा और पैडिंग कट जाता है। ( http://css-tricks.com/box-sizing/ )

इसे भी पढ़ें: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Comments

सरल उदाहरण: 100% चौड़ाई वाले डिव पर 1 पिक्सेल बॉर्डर लगाने की कोशिश करें content-box। अब आपको 100% + 2 पिक्सेल कुछ मिल गए हैं। इसके साथ border-box, आपके पास यह समस्या नहीं है, फिर भी यह 100% है।

— खाली

इस मुद्दे में अच्छी अतिरिक्त चर्चा और इसका औचित्य ।

— युविलियो

इसके अलावा, बॉक्सिंग नौकरशाही के क्रियान्वयन पर ध्यान देने योग्य सर्वोत्तम अभ्यास को अपडेट किया गया है ताकि तीसरे पक्ष के पुस्तकालयों में हस्तक्षेप न हो। मैं नहीं कर रहा हूँ यकीन है कि अगर अद्यतन करने पर बूटस्ट्रैप योजनाओं, लेकिन उन्हें: css-tricks.com/...

— jbyrd

व्यक्तिगत रूप से, मैंने IE6 के बाद से बॉक्स मॉडल को कभी नहीं बदला। यह केवल एक चीज है जिसे IE बेहतर जानता था। और हाँ, आज आपके पास कैल्क () उन 100% प्लस 2 पिक्सेल समस्याओं के आसपास जाने के लिए है, लेकिन समुराई के रास्ते में बॉर्डर बॉक्स है, जिसकी सीमा और पैडिंग शामिल है। इस तरह मानव मस्तिष्क एक बॉक्स की कल्पना करता है। मुझे यह "नया चलन" देखना पसंद है, मेरे पास उनके लिए एक वेलबैक ड्रिंक है।

— dkellner