Cómo instalar y utilizar Twitter Bootstrap como tema de Drupal 8 | Hosting mas barato

Introducción: El tema Bootstrap de Twitter para Drupal 8

Este tutorial guía a los nuevos usuarios a través de la instalación y el uso de la guía de Twitter Oreja como tema para Drupal 8 Sitios web, incluidos códigos cortos para CSS en plantillas para rutas de navegación, barras de navegación e información sobre herramientas.

La Oreja Módulo para Drupal 8 implementa eso Bootstrap 3 Framework para el CMS con jsDelivr CDN para los archivos necesarios o alojamiento local del código en el directorio sites / * / themes.

El Twitter Oreja Asunto para Drupal 8 incluye personalizado CSS Códigos cortos para diseñar botones, tablas, etiquetas, insignias, menús desplegables, barras de navegación, advertencias, paneles de control, pozos y un carrusel de imágenes.

Paso 1: descargue, instale y active el tema Bootstrap

Empezar: En uno Drupal 8 Sitio web, navegue hasta admin / theme / install y descargue los archivos del tema para. elevado Bootstrap de Drupal. El archivo zip para la instalación se puede descargar aquí:

• Descargar: https://www.drupal.org/project/bootstrap

Próximo: Navegar a Admin / apariencia y establecer el Oreja Asunto como estándar.

Terminado: Guarde la nueva configuración y haga clic en “La configuración” Enlace para acceder a opciones avanzadas.

Paso 2: Configure los ajustes del tema en D8 Admin

Empezar: Navegar a Administrador / Apariencia / Configuración / Bootstrap y compruebe la configuración predeterminada para Bootstrap de Twitter Tema. Cambie la imagen del logotipo cargando un nuevo archivo y guardando la configuración.

Próximo: Compruebe la configuración de CDN para Bootstrap de Twitter 3,0 Archivos JavaScript necesarios para el tema. El valor predeterminado es jsDelivr. Escoger “Ninguno”si prefiere alojar los archivos localmente.

Terminado: Revise la configuración de diseño de botones, imágenes, tablas y otros componentes para elegir una selección de estilo que se adapte a sus intereses, como: “Utilice esquinas redondeadas para las fotografías” con JavaScript.

Paso 3: crea un subtema de cambios CSS de Drupal.

Empezar: En la producción de CSS cambios a Drupal 8 Archivos de tema o agregar nuevas plantillas personalizadas, cree un subtema para Bootstrap de Twitter para mantener la compatibilidad de la actualización.

Próximo: La Bootstrap de Twitter El sujeto da 3 Kit de inicio Opciones para un subtema:

• Kit de inicio CDN

• Menos kit de inicio

• Kit de inicio Sass

Próximo: Seleccione uno, luego copie los archivos del Temas / Bootstrap / Starterkits Directorio en una nueva carpeta con el nombre de su elección, es decir “mi tema”.

Configuración: Edición de archivos de subtemas:

Próximo: Busque los siguientes archivos en su directorio de subtemas:

• ./THEMENAME/THEMENAME.info.yml.

• ./THEMENAME/THEMENAME.starterkit.yml

• ./THEMENAME/THEMENAME.libraries.yml

• ./THEMENAME/THEMENAME.theme.

• ./THEMENAME/config/install/THEMENAME.settings.yml

• ./THEMENAME/config/schema/THEMENAME.schema.yml

Construcción: Cambia eso NOMBRE DEL TEMA Valore en cada título de archivo el valor de su tema, es decir, el nombre del tema utilizado en el directorio de subtemas que se copió en el servidor.

Próximo: Abra los archivos de subtemas enumerados anteriormente uno a la vez en un editor de código y cambie las variables en las que NOMBRE DEL TEMA se utiliza para reflejar su propio subtema (es decir, “mi tema”).

Nota: También puede cambiar el nombre, la descripción y cualquier otro valor en las variables de subtema en cada archivo .yml para que se muestren en formato. adaptar Drupal 8 Páginas de administración.

Construcción: Cambie el nombre de la extensión de la biblioteca: NOMBRE DEL TEMA / marco

