我正在使用 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
? 的命令
如有任何帮助,我们将不胜感激。
Symfony 最佳实践给出了这个问题的答案:https://symfony.com/doc/current/best_practices.html#web-assets
如果你正在开发这样的应用程序,你应该使用技术推荐的工具,例如 Bower 和 GruntJS。您应该与 Symfony 后端分开开发前端应用程序(如果需要,甚至可以分离存储库)。
在我们的项目中,我们使用 grunt 来构建这些文件并将其连接到 Web 文件夹中。
看起来这在 Symfony3 中不再有效。
在 Symfony3 中,以下内容应该有效:
twig:
form_themes: ['bootstrap_3_layout.html.twig']
自 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
从此链接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
编译我的所有资源。
希望能帮到你!
自从 Symfony v2.6 包含专为 Bootstrap 3 官方文档
设计的新表单主题# app/config/config.yml
twig:
form:
resources: ['bootstrap_3_layout.html.twig']
# resources: ['bootstrap_3_horizontal_layout.html.twig']
作为替代解决方案,可以在包更新时自动创建符号链接。例如,在
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"
]
},
在composer.json中...
$ composer request twbs/bootstrap
copy-bootstrap.sh 包含...
"post-update-cmd": [
"@auto-scripts",
"@copy-bootstrap"
],
"copy-bootstrap": [
"bash copy-bootstrap.sh"
]
然后...
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 %}
产生这个...
{% 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 和 Bootstrap 文档。通常,这些是了解这些东西的最佳地点。
参考文献