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

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

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

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

1
2
3
4
5
# если вы используете менеджер пакетов Yarn
$ yarn add bootstrap --dev

# если вы используете менеджер пакетов npm
$ 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
3
4
5
6
7
# если вы используете менеджер пакетов Yarn
# (jQuery требуется только в версиях до Bootstrap 5)
$ yarn add jquery @popperjs/core --dev

# если вы используете менеджер пакетов npm
# (jQuery требуется только в версиях до 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 / 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');