construcción: Cambie el nombre en la configuración del subtema: /THEMENAME/config/schema/THEMENAME.schema.yml

Construcción: Cambiar el nombre a THEMENAME.settings y ‘Configuración de TEMA’ para que coincida con las variables de su tema personalizado. es decir “Mytheme.settings”.

Nota: Cuando se nombra el nuevo directorio de subtemas “mi tema” entonces todas las variables anteriores se reemplazan por mi tema en aquellos casos donde NOMBRE DEL TEMA encontró.

• Ejemplo: /mytheme/mytheme.info.yml

Terminado: Cuando se hayan cambiado todas las variables del paquete de subtemas, navegue hasta Admin / apariencia y establezca el nuevo subtema como predeterminado.

Paso 4: Instale el módulo de diseños de Bootstrap

Empezar: Más Drupal 8 Desarrollo con el Oreja El paquete de tema y subtema puede contener CSS en páginas, bloques y vistas, así como archivos de plantilla personalizados para subtemas.

• Descargar: https://www.drupal.org/project/bootstrap_layouts

Nota: Instalar eso Diseños de Bootstrap Módulo para mejorar la selección de plantillas en Drupal 8.

Próximo: Navegar a admin / estructura / tipos / gestionar / * / mostrar & elija un diseño para cada tipo de contenido en la vista estándar. Escoger “Oreja” & una de las opciones de visualización especificadas en el menú.

Configuración de ejemplo: módulo de plantilla Bootstrap:

• Navegue a la página de configuración de pantalla para un tipo de contenido.
• Escoger “Tres columnas apiladas” en la configuración de diseño.
• Navega al módulo / bootstrap_layouts / bs-3col-stacked Carpeta.
• Acceda y descargue el archivo de plantilla generado por el módulo.
• Entendido bs-3col-apilado en la carpeta del subtema para sobrescribirlo.
• Modifique el archivo de plantilla en un editor de código de escritorio para obtener un diseño personalizado.

Terminado: Usando el> Plantillas de Bootstrap Módulo, Drupal 8 Los desarrolladores web pueden crear plantillas personalizadas para usar con las páginas del sitio web de CMS que contienen CSS y HTML con JavaScript.

Paso 5: use códigos cortos CSS para estilos de página personalizados

Empezar: Utilizar>Bootstrap de Twitter 3,0 Códigos cortos CSS en archivos de plantilla personalizados para agregar elementos contenedores, rutas de navegación, botones, formularios, menús, barras de navegación y otros componentes con estilo.

Código corto CSS – Twitter Bootstrap 3.0

Elementos del contenedor:

<div class="container">
  <!-- Content here -->
</div>

o

<div class="container-fluid">
  <!-- Content here -->
</div>

Jumbotron:

<div class="jumbotron">
        <h2>Headline Text - Large Type</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

Llaves:

<p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
</p>

Etiquetas:

<p>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
</p>

Insignia:

<p>
       <a href="https://hostadvice.com/how-to/how-to-install-use-twitter-bootstrap-as-a-drupal-8-theme/#">My Profile <span class="badge">42</span></a>
     </p>

Miniaturas:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="https://hostadvice.com/how-to/how-to-install-use-twitter-bootstrap-as-a-drupal-8-theme/..." alt="https://hostadvice.com/how-to/how-to-install-use-twitter-bootstrap-as-a-drupal-8-theme/...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="https://hostadvice.com/how-to/how-to-install-use-twitter-bootstrap-as-a-drupal-8-theme/#" class="btn btn-primary" role="button">Button</a> <a href="https://hostadvice.com/how-to/how-to-install-use-twitter-bootstrap-as-a-drupal-8-theme/#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Puntos de interrupción receptivos:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Terminado: Los desarrolladores encuentran más CSS Códigos cortos en el Twitter Bootstrap 3.0 ¿Página? ˅:

• • Atajo: https://getbootstrap.com/docs/3.3/components/
  • Atajo: http://getbootstrap.com/docs/3.3/customize/