{"id":877,"date":"2022-01-05T09:18:33","date_gmt":"2022-01-05T13:48:33","guid":{"rendered":"https:\/\/gregorgonzalez.com.ve\/blog\/?p=877"},"modified":"2022-01-05T09:18:33","modified_gmt":"2022-01-05T13:48:33","slug":"bootstrap-no-carga-en-jsp","status":"publish","type":"post","link":"https:\/\/gregorgonzalez.com.ve\/blog\/bootstrap-no-carga-en-jsp\/","title":{"rendered":"Bootstrap no carga en JSP"},"content":{"rendered":"

Bootstrap es uno de los mejores frameworks css que se pueden encontrar actualmente, lo utilizo en casi todos los proyectos y nunca hab\u00eda tenido este tipo de problema, donde carga los archivos pero igualmente no los aplica.<\/p>\n

Esta es una peque\u00f1a gu\u00eda para tratar de solucionar los problemas m\u00e1s comunes, un troubleshooting para probar paso por paso con ensayo y error.<\/p>\n

Primero verificar las rutas de los archivos y probar que realmente est\u00e1n cargando en la p\u00e1gina.<\/p>\n

La consola de desarrollador nos indica si hay alg\u00fan archivo que no pudo cargar:<\/p>\n

\"\"<\/p>\n

Sino indica error, puedes probar que realmente carg\u00f3 el archivo al ver el c\u00f3digo fuente desde el navegador y hacer click en los enlaces, si est\u00e1 correcto debe mostrar el archivo en el navegador o descargarlo, sino mostrar\u00e1 una p\u00e1gina 404 not found.<\/p>\n

\"\"<\/p>\n

Bootstrap puede requerir varios archivos como lo es Jquery y Popper, al usar el Bundle de Jquery, ya est\u00e1 incluido el Popper pero si usas solo el bootstrap.min.js deber\u00e1s incluir el Popper aparte.<\/p>\n

Podemos usar este c\u00f3digo en la consola de desarrollador para probar que estos archivos est\u00e1n cargados correctamente y funcionando:<\/p>\n

if (jQuery) {\r\n    alert(\"jquery is loaded\");\r\n} else {\r\n    alert(\"Not loaded\");\r\n}<\/pre>\n
Y Popper solo tienes que comprobarlo si lo incluiste aparte, si usas el Bundle de Jquery, no necesitas comprobarlo y esta opci\u00f3n solo funciona con la variable global que crea el archivo Popper cuando se incluye aparte.<\/p>\n
if (Popper) {\r\n    alert(\"Popper is loaded\");\r\n} else {\r\n    alert(\"Not loaded\");\r\n}<\/pre>\n
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.<\/p>\n
Entonces me encuentro con otro problema, el CDN funciona pero no con archivos locales, hago la verificaci\u00f3n, los archivos se cargan e igualmente no funciona, no aplica los estilos aunque s\u00ed funcionan las librer\u00edas Javascript.<\/p>\n
El est\u00e1ndar de bootstrap funciona con HTML5, entonces debemos incluir los encabezados correctamente, ejemplo:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=ISO-8859-1\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><\/pre>\n
El encabezado indica que se usar\u00e1 una p\u00e1gina 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\u00e9s de compilar y no aplica los estilos, desconozco si es por la versi\u00f3n o el modo de compilar pero para estos casos se debe Eliminar<\/strong> el encabezado principal <!DOCTYPE html><\/strong> y con esto fue suficiente para que se aplicara los estilos de bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap es uno de los mejores frameworks css que se pueden encontrar actualmente, lo utilizo en casi todos los proyectos y nunca hab\u00eda tenido este tipo de problema, donde carga los archivos pero igualmente no los aplica. Esta es una peque\u00f1a gu\u00eda para tratar de solucionar los problemas m\u00e1s comunes, un troubleshooting para probar paso […]<\/p>\n","protected":false},"author":1,"featured_media":880,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[330,28,34],"tags":[228,334,331,332,333],"_links":{"self":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/877"}],"collection":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=877"}],"version-history":[{"count":1,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/877\/revisions"}],"predecessor-version":[{"id":881,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/877\/revisions\/881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/880"}],"wp:attachment":[{"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}