Дата обновления перевода: 2021-06-01

Использование Bootstrap CSS и JS

Эта статья объясняет, как установить и интегрировать `Bootstrap CSS framework`_ в вашем приложении Symfony, используя Webpack Encore. Для начала, чтобы иметь возможность все детально настроить, мы установим bootstrap:

1
$ yarn add bootstrap --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 требуется только в версиях до Bootstrap 5
$ yarn add jquery popper.js --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 / 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');

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.