Twitter Bootstrap

Configuration

Add KnpRadBundle to Assetic configuration on your config.yml file.

Usage

How to use Twitter Bootstrap

You just need to extend your base template with the KnpRadBundle Twitter Boostrap base template :

{% extends 'KnpRadBundle:Bootstrap:twitter_bootstrap.html.twig' %}

Add your custom CSS and JS files

Twitter Boostrap base template integrate jQuery and Twitter Bootstrap yes. So if you want to add a JS file (app.js for example) or a CSS file (style.css for example), you must call the parent() twig method.

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/app/js/app.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/app/css/style.css') }}" />
{% endblock %}

Extends Twitter Bootstrap base template

The base template provide four twig blocks :

{% block title %}{% endblock %}
{% block stylesheets %}{% endblock %}
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}

• The body block is empty and is integrated between the HTML tags BODY and /BODY.
• The stylesheets block integrates by default css files peculiar to Twitter Bootstrap (bootstrap.min.css and bootstrap-responsive.min.css). To remove this CSS calls, just rewrite the stylesheets block.
• The javascripts block integrates by default js files peculiar to Twitter Bootstrap (bootstrap.min.js) and jQuery (jquery-1.8.2.min.js). To remove this JS calls, just rewrite the javascripts block.
• The title block contains Welcome ! and is integrated between the HTML tags TITLE and /TITLE.