Я должен добавить Bootstrap 4 в мою собственную тему.
Я добавляю Bootstrap 3, используя ссылку:
Как использовать bootstrap в моей пользовательской теме
Но бутстрап 4 не работает.
Ответы:
Для добавления Bootstrap 4 в Magento 2.2.3 (протестировано) и выше в вашей пользовательской теме выполните следующие шаги
1) Загрузите файлы CSS внутри веб-папки
Примечание :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Вызов загрузочных CSS-файлов в default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlДобавление 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) Добавление Js-файлов в форме пакета, а не индивидуально, потому что отдельный не работает
Разместить файлы bootstrap.bundle.js можно здесь
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsВызовите Bootstrap Js в requirejs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jsкод для
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};Добавьте ниже код в header.phtml после вашего уже присутствующего тега скрипта
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlКод:
<script type="text/javascript">require(['bootstrap']);</script>Выполнить команды ниже:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Примечание: проверено на Magento 2.2.3 и последней версии 2.2.6. Также проверено на 2.3.3
Обновлено : Загрузите Bootstrap, скомпилированный здесь, и используйте пакет js
Вы можете добавить Bootstrap таким образом, выполнив следующие шаги: Примечание: Это решение не работает с Magento 2.2.3 и выше.
1) Поместите свой JS и CSS в расположении ниже
/ Приложение / дизайн / интерфейс / имя поставщика / тема имя / веб / CSS
/ Тема-имя / приложение / / интерфейс / имя поставщика дизайн / веб / JS
2) Вызовите файлы в вашем default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmlдобавить эти строки кода
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>3) Запустите команды ниже
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployВы должны использовать менеджер пакетов bower, чтобы добавить начальный загрузчик 4 в папку вашей темы.
ПОЧЕМУ? Потому что есть постоянное обновление и простое управление. Запустите команду обновления, Bootstrap 4 обновится.
ТАКЖЕ: Мы предпочитаем использовать LESS или SCSS с начальной загрузкой 4. Это надежный и простой в рефакторинге.
Выполните следующие шаги, чтобы установить беседку:
1) Установите LTS nodeJS в вашей соответствующей ОС по адресу : https://nodejs.org/en/
2) Установите менеджер пакетов bower по всему миру: npm install -g bower
3) Установите gitс: https://git-scm.com/
4) Установить загрузчик 4:
В webкаталоге вы Magento пользовательские темы
Например: открыть терминал на <Magento root>/app/design/frontend/MyCustom/theme/web/
Запустите эту команду для установки начальной загрузки 4:
bower install bootstrap4
5) После этого вам нужно добавить шрифты, начальную загрузку CSS и начальную загрузку JS в узле макета по умолчанию для работы надстройки на каждой странице Magento_Themeмодуля в вашей пользовательской теме.
Мы используем gulp для компиляции SCSS в CSS.
bower_componentsдля webиспользования .bowerrc конфигурационного файла.
package.jsonфайл Bootstrap 4, если вы видите filesключ массива, он показывает только то, что сопоставление типов файлов будет добавлено в каталог вашего проекта. filesключ используется только командой Bower. Если вы хотите добавить или перекомпилировать Bootstrap, попробуйте Yarn. Потому что это добавит ненужный файл / каталог в проект. Webpack и Parcel предназначены для проекта узла, который они компилируют для использования JavaScript для внешнего интерфейса.
После прочтения приведенных выше ответов у меня есть еще одно предложение: поместить Bootstrap 4 в модуль и использовать CDN для связывания файлов Bootstrap.
Я полагаю, вы знаете, как создать базовый модуль. Если нет, вы можете обратиться сюда . Итак, вот шаги:
Создайте файл app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlсо следующими кодами:
<?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>Активируйте модуль и запустите setup:upgradeкоманду, вот и все!
Преимущества:
Протестировано на Magento 2.2.4, но должно работать на всех версиях Magento 2.X. РЕДАКТИРОВАТЬ * изменил теги ссылки href на src, чтобы они были встроены в devdocs Ссылка:
The attribute 'integrity' is not allowed.