Использование Bootstrap CSS и JS
Дата обновления перевода 2024-07-25
Использование Bootstrap CSS и JS
Эта статья объясняет, как установить и интегрировать фреймворк CSS Bootstrap
в вашем приложении Symfony, используя Webpack Encore.
Для начала, чтобы иметь возможность все детально настроить, мы установим bootstrap
:
1
$ npm install bootstrap --save-dev
Импорт стилей 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!
Tip
Если вам не нужны все функции Bootstrap, вы можете вместо этого включить
конкретные файлы в каталог bootstrap
- например,~bootstrap/scss/alert
.
Импорт 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');