まずバンドルのResources/publicの下にBootstrapのcss、img、jsファイルを配置。
Hoge
└─FugaBundle
├─Controller
├─DependencyInjection
├─Entity
├─Resources
│ ├─config
│ ├─public
│ │ ├─css/
│ │ │ bootstrap-responsive.css
│ │ │ bootstrap-responsive.min.css
│ │ │ bootstrap.css
│ │ │ bootstrap.min.css
│ │ │
│ │ ├─img/
│ │ │ glyphicons-halflings-white.png
│ │ │ glyphicons-halflings.png
│ │ │
│ │ └─js/
│ │ bootstrap.js
│ │ bootstrap.min.js
│ │ jquery.min.js
│ └─views
│ └─Matome
└─Tests
└─Controller
config.ymlでAsseticの設定で、対象となるBundleにHogeFugaBundleを追加する。
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: true
bundles: [ HogeFugaBundle ]
#java: /usr/bin/java
filters:
cssrewrite: ~
#closure:
# jar: %kernel.root_dir%/Resources/java/compiler.jar
#yui_css:
# jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
bootstrapのCSSとJavaScriptを読み込めるようにTwigを記述。
<html lang="jp">
<head>
{% stylesheets
'bundles/hogefuga/css/bootstrap.min.css' filter='cssrewrite'
'bundles/hogefuga/css/bootstrap-responsive.min.css' filter='cssrewrite' %}
<link href="{{ asset_url }}" rel="stylesheet"></link>
{% endstylesheets %}
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link href="{{ asset('favicon.ico') }}" rel="icon" type="image/x-icon"></link>
</head>
<body>
{% block body %}
<legend>Hello Bootstrap <i class="icon-heart"></i></legend>
{% endblock %}
{% javascripts
'@HogeFugaBundle/Resources/public/js/jquery.min.js'
'@HogeFugaBundle/Resources/public/js/bootstrap.min.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascript %}
{% endblock %}
</body>
</html>
で、最後に
php app/console assets:install php app/console assetic:dump
0 件のコメント:
コメントを投稿