Bootstrap màu đàn accordion
Nếu bạn mở các công cụ dành cho nhà phát triển của trình duyệt, bạn có thể thấy kiểu dáng của nút đàn accordion khi nó mở và đóng. Khi mở, các lớp/quy tắc sau được đặt Show
.accordion-item:first-of-type .accordion-button { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } .accordion-button:not(.collapsed) { color: #0c63e4; background-color: #e7f1ff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%); } Bây giờ bạn đã sẵn sàng sửa đổi hành vi mặc định Tôi đã đặt các kiểu sau trong các kiểu css trong công cụ dành cho nhà phát triển để có được những gì bạn muốn .accordion-button:not(.collapsed) { color: #0c63e4; background-color: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%); border-left: 2em solid red; } Bạn có thể xem bản xem trước trực tiếp về những thay đổi đã thực hiện Vui thích Thêm giải pháp của bạn ở đây B I U S small BIG code Xem trước 0thành viên hiện cóhoặc tham gia với chúng tôiTải xuống, Bình chọn, Nhận xét, Xuất bản Email của bạnEmail này đang được sử dụng. Bạn có cần mật khẩu của bạn? Mật khẩu tùy chọnKhi trả lời một câu hỏi xin vui lòng
Nội dung này, cùng với bất kỳ tệp và mã nguồn liên quan nào, được cấp phép theo Giấy phép Mở Dự án Code (CPOL) Đàn accordion sử dụng sự sụp đổ bên trong để làm cho nó có thể thu gọn lại. Để hiển thị đàn accordion được mở rộng, hãy thêm lớp Thí dụNhấp vào đàn accordion bên dưới để mở rộng/thu gọn nội dung đàn accordion Đây là thân đàn accordion của mặt hàng đầu tiên. Nó được hiển thị theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng thành phần. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong Đây là thân đàn accordion của vật phẩm thứ hai. Nó được ẩn theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong Đây là thân đàn accordion của vật phẩm thứ ba. Nó được ẩn theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong
Tuôn raThêm 0 để xóa 1 mặc định, một số đường viền và một số góc tròn để hiển thị các đàn accordions từ cạnh này sang cạnh khác với vùng chứa chính của chúngNội dung giữ chỗ cho đàn accordion này, nhằm thể hiện lớp 0. Đây là thân đàn accordion của mặt hàng đầu tiênNội dung giữ chỗ cho đàn accordion này, nhằm thể hiện lớp 0. Đây là thân đàn accordion của vật phẩm thứ hai. Hãy tưởng tượng điều này chứa đầy một số nội dung thực tếNội dung giữ chỗ cho đàn accordion này, nhằm thể hiện lớp 0. Đây là thân đàn accordion của vật phẩm thứ ba. Không có gì thú vị hơn xảy ra ở đây về mặt nội dung, nhưng chỉ cần lấp đầy khoảng trống để làm cho nó, ít nhất là ở cái nhìn đầu tiên, đại diện hơn một chút về cách thức này sẽ trông như thế nào trong một ứng dụng trong thế giới thực
Luôn luôn mởBỏ qua thuộc tính 5 trên mỗi 6 để làm cho các mục đàn accordion luôn mở khi một mục khác được mởĐây là thân đàn accordion của mặt hàng đầu tiên. Nó được hiển thị theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng thành phần. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong Đây là thân đàn accordion của vật phẩm thứ hai. Nó được ẩn theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong Đây là thân đàn accordion của vật phẩm thứ ba. Nó được ẩn theo mặc định, cho đến khi plugin thu gọn thêm các lớp thích hợp mà chúng tôi sử dụng để tạo kiểu cho từng phần tử. Các lớp này kiểm soát giao diện tổng thể, cũng như hiển thị và ẩn thông qua chuyển tiếp CSS. Bạn có thể sửa đổi bất kỳ điều nào trong số này bằng CSS tùy chỉnh hoặc ghi đè các biến mặc định của chúng tôi. Cũng cần lưu ý rằng hầu như bất kỳ HTML nào cũng có thể xuất hiện trong
khả năng tiếp cậnVui lòng đọc để biết thêm thông tin tùy chỉnhbiến CSSAccordions sử dụng các biến CSS cục bộ trên. đàn accordion để tăng cường tùy chỉnh thời gian thực. Các giá trị cho các biến CSS được đặt thông qua Sass, do đó tùy chỉnh Sass cũng vẫn được hỗ trợ Làm cách nào để đặt đàn accordion trong Bootstrap?Đàn xếp sử dụng tính năng thu gọn bên trong để làm cho nó có thể thu gọn lại. Để hiển thị đàn accordion được mở rộng, hãy thêm. mở lớp trên. đàn xếp . Hiệu ứng hoạt hình của thành phần này phụ thuộc vào truy vấn phương tiện chuyển động giảm ưu tiên. Xem phần giảm chuyển động trong tài liệu trợ năng của chúng tôi.
Bootstrap có đàn accordion không?Đàn xếp Bootstrap là một thành phần tổ chức nội dung trong các mục có thể thu gọn . Accordion cho phép hiển thị chỉ một mục thu gọn tại một thời điểm.
Làm cách nào để sử dụng đàn accordion Bootstrap trong Angular?Thành phần góc Bootstrap 5 Accordion . Ví dụ cơ bản. Nhấp vào đàn accordion bên dưới để mở rộng/thu gọn nội dung đàn accordion. . Tuôn ra. Sử dụng đầu vào [flush]="true" để xóa màu nền mặc định, một số đường viền và một số góc được làm tròn để hiển thị các cạnh của đàn accordion với vùng chứa chính của chúng. . không biên giới. . Luôn luôn mở |