Índice

Las pestañas

Las pestañas son componentes bastante clásicos en los frameworks CSS. Bootstrap no es una excepción a la regla y ofrece el componente de pestañas Tab.

1. Insertar pestañas

En primer lugar cree la estructura Bootstrap que prefiera y sitúese en la celda deseada.

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

images/23OWT-24.PNG

Dreamweaver inserta el componente:

images/18C23-043.png

Se insertan tres pestañas:

  • La pestaña Tab 1 es la pestaña activa, con la clase Bootstrap .active.

  • La pestaña Tab 2 es la pestaña inactiva y no tiene clase específica.

  • Por último, la pestaña Tab 3 Dropdown es una pestaña con un menú desplegable.

El contenido de cada pestaña se encuentra en una caja <div> específica, cada una de ellas con el rol role="tabpanel" y la clase .tab-pane.

2. Personalizar las pestañas

Con la vista en modo Código o en modo Diseño, seleccione las etiquetas Tab 1, Tab 2, Tab 3 Dropdown y sus dos elementos de menú asociados y remplácelos por sus propias etiquetas.

images/23OWT-26.png

De igual modo, remplace los contenidos predeterminados (Content in <b>Tab Panel 1</b>, Content 2, Dropdown content#1 y Dropdown content#2) por sus propios contenidos.

images/23OWT-27.png

3. Las vistas responsivas

Guarde la página y muéstrela en un navegador.

Esta es la vista que se obtiene en una pantalla de ordenador a plena pantalla, con la primera pestaña activa:

images/23OWT-28.PNG

Esta es la vista que se obtiene ...