Bootstrap es uno de los mejores frameworks css que se pueden encontrar actualmente, lo utilizo en casi todos los proyectos y nunca había tenido este tipo de problema, donde carga los archivos pero igualmente no los aplica.
Esta es una pequeña guía para tratar de solucionar los problemas más comunes, un troubleshooting para probar paso por paso con ensayo y error.
Primero verificar las rutas de los archivos y probar que realmente están cargando en la página.
La consola de desarrollador nos indica si hay algún archivo que no pudo cargar:
Sino indica error, puedes probar que realmente cargó el archivo al ver el código fuente desde el navegador y hacer click en los enlaces, si está correcto debe mostrar el archivo en el navegador o descargarlo, sino mostrará una página 404 not found.
Bootstrap puede requerir varios archivos como lo es Jquery y Popper, al usar el Bundle de Jquery, ya está incluido el Popper pero si usas solo el bootstrap.min.js deberás incluir el Popper aparte.
Podemos usar este código en la consola de desarrollador para probar que estos archivos están cargados correctamente y funcionando:
|
1 2 3 4 5 |
if (jQuery) { alert("jquery is loaded"); } else { alert("Not loaded"); } |
Y Popper solo tienes que comprobarlo si lo incluiste aparte, si usas el Bundle de Jquery, no necesitas comprobarlo y esta opción solo funciona con la variable global que crea el archivo Popper cuando se incluye aparte.
|
1 2 3 4 5 |
if (Popper) { alert("Popper is loaded"); } else { alert("Not loaded"); } |
Al usar los enlaces directos de CDN, te evitas muchos problemas, pero no todo el tiempo queremos depender de terceros o del internet si trabajamos de manera local.
Entonces me encuentro con otro problema, el CDN funciona pero no con archivos locales, hago la verificación, los archivos se cargan e igualmente no funciona, no aplica los estilos aunque sí funcionan las librerías Javascript.
El estándar de bootstrap funciona con HTML5, entonces debemos incluir los encabezados correctamente, ejemplo:
|
1 2 3 4 5 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
El encabezado indica que se usará una página web html5 y con esto debe aplicar los estilos. Ahora el otro problema con ciertos archivos JSP y ciertos servidores Tomcat o el OC4J de Jdeveloper es que no interpretan correctamente este encabezado después de compilar y no aplica los estilos, desconozco si es por la versión o el modo de compilar pero para estos casos se debe Eliminar el encabezado principal <!DOCTYPE html> y con esto fue suficiente para que se aplicara los estilos de bootstrap.
