使用 Bootstrap CSS & JS 和 Webpack Encore

编辑此页

本文介绍了如何使用 Webpack Encore 在你的 Symfony 应用中安装和集成 Bootstrap CSS 框架。首先，为了能够进一步自定义，我们将安装 bootstrap

        1
        $ npm install bootstrap --save-dev
    

导入 Bootstrap 样式

现在 bootstrap 位于你的 node_modules/ 目录中，你可以从任何 Sass 或 JavaScript 文件中导入它。例如，如果你已经有一个 global.scss 文件，请从那里导入它

        1
2
3
4
5
6
7
        // assets/styles/global.scss

// customize some Bootstrap variables
$primary: darken(#428bca, 20%);

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";
    

就是这样！这会将 node_modules/bootstrap/scss/bootstrap.scss 文件导入到 global.scss 中。你甚至可以先自定义 Bootstrap 变量！

提示

如果你不需要 Bootstrap 的所有功能，你可以改为包含 bootstrap 目录中的特定文件 - 例如 ~bootstrap/scss/alert。

导入 Bootstrap JavaScript

首先，安装你的应用中使用的 Bootstrap 版本所需的 JavaScript 依赖项

        1
2
        # (jQuery is only required in versions prior to Bootstrap 5)
$ npm install jquery @popperjs/core --save-dev
    

现在，从你的任何 JavaScript 文件中引入 bootstrap

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
        // app.js

const $ = require('jquery');
// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything
require('bootstrap');

// or you can include specific pieces
// require('bootstrap/js/dist/tooltip');
// require('bootstrap/js/dist/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});
    

将 Bootstrap 与 Turbo 结合使用

如果你将 Bootstrap 与 Turbo Drive 一起使用，为了让你的 JavaScript 在每次页面更改时加载，请将初始化代码包装在 turbo:load 事件监听器中

        1
2
3
4
5
6
7
8
9
10
        // app.js

// this waits for Turbo Drive to load
document.addEventListener('turbo:load', function (e) {
    // this enables bootstrap tooltips globally
    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new Tooltip(tooltipTriggerEl)
    });
});
    

使用其他 Bootstrap / jQuery 插件

如果你需要使用与 jQuery 配合良好的 jQuery 插件，你可能需要使用 Encore 的 autoProvidejQuery() 方法，以便这些插件知道在哪里找到 jQuery。然后，你可以像平常一样引入需要的 JavaScript 和 CSS

        1
2
3
4
5
6
7
        // ...

// require the JavaScript
require('bootstrap-star-rating');
// require 2 CSS files needed
require('bootstrap-star-rating/css/star-rating.css');
require('bootstrap-star-rating/themes/krajee-svg/theme.css');
    

这项工作，包括代码示例，均在 Creative Commons BY-SA 3.0 许可下获得许可。

版本