twitter-bootstrap 将引导程序添加到 symfony 应用程序的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36453039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the correct way to add bootstrap to a symfony app?
提问by Wickramaranga
I'm using symfony framework 3 to develop a web application. I need to add boostrap's functionality to my application. I installed bootstrap using the below command. (I'm using composer.)
我正在使用 symfony 框架 3 来开发 Web 应用程序。我需要将 boostrap 的功能添加到我的应用程序中。我使用以下命令安装了引导程序。（我正在使用作曲家。）
composer require twbs/bootstrap
It installs bootstrap to the application's vendor folder. More specifically vendor\twbs\bootstrap.
它将引导程序安装到应用程序的供应商文件夹。更具体地说vendor\twbs\bootstrap。
I need to attach bootstrap's cssand jsfiles in the application's twig templates (located in app\Resources\views) as assets.
我需要在应用程序的树枝模板（位于）中附加引导程序css和js文件app\Resources\views作为资产。
e.g.:
例如：
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />
But assets only work with files located in the web (web\bundles\framework) folder. I can copy those .cssand .jsfiles from the vendor folder to web folder manually to make this work but there should be a proper way to do it (i.e.: to add assets). e.g.: A command with bin/console?
但资产仅适用于位于 web ( web\bundles\framework) 文件夹中的文件。我可以手动将这些.css和.js文件从供应商文件夹复制到 web 文件夹以完成这项工作，但应该有一种正确的方法来做到这一点（即：添加资产）。例如：带有bin/console?
Any help is appreciated.
任何帮助表示赞赏。
采纳答案by fucethebads
The Symfony Best Practies gives the answer for this Problem: http://symfony.com/doc/current/best_practices/web-assets.html
Symfony Best Practies 给出了这个问题的答案：http://symfony.com/doc/current/best_practices/web-assets.html
If you are developing an application like this, you should use the tools that are recommended by the technology, such as Bower and GruntJS. You should develop your frontend application separately from your Symfony backend (even separating the repositories if you want).
如果您正在开发这样的应用程序，您应该使用该技术推荐的工具，例如 Bower 和 GruntJS。您应该将前端应用程序与 Symfony 后端分开开发（如果需要，甚至可以将存储库分开）。
In our project we use grunt to build and concat those files into the web-folder.
在我们的项目中，我们使用 grunt 来构建这些文件并将其合并到 web 文件夹中。
回答by Twoez
It looks like that this no longer works in Symfony3.
看起来这在 Symfony3 中不再有效。
In Symfony3 the following should work:
在 Symfony3 中，以下应该有效：
twig:
form_themes: ['bootstrap_3_layout.html.twig']
回答by Siavas
The suggested approach changedsince Symfony version 4: Webpack Encore is used with npm / yarn for bundling the CSS and JavaScript resources, where the Bootstrap framework can be included.
自 Symfony 版本 4 以来，建议的方法发生了变化：Webpack Encore 与 npm / yarn 一起用于捆绑 CSS 和 JavaScript 资源，其中可以包含 Bootstrap 框架。
Start by installing Encoreand follow with the Bootstrap-specific documentation. In summary, the following commands have to be performed:
首先安装 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
回答by Xavi Montero
From this link https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles(and changing twitterfor twbs) this is what I have in my config.yml:
从这个链接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"
I do have other dependencies in my composer.jsonlike jsqueezefor example, or Leafo's scss processor, among jqueryand more. I have this in my composer file:
我有我在其他的依赖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",
I then use it like this for the css:
然后我将它像这样用于 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 %}
and for the javascripts, place jqueryfirst:
对于 javascripts，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 %}
I then use bin/console assetic:dumpto compile all my assets.
然后我用它bin/console assetic:dump来编译我所有的资产。
Hope to help!
希望有所帮助！
回答by Roger Guasch
Since Symfony v2.6 includes a new form theme designed for Bootstrap 3oficial documentation
由于 Symfony v2.6 包含为Bootstrap 3官方文档设计的新表单主题
# app/config/config.yml
twig:
form:
resources: ['bootstrap_3_layout.html.twig']
# resources: ['bootstrap_3_horizontal_layout.html.twig']
回答by slava
As an alternative solution, the symlinks could be created automatically upon packages update. For example, in composer.jsonadd new command in "post-update-cmd":
作为替代解决方案，可以在包更新时自动创建符号链接。例如，在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"
]
},
