Використання Bootstrap CSS і JS

Дата оновлення перекладу 2022-05-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');