SyMfonAK - vyvíjame databázy pomocou frameworku Symfony

Encore - využitie Bootstrap CSS & JS

Z SyMfonAK
Prejsť na: navigácia, hľadanie

Symfony dokumentácia → Čelná časť (front-end) → Encore - využitie Bootstrap CSS & JS

Encore - využitie Bootstrap CSS & JS 

originál návod

Prvým krokom je inštalácia: 

 yarn add bootstrap --dev

Po inštalácii ho nájdete v podadresári node_modules/.

Import štýlov bootstrap-u

Podľa pravidiel práce s nástrojom encore si bootstrap zavoláme z niektorého už nášho existujúceho a používaného javascript súboru v adresári assets/. To môže byť nielen javascript ale aj CSS súbor .css alebo ak používame Sass tak súbor .scss.

Bootstrap vyžaduje mať jQuery aj Popper.js. Treba ich nainštalovať. Napríklad príkazom: 

yarn add jquery popper.js --dev


V javascript súbore (hociktorý používaný, povedzme týmto nástrojom typický assets/app.js voláme: 

const $ = require('jquery');

require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

// or you can include specific pieces
// require('bootstrap/js/dist/tooltip');
// require('bootstrap/js/dist/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

v prvom riadku je volaný jeho .js časť a v druhom samotné css bootstrap-u.

Používanie pluginov Bootstrap-u, pluginov jQuery

Ak chcem používať pluginy jQuery, treba aktivovať metódu Encore autoProvidejQuery(). Potom možno používať požadovaný Javascript alebo CSS ako zvyčajne. 

// ... Napríklad

// require the JavaScript
require('bootstrap-star-rating');
// require 2 CSS files needed
require('bootstrap-star-rating/css/star-rating.css');
require('bootstrap-star-rating/themes/krajee-svg/theme.css');


Užitočné linky

Zdroj: „http://www.e-svet.biz/symfonak/index.php?title=Encore_-_využitie_Bootstrap_CSS_%26_JS&oldid=1556“