Z-সূচক
বুটস্ট্র্যাপের গ্রিড সিস্টেমের অংশ না হলেও, z-সূচীগুলি কীভাবে আমাদের উপাদানগুলিকে ওভারলে করে এবং একে অপরের সাথে যোগাযোগ করে তাতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
বেশ কিছু বুটস্ট্র্যাপ উপাদান ব্যবহার করে z-index
, CSS প্রপার্টি যা কন্টেন্ট সাজানোর জন্য তৃতীয় অক্ষ প্রদান করে লেআউট নিয়ন্ত্রণ করতে সাহায্য করে। আমরা বুটস্ট্র্যাপে একটি ডিফল্ট জেড-ইনডেক্স স্কেল ব্যবহার করি যা সঠিকভাবে লেয়ার নেভিগেশন, টুলটিপস এবং পপোভার, মডেল এবং আরও অনেক কিছু করার জন্য ডিজাইন করা হয়েছে।
এই উচ্চতর মানগুলি একটি নির্বিচারে শুরু হয়, আদর্শভাবে দ্বন্দ্ব এড়াতে যথেষ্ট উচ্চ এবং নির্দিষ্ট। আমাদের স্তরযুক্ত উপাদানগুলি জুড়ে এইগুলির একটি মানক সেট দরকার — টুলটিপস, পপোভার, নেভবার, ড্রপডাউন, মডেল—তাই আমরা আচরণে যুক্তিসঙ্গতভাবে সামঞ্জস্যপূর্ণ হতে পারি। 100
আমরা + বা + ব্যবহার করতে পারিনি এমন কোন কারণ নেই 500
।
আমরা এই স্বতন্ত্র মানগুলির কাস্টমাইজেশনকে উত্সাহিত করি না; আপনি একটি পরিবর্তন করতে হবে, আপনি সম্ভবত তাদের সব পরিবর্তন করতে হবে.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-offcanvas-backdrop: 1040;
$zindex-offcanvas: 1045;
$zindex-modal-backdrop: 1050;
$zindex-modal: 1055;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
উপাদানগুলির মধ্যে ওভারল্যাপিং সীমানাগুলি পরিচালনা করতে (যেমন, ইনপুট গোষ্ঠীতে বোতাম এবং ইনপুট), আমরা , , এবং ডিফল্ট, হোভার এবং সক্রিয় অবস্থার জন্য কম একক সংখ্যার z-index
মান ব্যবহার করি। হোভার/ফোকাস/অ্যাকটিভ-এ, আমরা একটি নির্দিষ্ট উপাদানকে সামনের দিকে নিয়ে আসি যাতে ভাইবোন উপাদানের উপর তাদের সীমানা দেখানো হয়।1
2
3
z-index