Импорт стилей Bootstrap

Теперь, когда bootstrap живёт в вашем каталоге node_modules/, вы можете импортировать его из любого файла Sass или JavaScript. Например, если у вас уже есть файл global.scss, импортируйте его отсюда:

1
2
3
4
5
6
7

// assets/css/global.scss

// настройте некоторые переменные Bootstrap
$brand-primary: darken(#428bca, 20%);

// ~ позволяет вам ссылаться на вещи в node_modules
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Вот и всё! Так импортируется файл node_modules/bootstrap/scss/bootstrap.scss в global.scss. Вы можете даже вначале настроить переменные Bootstrap!

Импорт JavaScript Bootstrap

Для начала, установите зависимости JavaScript, требуемые версией Bootstrap, которая используется в вашем приложении:

1
2

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

Теперь, затребуйте bootstrap из любовго из вашиз файлов JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// app.js

const $ = require('jquery');
// это "модифицирует" модуль jquery: добавляя к нему поведение
// модуль bootstrap ничего не экспортирует/возвращает
require('bootstrap');

// или вы можете включить конкретные части
// 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

// это ожидает загрузки Turbo Drive
document.addEventListener('turbo:load', function (e) {
    // это включает подсказки bootstrap глобально
    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

// ...
// запросите Java-скрипт
require('bootstrap-star-rating');
// запросите необходимые файлы CSS 2
require('bootstrap-star-rating/css/star-rating.css');
require('bootstrap-star-rating/themes/krajee-svg/theme.css');