З-индекс
Иако не се дел од мрежниот систем на Bootstrap, z-индексите играат важна улога во тоа како нашите компоненти се преклопуваат и комуницираат едни со други.
Неколку компоненти на Bootstrap користат z-index
, својството CSS што помага да се контролира распоредот преку обезбедување на трета оска за уредување на содржината. Користиме стандардна скала на z-индекс во Bootstrap која е дизајнирана за правилно слоевитост на навигација, совети за алатки и поповер, модали и многу повеќе.
Овие повисоки вредности започнуваат со произволен број, доволно висок и специфични за идеално да се избегнат конфликти. Ни треба стандарден сет од нив низ нашите слоевити компоненти - совети за алатки, поповери, ленти за навигација, паѓачки мени, модали - за да можеме да бидеме разумно доследни во однесувањето. Нема причина да не можевме да користиме 100
+ или 500
+.
Ние не поттикнуваме прилагодување на овие индивидуални вредности; ако промените еден, најверојатно ќе треба да ги промените сите.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
За да се справиме со преклопувачките граници во компонентите (на пр., копчињата и влезовите во влезните групи), користиме ниски едноцифрени z-index
вредности на 1
, 2
и 3
за стандардни, лебди и активни состојби. При лебди/фокус/активно, ставаме одреден елемент во прв план со поголема z-index
вредност за да ја прикаже нивната граница над елементите од браќата или сестрите.