Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.
Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.
En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.
Requerimientos:
- Tener un proyecto de Drupal 9 o superior funcionando.
- Tener acceso a la consola.
- Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.
Descarga e instalación de Bootstrap 5 para Drupal.
Paso 1 - Descarga del Theme Bootstrap 5
Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.
Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.
Paso 2 - Instalación del tema base
Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.
Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.
Paso 3 - Generar el Subtheme o Tema personalizado
La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.
Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.
Paso - Comprobación
Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.
Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.
Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.
También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.
Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:
Para acceder al curso, HAZ CLIC AQUI