¿Cómo comprobar que Twitter Bootstrap está cargado o no?

Bootstrap es un marco muy útil, que ofrece Twitter para crear sitios web totalmente receptivos. Proporciona clases CSS que están predefinidas y, por lo general, están destinadas a usarse directamente sin ningún cambio. Para cargar Bootstrap en su sitio web, lea este artículo Introducción e instalación .

Es muy importante entender por qué necesitamos verificar que Bootstrap se haya cargado a través de CDN o no. Si en algún momento en el futuro hay algún problema con CDN, al implementar esta función, su sitio web podrá recurrir a una versión local de Bootstrap. Hay muchas ventajas de tener CDN como contenido de almacenamiento en caché que mejora el rendimiento del sitio web, por lo que no debe eliminarse por completo de su sitio web. Para verificar si Bootstrap se ha cargado, usaremos jQuery y modales (esto lo proporciona Bootstrap). Antes de empezar es importante entender los modales. Los modales son elementos que pueden superponerse al documento. Un cuadro de diálogo es un ejemplo de modales. Cuando se activa un elemento modal, el resto de la ventana está inactiva. Podemos verificar si el método específico de Bootstrap está disponible o no.

Sintaxis:

var bootstrap = (typeof $()."Bootstrap-specific method" == 'function');

Ejemplo: en este ejemplo, verificaremos el modo de arranque. Si se cargó bootstrap, se definirá modal. Si modal no está definido, volveremos con éxito a una versión local de bootstrap. Este ejemplo ilustrará el uso de jQuery y modales para verificar si Bootstrap se ha cargado o no.

  • Programa:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>
            Check twitter Bootstrap is loaded or not
        </title>
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <style>
            .disabled {
                pointer-events: auto !important;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="text-success">GeeksforGeeks</h1>
            <b>A Computer Science Portal for Geeks</b>
        </center>
        <script>
        if (!$.fn.modal) {
            alert('CDN Bootstrap is not working');
            
            // Replace your_path with path where
            // local bootstrap is stored
            document.write('<script src=
    "Your_path_locall_one/bootstrap.min.js"></scr+ipt>');
            document.write('<link href=
    "Your_path_locall_one/bootstrap.min.css" rel="stylesheet">')
        } else {
            alert('CDN Bootstrap is loaded');
        }
        </script>
    </body>
      
      
    </html>
  • Producción:

Nota: El método especificado por bootstrap puede ser cualquier modal, ventana emergente que debe verificar con cuidado.

Publicación traducida automáticamente

Artículo escrito por shaswat178 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *