Đàn accordion Bootstrap 5 không hoạt động

Tôi nghi ngờ việc trộn các phiên bản Bootstrap là một ý tưởng hay. Tôi sẽ ngạc nhiên nếu nó không phá vỡ thứ gì đó. Tìm một mẫu sử dụng V5 hoặc ở lại với V4 và sử dụng các tính năng của nó

Bạn có thể tạo ra một chiếc đàn accordion đàng hoàng chỉ bằng cách sử dụng details và summary. Tôi biết Pico. css có một số kiểu cho nó và tôi nghĩ nếu bạn chỉ tải nó trước Bootstrap thì chúng sẽ không xung đột quá nhiều vì nó sử dụng bộ chọn kiểu

Các menu và widget của Accordion được sử dụng rộng rãi trong các ứng dụng web để quản lý lượng lớn nội dung và danh sách điều hướng trong một khu vực nhỏ. Với plugin thu gọn Bootstrap, bạn có thể tạo đàn accordion hoặc hiển thị và ẩn nội dung mà không cần viết bất kỳ mã JavaScript nào

Hãy xem cách tạo tiện ích đàn accordion đơn giản bằng cách sử dụng plugin có thể thu gọn Bootstrap

    

        

            1. What is HTML?									
        
        

            

                
HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.
            

        

    

    

        

            2. What is Bootstrap?
        
        

            

                
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.
            

        

    




    

        

            3. What is CSS?                     
        
        

            

                
CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.
            

        

    

— Đầu ra của ví dụ trên sẽ giống như thế này

Bootstrap Accordion với các biểu tượng Plus Minus

Bạn cũng có thể sử dụng các biểu tượng cộng trừ trong tiện ích đàn accordion Bootstrap (thay cho biểu tượng chevron xuống và lên) với một vài dòng mã CSS tùy chỉnh. Hãy thử ví dụ sau

— Đầu ra của ví dụ trên sẽ giống như thế này

Bootstrap Edge-to-Edge Accordion

Bạn có thể tùy chọn thêm lớp .accordion-flush vào phần tử .accordion để loại bỏ các đường viền bên ngoài và các góc được làm tròn để tạo ra các đàn accordion liền kề với vùng chứa chính của chúng

Hãy xem ví dụ sau để hiểu nó thực sự hoạt động như thế nào

    

        

            1. What is HTML?									
        
        

            

                
HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.
            

        

    

    

        

            2. What is Bootstrap?
        
        

            

                
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.
            




        

    

    

        

            3. What is CSS?                     
        
        

            

                
CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.
            

        

    

— Đầu ra của ví dụ trên sẽ giống như thế này

Bootstrap Accordion với các bảng điều khiển độc lập

Bạn cũng có thể làm cho các bảng đàn accordion luôn mở khi một bảng khác được mở bằng cách bỏ qua thuộc tính data-bs-parent trên mỗi phần tử .accordion-collapse

Đàn accordion hoạt động như thế nào Bootstrap?

Dữ liệu BS chuyển đổi là gì?