Chỉ số Z
Mặc dù không phải là một phần của hệ thống lưới của Bootstrap, nhưng chỉ mục z đóng một phần quan trọng trong cách các thành phần của chúng ta chồng chéo và tương tác với nhau.
Một số thành phần Bootstrap sử dụng z-indexthuộc tính CSS giúp kiểm soát bố cục bằng cách cung cấp trục thứ ba để sắp xếp nội dung. Chúng tôi sử dụng thang đo chỉ mục z mặc định trong Bootstrap được thiết kế để điều hướng lớp, chú giải công cụ và cửa sổ bật lên, phương thức và hơn thế nữa.
Các giá trị cao hơn này bắt đầu từ một số tùy ý, đủ cao và cụ thể để tránh xung đột một cách lý tưởng. Chúng tôi cần một bộ tiêu chuẩn của những điều này trên các thành phần phân lớp của chúng tôi — chú giải công cụ, cửa sổ bật lên, thanh điều hướng, trình đơn thả xuống, phương thức — để chúng tôi có thể nhất quán một cách hợp lý trong các hành vi. Không có lý do gì chúng tôi không thể sử dụng 100+ hoặc 500+.
Chúng tôi không khuyến khích tùy chỉnh các giá trị riêng lẻ này; nếu bạn thay đổi một, bạn có thể cần phải thay đổi tất cả.
$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;
Để xử lý các đường viền chồng chéo trong các thành phần (ví dụ: các nút và đầu vào trong các nhóm đầu vào), chúng tôi sử dụng các z-indexgiá trị một chữ số thấp của 1và 2cho 3các trạng thái mặc định, di chuột và hoạt động. Khi di chuột / tiêu điểm / hoạt động, chúng tôi đưa một phần tử cụ thể lên hàng đầu với z-indexgiá trị cao hơn để hiển thị đường viền của chúng so với các phần tử anh em.