I am new to CakePHP and I want to know a way to use Boostrap from Twitter in layouts combined with cake.
My main concern is to make the Form Helper continues to function normally, because I think that it uses pre-configured CSS classes, and if I change the default css, I imagine that the Form Helper will stop to work as it should.
I read this tutorial but it doesn't seems to be complete.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1
Has anyone done this?
Thank you! :D
CSS is purely presentational; how can it affect the form helper from working as it should?
Some of the CSS validation classes might need reworking as well as what Cake returns when an error is encountered.
You can easily modify the output using the error option:
$this->Form->input('Model.field', array('error' => array('wrap' => 'span',
'class' => 'boostrap-error')));
This seems to be what you are looking for. https://github.com/loadsys/twitter-bootstrap-helper/branches
I'm doing the same thing for an app, and I've found the CSS classes for form elements match up pretty well actually.
Twitter's Bootstrap form elements look like this:
<div class="clearfix">
<label for="xlInput">X-Large input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div>
And CakePHP's FormHelper generates elements like this:
<div class="input text">
<label for="UserName">Name</label>
<input name="data[User][name]" type="text" value="" id="UserName" />
</div>
The main difference being the label outside the div in Bootstrap. FormHelper lets you set custom classes like array('class' => 'clearfix').
The .input class in Bootstrap is defined in forms.less and only sets margin-left: 150px; to move the inputs over to the right. If you don't use this style you can just add margin-right: 20px; to <label> instead.
The code in my form element ends up being:
echo $this->Form->input('first_name', array('div' => 'clearfix'));
...and generates elements that are styled properly by Bootstrap.
<div class="clearfix required">
<label for="PersonFirstName">First Name</label>
<input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/>
</div>
I'm still learning both frameworks so there may be problems with this. Hope it helps though.
All current answers require changes to the view files.
The following plugin will "Bootstrap-ify" your current views without any code/markup changes:
https://github.com/slywalker/TwitterBootstrap
All you need to do is alias the FormHelper and HtmlHelper so that all your existing calls to $this->Form & $this->Html will be handled by the plugin instead.
Can't get easier than that :)
