Каков правильный способ добавления бутстрапа в приложение Symfony?

Я использую Symfony framework 3 для разработки веб-приложения. Мне нужно добавить функцию boostrap для моего приложения. Я установил bootstrap, используя следующую команду. (Я использую композитора.)

composer require twbs/bootstrap

Он устанавливает загрузку в папку поставщика приложений. Более конкретно vendor\twbs\bootstrap.

Мне нужно привязать загрузочные файлы css и js в шаблонах twig приложения (расположенных в app\Resources\views) в качестве активов.

например:.

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

Но активы работают только с файлами, расположенными в папке web (web\bundles\framework). Я могу скопировать эти файлы .css и .js из папки поставщика в веб-папку вручную, чтобы сделать эту работу, но должен быть правильный способ сделать это (например: добавить активы). Например: команда с bin/console?

Любая помощь приветствуется.

Ответ 1

Лучшие практики Symfony дает ответ на эту проблему: http://symfony.com/doc/current/best_practices/web-assets.html

Если вы разрабатываете подобное приложение, вам следует использовать инструменты, рекомендованные этой технологией, такие как Bower и GruntJS. Вы должны разрабатывать свое веб-приложение отдельно от бэкэнда Symfony (даже если вы хотите разделить репозитории).

В нашем проекте мы используем grunt для создания и объединения этих файлов в веб-папку.

Ответ 2

Похоже, это больше не работает в Symfony3.

В Symfony3 должно работать следующее:

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

Ответ 3

Так как Symfony v2.6 включает новую тему формы, предназначенную для Bootstrap 3 официальная документация

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

Ответ 4

Из этой ссылки https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (и меняя twitter для twbs), это то, что у меня есть в моем 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"

У меня есть другие зависимости в моем composer.json, например jsqueeze, например, Leafo scss-процессоре, среди jquery и т.д. У меня это в моем файле-компоновщике:

    "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",

Затем я использую его для 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 %}

и для javascripts сначала разместите jquery:

{% 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 %}

Затем я использую bin/console assetic:dump для компиляции всех моих активов.

Надеюсь помочь!

Ответ 5

Предложенный подход изменился с версии 4 Symfony: Webpack Encore используется с npm/yarn для объединения ресурсов CSS и JavaScript, где может быть включена платформа Bootstrap.

Начните с установки Encore и следуйте документации по Bootstrap. Таким образом, следующие команды должны быть выполнены:

composer require symfony/webpack-encore-bundle
yarn install
yarn add bootstrap --dev

# after making the required changes to webpack.config.js, app.js, run Encore
yarn encore dev --watch

Ответ 6

В качестве альтернативного решения символические ссылки могут быть созданы автоматически после обновления пакетов. Например, в composer.json добавьте новую команду в "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"
        ]
    },