Las pesta√±as CSS son realmente excelentes para mostrar informaciòn asociada en un lugar de fácil navegaciòn. Básicamente, parecen divisores con pesta√±as que verìas en una caja de recetas o una carpeta. A continuaciòn, se muestran algunos ejemplos de sitios web que utilizan la navegaciòn por pesta√±as: & nbsp; & nbsp;
Mientras observa estos dos sitios, piense en las ventajas de utilizar un componente de interfaz de usuario de este tipo en los sitios. ¿Qué problemas resuelve? ¿Para qué tipo de informaciòn serìa una buena implementaciòn la navegaciòn con pesta√±as? & Nbsp;
Cuando necesite buscar una estructura de IU que organice el texto o la informaciòn en componentes significativos y los muestre en la pantalla sin tomar demasiado espacio, la navegaciòn con pesta√±as es una buena elecciòn. Hablaremos sobre la navegaciòn con pesta√±as con más profundidad a medida que nos adentremos en el uso de JavaScript, jQuery y / o Bootstrap, pero también hay una implementaciòn que podrìamos usar que solo requiere HTML y CSS puro. Echemos un vistazo a la configuraciòn:
Configure su HTML:
Contin√∫e y configure su HTML estándar con un contenedor dentro del cuerpo que servirá como nuestro contenedor principal para el proyecto. Puedes llamarlo como quieras en el atributo de clase, pero yo lo llamaré class = " tabs "
. Hasta ahora, su HTML deberìa verse asì:
Dentro de las " pestañas " "div"
, insertaremos otros cuatro "div" sy llamaremos a cada uno con una clase de tab
. Esto representa cada una de las cuatro pesta√±as que escribiremos hoy. Contendrá nuestra entrada, etiquetas de pesta√±a y contenido de pesta√±a. Creemos contenedores vacìos para todos esos: & nbsp;
Dentro del nombre de la clase de contenido estará nuestro contenido. Puede usar cualquier contenido que desee, pero es una práctica estándar usar contenido asociado en una pesta√±a.