বক্স-সাইজিং: বর্ডার-বক্সে বুটস্ট্র্যাপ 3 কেন স্যুইচ করেছিল?

Question

আমি আমার বুটস্ট্র্যাপ থিমগুলি v2.3.2 থেকে v3.0.0 এ স্থানান্তরিত করছি এবং একটি জিনিস আমি লক্ষ্য করেছি যে বুটস্ট্র্যাপ সিএসএসে নিম্নলিখিত শৈলীর কারণে প্রচুর মাত্রা আলাদাভাবে গণনা করা হয়।

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

কেউ কি ব্যাখ্যা করতে পারেন যে বুটস্ট্র্যাপ কেন সমস্ত উপাদানগুলির বাক্স-আকারকে সীমানা-বাক্সে স্যুইচ করে? আমার সন্দেহ হয় এটি নতুন গ্রিড সিস্টেমটি শতাংশ-ভিত্তিক হওয়ার সাথে সম্পর্কযুক্ত, তবে উপরের নির্বাচক কেবল গ্রিড উপাদানগুলিতে স্পষ্টতই প্রযোজ্য না।

কিছুটা র‌্যাডিক্যাল ইমো মনে হচ্ছে :-)

কেউ কিছু অন্তর্দৃষ্টি দিতে যত্ন?

Comments

সিএসএস স্নিপেটের জন্য ধন্যবাদ; এটি কোনও নন-বুটস্ট্র্যাপ প্রকল্পে প্রয়োগ করার জন্য আমি ঠিক যা খুঁজছিলাম। :)

— বার্টো

*: আগে এবং *: পরের প্রয়োজন কেন যে কেউ জানেন?

— লিমস্কোডার

@limscoder *:beforeএবং *:afterপ্রয়োজন হয় এছাড়াও এই বক্স-মডেল প্রয়োগ :beforeএবং :afterসিউডো-উপাদান।

— বুশটোয়েনস

* নির্বাচনকারী বিকাশকারীদের জন্য CSS এর অন্য কোথাও সামগ্রী-বাক্স বা প্যাডিং-বাক্স ব্যবহার করা কঠিন করে তোলে। স্ক্র্যাচ থেকে নতুন প্রকল্প শুরু করার সময় সেরা অনুশীলনটি হ'ল html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

— জারেক প্রাইজিডজকি

Answer 1

রিলিজ নোট আপনাকে বলতে: ( http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ )

ডিফল্টরূপে আরও ভাল বক্স মডেল। বুটস্ট্র্যাপের সমস্ত কিছুই বাক্স-আকার দিতে পারে: সীমানা-বাক্স, সহজ আকারের বিকল্পগুলির জন্য এবং বর্ধিত গ্রিড সিস্টেম তৈরি করে।

ব্যক্তিগতভাবে আমি মনে করি বেশিরভাগ সুবিধা গ্রিড সিস্টেমে যায় to টুইটারের বুটস্ট্র্যাপে সমস্ত গ্রিড তরল হয়। কলামগুলি মোট প্রস্থের শতাংশ হিসাবে সংজ্ঞায়িত করা হয়। তবে নর্দমার পিক্সেলগুলিতে একটি নির্দিষ্ট প্রস্থ থাকে। ডিফল্টরূপে কলামের দুপাশে 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%।

— ফাঁকাওয়ালা

এই সমস্যাটিতে এটির অতিরিক্ত অতিরিক্ত আলোচনা এবং ন্যায্যতা ।

— যুবিলিও

তৃতীয় পক্ষের লাইব্রেরিতে যাতে হস্তক্ষেপ না হয় সেজন্য বক্স সাইজিং বাস্তবায়ন সর্বোত্তম অনুশীলনটি আপডেট করা মূল্যবান worth বুটস্ট্র্যাপ আপডেট করার পরিকল্পনা করছে কিনা তা আমি নিশ্চিত নই, তবে সেগুলি করা উচিত: css-tricks.com/…

— jbyrd

ব্যক্তিগতভাবে, আমি আইআই 6 এর পরে কখনও বক্স মডেলটি পরিবর্তন করি নি। এটি কেবলমাত্র ভাল জিনিসটি জানত। এবং হ্যাঁ, আজ আপনার সেই 100% প্লাস 2 পিক্সেলের সমস্যাগুলি ঘুরে দেখার জন্য আপনার কাছে গণনা রয়েছে (তবে সমুরাইয়ের পথটি সর্বদা সীমান্তের বাক্স এবং এর প্যাডিং অন্তর্ভুক্ত করে। মানুষের মস্তিষ্ক এইভাবেই একটি বাক্স কল্পনা করে। আমি এই "নতুন ট্রেন্ড" দেখতে ভালোবাসি, তাদের জন্য আমার ওয়েলব্যাক পানীয় রয়েছে।

— dkellner