如何将 TwitterBootstrap 添加到 Symfony2答案

【问题标题】：How to add TwitterBootstrap to Symfony2如何将 TwitterBootstrap 添加到 Symfony2
【发布时间】：2015-10-13 17:01:58
【问题描述】：

我想在我的 Symfony2 包中使用 TwitterBootstrap。请给我一个建议如何正确地做到这一点。我使用 composer 将 TwitterBootstrap 安装到我的供应商目录中（composer 需要 twitter/bootstrap）。如何将 css 和 js 链接到我的树枝模板？

【问题讨论】：

标签： twitter-bootstrap symfony

【解决方案1】：

感谢您的帮助。

现在我不想使用额外的捆绑包或其他想法。我只想将 css 和 js 文件连接到我的模板。

我现在使用的解决方案是：

在 vendor/components/jquery 和 vendor/twbs/bootstrap 目录中安装 fia composer jquery 和 twitterbootstrap

在config.yml 我创建了一个命名资产：

# Assetic Configuration
assetic:
    assets:
        twbs_js_and_jq:
            inputs:
                - '%kernel.root_dir%/../vendor/components/jquery/jquery.min.js'
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.min.js'
        twbs_css:
            inputs:
                 - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css'
        bootstrap_fonts_woff:
            inputs:
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff'
            output: fonts/glyphicons-halflings-regular.woff
    bootstrap_fonts_ttf:            
            inputs:
                - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf'
            output: fonts/glyphicons-halflings-regular.ttf
    bootstrap_fonts_svg:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg'
        output: fonts/glyphicons-halflings-regular.svg
    bootstrap_fonts_eot:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot'

首先创建 jQuery 资源很重要。 Assetic 更改资源的路径，这将破坏任何使用相对路径的背景图像（或其他路径），因此我需要为字体文件添加规则以使字形图标工作 (find example here)。

在layout.html.twig文件的头部我粘贴：

{% javascripts '@twbs_js_and_jq' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

{% stylesheets '@twbs_css' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

一切顺利！

【讨论】：

【解决方案2】：

集成 Bootstrap 的一种简单方法是在 base.html.twig 文件中声明样式表：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

您也可以使用asset 来加载您的样式表。看看Templating with Symfony

【讨论】：

谢谢！是否可以从非公共目录（来自 vendor/twitter/bootstrap）链接样式？
是的，您只需在模板中对样式表进行硬编码。并且不要使用asset
我使用assetic从供应商目录链接TB。带有链接的命名资产：'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.min.js'

【解决方案3】：

另一种方法是使用MopaBootstrapBundle。使用这个 Bundle，您可以很好地集成到 Symfony，例如用于 Symfony 表单组件的树枝扩展和模板，因此您无需自己设置所有样式。

【讨论】：

【解决方案4】：

众所周知，Bootstrap 与资产相关，并且所有第三方捆绑包或直接包含看起来很丑陋（大多数形式的 /vendor/ 目录不要这样做！）。所以最好使用 Bower 来管理你的资产。您可以将其配置为将所有资产安装到 Symfony2 web 目录，然后在 twig 中使用 assets。以下是一些文档链接：

Instalation guide

Configuration

希望这对你有帮助:)

【讨论】：