Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Z-индекс

Bootstrap тор тутумунун бир бөлүгү болбогону менен, z-индекстери биздин компоненттерибиздин бири-бири менен кантип бири-бирин каптап, өз ара аракеттенүүсүндө маанилүү роль ойнойт.

Бир нече Bootstrap компоненттери z-indexмазмунду иретке келтирүү үчүн үчүнчү огу менен макетти башкарууга жардам берген CSS касиетин колдонушат. Биз Bootstrap'те демейки z-индекс шкаласын колдонобуз, ал навигацияны, инструменттерди жана поповерлерди, модальдарды жана башкаларды туура катмарлоо үчүн иштелип чыккан.

Бул жогорку баалуулуктар ыктыярдуу сандан башталат, жогорку жана конфликттерден качуу үчүн жетиштүү. Биз жүрүм-турумубузда акылга сыярлык ырааттуу болушубуз үчүн, биздин катмарлуу компоненттерибиз боюнча стандарттуу топтому керек - инструментарийлер, поповерлер, навигациялар, ачылуучу тизмелер, модалдар. 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;
$zindex-toast:                      1090;

Компоненттердин ичиндеги кабатталган чек араларды иштетүү үчүн (мисалы, киргизүү топторундагы баскычтар жана киргизүүлөр) биз , дын төмөнкү бир орундуу z-indexмаанилерин жана демейки 1, курсорду жана активдүү абалдарды колдонобуз. Hover/focus/active режиминде биз белгилүү бир элементти бир тууган элементтердин үстүнөн чектерин көрсөтүү үчүн жогорураак мааниге алып чыгабыз.23z-index