Plantilla para panel de administración Admin LTE Bootstrap

Plantilla para panel de administración Admin LTE Bootstrap

Admin LTE es una plantilla para panel de administración que utiliza varias tecnologías combinadas entre HTMLBootstrapjQuery, logrando asi una gama de componentes receptivos, reutilizables y de uso común que puedes utilizar para desarrollar cualquier tipo de software online que requiera de un panel de control.

Personalmente he usado Admin LTE como plantilla para panel de administración para varios proyectos que he llegado a desarrollar para algunos clientes.

La plantilla tiene un montón de componentes que te van a ayudar un montón en tus desarrollos.

Algunos de los componentes que trae, si lo tuvieras que desarrollar a medida, tardarías un montón de tiempo que con esta plantilla te ahorras.

La estructura de la plantilla es muy simple ya que dispone de un sidebar, nav, contenido central y pie de página y bien armado para ser una buena base para empezar a desarrollar tu aplicación web.

Como programador lo que más me llama la atención es la cantidad de componentes que trae y que tienes a disposición ayudándote a imaginar el proyecto que quieres desarrollar.

Como programadores no solemos ser muy imaginativos y este tipo de herramientas nos viene como anillo al dedo ya que la parte visual ya está prácticamente armada.

La plantilla Admin LTE es ilustrativa. Desde el menú lateral puedes acceder a todas las opciones y elementos que puedes usar de forma gratuita para tus proyectos con un diseño muy profesional.

Dashboard

En el apartado «Dashboard» puedes visualizar 3 versiones diferentes para elegir la que más se adapte a tu proyecto.

Widgets

En el apartado «Widgets» puedes ver un montón de cajas que permiten mostrar información incluyendo alertas, bloques para chats, redes sociales, etc.

Layout

En el apartado «Layout» puedes ver distintos diseños estructurales para el panel de administración:

  • Top Navigation -> El contenido se divide en 2 partes, toda la parte superior es la navegación y debajo el contenido.
  • Top Navigation Sidebar -> Lo mismo que el anterior pero con un botón que permite abrir una navegación lateral.
  • Boxed -> Para los que les gusta el contenido centrado y ajustado a una anchura fija, este layout puede ser la solución.
  • Fixed Sidebar -> Para un panel de control esta es la opción que más me atrae. Un menú lateral izquierdo con todos los accesos.
  • Fixed Navbar -> Igual que el anterior pero con la barra superior fija.
  • Fixed Footer -> Pie de página fijo y siempre visible.
  • Collapsed Sidebar -> La barra lateral plegada o colapsada.

ChartJS

En el apartado «ChartJS» podrás ver los distintos gráficos que puedes usar para tu proyecto.

En cuanto a gráficas, la plantilla no tiene úncamente ChartJS, también tiene otras alternativas tales como Flot, Inline y uPlot para que puedas escoger la que mejor se adapte a tu necesidad.

UI Elements

General -> Colores, alertas, tabs y tarjetas, barras de progreso horizontales y verticales, accordion, carousel, paginación, etc.

Icons -> Font Awesome, Iconic Icons y Ion Icons.

Buttons-> Todo lo que Bootstrap nos permite con algunos detalles que te pueden gustar.

Sliders -> Ion Slider y Bootstrap Slider.

Modals & Alerts -> Ventanas modales y alertas sobre acciones muy interesantes para tu proyecto sobre todo cuando guardas formularios con Ajax.

Navbar & Tabs -> Diferentes tipos de barras de navegación horizontal e implementación de pestañas o tabs.

Timeline -> Líneas de tiempo. Muy interesante utilizarlo en proyectos tipo ecommerce para representar los estados de un pedido por ejemplo.

Ribbons -> Los Ribbons son etiquetas que puedes poner de forma diagonal, agradable y profesional por encima de una fotografía. En un proyecto ecommerce se pueden usar para mostrar la etiqueta de nuevo o en oferta en la foto del producto.

Formularios

Elementos genéricos -> Lo mismo que nos facilita Bootstrap pero con algún plugin interesante para mejorar el aspecto de los checkboxes y radio buttons.

Elementos avanzados -> El plugin select2, Input mask, date picker, time picker, color picker, iCheck y Bootstrap Switch. Formularios por pasos y Dropzone.

Editores -> Summernote y CodeMirror.

Validations -> Plugin validate Form.

Tablas

Tablas simples -> tablas con borde, ajustadas al ancho del contenedor, condensadas, con efecto hover, con cabecera fija, tabla con árbol.

DataTables -> Este plugin te muestra tablas con funciones ya incorporadas tales como ordenar por una columna, buscador, paginación, exportar a csv, etc.

jsGrid -> Es otra alternativa a tablas más avanzadas con funcionalidad adicional.

Ejemplos

La plantilla ilustra ejemplos bastante interesantes:

  • Calendar: Ejemplo con Fullcalendar y elementos que se pueden mover y arrastrar.
  • Gallery: Galerías de imágenes con filtros.
  • Kanban Board: Columnas con tareas.
  • Mailbox: Dispones de un sistema de comunicación o gestor de emails o mensajes.
  • Páginas: factura, perfil, página de producto de ecommerce, proyectos, contacto, FAQ  o preguntas frecuentes
  • Extras: Login y registro, menú de idioma, páginas de error, página en blanco y página para empezar.

Buscador

  • Buscador simple
  • Buscador avanzado

Y algunos detalles más que puedes ver y probar si te descargas la plantilla desde la página oficial de Admin LTE.

Lógicamente, a pensar de que tiene un montón de cosa, solo es una plantilla y solo falta tu imaginación para agregarle la funcionalidad o la lógica

¡Si necesitas ayuda con gusto puedo ayudarte en tu proyecto!

¿Te gustó este artículo? ayúdame a compartirlo.