El complemento de colapso facilita el plegado del área de la página. Ya sea que lo use para crear una navegación colapsada o un panel de contenido, permite muchas opciones de contenido.
Si desea hacer referencia a la funcionalidad del complemento individualmente, debe hacer referencia a collapse.js o, como se menciona en el capítulo de descripción general del complemento Bootstrap , puede hacer referencia a bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
La siguiente tabla enumera el complemento de colapso para manejar una escala pesada:
Puede usar el complemento de colapso de dos maneras:
A través del atributo de datos: agregue datos-toggle = "colapso" y datos de datos al elemento para asignar automáticamente controles a elementos colapsibles. La propiedad del objetivo de datos acepta un selector CSS y aplica un efecto de colapso. Asegúrese de agregar clase .Collapse al elemento plegable. Si desea que esté encendido de forma predeterminada, agregue una clase adicional .in.
Para agregar una administración de agrupación plegada en forma de panel al control plegable, agregue la propiedad de datos datos-parent = "#selector".
A través de JavaScript : el método de colapso se puede activar a través de JavaScript, como se muestra a continuación:
$ ('. colapso'). colapso ()
2. Ejemplos
El contenido se puede colapsar haciendo clic.
// Ejemplo básico
<botón data-toggle = "colapse" data-target = "#content"> bootstrap </boton> <div id = "content"> <div> bootstrap es un kit de herramientas de código abierto para el desarrollo frontal lanzado por Twitter. Fue desarrollado por el diseñador de Twitter Mark Otto y Jacob Thornton y es un marco CSS/HTML. Actualmente, la última versión de Bootstrap es 3.0. </div> </div>
// plegamiento de acordeón
<div id = "acorkion"> <div> <div> <h4> <a href = "#collapseOne" data-toggle = "colapse" data-parent = "#acorkion"> Haga clic en mí para mostrarme, haga clic en Doblar, Parte 1 </a> </h4> </div> <Div Id = "colapsoeone"> <DivIs> aquí es la primera parte. </div> </div> </div> <div> <h4> <a href = "#collapsetwo" data-toggle = "colapse" data-parent = "#acorkion"> Haga clic en mí para mostrarme, haga clic en mí para plegar, parte 2 </a> </h4> </div> <d id = "colapsetwo"> <divit> aquí está el segundo. </div> </div> </div> <div> <div> <h4> <a href = "#collapsethree" data-toggle = "colapse" data-parent = "#acorkion"> Haga clic en mí para mostrar, haga clic en mí para doblar, parte 3 </a> </h4> </div> <d id = "colapsethreeSethree> <iv> aquí es el tercero. </div> </div> </div> </div>
// efecto acordeón
$ ('#colapsoe,#colapsetwo,#colapsethree, #collapsefour'). colapso ({parent: '#accordion', toggle: false,});// llamar manualmente
$ ('Button'). on ('Click', function () {$ ('#colapso'). colapso ({toggle: true,});});// El método de colapso también proporciona tres parámetros: ocultar, mostrar y alternar.
$ ('#colapso'). colapso ('hide'); $ ('#colapsetwo'). colapso ('show'); $ ('botón'). on ('click', function () {$ ('#colapsoee'). colapso ('toggle');});Hay cuatro tipos de eventos en el complemento de colapso.
// eventos, otras similitudes
$ ('#collapseone'). on ('show.bs.collapse', function () {alerta ('gratis cuando se llama el método de espectáculo');});Espero que este artículo sea útil e inspirador para aprender sobre el complemento de colapso de Bootstrap.