Как правильно добавить bootstrap в приложение symfony?

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

composer require twbs/bootstrap

он устанавливает bootstrap в папку поставщика приложения. Более конкретно vendortwbsbootstrap.

мне нужно прикрепить bootstrap css и js файлы в шаблонах twig приложения (находится в appResourcesviews) в качестве активов.

например:

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

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

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

9
composer-php symfony twig twitter-bootstrap

5 ответов

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

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

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

4

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

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

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

по этой ссылке 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 например, или процессор scss Leafo, среди 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 для компиляции всех моих активов.

надеюсь на помощь!

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']
3

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