Índice

Los acordeones

Otro componente de interfaz bastante clásico que ofrece Bootstrap: los acordeones.

1. Insertar un acordeón

Una vez más, cree la estructura Bootstrap que prefiera y sitúese en la celda deseada.

En el panel Insertar, categoría Componentes de Bootstrap, seleccione Accordion.

images/23OWT-31.PNG

Como siempre, Dreamweaver inserta todos les elementos necesarios.

images/18C23-050.png

2. Personalizar el acordeón

Analizando el código, verá enseguida que los títulos de cada pestaña se sitúan en elementos <h4 class="panel-title"> y que sus correspondientes contenidos deben insertarse en los elementos <div class="panel-body">.

El vínculo entre el título «cliqueable» y la vista de su contenido se hace mediante el identificativo de las cajas <div> padre y el vínculo insertado en los títulos. En el ejemplo de abajo, el identificativo es id="collapseOne1".

La caja <div> padre de un contenido con su id:

<div id="collapseOne1" class="panel-collapse collapse in">  
  <div class="panel-body">Content for Accordion Panel 1</div>  
</div>

El vínculo en el título, con su href:

<a data-toggle="collapse" data-parent="#accordion1"  
href="#collapseOne1">Collapsible Group 1</a>

Personalice los títulos y los contenidos.

images/23OWT-33.PNG

3. Las vistas responsivas

Guarde la página y muéstrela ...