Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido. A continuación, a través de este artículo, le presentaré el ejemplo del uso del complemento Bootstrap Pleging (colapso). ¡Echemos un vistazo!
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 por separado, entonces debe hacer referencia a colapso.js. Al mismo tiempo, también debe hacer referencia al complemento de transición en su versión de arranque. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
Puede usar el complemento de colapso:
Cree un panel de agrupación o plegable plegable de la siguiente manera:
<! Doctype html> <html> <fead> <title> instancia de bootstrap - panel plegable </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "/scripts/jQuery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acorkion"> <div> <h4> <a data-toggle = "colapsar" data-parent = "#acorkion" href = "#colapso"> Haga clic en mí para expandirme para colapsar de nuevo. Parte 1 </a> </h4> </div> <div id = "colapso"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal Wes Anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#collapsetwo"> Haga clic en expandirme, haga clic para colapsar nuevamente. Parte 2 </a> </h4> </div> <div id = "colapsetwo"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal wes anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#colapsethree"> Haga clic en expandirme, haga clic para colapsar nuevamente. Parte 3 </a> </h4> </div> <div id = "colapsethree"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal Wes Anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> </div> </div> </body> </html>
Los resultados son los siguientes:
Data-toggle = "colapso" se agrega al enlace al componente que desea expandir o colapsar.
La propiedad HREF o Data-Target se agrega al componente principal, y su valor es la identificación del componente infantil.
La propiedad de datos de datos agrega la ID del panel colapsado al enlace del componente a expandirse o colapsarse.
Cree un componente plegable simple sin la etiqueta de acordeón, como se muestra a continuación:
<!DOCTYPE html><html><head><title>Bootstrap instance- Simple foldable component</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button type = "button" data-toggle = "colapse" data-target = "#demo"> componente plegable simple </botón> <id = "demoso"> nihil nihil keffiyeh helvetica, artesanía de cerveza obrera y credermer crede cred nesciunt. Ad Vegan Excepteur Butcher Vice Lomo. </div> </body> </html>
Los resultados son los siguientes:
Como puede ver en la instancia, creamos un componente plegable, a diferencia del panel plegado, no agregamos la propiedad de datos de la propiedad.
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 ()Opción
Hay algunas opciones que se pasan a través de propiedades de datos o JavaScript. La siguiente tabla enumera estas opciones:
método
Aquí hay algunos métodos útiles en complementos de colapso:
Ejemplo
El siguiente ejemplo demuestra el uso del método:
<!DOCTYPE html><html><head><title>Bootstrap instance - Collapse plug-in method</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acorkion"> <div> <h4> <a data-toggle = "colapsar" data-parent = "#acorkion" href = "#colapso"> Haga clic en mí para expandirme para colapsar de nuevo. Parte 1-Método de hide </a> </h4> </div> <div id = "colapso"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal Wes Anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#collapsetwo"> Haga clic en expandirme, haga clic para colapsar nuevamente. Parte 2 -Método de Show </a> </h4> </div> <div id = "colapsetwo"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal wes anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#collapsethree"> Haga clic en expandirme para expandirme para colapsar nuevamente. Parte 3- Método de toggle </a> </h4> </div> <div id = "colapsethree"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal wes anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "colapso" data-parent = "#acorkion" href = "#collapsefour"> Haga clic para expandirme, haga clic para colapsar nuevamente. Parte 4-Método de opciones </a> </h4> </div> <div id = "colapsefour"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal wes anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> </div> <script type = "text/javascript"> $ (function () {$ ('#collapsefour'). Collapse ({toggle: false})}); $ (function () {$ ('#colapsetwo'). $ ('#colapsethree'). colapso ('toggle')}); $ (function () {$ ('#collapseone'). colapso ('hide')}); </script> </body> </html>Los resultados son los siguientes:
evento
La siguiente tabla enumera los eventos que se utilizarán en el complemento de colapso. Estos eventos se pueden usar como ganchos en las funciones.
Ejemplo
El siguiente ejemplo demuestra el uso de eventos:
<!DOCTYPE html><html><head><title>Bootstrap instance - Collapse plugin event</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "acorkion"> <div> <h4> <a data-toggle = "colapsar" data-parent = "#bordion" href = "#colapsexample"> Haga clic en expandir para expandirme para colapsar nuevamente. -Evento de Shown </a> </h4> </div> <div id = "colapsoxample"> <div> nihil anim keffiyeh helvetica, trabajo de cerveza artesanal wes anderson cred nesciunt sapiente ea proident. Ad Vegan Excepteur Butcher Vice Lomo. </div> </div> </div> <script type = "text/javaScript"> $ (function () {$ ('#collapseExample'). On ('show.bs.collapse', function () {alerta ('hey, esta advertencia se indica cuando se expandirLos resultados son los siguientes:
Lo anterior es la explicación detallada del ejemplo de uso del complemento de plegado de bootstrap (colapso) introducido por el editor. ¡Espero que sea útil para todos!