README

Warning

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

Live Show

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

Introduction

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)

Documentation

Besides this file, there is a growing collection of documentation:

in the docs folder
in the various examples:

Outline

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

Prerequisites

Less (recommended)

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:

Less Documentation

Installation

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:

   {
       "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"
                   }
               }
           }
       ]
   }

Warning

> 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",
           "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

Using bootstrap in the layout

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:

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 %}

Using bootstrap for Theming

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/

Field Collections

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

Generation of CRUD controllers based on a Doctrine 2 schema

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

TODO

- Probably make a command to deal with bootstrap library submodule for init and update
- Probably add more form components
- Add more useful bootstrap stuff

Known Issues

- 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

unixo/MopaBootstrapBundle

README

Warning

Live Show

Introduction

Documentation

Outline

Prerequisites

Less (recommended)

Installation

Warning

Using bootstrap in the layout

Using bootstrap for Theming

Field Collections

Generation of CRUD controllers based on a Doctrine 2 schema

TODO

Known Issues