Using Bootstrap CSS & JS

This article explains how to install and integrate the Bootstrap CSS framework in your Symfony application using Webpack Encore. First, to be able to customize things further, we'll install bootstrap:

この記事では、Webpack Encore を使用して Symfony アプリケーションに Bootstrap CSS フレームワークをインストールして統合する方法について説明します。まず、さらにカスタマイズできるように、bootstrap をインストールします。
1
2
3
4
5
 
# if you use the Yarn package manager
$ yarn add bootstrap --dev

# if you use the npm package manager
$ npm install bootstrap --save-dev

Importing Bootstrap Styles

Now that bootstrap lives in your node_modules/ directory, you can import it from any Sass or JavaScript file. For example, if you already have a global.scss file, import it from there:

ブートストラップが 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";

That's it! This imports the node_modules/bootstrap/scss/bootstrap.scss file into global.scss. You can even customize the Bootstrap variables first!

それでおしまい！これにより、node_modules/bootstrap/scss/bootstrap.scss ファイルが global.scss にインポートされます。最初に Bootstrap 変数をカスタマイズすることもできます!

Tip

ヒント

If you don't need all of Bootstrap's features, you can include specific files in the bootstrap directory instead - e.g. ~bootstrap/scss/alert.

Bootstrap のすべての機能が必要ない場合は、代わりに特定のファイルを bootstrap ディレクトリに含めることができます。 ~bootstrap/scss/alert.

Importing Bootstrap JavaScript

First, install the JavaScript dependencies required by the Bootstrap version used in your application:

最初に、アプリケーションで使用される Bootstrap バージョンに必要な JavaScript 依存関係をインストールします。
1
2
3
4
5
6
7
 
# if you use the Yarn package manager
# (jQuery is only required in versions prior to Bootstrap 5)
$ yarn add jquery @popperjs/core --dev

# if you use the npm package manager
# (jQuery is only required in versions prior to Bootstrap 5)
$ npm install jquery @popperjs/core --save-dev

Now, require bootstrap from any of your JavaScript files:

次に、任意の JavaScript ファイルからブートストラップを要求します。
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();
});

Using Bootstrap with Turbo

If you are using bootstrap with Turbo Drive, to allow your JavaScript to load on each page change, wrap the initialization in a turbo:load event listener:

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)
    });
});

Using other Bootstrap / jQuery Plugins

If you need to use jQuery plugins that work well with jQuery, you may need to use Encore's autoProvidejQuery() method so that these plugins know where to find jQuery. Then, you can include the needed JavaScript and CSS like normal:

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');