Використання 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');