Tengo que agregar Bootstrap 4 en mi tema personalizado.
Agrego Bootstrap 3 usando la referencia:
Cómo usar bootstrap en mi tema personalizado
Pero, bootstrap 4 no funciona.
Respuestas:
Para agregar Bootstrap 4 en Magento 2.2.3 (probado) y superior en su tema personalizado, siga los pasos a continuación
1) Bootstrap css archivos dentro de la carpeta web
Nota :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Llame a los archivos css de bootstrap en default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlAgregar CSS
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--Bootstrap css-->
<css src="css/bootstrap.css" />
</head>
</page>2) Agregar archivos Js en forma de paquete en lugar de individual porque el individuo no funciona
Coloque los archivos bootstrap.bundle.js que puede descargar desde aquí
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsLlame a Bootstrap Js en requirejs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jscódigo para
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};Agregue el siguiente código en header.phtml después de su etiqueta de script ya presente
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlCódigo:
<script type="text/javascript">require(['bootstrap']);</script>Ejecutar debajo de los comandos:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Nota: Probado en Magento 2.2.3 y Latest 2.2.6. También probado en 2.3.3
Actualizado : descargue Bootstrap compilado desde aquí y use el paquete js
Puede agregar Bootstrap de esta manera, siga los pasos a continuación: Nota: Esta solución no funciona con Magento 2.2.3 y superior
1) Coloque su JS y CSS en la ubicación a continuación
/ app / design / frontend / vendor-name / theme-name / web / css
/ app / design / frontend / vendor-name / theme-name / web / js
2) Llame archivos en su default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmlagregue esta línea de código
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>3) Ejecutar debajo de los comandos
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployDebe usar el administrador de paquetes de Bower para agregar Bootstrap 4 en la carpeta web de su tema.
¿POR QUÉ? Porque hay actualizaciones constantes y fáciles de administrar. Ejecute el comando de actualización Bootstrap 4 se actualiza.
TAMBIÉN: Preferimos usar MENOS o SCSS con bootstrap 4. Es robusto y fácil de refactorizar.
Siga los pasos a continuación para instalar la glorieta:
1) Instale LTS nodeJS en su sistema operativo respectivo desde: https://nodejs.org/en/
2) Instalar el administrador de paquetes Bower a nivel mundial: npm install -g bower
3) Instalar gitdesde: https://git-scm.com/
4) Instalar bootstrap 4:
En el webdirectorio de tu tema personalizado de Magento
Por ejemplo: Abra la terminal en <Magento root>/app/design/frontend/MyCustom/theme/web/
Ejecute este comando para instalar bootstrap 4:
bower install bootstrap4
5) Después de esto, debe agregar fuentes, bootstrap CSS y bootstrap JS en el nodo de diseño predeterminado para trabajar boostrap en cada página del Magento_Thememódulo en su tema personalizado.
Usamos gulp para compilar SCSS a CSS.
sudo npm install -g bower. Después de instalar bower, instale los paquetes js / css en su directorio de temas:app/design/frontend/My/Theme/
bower_componentsque webel uso de .bowerrc archivo de configuración.
package.jsonarchivo de Bootstrap 4, si ve la filesclave de matriz, solo muestra que la coincidencia de tipo de archivo se agregará al directorio de su proyecto. filesLa tecla es utilizada únicamente por el comando Bower. Si quieres contribuir o recompilar Bootstrap, entonces deberías probar Yarn. Porque agregará un archivo / directorio innecesario al proyecto. Webpack y Parcel son para proyectos de nodo que compilan en JavaScript para frontend.
Después de leer las respuestas anteriores, tengo otra sugerencia: coloque Bootstrap 4 en un módulo y use CDN para vincular los archivos de Bootstrap.
Supongo que sabes cómo crear un módulo básico. Si no, puede consultar aquí . Así que aquí están los pasos:
Cree un archivo app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlcon los siguientes códigos:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="stylesheet" type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
</head>
</page>Active el módulo y ejecute el setup:upgradecomando, ¡eso es todo!
Beneficios:
Probado en Magento 2.2.4, pero debería funcionar en todas las versiones de Magento 2.X. EDITAR * cambió las etiquetas de enlace href a src para estar en línea con los devdocs. Referencia:
The attribute 'integrity' is not allowed.