Как подключить bootstrap 3 к проекту на symfony 2

Расскажу в общих чертах последовательность действий как подключить и начать использовать замечательный css framework bootstrap 3 на проекте, работающем на symfony 2.

Для начала нужно подключить зависимости в композер. Добавьте в composer.json в блок require {...} строчки:

"require": {
  ...
  "jquery/jquery":  "1.11.*",
  "twbs/bootstrap": "^3.3@dev",
  "braincrafted/bootstrap-bundle": "~2.0"
}
  • Первое - мы подключили jquery, он понадобится для работы js плюшек бутстрапа.
  • Второе - собственно сам твиттер бутстрап.
  • И самое интересное третье - специальный бандл для интеграции в symfony bootstrap.

Итак, выполняем composer update jquery/jquery twbs/bootstrap braincrafted/bootstrap-bundle и ждем пока сгенерируется composer.lock

Подключить вышеописанные зависимости можно было и с помощью команды composer require jquery/jquery twbs/bootstrap braincrafted/bootstrap-bundle, но я предпочитаю модифицировать composer.json вручную.

Далее, подключаем новый бандл в app/AppKernel.php:

...new Braincrafted\Bundle\BootstrapBundle\BraincraftedBootstrapBundle(),...

Конфигурируем его в config.yml:

braincrafted_bootstrap:
    output_dir:
    assets_dir: %kernel.root_dir%/../vendor/twbs/bootstrap
    jquery_path: %kernel.root_dir%/../vendor/jquery/jquery/jquery-1.10.2.js
    less_filter: less # "less", "lessphp", "sass" or "none"
    fonts_dir: %kernel.root_dir%/../web/fonts
    auto_configure:
        assetic: true
        twig: true
        knp_menu: true
        knp_paginator: true
    customize:
        variables_file: ~
        bootstrap_output: %kernel.root_dir%/Resources/less/bootstrap.less
        bootstrap_template: BraincraftedBootstrapBundle:Bootstrap:bootstrap.less.twig

Добавляем в конфигурацию assetic фильтр less:

assetic:
    ...
    filters:
        less:
            node: /usr/local/bin/node
            node_paths: [/usr/local/lib/node_modules]
            apply_to: "\.less$"

Да-да, нам понадобится установленный less на сервере. Если вы решите коммитить в систему контроля версий сгенерированные ассеты, то less будет нужен только на сервере разработки.

Выполняем команду, она перетащит ресуры в папку web:

php app/console assetic:dump

Вот и все. Теперь достаточно выбрать себе подходящий шаблон здесь http://getbootstrap.com/getting-started/#examples, сделать на основе него layout и подключать его в шаблонах:

{% extends 'MyBundle::layout.html.twig' %}

Добавить комментарий