En bootstrap también existen paneles para ordenar nuestros elementos y tablas para colocar registros de datos, en este ejemplo vamos aprender a utilizarlos.
Un panel básico en bootstrap se define en código html de la siguiente manera.
Paneles
La clase panel se le aplica a los div que la contienen un borde y un padding a lo que contendrá que es como un margen al interior de este panel, el div padre del panel contiene la clase panel y la clase de panel-default es la que agrega un borde de color gris redondiado, el div que aloja el contenido de nuestro panel utiliza la clase panel-body nos agrega un padding de 15 px
Ahora usémoslo en un ejemplo, en el servidor que tenemos instalado creamos un nuevo proyecto y abrimos el editor de código que utilizamos para hacer nuestros sitios, agregamos el siguiente código html dentro de nuestras etiquetas después del comentario las etiquetas head y body tienen un espacio despues del simbolo < quitárselos para que todo funcione bien <!DOCTYPE html><html> <!--Insertar codigo aqui--> </html> agregamos:
< head>Paneles y Tablas < /head> < body>< /body>Este es el contenido del panel
Guardamos este archivo como index.html en nuestro sitio y por supuesto no se les olvide agregar los archivos necesarios de bootstrap tanto como jquery, si no sabes cómo tienes que ver el tutorial de introducción Bootstrap - Botones y Dropdowns (Introducción)
Una vez hecho guardamos y vamos a nuestro sitio a ver el resultado, el contenido de nuestro panel crecerá al tamaño de nuestro explorador y va creciendo con forme le vamos agregando contenido, por ahora solo tiene un texto contenido en una etiqueta h1 el resultado sería algo similar a esto:
Este es el contenido del panel
También podemos agregar encabezado a nuestros paneles, seria agregando otro elemento antes del div que contiene la clase panel-body, modificando nuestro panel anterior nuestro código del panel quedaría de la siguiente manera:
este es el encabezado del panelEste es el contenido del panel
El resultado debería ser algo como esto:
este es el encabezado del panel
Este es el contenido del panel
En nuestro código agregamos un encabezado con un div con la clase panel-heading y en su interior de este elemento un texto que será el que se muestre en el encabezado, le agrega un estilo con un color gris.
También podemos cambiar los colores de nuestros paneles ya sea que modifiquemos las clases o utilicemos algunos ya definidos por bootstrap según nuestras necesidades estos son los que bootstrap tiene en sus componentes:
...............
Utilizamos uno por ejemplo el panel-danger nuestro código quedaría de la siguiente manera:
este es el encabezado del panelEste es el contenido del panel
Y este sería el resultado:
este es el encabezado del panel
Este es el contenido del panel
Ahora podemos agregar un pie a nuestro panel que puede servir como una barra de estado o para colocar mensajes de lo que está pasando en nuestras aplicaciones, al final de panel-body se agrega un div con la clase panel-footer nuestro código quedaría de la siguiente manera:
este es el encabezado del panelEste es el contenido del panel
Y este sería el resultado:
este es el encabezado del panel
Este es el contenido del panel
Tablas
Cuando necesitamos mostrar datos ordenamos recurrimos a tablas, o grid, para aplicaciones web crear una tabla tenemos que mejorar el diseño de estas, pero con bootstrap esto es más fácil modificando nuestro panel que acabamos de utilizamos hacemos lo siguiente:
este es el encabezado del panel
# Nombre Apellido Usuario 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird
Y este es el resultado
este es el encabezado del panel
| # | Nombre | Apellido | Usuario |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Agregamos una tabla con la clase table esta clase está definida por bootstrat para darle un diseño a nuestras tablas. En su interior agregamos un encabezado con las etiquetas thead y el cuerpo de nuestra tabla está definido por las etiquetas tbody estas son propias de html pero bootstrap las utiliza para poner un diseño diferente en cada una, por ejemplo en este caso el encabezado de nuestra tabla nos pone el texto en negritas.
Con nuestras tablas también hay una infinidad de posibilidades y clases que le podemos agregar por ejemplo una tabla rayada o cebreada que es cuando una fila es de un color distinto a la siguiente, simplemente con agregarle la clase table-striped a nuestro elemento tabla, también si queremos una tabla más llamativa podemos agregar otra clase llamada table-hover esta clase básicamente agrega a nuestra tabla un efecto de mouseover cuando posicionamos el puntero del mouse encima de cualquiera de las filas de la tabla esta se cambia de un color distinto y regresa a su color normal cuando quitamos el puntero, modificando nuestro código y agregando estas clases, quedan de la siguiente manera.
este es el encabezado del panel
elemento Nombre Apellido Usuario 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird
Este es el resultado:
este es el encabezado del panel
| elemento | Nombre | Apellido | Usuario |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
También podemos agregar un tipo de contenido para cada fila o celda al igual como lo hicimos con los encabezados del panel los tipos simplemente se le agrega una clase a toda fila que es contenida por los tr o a cada celda que es un td, las clases cambian el color de fondo del elemento. Estas son las clases que se pueden utilizar:
... ... ... ...
Modificamos el código para agregarle clases a dos celdas:
este es el encabezado del panel
elemento Nombre Apellido Usuario 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird
Y este es el resultado:
este es el encabezado del panel
| elemento | Nombre | Apellido | Usuario |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Cuando una tabla contiene muchos datos recorrerlas no es muy óptimo para buscar en su contenido, ese problema lo podemos solucionar con un buscador dentro de la tabla o con una paginación y mostrar solo cierto número de elementos por página y hacer nuestra tabla más dinámica, en nuestro siguiente post haremos el manejo de datos dinámico en las tablas con estos elementos, les agrego el proyecto en esta ruta para que lo descarguen. https://drive.google.com/open?id=0B5ca2sDGOmCza0o3Szc1MzEwckELes agradezco sus comentarios y no olviden compartir este post.
No hay comentarios:
Publicar un comentario