IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 Collapse

Bootstrap 4 Collapse

by GokiSoft.Com - 19:29 12/10/2020 11,655 Lượt Xem

Basic Collapsible

Collapsibles rất hữu ích khi bạn muốn ẩn và hiển thị nội dung:

Ví dụ


<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 do 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>

Giải thích ví dụ

Class .collapse chứa nội dung (thẻ <div> trong ví dụ trên); nội dung sẽ được hiển thị hoặc ẩn khi ấn button.

Để điều khiển (show/hide) nội dung, add thuộc tính data-toggle="collapse" vào thẻ <a> hoặc thẻ <button>. Sau đó add thuộc tính data-target="#id" để connect button với nội dung collapsible(<div id="demo">).

Chú ý: Với thẻ <a>, bạn có thể dùng href thay vì data-target:

Theo mặc định, nội dung là hidden. Tuy nhiên, bạn có thể add class .show để hiển thị nội dung theo mặc định:

<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 do 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>

Accordion

Ví dụ trên đây cho thấy một Accordion đơn giản.

Chú ý: Thuộc tính data-parent để khiến tất cả collapsible elements còn lại đóng khi có một element mở.

Ví dụ


<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..
      </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..
      </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..
      </div>
    </div>
  </div>

</div>


Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!