TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear Bootstrap 5 Collapse?

19

El colapso del nombre es un término genérico que se utiliza para mostrar elementos que se pueden mostrar u ocultar al hacer clic con el mouse. El acordeón, el spoiler y los conmutadores son buenos ejemplos de componentes de colapso. Utiliza JavaScript para mostrar u ocultar el contenido cuando se hace clic en el elemento. En este tutorial, exploremos más sobre cómo agregar un componente de colapso a su sitio Bootstrap. Bootstrap 5 introdujo un nuevo componente de acordeón, por lo tanto, no se confunda con estos dos.

Tutorial de colapso de Bootstrap 5

  1. Introducción al colapso de Bootstrap
  2. Creando colapso con el atributo href
  3. Contraer con data-toogle
  4. Colapso de varios objetivos
  5. Colapso de acordeón
  6. Cuerpo de contenido contraíble

1 Introducción a Collapse

El componente de colapso tiene dos elementos:

  • Elemento base para mostrar u ocultar el colapso.
  • Contenido real dentro del contenedor colapsado.

Utiliza las siguientes tres clases de CSS:

  • ".Collapse" se utiliza para ocultar el contenido.
  • ".Collapsing" se utiliza para aplicar el efecto de transición.
  • ".Collapse.show" se utiliza para mostrar el contenido.

Aquí discutiremos la creación de tres tipos de colapso: usando el atributo href, usando data-toggle y estilo acordeón.

2 Colapsar con atributo Href

En este caso, la etiqueta de anclaje se utiliza con clases de botón como disparador. Debe tener el atributo "alternar datos" con el valor "colapso". El atributo href debe tener una ID única. El atributo "aria-expandido" se establece como "falso" para garantizar que el contenido esté oculto en la carga de la página inicial.

Después del desencadenante de contracción, el contenido real debe agregarse con un

etiqueta identificada con el mismo ID del atributo href. También debe agregar la clase ".collapse" a la etiqueta div. Puede agregar cualquier tipo de contenido dentro de las etiquetas div. En este ejemplo, hemos utilizado un bloque de cartas con texto.

El código completo para el colapso con el atributo href se muestra a continuación:

<p> <a class="btn btn-primary" data-toggle="collapse" href="#linkcollapse" aria-expanded="false" aria-controls="Collapse"> Link with Href </a> </p> <div class="collapse" id="linkcollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing. </div> </div>

El resultado debería verse como un botón y el contenido plegable debería mostrarse al hacer clic en el botón.

¿Cómo crear Bootstrap 5 Collapse?

Siempre debe usar el código dentro de la sección del cuerpo de la plantilla de inicio Bootstrap que incluye el marco CSS y JavaScript requerido.

3 Contraer con alternancia de datos

En lugar del atributo href, puede usar "data-toggle = collapse" con el elemento button para crear un activador como se muestra a continuación:

<p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse"> Button with data-target </button> </p> <div class="collapse" id="buttoncollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing. </div> </div>

El resultado del código anterior se verá a continuación, similar al ejemplo de href.

¿Cómo crear Bootstrap 5 Collapse?

4 Colapso múltiple de Taget

El ejemplo anterior tiene un componente de colapso único que se alterna con un botón. También puede alternar múltiples componentes de colapso usando un solo elemento. Por ejemplo, el siguiente código tiene tres botones. Los botones primero y segundo se utilizan para alternar el primer y segundo colapso respectivamente. El tercer botón se utiliza para alternar el primer y el segundo colapso juntos.

<p> <a class="btn btn-primary" data-toggle="collapse" href="#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button> <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse1"> <div class="card card-body"> Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse2"> <div class="card card-body"> Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> </div>

Se verá más abajo en su sitio:

¿Cómo crear Bootstrap 5 Collapse?

Ejemplo de colapso de Bootstrap

5 Colapso de acordeón

La variación final y más popular es crear acordeón utilizando el componente de colapso. A continuación se muestra el código de acordeón que tiene tres controles deslizantes: el primero tiene un diseño de grupo de tarjetas y los dos restantes tienen un encabezado de tarjeta con algo de contenido de texto.

<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div style="margin:20px;"> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-body"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Here is the content for the third section. </div> </div> </div> </div>

Es un bloque de código largo principalmente debido a la sección del grupo de tarjetas para el primer colapso. Repasemos todos los elementos que forman parte de este código:

5.1. Acordeón

  • El acordeón está envuelto dentro de etiquetas div con una ID única (#accordion en este ejemplo). Y el atributo de rol debe usarse como lista de pestañas.
  • Se utilizan en total tres secciones plegables y cada sección debe comenzar con su propio div. Hemos utilizado la clase ".card" para cada una de estas secciones.
  • Cada sección de la tarjeta se compone de un encabezado y un contenido plegable.

5.2. Bóveda

  • La clase ".card-header" se usa para el encabezado junto con una identificación única (Firstheading) y el atributo de rol con un valor como tabulador.
  • Dentro del encabezado, agregue etiquetas de encabezado, hemos usado h5 en este caso.
  • Nuevamente, dentro de las etiquetas de encabezado, agregue un enlace de anclaje con la siguiente clase / atributos:

    • Agregue la clase ".collapsed" para acordeón.

    • Agregue el atributo de alternancia de datos con el valor como colapso.

    • Agregue el atributo data-parent con el mismo ID que se usó para el primer

      (#accordion en este caso).

    • El atributo Href debe tener un ID del contenido plegable que es "# collapse1".

    • Establezca aria-expandido en verdadero para que la sección se abra cuando se cargue la página (debe establecer esto en falso para la segunda sección y las siguientes para que se cierren al cargar).

    • Establezca el valor del atributo aria-controls con el mismo ID del valor del atributo Href (collapse1).

6 Cuerpo de contenido plegable

  • Abra una nueva

    etiqueta después del encabezado con el mismo ID de correspondiente al valor del atributo href del encabezado (colapso1).

  • Agregue la clase ".collapse show" para mostrar el contenido abierto. No debe usar ".show" para las secciones restantes, ya que deben estar cerradas.

  • Agregue el rol como panel de pestañas y asigne el atributo aria-labelledby con el mismo valor que la identificación del encabezado de la tarjeta (Firstheading).

  • Ahora puede agregar cualquier contenido que desee agregar. En este caso, hemos abierto otro div y agregado un grupo de tarjetas para la primera sección y bloques de tarjetas para las dos secciones restantes.

Siga el mismo proceso para las otras dos secciones y el acordeón final debería verse como a continuación:

¿Cómo crear Bootstrap 5 Collapse?


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More