将 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.