English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 El colapso puede implementar fácilmente la visualización y ocultación del contenido.
<!DOCTYPE html> <html> <head> <title>Bootstrap Ejemplo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Despliegue simple</h2> <p>Haciendo clic en el botón, el contenido se alternará entre mostrar y ocultar.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Despliegue simple</button> <div id="demo" class="collapse"> Te rezaré por ti, me dedicaré a ti, Tuvimos experiencias accidentales en el trabajo y la vida. Tenemos una pequeña vida, Estoy haciendo una pasantía que no es adecuada para mí. </div> </div> </body> </html>Prueba aquí ‹/›
.collapse clase se utiliza para especificar un elemento colapsable (en el ejemplo <div>); Después de hacer clic en el botón, se alternará entre ocultar y mostrar.
Para controlar la ocultación y visualización del contenido, necesitas agregar data en el elemento <a> o <button>.-toggle="collapse" atributo. data-target="#id" atributo corresponde al contenido colapsado (<div id="demo">).
Atención: <a> En el elemento puedes usar la propiedad href en lugar de data-target Atributos:
<!DOCTYPE html> <html> <head> <title>Bootstrap Ejemplo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Despliegue simple</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Despliegue simple</a> <div id="demo" class="collapse"> Te rezaré por ti, me dedicaré a ti, Tuvimos experiencias accidentales en el trabajo y la vida. Tenemos una pequeña vida, Estoy haciendo una pasantía que no es adecuada para mí. </div> </div> </body> </html>Prueba aquí ‹/›
Por defecto, el contenido colapsado está oculto, puedes agregar la clase .show para que el contenido se muestre por defecto:
<!DOCTYPE html> <html> <head> <title>Bootstrap Ejemplo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Despliegue simple</h2> <p>Puedes agregar la clase .show para que el contenido se muestre por defecto:/p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Despliegue simple</button> <div id="demo" class="collapse show"> Te rezaré por ti, me dedicaré a ti, Tuvimos experiencias accidentales en el trabajo y la vida. Tenemos una pequeña vida, Estoy haciendo una pasantía que no es adecuada para mí. </div> </div> </body> </html>Prueba aquí ‹/›
El siguiente ejemplo muestra un acordeón simple mediante la extensión del componente de tarjeta.
Atención: Utilice data-La propiedad parent para asegurar que todos los elementos de despliegue estén debajo del elemento padre especificado, lo que permite ocultar otros elementos cuando se muestra una opción de despliegue.
<!DOCTYPE html> <html> <head> <title>Bootstrap Ejemplo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Ejemplo de acordeón</h2> <p><strong>Atención:</strong>Utilice el <strong>data-parent</strong>Para asegurar que todos los elementos de despliegue estén debajo del elemento padre especificado, lo que permite ocultar otros elementos cuando se muestra una opción de despliegue.</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Opción uno </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 Contenido: Tutoriales básicos(oldtoolbag.com) -- Aprender lo básico, ¡puedes ir más lejos! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Opción dos </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 Contenido: Tutoriales básicos(oldtoolbag.com) -- Aprender lo básico, ¡puedes ir más lejos! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Opción tres </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 Contenido: Tutoriales básicos(oldtoolbag.com) -- Aprender lo básico, ¡puedes ir más lejos! </div> </div> </div> </div> </div> </body> </html>Prueba aquí ‹/›