Make sure you update your namespaces, we changed the Bundles namespace from Mopa\BootstrapBundle to Mopa\Bundle\BootstrapBundle
You must change the namespace references in:
- app/AppKernel.php
- Your code making use of any MopaBootstrapBundle classes (e.g. Navbar, MenuBuilder, etc.)
- Configuration referencing any classes (e.g. service definitions for menu, navbar, etc.)
For info about the branches read https://github.com/phiamo/MopaBootstrapBundle/wiki/Branches-&-Versions
If you dont want to care about the twitter/bootstrap dependency, please make sure your composer.json is correct
To see the bundle and its capabilities online just have a look on MopaBootstrapBundle Live
- MopaBootstrapBundle - Easy integration of twitters bootstrap into symfony2
- MopaBootstrapSandboxBundle - Seperate live docs from code
- symfony-bootstrap-sandbox is also available
MopaBootstrapBundle is a collection of code to integrate twitter's bootstrap (http://twitter.github.com/bootstrap/) as easy as possible into your symfony2 (http://www.symfony.com) Project.
It includes:
- twig templates for use with symfony2 Form component
- control your form either via the form builder or the template engine
- control nearly every bootstrap2 form feature
- javascript and twig blocks for dynamic collections
- A generic Navbar class to generate your Navbar outside the template
- helpers for dropdowns, seperators, etc.
- twig templates for KnpPaginatorBundle (https://github.com/knplabs/KnpPaginatorBundle)
- twig templates for CraueFormFlowBundle (https://github.com/craue/CraueFormFlowBundle)
Besides this file, there is a growing collection of documentation:
- in the docs folder
- in the various examples:
- Prerequisites
- Installation
- Include Bootstrap
- Using bootstrap in the layout
- Using bootstrap for Theming
- Field Collections
- Generation of CRUD controllers based on a Doctrine 2 schema
- Generating a Navbar
- TODO
- Known Issues
Less is not required, but is extremely helpful when using bootstrap2 variables, or mixins, If you want to have a easier life, have a look into:
-
Add this bundle to your project in composer.json:
symfony 2.1 uses composer (http://www.getcomposer.org) to organize dependencies:
To have composer managing twitters bootstrap too, you can either run it with --install-suggests or add the following to your composer.json:
> Composer doesn't install suggests from mopa/boostrap-bundle! > If you need e.g knplabs menues or paginator, craue/formflow, > please add them to YOUR composer.json too!{ "require": { "mopa/bootstrap-bundle": "dev-master", "twitter/bootstrap": "master" }, "repositories": [ { "type": "package", "package": { "version": "master", /* whatever version you want */ "name": "twitter/bootstrap", "source": { "url": "https://github.com/twitter/bootstrap.git", "type": "git", "reference": "master" }, "dist": { "url": "https://github.com/twitter/bootstrap/zipball/master", "type": "zip" } } } ] }
{ "require": { "mopa/bootstrap-bundle": "dev-master", "twitter/bootstrap": "master", "knplabs/knp-paginator-bundle": "dev-master", "knplabs/knp-menu-bundle": "dev-master", "craue/formflow-bundle": "dev-master" }, "repositories": [ { "type": "package", "package": { "version": "master", /* whatever version you want */ "name": "twitter/bootstrap", "source": { "url": "https://github.com/twitter/bootstrap.git", "type": "git", "reference": "master" }, "dist": { "url": "https://github.com/twitter/bootstrap/zipball/master", "type": "zip" } } } ] }
To activate auto symlinking and checking after composer update/install add also to your existing scripts: (recommended!)
```json { "scripts": { "post-install-cmd": [ "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" ], "post-update-cmd": [ "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap" ] } } ```
There is also a console command to check and / or install this symlink:
```bash php app/console mopa:bootstrap:install ```
With these steps taken, bootstrap should be install into vendor/twitter/bootstrap/ and a symlink been created into vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap.
1.1. Include bootstrap manually or in another way:
For including bootstrap there are different solutions, why using this one? have a look into [Including Bootstrap](https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/including_bootstrap.md)
-
Add this bundle to your app/AppKernel.php:
// application/ApplicationKernel.php public function registerBundles() { return array( // ... new Mopa\Bundle\BootstrapBundle\MopaBootstrapBundle(), // ... ); }
-
If you like configure your config.yml (not mandatory)
mopa_bootstrap: form: show_legend: false # default is true show_child_legend: false # default is true error_type: block # or inline which is default
Have a look at the provided base.html.twig its a fully working bootstrap layout and might explain howto use it by itself.
To make use of the supplied base.html.twig template just use it, or defining a new template:
app/Resources/MopaBootstrapBundle/views/layout.html.twig
{% extends 'MopaBootstrapBundle::base.html.twig' %}
{% block title %}Yourapp{% endblock %}
{# and define more blocks ... #}
You are free to overwrite any defined blocks. Have a look into the sandbox too:
- http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/layout
- https://github.com/phiamo/symfony-bootstrap-sandbox/blob/master/app/Resources/MopaBootstrapBundle/views/layout.html.twig
If you are using less just include the mopabootstrap.less as described in layout.html.twig
{% stylesheets filter='less,cssrewrite,?yui_css'
'@MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less'
'@YourNiceBundle/Resources/public/less/*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
If you would like to use the css try this:
cd vendor/mopa/bootstrap-bundle/Mopa/BootstrapBundle/Resources/bootstrap
make
if it doesnt work, why not use the less way?
{% block head_style %}
{% stylesheets filter='cssrewrite,?yui_css'
'@MopaBootstrapBundle/Resources/bootstrap/bootstrap.css'
'@YourNiceBundle/Resources/public/css/*'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet"
media="screen" />
{% endstylesheets %}
Forms can either be activated for you whole project (app/config.yml):
twig:
form:
resources:
- 'MopaBootstrapBundle:Form:fields.html.twig'
Or include the fields.html.twig in your template for a special form:
{% form_theme myform 'MopaBootstrapBundle:Form:fields.html.twig' %}
For FormFlow you can just use MopaBootstrap's templates instead of the ones given by the Bundles:
{% include 'CraueFormFlowBundle:FormFlow:stepField.html.twig' with {'formident': '#myform}%}
For KnpPaginatorBundle use the following to override template:
# File: app/configs/parameters.yml
parameters:
knp_paginator.template.pagination: MopaBootstrapBundle:Pagination:sliding.html.twig
where formident is used by jquery to bind the submit form handler to the "next" or "finish" button, instead of the first defined like in html it is This is mainly necessary if you have more than one form. It need to be the id or class of the form itself e.g.
<form id="myform" class="myformclass" ...>
{'formident': '.myformclass'}
or
{'formident': '#myform'}
And to use the Paginator templates copy them to
mkdir -p app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/
cp vendor/bundles/Mopa/BootstrapBundle/Resources/views/Pagination/* app/Resources/Knp/Bundle/PaginatorBundle/views/Pagination/
More in detail doc for Forms:
Since collections often tend to make probs, we added some code to ease the use:
http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Form/Type/ExampleCollectionsFormType.php https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Resources/views/Examples/collections.html.twig
Make sure you included the mopabootstrap-collections.js to have the javascript code loaded and available
Some things are currently missing :
- examples on howto extend the functionality with check functions for adding and removing
- in depth example on howto use Custom FormTypes easily
- and maybe more
The Bundle provides a new console command:
./app/console mopa:generate:crud
It extends the base doctrine CRUD generator and modifies the theme to support the bootstrap layout.
Hope you have fun with it.
<h2 id="NAVBAR">Generating a Navbar</h2>
for the example navbars add the following to your config.yml:
```yaml
imports:
- { resource: @MopaBootstrapBundle/Resources/config/examples/example_menu.yml }
- { resource: @MopaBootstrapBundle/Resources/config/examples/example_navbar.yml }
For in depth doc into Navbars have a look into https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/navbar_configuration.md
- Probably make a command to deal with bootstrap library submodule for init and update
- Probably add more form components
- Add more useful bootstrap stuff
- Nothing what could not be done in another way, probably some will arise as soon as its published
So make issues!
- There are probably things missing, so make PR's