Twitter bootstrap 向symfony应用程序添加引导的正确方法是什么?
我正在使用symfony framework 3开发一个web应用程序。我需要将boostrap的功能添加到我的应用程序中。我使用下面的命令安装了引导程序。(我正在使用composer。) 它将引导安装到应用程序的供应商文件夹中。更具体地说,Twitter bootstrap 向symfony应用程序添加引导的正确方法是什么?,twitter-bootstrap,twig,composer-php,symfony,Twitter Bootstrap,Twig,Composer Php,Symfony,我正在使用symfony framework 3开发一个web应用程序。我需要将boostrap的功能添加到我的应用程序中。我使用下面的命令安装了引导程序。(我正在使用composer。) 它将引导安装到应用程序的供应商文件夹中。更具体地说,vendor\twbs\bootstrap 我需要将引导的css和js文件作为资产附加到应用程序的分支模板(位于app\Resources\views)中 e、 g: 但是,资产只能处理位于web(web\bundles\framework)文件夹中的文
vendor\twbs\bootstrap
我需要将引导的css
和js
文件作为资产附加到应用程序的分支模板(位于app\Resources\views
)中
e、 g:
但是,资产只能处理位于web(web\bundles\framework
)文件夹中的文件。我可以手动将那些.css
和.js
文件从供应商文件夹复制到web文件夹,以实现这一点,但应该有一种正确的方法(即添加资产)。e、 g.:带有bin/控制台的命令
感谢您的帮助 Symfony最佳实践给出了此问题的答案:
如果您正在开发这样的应用程序,那么应该使用该技术推荐的工具,例如Bower和GruntJS。您应该独立于Symfony后端开发前端应用程序(如果需要,甚至可以分离存储库)
在我们的项目中,我们使用grunt来构建这些文件并将其压缩到web文件夹中。因为Symfony v2.6包含了一个为Bootstrap 3设计的新表单主题
看起来这在Symfony3中不再有效
在Symfony3中,以下各项应起作用:
twig:
form_themes: ['bootstrap_3_layout.html.twig']
从这个链接(并将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 %}
然后我使用bin/console assetic:dump
编译我的所有资产
希望对大家有所帮助 作为替代解决方案,可以在软件包更新时自动创建符号链接。例如,在composer.json
中,在的“post update cmd”
中添加新命令:
自Symfony version 4:Webpack Encore以来,建议的方法与npm/Thread一起用于捆绑CSS和JavaScript资源,其中可以包括引导框架
从开始,然后开始。总之,必须执行以下命令:
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
symphony 3也是这样吗?是的,sf3和sf2.8(最新的LTS)之间的区别在于,在symfony 3中没有sf2.8所具有的不推荐调用。为什么我收到了“-1”的提示?谢谢,我没有给你-1。我现在给了+1。)不行[Symfony\Component\Config\Definition\Exception\InvalidConfigurationException]
无法识别的选项“form”位于“twig”
下,这确保了表单是使用引导类和其他属性创建的,但我们必须自己附加引导文件。这对于Symfony2来说是一个很好的答案,但不再适用于问题所涉及的Symfony 3版本。这是向Symfony 4添加引导的正确方法。*app您使用的是@FabianoLothor哪个版本?Symfony 5版
"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",
{% 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 %}
{% 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 %}
// ...
"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 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