将 bootstrap 添加到 symfony 应用程序的正确方法是什么?

问题描述 投票:0回答:8

我正在使用 symfony 框架 3 开发 Web 应用程序。我需要将 boostrap 的功能添加到我的应用程序中。我使用以下命令安装了引导程序。 (我正在使用作曲家。)

composer require twbs/bootstrap

它将 bootstrap 安装到应用程序的供应商文件夹中。更具体地说

vendor\twbs\bootstrap

我需要将引导程序的

css
js
文件附加到应用程序的树枝模板(位于
app\Resources\views
中)作为资产。

例如:

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

但资源仅适用于位于 web (

web\bundles\framework
) 文件夹中的文件。我可以手动将这些
.css
.js
文件从供应商文件夹复制到 Web 文件夹来完成这项工作,但应该有一个正确的方法来做到这一点(即:添加资产)。例如:带有
bin/console
?

的命令

如有任何帮助,我们将不胜感激。

twitter-bootstrap twig composer-php symfony
8个回答
8
投票

Symfony 最佳实践给出了这个问题的答案:https://symfony.com/doc/current/best_practices.html#web-assets

如果你正在开发这样的应用程序,你应该使用技术推荐的工具,例如 Bower 和 GruntJS。您应该与 Symfony 后端分开开发前端应用程序(如果需要,甚至可以分离存储库)。

在我们的项目中,我们使用 grunt 来构建这些文件并将其连接到 Web 文件夹中。


7
投票

看起来这在 Symfony3 中不再有效。

在 Symfony3 中,以下内容应该有效:

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

5
投票

自 Symfony 版本 4 以来,建议的方法已更改: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

3
投票

从此链接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 %}

对于 javascript,首先放置

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
编译我的所有资源。

希望能帮到你!


2
投票

自从 Symfony v2.6 包含专为 Bootstrap 3 官方文档

设计的新表单主题
# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']

1
投票

作为替代解决方案,可以在包更新时自动创建符号链接。例如,在

composer.json
中添加新命令:

"post-update-cmd"



0
投票

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

在composer.json中...

$ composer request twbs/bootstrap

copy-bootstrap.sh 包含...

"post-update-cmd": [ "@auto-scripts", "@copy-bootstrap" ], "copy-bootstrap": [ "bash copy-bootstrap.sh" ]

重要!如果在 Windows 上,请确保 .sh 文件中的行结尾是 LF 而不是 CRLF

然后...

mkdir -p public/static/bootstrap cp -R vendor/twbs/bootstrap/dist public/static/bootstrap

现在在base.html.twig...

$ composer update

在index.html.twig...

{% block stylesheets %} <link href="static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> {% endblock %} {% block javascripts %} <script src="static/bootstrap/dist/js/bootstrap.bundle.min.js"></script> {% endblock %}

产生这个...


0
投票

最简单的方法是在模板中包含 CSS 和 JS Bootstrap 代码的链接。如果您想在所有模板中使用 Bootstrap(可能是这种情况),您只需要在基本模板中包含这些链接,该模板通常称为

{% block body %} <div class="container m-3"> <div class="row"> <div class="col-2 border border-dark border-3"> <h4>1st Row 2 Col</h4> </div> <div class="col-4 border border-dark border-3"> <h4>1st Row 4 Col</h4> </div> <div class="col-6 border border-dark border-3"> <h4>1st Row 6 Col</h4> </div> </div> <div class="row"> <div class="col-4 border border-dark border-3"> <h4>2nd Row 4 Col</h4> </div> <div class="col-6 border border-dark border-3"> <h4>2nd Row 6 Col</h4> </div> <div class="col-2 border border-dark border-3"> <h4>2nd Row 2 Col</h4> </div> </div> </div> {% endblock %}

,其他模板扩展了它。

因此,需要明确的是,您的 

base.html.twig

模板应包含指向

base.html.twig
stylesheets
块中的 Bootstrap 源代码的链接,但您的块的调用方式可能不同。重要的是您将这些链接包含到 CSS 和 JS Bootstrap 代码。
javascripts

这些链接刚刚从 Bootstrap 网站复制:
https://getbootstrap.com/

。当您看到此答案时,可能链接已更改为使用最新的 Bootstrap 版本。目前是5.3.3. 现在,如果您还想使用 Bootstrap 显示表单,您的

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %} <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> {% endblock %} {% block javascripts %} <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> {% endblock %} </head> <body> {% block welcome %} {% endblock %} {% block nav %} {% endblock %} {% block body %} {% endblock %} </body> </html>

还应该包含

config/packages/twig.yaml
,类似这样的
form_themes: ['bootstrap_5_layout.html.twig']

现在,当然,您的 
twig: file_name_pattern: '*.twig' form_themes: ['bootstrap_5_layout.html.twig'] when@test: twig: strict_variables: true

需要扩展

form.html.twig
或还包含上面的 2 个链接。
解决方案2:使用npm安装Bootstrap

在这种情况下,您需要拥有

base.html.twig

node
(节点包管理器),然后您将执行
npm
以及其他操作。
请参阅此

https://symfony.com/doc/current/frontend/encore/bootstrap.html

了解详细信息 注释

这个答案是用 Symfony 版本 7.0.7 进行测试的,但可能也适用于其他以前的版本。

有关更多详细信息,请参阅 Symfony 和 Bootstrap 文档。通常,这些是了解这些东西的最佳地点。

参考文献

    https://symfony.com/doc/current/form/bootstrap5.html
  • https://symfony.com/doc/current/frontend/encore/bootstrap.html
  • https://symfony.com/doc/current/form/form_themes.html#symfony-builtin-forms
© www.soinside.com 2019 - 2024. All rights reserved.