README

此 Magento 2 模块提供了对 Bootstrap 4 源代码的完全集成。

这不是一个移植！

它使用 dnafactory/module-scss 来集成官方的 Bootstrap 4 包，以便可以使用您的 Magento 2 主题配置进行构建。

安装

此扩展必须通过 composer 安装

composer require dnafactory/module-bootstrap
php bin/magento module:enable DNAFactory_Bootstrap
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

如何使用 CSS

默认情况下，扩展将部署一个基于您活动主题中定义的所有 Magento .less 库值的 DNAFactory_Bootstrap/css/bootstrap.css 构建。因此，如果您想更改某些特定于主题的样式，例如主颜色，您可以通过简单地编辑 css/sources/_theme.less 文件中的 @theme__color__primary 来实现，就像通常一样。

然而，您可以使用扩展点之一或多个来更改这些值或添加其他自定义变量

• source/scss/themes/_extends.scss，您可以在此处放置您的自定义 scss 变量和其他有用的内容，我们将在本文件的后续部分中介绍。
• source/scss/_extends.scss，您可以在此处放置 scss 中的 Bootstrap 特定自定义设置
• source/scss/_extend.scss 模块相关扩展文件，用于小型自定义设置。

那么，如果我正在制作一个自定义主题呢？

只需将您的 .less 主题变量文件引用放在 source/scss/themes/_extends.scss

// @vars_import 'source/my_marvellous_theme/_variables.less';

或者，当您的变量文件存储在主题级别目录中（最常见情况）

//@vars_import (lib) 'relative_path_to_theme_base_css_dir/_variables.less'

例如，使用

//@vars_import (lib) '../../_variables.less'

从 view/frontend/web/css/source/scss/themes/_magento.scss，它将指向 YourVendor/YourTheme/your_locale/css/source。

有关 @vars_import 指令的更多信息，请参阅 dnafactory/module-scss 的文档。

如何使用 JS

Bootstrap JS 插件旨在按需运行，并且可以使用以下别名请求

• bs.alert
• bs.button
• bs.carousel
• bs.collapse
• bs.dropdown
• bs.modal
• bs.popover
• bs.scrollspy
• bs.tab
• bs.toast
• bs.tooltip

只需将所需的插件添加到您的模块依赖项中。

开发者注意

要更新一个或多个依赖项（如 Bootstrap 或 popper.js）到最新版本，只需按需使用 npm，然后运行

npm run update-src

快乐编码