Thanh điều hướng bootstrap 5 không mở rộng

Plugin JavaScript thu gọn được sử dụng để hiển thị và ẩn nội dung. Các nút hoặc neo được sử dụng làm trình kích hoạt được ánh xạ tới các phần tử cụ thể mà bạn chuyển đổi. Thu gọn một phần tử sẽ tạo hiệu ứng động cho

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

7 từ giá trị hiện tại của nó thành

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

8. Dựa vào cách CSS xử lý hoạt ảnh, bạn không thể sử dụng

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

9 trên phần tử

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

0. Thay vào đó, hãy sử dụng lớp như một phần tử gói độc lập

Thí dụ

Nhấp vào các nút bên dưới để hiển thị và ẩn phần tử khác thông qua thay đổi lớp

  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    0 ẩn nội dung
  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    2 được áp dụng trong quá trình chuyển đổi
  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    3 hiển thị nội dung

Nói chung, chúng tôi khuyên bạn nên sử dụng nút có thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4. Mặc dù không được đề xuất theo quan điểm ngữ nghĩa, nhưng bạn cũng có thể sử dụng liên kết có thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

5 (và một

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

6). Trong cả hai trường hợp,

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

7 là bắt buộc

Liên kết với nút href với data-bs-target

Một số nội dung giữ chỗ cho thành phần thu gọn. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan

________số 8

Nhiều mục tiêu

A hoặc

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

8có thể hiển thị và ẩn nhiều phần tử bằng cách tham chiếu chúng với bộ chọn trong thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

5 hoặc

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4 của nó. Nhiều hoặc

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

8có thể hiển thị và ẩn một phần tử nếu mỗi phần tử tham chiếu phần tử đó với thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

5 hoặc

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4 của chúng

Chuyển đổi phần tử đầu tiên

Chuyển đổi phần tử thứ hai Chuyển đổi cả hai phần tử

Một số nội dung giữ chỗ cho thành phần thu gọn đầu tiên của ví dụ đa thu gọn này. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan

Một số nội dung giữ chỗ cho thành phần thu gọn thứ hai của ví dụ đa thu gọn này. Bảng này được ẩn theo mặc định nhưng sẽ hiển thị khi người dùng kích hoạt trình kích hoạt có liên quan

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

khả năng tiếp cận

Đảm bảo thêm

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

64 vào thành phần điều khiển. Thuộc tính này truyền tải rõ ràng trạng thái hiện tại của phần tử có thể thu gọn gắn với điều khiển tới trình đọc màn hình và các công nghệ hỗ trợ tương tự. Nếu phần tử có thể thu gọn được đóng theo mặc định, thì thuộc tính trên phần tử điều khiển phải có giá trị là

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

65. Nếu bạn đã đặt phần tử có thể thu gọn thành mở theo mặc định bằng cách sử dụng lớp

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

66, thay vào đó, hãy đặt

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

67 trên điều khiển. Plugin sẽ tự động chuyển đổi thuộc tính này trên điều khiển dựa trên việc phần tử có thể thu gọn đã được mở hay đóng (thông qua JavaScript hoặc do người dùng đã kích hoạt một phần tử điều khiển khác cũng được gắn với cùng một phần tử có thể thu gọn). Nếu phần tử HTML của phần tử điều khiển không phải là một nút (e. g. , một

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

8or

), nên thêm thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

6 vào phần tử

Nếu phần tử điều khiển của bạn đang nhắm mục tiêu một phần tử có thể thu gọn duy nhất – tôi. e. thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4 đang trỏ đến bộ chọn

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

31 – bạn nên thêm thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

32 vào phần tử điều khiển, chứa

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

31 của phần tử có thể thu gọn. Trình đọc màn hình hiện đại và các công nghệ hỗ trợ tương tự sử dụng thuộc tính này để cung cấp cho người dùng các phím tắt bổ sung để điều hướng trực tiếp đến chính phần tử có thể thu gọn

Lưu ý rằng triển khai hiện tại của Bootstrap không bao gồm các tương tác bàn phím tùy chọn khác nhau được mô tả trong Thực tiễn soạn thảo WAI-ARIA 1. 1 mẫu đàn accordion - bạn sẽ cần tự thêm những mẫu này bằng JavaScript tùy chỉnh

ngổ ngáo

Biến

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

6

Các lớp học

Có thể tìm thấy các lớp chuyển tiếp thu gọn trong

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

34 vì chúng được chia sẻ trên nhiều thành phần (thu gọn và đàn accordion)

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

3

Cách sử dụng

Plugin thu gọn sử dụng một vài lớp để xử lý việc nâng vật nặng

  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    0 ẩn nội dung
  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    3 hiển thị nội dung
  • Toggle first element Toggle second element Toggle both elements

    Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

    2 được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi quá trình chuyển đổi kết thúc

Các lớp này có thể được tìm thấy trong

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

38

Thông qua thuộc tính dữ liệu

Chỉ cần thêm

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

7 và một

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4 vào phần tử để tự động gán quyền kiểm soát một hoặc nhiều phần tử có thể thu gọn. Thuộc tính

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

4 chấp nhận bộ chọn CSS để áp dụng thu gọn cho. Đảm bảo thêm lớp

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

62 vào phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy thêm lớp bổ sung

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

66

Để thêm tính năng quản lý nhóm giống như đàn accordion vào khu vực có thể thu gọn, hãy thêm thuộc tính dữ liệu

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

64. Tham khảo bản demo để thấy điều này trong thực tế

Qua JavaScript

Kích hoạt thủ công với

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

6

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

65, như trong

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

66

NameTypeDefaultDescription____367bộ chọn. đối tượng jQuery. Phần tử DOM______368Nếu cấp độ gốc được cung cấp, thì tất cả các phần tử có thể thu gọn bên dưới cấp độ gốc được chỉ định sẽ bị đóng khi mục có thể thu gọn này được hiển thị. (tương tự như hành vi của đàn accordion truyền thống - điều này phụ thuộc vào lớp

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

69). Thuộc tính phải được đặt trên khu vực có thể thu gọn mục tiêu.

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

50boolean

Toggle first element Toggle second element Toggle both elements

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

51Bật/tắt phần tử có thể thu gọn khi gọi

phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua

Tại sao thanh điều hướng Bootstrap không bị sập?

Đối với các thanh điều hướng không bao giờ thu gọn, hãy thêm. lớp mở rộng thanh điều hướng trên thanh điều hướng . Đối với các thanh điều hướng luôn thu gọn, không thêm bất kỳ. lớp mở rộng thanh điều hướng.

Trình chuyển đổi thanh điều hướng là gì?

Nhãn chuyển đổi thanh điều hướng . Do đó, thanh điều hướng hiển thị dưới dạng thu gọn trên thiết bị di động. Nó có thể được bật bằng nút hamburger. Bootstrap Navbar component is designed for mobile first approach. Therefore, the navbar renders as collapsed on mobile devices. It can be toggled by a hamburger button.

Bạn sẽ sử dụng lớp Bootstrap CSS nào để đặt thanh điều hướng ở đầu trang?

Với Bootstrap, thanh điều hướng có thể mở rộng hoặc thu gọn, tùy thuộc vào kích thước màn hình. Thanh điều hướng tiêu chuẩn được tạo bằng

Lớp Bootstrap nào sau đây được thêm vào để đưa tất cả các mục trên thanh điều hướng thành một đường ngang?

văn bản thanh điều hướng . Lớp này điều chỉnh căn lề dọc và khoảng cách ngang cho chuỗi văn bản. Trộn và kết hợp với các thành phần và tiện ích khác khi cần.