Cómo cargar Framework Bootstrap en HTML personalizado

1. Introducción.

2. Paso a paso.

3. Otras especificaciones.

4. Contenido relacionado.

1. Introducción.

Al activar la opción de usar HTML personalizado (que debe activarse de forma independiente para cada tipo de pantalla), se eliminan todas las personalizaciones por defecto de la página, pudiendo incluir los elementos individuales que componen la campaña, tal como se detalla en el tutorial Personalización avanzada con HTML propio.

Se mantiene una estructura básica de HTML junto a un CSS básico que controla el funcionamiento de los siguientes elementos comunes a todas las campañas: popups de login, bases legales, compartir campaña y mensajes de alerta.

2. Paso a paso.

Con HTML propio puedes personalizar el contenido y los elementos que necesites, así como cargar librerías externas como el framework Bootstrap.

Para incluir Bootstrap debes insertar el link del CSS después de <!-- {{{ cool_tabs_head }}} --> y antes del cierre de </head>, y cargar el JavaScript antes de <!-- {{{ cool_tabs_body_end }}} -->:

<!DOCTYPE html>

<html {{{ cool_tabs_html_attributes }}} >

    <head>
        <!-- {{{ cool_tabs_head }}} -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body {{{ cool_tabs_body_attributes }}} >
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <!-- {{{ cool_tabs_body_end }}} -->
    </body>

</html>

A partir de aquí, puedes incluir los elementos que necesites mediante nuestro sistema de {{handlebars}} y personalizarlos con tu propio CSS (o SCSS si lo prefieres).

En la pantalla de Formulario también puedes activar la opción 'Incluir CSS básica en la pantalla del form' para cargar el CSS de nuestras campañas y así obtener la personalización por defecto del quiz y el formulario.

Ten en cuenta que, si usas Bootstrap, debes incluirlo en todas las pantallas donde quieras utilizarlo, excepto en la pantalla de Formulario cuando tengas activa la opción 'Incluir CSS básica en la pantalla del form', ya que en ese caso Bootstrap se carga automáticamente.

3. Otras especificaciones.

Si tienes dudas, contáctanos en help@cool-tabs.com.

4. Contenido relacionado.

Personalización avanzada con HTML propio.

Personalización avanzada de una campaña mediante variables.

Cómo configurar la CSS personalizada de una campaña.