Bài 26: Collapse trong Bootstrap 4

0
613

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn về Collapse trong Boostrap 4.

Tạo Collapse cơ bản

Đầu tiên, Collapse sẽ rất hữu ích khi bạn muốn ẩn hay hiển thị lượng lớn nội dung. Nếu bình thường muốn ẩn nội dung, khi cần mở ra thì Collapse là sự lựa chọn rất chính xác đó.

Mình sẽ chuẩn bị 1 nút button để khi click sẽ hiển thị ra nội dung, như sau:

  • Class .collapse ở trong thẻ <div> nội dung hiển thị chỉ ra phần tử đó đóng mở, nội dung sẽ được hiển thị theo việc click chuột.
  • Thuộc tính data-toggle="collapse" giúp kiểm soát việc ẩn/hiện của nội dung, thuộc tính này hay được thêm vào thẻ <a> hoặc thẻ <button>.
  • Thuộc tính data-target="#demo" để kết nối nút với khối có nội dung thu gọn (<div id=”demo”>)

Hiển thị ví dụ:

Lưu ý: Đối với thẻ <a>, các bạn có thể sử dụng thuộc tính href thay vì thuộc tính data-target, như sau:

Mặc định, các nội dung của Collapse sẽ ẩn. Tuy nhiên, bạn có thể thêm class .show để hiển thị nội dung mặc định lên, như sau:

Collapse nâng cao

Tiếp theo mình sẽ đi xây dựng phần Collapse phức tạp hơn với nhiều khối nội dung.

Ví dụ:

Kết luận

OK, như vậy là mình đã hướng dẫn xong cho các bạn phần Collapse, collapse có thể ứng dụng trong các Menu Reponsive, trong các thành phần muốn ẩn/hiển, …

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây