Question

我想在Symfony2捆绑包中使用TwitterBootstrap。请给我一个如何做到正确的建议。我使用composer将TwitterBootstrap安装到我的供应商derectory中（composer需要twitter / bootstrap）。如何链接css＆amp; js到我的树枝模板？

Answer 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会更改资源的路径，这会破坏使用相对路径的任何背景图像（或其他路径），因此我需要为字体文件添加规则以使glyphicons工作（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 %}

全部工作！

Answer 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

Answer 3

另一种方法是使用MopaBootstrapBundle。有了这个Bundle，你可以很好地集成到Symfony中，例如用于Symfony Form组件的twig扩展和模板，所以你不需要自己设置一切。

Answer 4

众所周知，Bootstrap与资产有关，而且所有第三方捆绑包，或直接包含丑陋的形式（主要是/vendor/目录都不这样做！）。因此，最好使用Bower为管理你的asstes而特别创造的东西。您可以将其配置为将所有资产安装到Symfony2 web目录，然后在树枝中使用assets。以下是一些文档链接：

Instalation guide

Configuration

希望这会对你有所帮助:)。

如何将TwitterBootstrap添加到Symfony2

4 个答案: