Usar Bootstrap y JQuery en tus módulos de MGPanel

Holaaaaaaa... Programador! espero que estén aprovechando la cuarentena para perfeccionarse como programador... (bueno ver series en netflix también porque no todo puede ser trabajo).  Hoy quiero mostrarte como usar Bootstrap y JQuery de forma muy fácil en tu sitio web hecho en MGPanel.

Para explorar todos los componentes que nos ofrece Bootstrap podemos visitar su documentación oficial: https://getbootstrap.com/docs/4.5/components/alerts/

El ejemplo lo voy hacer con un alert,  específicamente este:

Igualmente aquí te dejo el código:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Holy guacamole! You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×
  

Entonces lo primero que vamos es abrir el módulo en el que queremos trabajar de nuestro gestor de modulos de MGPanel y pegar el código que queremos usar de Bootstrap, en mi caso quedo así:

Ahora editemos un poco ese código, en mi caso elimine data-dismiss="alert" aria-label="Close" porque quiero controlar directamente el cierre del alert con JQuery.

Al div principal le agregue una nueva clase llamada mimensaje que será la que use como conector en mi JQuery y agregue un style="display:none;" para que no se muestre el alert al entrar a la página.

Ahora agregamos para este ejemplo un botón que será el que ejecute inicialmente el script:

Ver mensaje

Configurando el JQuery

Para esto nos vamos a la pestaña JS y agregamos las etiquetas script y comenzamos: creamos una función llamada mensaje y una cerrar (posiblemente haya una forma más corta de hacerlo o más óptima, este ejemplo es solo para que veas como se pueden integrar ambas cosas).

Al finalizar deberías tener algo así:

y listo presionamos click en guardar y vemos como sería nuestro resultado.

Al abrir la página veriamos:

y al presionar click en el botón de ver mensaje, verías el alert que copiaste de Bootstrap:

Y así de fácil es poder integrar código Bootstrap y usar un script de JQuery en tu sitio web desarrollado en MGPanel.

Nos vemos al otro lado de la PC!

Eloy Manuel