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

đóng mở đơn giản

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 đó

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 Collapsibleh2> <p>Click on the button to toggle between showing and hiding content.p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsiblebutton> <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> div> body> html>

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

html> <html> <head> <title>Bootstrap Exampletitle> <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 Collapsibleh2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsiblea> <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> div> body> html>

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

html> <html> <head> <title>Bootstrap Exampletitle> <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 Defaulth2> <p>Add the show class next to the collapse class to show the content by default.p> <p>Click on the button to toggle between showing and hiding content.p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsiblebutton> <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> div> body> html>

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ị