Twitter Bootstrap, per chi non lo conoscesse, è un bellissimo framework css, realizzato originariamente da quei geniacci di Twitter per semplificare la realizzazione di interfacce che, oltre ad essere graficamente consistenti (una manna dal cielo per chi, come me, non è dotato di particolari doti grafiche), sono anche responsive. In grado quindi di adattarsi a diverse risoluzioni e tipi di dispositivo: cellulare, tablet, schermo ecc.

Lo scaffolding di CakePHP, (o il codice generato da bake), genera invece layout molto semplici, con pagine che sarebbero da modificare pesantemente per adattarle all'uso di bootstrap. 

Per fortuna c'è un punto d'incontro: javascript. Sfruttando questa bellissima tecnologia (ed in particolare jQuery) possiamo adattare il codice generato da CakePHP in modo da far gestire la grafica a twitter bootstrap, senza doverlo nemmeno modificare.

Per comodità ho realizzato un piccolo file javascript, che prende le più comuni classi generate da CakePHP e gli "appiccica" gli stili di cui avevo bisogno.

Se anche tu hai necessità di fare qualcosa del genere, chissà, magari questo può servirti da spunto:

// cakePHP bootstrap - based on twitter bootstrap 3
$(document).ready(function() {

/*
* LAYOUT
* aggiungo le classi relative alle dimensioni degli elementi
*/
$("#container").addClass("row-fluid");
$("div.actions").prependTo("#content");
$("div.actions").addClass("span3");
$("div.index").addClass("span9");
$("div.form").addClass("span9");
$("div.view").addClass("span9");
$("div.related").addClass("span9");
$("div.flashMessage").addClass("span9");

/**
* TABELLE
* aggiungo il tag <thead> per la riga di intestazione delle tabelle
**/
$("table").prepend( $('<thead></thead>').append($('table tr:first').remove()) );

/*
* FORMS
* classi per form ed inputs
*/
$("input:not(.datepicker)").addClass("input-block-level");
$("textarea").addClass("input-block-level");

/*
* BOTTONI
* classi per bottoni, link etc.
*/
$(":submit").addClass("btn btn-success");
$(".actions ul li a").addClass("btn-block");
$("#content a").addClass("btn");
$("div.actions").addClass("row");
$(".actions a[href*='delete']").addClass("btn-danger");
$("a[href*='add']").addClass("btn-primary");
$("a[href*='view']").prepend("<i class='icon-search'></i> ");
$("a[href*='edit']").prepend("<i class='icon-edit'></i> ");
$("a[href*='delete']").prepend("<i class='icon-remove'></i> ");
$("form[action*='delete']").next("a").prepend("<i class='icon-remove icon-white'></i> ").addClass("btn-danger");
/**/
});