collapse là gì

Collapse trong Bootstrap là 1 trong bộ phận hữu ích nó hùn ẩn hoặc hiện nay một “vùng” (area) bên trên trang, người tiêu dùng hoàn toàn có thể dữ thế chủ động không ngừng mở rộng (expand) một “vùng” nhằm coi nội dung bên trên bại, hoặc ẩn nó nhằm tiết kiệm ngân sách không khí.

Collapse trong Bootstrap

Collapse vô cùng hữu ích Lúc bạn thích ẩn và hiển thị một lượng rộng lớn nội dung:

Bạn đang xem: collapse là gì

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button đồ sộ toggle between showing and hiding nội dung.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Giải mến ví dụ:

Lớp .collapse đã cho thấy một thành phần hoàn toàn có thể thu gọn gàng (một div vô ví dụ), đấy là nội dung sẽ tiến hành hiển thị hoặc ẩn vì chưng một cú nhấp con chuột.

Để trấn áp (hiển thị / ẩn) nội dung hoàn toàn có thể thu gọn gàng, hãy tăng tính chất data-toggle = ‘sập’ vô thành phần a hoặc nút. Sau bại, tăng tính chất data-target = ‘# id’ nhằm liên kết nút với nội dung hoàn toàn có thể thu gọn gàng (div id = ‘demo’).

Lưu ý: Đối với cùng 1 thành phần, bạn cũng có thể dùng tính chất href chứ không tính chất data-target:

Xem thêm: Lô kép miền bắc - bật mí bí quyết cho người mê số đề

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Theo đem tấp tểnh, nội dung thu gọn gàng được ẩn. Tuy nhiên, bạn cũng có thể tăng lớp .show nhằm hiển thị nội dung theo gót đem định:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Show Collapsible Content By Default</h2>
  <p>Add the show class next đồ sộ the collapse class đồ sộ show the nội dung by mặc định.</p>
  <p>Click on the button đồ sộ toggle between showing and hiding nội dung.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse show">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
    
</body>
</html>
Code language: HTML, XML (xml)

Accordion

Ví dụ tại đây đã cho chúng ta biết một số trong những accordion giản dị và đơn giản bằng phương pháp không ngừng mở rộng bộ phận thẻ.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lưu ý: Sử dụng tính chất data-parent nhằm đảm nói rằng toàn bộ những thành phần hoàn toàn có thể thu gọn gàng vô thành phần gốc được chỉ định và hướng dẫn có khả năng sẽ bị đóng góp Lúc một trong những mục hoàn toàn có thể thu gọn gàng được hiển thị.

Xem thêm: liên kết câu và liên kết đoạn văn

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed bởi eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>
Code language: HTML, XML (xml)

Kết luận

Bài viết đã trình làng về Collapse vô Bootstrap 4. Mời các bạn nối tiếp theo gót dõi bài xích tiếp sau.

Các bạn cũng có thể tìm hiểu thêm những nội dung bài viết hoặc về Bootstrap tại đây.


Hãy nhập cuộc nhóm Học lập trình để thảo luận tăng về những yếu tố nằm trong quan hoài.