Jaki jest poprawny sposób na dodanie bootstrap do aplikacji symfony?

Question

Używam framework 3 symfony do opracowania aplikacji internetowej. Muszę dodać funkcjonalność boostrap do mojej aplikacji. Zainstalowałem bootstrap za pomocą poniższego polecenia. (Używam kompozytor.)

composer require twbs/bootstrap 

Instaluje bootstrap w folderze dostawcy aplikacji. Dokładniej: vendor\twbs\bootstrap.

Muszę dołączyć pliki bootstrap o numerach css i js w szablonach gałązek aplikacji (znajdujących się w app\Resources\views) jako zasoby.

np .:

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" /> 

Ale aktywa pracować tylko z plików znajdujących się w internetowej (web\bundles\framework) folderu. Mogę ręcznie skopiować te pliki .css i .js z folderu dostawcy do folderu internetowego, aby to działało, ale powinien to być właściwy sposób (np. Dodawanie zasobów). np .: polecenie z bin/console?

Każda pomoc jest doceniana.

Answer 1

symfony Dobrych Practies daje odpowiedź na ten problem: http://symfony.com/doc/current/best_practices/web-assets.html

Jeśli tworzysz aplikację tak, należy użyć narzędzia, które są zalecane przez technologie, takie jak Bower i GruntJS. Powinieneś rozwinąć aplikację frontendową oddzielnie od swojego zaplecza Symfony (nawet oddzielając repozytoria jeśli chcesz).

W naszym projekcie używamy gruntu do budowania i dołączania tych plików do folderu sieciowego.

Answer 2

Od Symfony v2.6 zawiera nowy motyw formularz przeznaczony dla Bootstrap 3oficial documentation

# app/config/config.yml 
twig: 
    form: 
     resources: ['bootstrap_3_layout.html.twig'] 
     # resources: ['bootstrap_3_horizontal_layout.html.twig'] 

Answer 3

wygląda na to, że to nie działa w Symfony3.

W Symfony3 dodaje powinno działać:

twig: 
    form_themes: ['bootstrap_3_layout.html.twig'] 

Answer 4

Od tego linka https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (i zmieniając twitter dla twbs) to co mam w config.yml:

assetic: 
    debug:   '%kernel.debug%' 
    use_controller: '%kernel.debug%' 
    filters: 
     cssrewrite: ~ 
     jsqueeze: ~ 
     scssphp: 
      formatter: 'Leafo\ScssPhp\Formatter\Compressed' 
    assets: 
     jquery: 
      inputs: 
       - %kernel.root_dir%/../vendor/components/jquery/jquery.js 
     bootstrap_js: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js 
     bootstrap_css: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css 
      filters: [ cssrewrite ] 
     bootstrap_glyphicons_ttf: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 
      output: "fonts/glyphicons-halflings-regular.ttf" 
     bootstrap_glyphicons_eot: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 
      output: "fonts/glyphicons-halflings-regular.eot" 
     bootstrap_glyphicons_svg: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 
      output: "fonts/glyphicons-halflings-regular.svg" 
     bootstrap_glyphicons_woff: 
      inputs: 
       - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 
      output: "fonts/glyphicons-halflings-regular.woff" 

mam inne zależności, w moim composer.json jak na przykład jsqueeze lub procesor scss Leafo, wśród jquery i więcej.Mam to w moim pliku kompozytor:

"components/font-awesome": "^4.7", 
    "components/jquery": "^3.1" 
    "leafo/scssphp": "^0.6.7", 
    "patchwork/jsqueeze": "^2.0", 
    "symfony/assetic-bundle": "^2.8", 
    "twbs/bootstrap": "^3.3", 

I następnie używać go w ten sposób do CSS:

{% stylesheets 
    '@bootstrap_css' 
    'my/other/scss_file1.scss' 
    'my/other/scss_file2.scss' 

    filter='scssphp,cssrewrite' 
    output='css/HelloTrip.css' %} 

    <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/> 

{% endstylesheets %} 

i dla JavaSkrypty umieścić jquery pierwszy:

{% javascripts 
    '@jquery' 
    '@bootstrap_js' 
    'my/other/js_file1.js' 
    'my/other/js_file2.js' 

    filter='?jsqueeze' 
    output='js/HelloTrip.js' %} 

    <script src="{{ asset_url }}"></script> 

{% endjavascripts %} 

I wtedy użyj bin/console assetic:dump, aby skompilować wszystkie moje zasoby.

Mam nadzieję, że pomogę!

Answer 5

Jako alternatywne rozwiązanie dowiązania symboliczne mogą być tworzone automatycznie po aktualizacji pakietów. Na przykład, w composer.json dodać nowe polecenie w "post-update-cmd":

// ... 
"scripts": { 
     "post-install-cmd": [ 
      "@symfony-scripts" 
     ], 
     "post-update-cmd": [ 
      "@symfony-scripts", 
      "rm web/bootstrap && ln -s -r `pwd`/vendor/twbs/bootstrap/dist/ web/bootstrap" 
     ] 
    },