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

Дата оновлення перекладу 2024-05-27

Використання 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
$primary: darken(#428bca, 20%);

// ~ дозволяє вам посилатися на речі у node_modules
@import "~bootstrap/scss/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)
$ 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');