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

a8jjtwal  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(7)|浏览(185)

我正在使用symfony framework 3开发一个web应用程序。我需要将bootstrap的功能添加到我的应用程序中。我使用以下命令安装了bootstrap。(我使用composer。)

composer require twbs/bootstrap

它将 Bootstrap 安装到应用程序的供应商文件夹中。更具体地说,是vendor\twbs\bootstrap
我需要将bootstrap的cssjs文件作为资产附加到应用程序的twig模板(位于app\Resources\views)中。
例如:

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

但是资产只能与位于web(web\bundles\framework)文件夹中的文件一起使用。我可以手动将这些.css.js文件从vendor文件夹复制到web文件夹中,但应该有一个正确的方法来完成此操作(即:添加资产)。例如:带有bin/console的命令?
任何帮助都是感激不尽的。

dm7nw8vv

dm7nw8vv1#

Symfony最佳实践为该问题提供了答案:https://symfony.com/doc/current/best_practices.html#web-assets
如果你正在开发这样的应用程序,你应该使用技术推荐的工具,比如Bower和GruntJS。你应该把你的前端应用程序和你的Symfony后端分开开发(如果你愿意的话,甚至可以把存储库分开)。
在我们的项目中,我们使用grunt来构建这些文件并将其连接到web文件夹中。

ttcibm8c

ttcibm8c2#

看起来这在Symfony3中不再起作用。
在Symfony3中,以下内容应该可以正常工作:

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

swvgeqrz3#

自Symfony版本4以来的建议方法changed:Webpack Encore与npm / yarn一起使用,用于捆绑CSS和JavaScript资源,其中可以包括Bootstrap框架。
installing Encore开始,然后是the Bootstrap-specific documentation。总之,必须执行以下命令:

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
u3r8eeie

u3r8eeie4#

从这个链接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等等。我在我的composer文件中有这样的内容:

"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编译所有资产。
希望能有所帮助!

x0fgdtte

x0fgdtte5#

由于Symfony v2.6包含一个新的表单主题,该主题是为Bootstrap 3oficial documentation设计的

# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']
krugob8w

krugob8w6#

作为一种替代解决方案,符号链接可以在软件包更新时自动创建。例如,在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"
        ]
    },
bkhjykvo

bkhjykvo7#

如果您喜欢非常简单的方法...

$ composer request twbs/bootstrap

在composer.json中...

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

其中copy-bootstrap.sh包含...

mkdir -p public/static/bootstrap
cp -R vendor/twbs/bootstrap/dist public/static/bootstrap
  • 重要!如果在Windows上,请确保.sh文件中的行尾是LF而不是CRLF*

然后......

$ composer update

现在在base. 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 %}

在index. html. twig中...

{% 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 %}

产生了这个...

相关问题