Sụp đổ bootstrap là gì?

NỘI DUNG BÀI VIẾT

Thu gọn trong Bootstrap là một thành phần hữu ích giúp ẩn hoặc hiện một “vùng” [khu vực] trên trang, người dùng có thể chủ động mở rộng [mở rộng] một “vùng” để xem nội dung tại đó hoặc ẩn nó đi để

Thu gọn trong Bootstrap

Thu gọn rất hữu ích khi bạn muốn ẩn và hiển thị một lượng lớn nội dung

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

  
  
  
  
  




  Simple Collapsible
  Click on the button to toggle between showing and hiding content.
  Simple collapsible
  
    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.
  





  

Code language: HTML, XML [xml]

Giải thích ví dụ

Class. thu gọn chỉ ra một phần tử có thể thu gọn [một div trong ví dụ], đây là nội dung sẽ được hiển thị hoặc ẩn bằng một cú nhấp chuột

Để kiểm soát [hiển thị / ẩn] nội dung có thể thu gọn, vui lòng thêm thuộc tính data-toggle = ‘sập’ vào phần tử a hoặc nút. Sau đó, thêm thuộc tính data-target = ‘# id’ để kết nối các nút với nội dung có thể thu gọn [div id = ‘demo’]

Lưu ý. Đối với một phần tử, bạn có thể sử dụng thuộc tính href thay vì thuộc tính data-target

  Bootstrap Example
  
  
  
  
  




  Simple Collapsible
  Simple collapsible
  
    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.
  




Code language: HTML, XML [xml]

Theo mặc định, nội dung thu gọn được ẩn. Tuy nhiên, bạn có thể thêm lớp. show to show content by default

  Bootstrap Example
  
  
  
  
  




  Show Collapsible Content By Default
  Add the show class next to the collapse class to show the content by default.
  Click on the button to toggle between showing and hiding content.
  Simple collapsible
  
    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.
  

    



  

Code language: HTML, XML [xml]

đàn phong cầm

Ví dụ sau đây để thấy một số đàn accordion đơn giản bằng cách mở rộng thành phần thẻ

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

Lưu ý. Sử dụng thuộc tính data-parent để đảm bảo rằng tất cả các phần tử có thể thu gọn trong phần tử gốc chỉ được xác định sẽ bị đóng khi một trong các mục có thể thu gọn được hiển thị