Hướng dẫn how to use collapse in bootstrap? - cách sử dụng thu gọn trong bootstrap?

Question

Làm thế nào nó hoạt động

Plugin JavaScript sụp đổ đượ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 bộ kích hoạt được ánh xạ tới các yếu tố cụ thể mà bạn chuyển đổi. Thu gọn một phần tử sẽ làm động height từ giá trị hiện tại của nó xuống 0. Đưa ra cách CSS xử lý hình ảnh động, bạn không thể sử dụng padding trên phần tử

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

0. Thay vào đó, sử dụng lớp như một yếu tố gói độc lập.

Nội dung chính Show

Làm thế nào nó hoạt động
Nhiều mục tiêu
Khả năng tiếp cận
Các lớp học
Cách sử dụng
Thông qua các thuộc tính dữ liệu
Thông qua JavaScript
Tùy chọn
Phương pháp
Sự kiện
Làm thế nào để thu gọn hoạt động trong bootstrap?
Sự khác biệt giữa sụp đổ và accordion là gì?
Sự sụp đổ của Navbar sụp đổ là gì?

Thí dụ

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

0 ẩn nội dung

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

2 được áp dụng trong quá trình chuyển đổi

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

3 hiển thị nội dung

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

5 (và

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

7 là bắt buộc.

Liên kết với href

Một số nội dung giữ chỗ cho thành phần sụp đổ. Bảng điều khiển này được ẩn theo mặc định nhưng được tiết lộ khi người dùng kích hoạt kích hoạt có liên quan.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  button>
p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  div>
div>

Nhiều mục tiêu

A

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

8 hoặc

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

9 có thể hiển thị và ẩn nhiều yếu tố bằng cách tham chiếu chúng bằng một bộ chọn trong thuộc tính

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

5 hoặc

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

4 của nó. Nhiều

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

8 hoặc

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

9 có thể hiển thị và ẩn một phần tử nếu mỗi người tham khảo nó bằng thuộc tính

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

5 hoặc

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

4 của họ

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

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

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

Khả năng tiếp cận

Hãy chắc chắn để thêm

$transition-collapse:         height .35s ease;

6 vào phần tử đ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 được gắn vào điều khiển để sàng lọc người đọc và các công nghệ hỗ trợ tương tự. Nếu phần tử thu gọn được đóng theo mặc định, thuộc tính trên phần tử điều khiển phải có giá trị

$transition-collapse:         height .35s ease;

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

$transition-collapse:         height .35s ease;

8, hãy đặt

$transition-collapse:         height .35s ease;

9 trên điều khiển thay thế. 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ử thu gọn có được mở hay đóng hay không (thông qua JavaScript hay vì 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ử điều khiển phần tử HTML không phải là nút (ví dụ:

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

9 hoặc

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

1), thuộc tính

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

6 nên được thêm 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 - tức là thuộc tính

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

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

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

4 - bạn nên thêm thuộc tính

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

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

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

4 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 việc 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 hành tác giả WAI -ARIA 1.1 Mẫu accordion - bạn sẽ cần phải bao gồm những điều này với JavaScript tùy chỉnh.

Sass

Biến

$transition-collapse:         height .35s ease;

Các lớp học

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

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

7 vì chúng được chia sẻ trên nhiều thành phần (sụp đổ và accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

Cách sử dụng

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

0 ẩn nội dung

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

3 hiển thị nội dung

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

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

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

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

1.

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

Chỉ cần thêm

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

7 và

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

4 vào phần tử để tự động chỉ định điều khiển của một hoặc nhiều phần tử có thể thu gọn. Thuộc tính

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton>
p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      div>
    div>
  div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      div>
    div>
  div>
div>

4 chấp nhận bộ chọn CSS để áp dụng sự sụp đổ. Hãy chắc chắn để thêm lớp

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

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

$transition-collapse:         height .35s ease;

8 bổ sung.

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

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

7. Tham khảo bản demo để xem điều này trong hành động.

Thông qua JavaScript

Bật thủ công với:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Tùy chọn

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

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

8, như trong

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

9.

Tên Loại hình Mặc định Sự mô tả

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

0

bộ chọn | Đối tượng jQuery | Phần tử DOM

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

1

Nếu cha mẹ được cung cấp, thì tất cả các phần tử có thể thu gọn trong cha mẹ được chỉ định sẽ được đóng khi mục có thể thu gọn này được hiển thị. (Tương tự như hành vi accordion truyền thống - Điều này phụ thuộc vào lớp

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

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

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

3

Boolean

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

4

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

Phương pháp

Phương pháp 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 chuyển đổi. Họ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó 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.asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.

Kích hoạt nội dung của bạn như một yếu tố thu gọn. Chấp nhận một tùy chọn tùy chọn

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

5.

Bạn có thể tạo một thể hiện sụp đổ với hàm tạo, ví dụ:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

Phương pháp	Sự mô tả
`var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 3	Bật một phần tử có thể thu gọn để hiển thị hoặc ẩn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị hoặc ẩn (nghĩa là trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 hoặc `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 xảy ra).Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 or `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 event occurs).
`$transition-collapse: height .35s ease;` 8	Hiển thị một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị (ví dụ: trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 xảy ra).Returns to the caller before the collapsible element has actually been shown (e.g., before the `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 event occurs).
`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 1	Ẩn một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã bị ẩn (ví dụ: trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 xảy ra).Returns to the caller before the collapsible element has actually been hidden (e.g., before the `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 event occurs).
`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 3	Phá hủy sự sụp đổ của một yếu tố. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 4	Phương pháp tĩnh cho phép bạn có được thể hiện sự sụp đổ được liên kết với phần tử DOM, bạn có thể sử dụng nó như thế này: `var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 5
`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 6	Phương thức tĩnh trả về một trường hợp sụp đổ được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này: `var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 7

Sự kiện

Lớp sụp đổ của Bootstrap, phơi bày một vài sự kiện để kết nối với chức năng sụp đổ.

Loại sự kiện	Sự mô tả
Bật một phần tử có thể thu gọn để hiển thị hoặc ẩn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị hoặc ẩn (nghĩa là trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 hoặc `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 xảy ra).	`$transition-collapse: height .35s ease;` 8
Hiển thị một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị (ví dụ: trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 7 xảy ra).	`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 1
Ẩn một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã bị ẩn (ví dụ: trước khi sự kiện `var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false })` 8 xảy ra).	`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 3
Phá hủy sự sụp đổ của một yếu tố. (Xóa dữ liệu được lưu trữ trên phần tử DOM)	`var myCollapsible = document.getElementById('myCollapsible') myCollapsible.addEventListener('hidden.bs.collapse', function () { // do something... })` 4

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})

Làm thế nào để thu gọn hoạt động trong bootstrap?

Làm thế nào nó hoạt động.Plugin JavaScript sụp đổ đượ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 bộ kích hoạt được ánh xạ tới các yếu tố cụ thể mà bạn chuyển đổi.Thu gọn một phần tử sẽ làm động chiều cao từ giá trị hiện tại của nó xuống 0.The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .

Sự khác biệt giữa sụp đổ và accordion là gì?

Trong bối cảnh bootstrap khôn ngoan, accordion về cơ bản là một nút sụp đổ với rất nhiều thông tin nhỏ hơn trong đó.Bootstrap sử dụng thẻ để tạo một đàn accordion.Trên dòng 1, đây là nơi mà cha mẹ dữ liệu đề cập đến.Trên dòng 2, chúng tôi đang sử dụng một lớp thẻ, để hiển thị hiệu ứng thẻ.accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1,

, this is where the data-parent refers to. on line 2

, we are using a card class, to show the card effect.

Thu hẹp của Navbar đề cập đến menu nằm trong chế độ xem di động với Navbar (chứa các liên kết và nội dung thân thiện với chuyển đổi).Họ đang ở trong CSS Bootstrap (xem tại đây).Xem điều này để biết đầy đủ về cách Navbar và sụp đổ hoạt động cùng nhau.the menu that is in the mobile view with the navbar (contains links, and toggle-friendly content). They are in the bootstrap CSS (see here). See this for a full rundown of how the navbar and collapse work together.

programming bootstrap Collapse Bootstrap Collapse Bootstrap 5 Collapse HTML Collapse HTML CSS Border-collapse CSS Bootstrap toggle button data-toggle là gì

Hướng dẫn how to use collapse in bootstrap? - cách sử dụng thu gọn trong bootstrap?

Làm thế nào nó hoạt động

Thí dụ

Nhiều mục tiêu

Khả năng tiếp cận

Sass

Biến

Các lớp học

Cách sử dụng

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

Thông qua JavaScript

Tùy chọn

Phương pháp

Phương pháp và chuyển tiếp không đồng bộ

Sự kiện

Làm thế nào để thu gọn hoạt động trong bootstrap?

Sự khác biệt giữa sụp đổ và accordion là gì?

Sự sụp đổ của Navbar sụp đổ là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội