Indeks Z
Walaupun bukan sebahagian daripada sistem grid Bootstrap, indeks-z memainkan peranan penting dalam cara komponen kami bertindih dan berinteraksi antara satu sama lain.
Beberapa komponen Bootstrap menggunakan z-index, sifat CSS yang membantu mengawal reka letak dengan menyediakan paksi ketiga untuk mengatur kandungan. Kami menggunakan skala indeks z lalai dalam Bootstrap yang telah direka bentuk untuk melapis navigasi, petua alat dan popover, modal dan banyak lagi dengan betul.
Nilai yang lebih tinggi ini bermula pada nombor arbitrari, tinggi dan cukup khusus untuk mengelakkan konflik secara ideal. Kami memerlukan set standard ini merentas komponen berlapis kami—petua alat, popover, bar navigasi, lungsur turun, mod—supaya kita boleh konsisten dalam tingkah laku yang munasabah. Tiada sebab kami tidak boleh menggunakan 100+ atau 500+.
Kami tidak menggalakkan penyesuaian nilai individu ini; sekiranya anda menukar satu, anda mungkin perlu menukar semuanya.
$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;
$zindex-toast: 1090;
Untuk mengendalikan sempadan bertindih dalam komponen (cth, butang dan input dalam kumpulan input), kami menggunakan z-indexnilai satu digit rendah 1, 2, dan 3untuk keadaan lalai, tuding dan aktif. Pada tuding/fokus/aktif, kami membawa elemen tertentu ke hadapan dengan nilai yang lebih tinggi z-indexuntuk menunjukkan sempadannya ke atas elemen adik-beradik.