CakePHP 2.0 con Twitter Bootstrap

Question

C'è un modo per configurare CakePHP affinché funzioni bene con Twitter Bootstrap? Mi rendo conto che questa domanda è già stata posta here, ma la risposta non è stata davvero completa.

Ci sono anche un bel po 'di tutorial là fuori, ma sono tutti obsoleti o semplicemente non funzionanti, esempio: Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1.

Grazie!

Answer 1

Supponendo che il file CSS è incluso nel layout nella vista per le forme che è possibile utilizzare il follwoing:

<?php echo $this->Form->create('User', array(
'inputDefaults' => array(
    'div' => 'control-group', 
    'label' => array('class' => 'control-label'), 
    'between' => '<div class="controls">', 
    'after' => '</div>', 
    'class' => 'span3', 
    'error' => array('attributes' => array('wrap' => 'div', 'class' => 'alert alert-error')) 
))); 

echo $this->Form->input('password',array(
       'after' => '<span class = \'help-inline\'>Minimum of 5 characters.</span></div>')); 
      ?> 

ho trovato questo metodo per funzionare perfettamente con cake2.0 e bootstrap 2.0

Ciò produrrà il seguente

<div class="control-group required error"> 
<label for="UserPassword">Password</label> 
<div class="controls"> 
<input name="data[User][password]" class="span3 form-error" type="password" value="" id="UserPassword"> 
<span class="help-inline">Minimum of 5 characters.</span></div> 
<div class="alert alert-error">You must provide a password.</div> 
</div> 

L'html precedente è dopo che il modulo è stato inviato ed è stato restituito un errore.

Answer 2

Bootstrap non utilizza alcun codice lato server.

Tranne MENO CSS, che è possibile compilare verso il basso per regolare CSS sul server, o come il sito LESS CSS mostra si può avere il browser compilare utilizzando less.js in questo modo:

<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less"> 
<script src="less.js" type="text/javascript"></script> 

Basta collegare tutti i file .less usando stylesheet/less e il file less.js e dovrebbe funzionare.

Oltre a ciò Bootstrap è solo HTML e Javascript. metti tutto il javascript nella cartella webroot/js e crea un layout per l'HTML principale e vai avanti.

Answer 3

Ho fatto questo. Quello che dovrete fare è la seguente:

• creare il layout App/Vista/Layout/default.ctp
• copia il codice HTML bootstrap in quella
• aggiornamento il layout con il codice specifico torta

funziona come un fascino

Answer 4

Dai un'occhiata alla plugin AssetCompress CakePHP che gestisce MENO compilazione per voi se avete NodeJS e meno installato sul server.

Quindi è sufficiente includere i file CSS nel layout e assegnare uno stile ai moduli utilizzando le classi Bootstrap.

Answer 5

Checkout nostro Twitter Bootstrap Helper

https://github.com/loadsys/twitter-bootstrap-helper

Answer 6

IMHO, il miglior plugin di Twitter Bootstrap (+ consigliato da uno dei sviluppatori torta nel bug tracker) è:

https://github.com/slywalker/TwitterBootstrap

Ciò che è utile in questo è che utilizza Cake 2's aliasing per gli helper in modo che non sia necessario modificare alcun codice di visualizzazione.

Così il regolare $this->Html-> e $this->Form-> in tutta la tua vecchio codice emetterà Bootstrap markup. Eccezionale.

Answer 7

Ecco una più recente:
http://drawrdesign.com/twitter-bootstrap-for-cakephp

pagina Github:
https://github.com/Rhym/cakeStrap

Answer 8

Forse ti piace questo plugin: https://github.com/BradCrumb/lesscompiler.

È un componente CakePHP che compila automaticamente meno file in file CSS. L'ho appena testato con Bootstrap e funziona su

Answer 9

Consente di semplificare e aggiornare questo. Il modo più veloce e più semplice per farlo è la seguente ed è aggiornata al v: 2,9

Scarica le 3 cartelle per il bootstrap qui: http://twitter.github.io/bootstrap/getting-started.html

Poi scompattare e spostare:

css/bootstrap.css 
css/bootstrap.min.css 
css/bootstrap-responsive.css 
css/bootstrap-responsive.min.css 

     -TO- 

app/webroot/css/ 

     -THEN MOVE- 

js/bootstrap.js 
js/bootstrap.min.js 

     -TO- 

app/webroot/js/ 

     -THEN MOVE- 

img/glyphicons-halflings-white.png 
img/glyphicons-halflings.png 

     -TO- 

app/webroot/img/ 

*** È MOLTO IMPORTANTE CHE NON METTERETE QUESTI FILES NELLA RADICE DEL VOSTRO SITO (ve lo spiegherò dopo ...) !!!

Poi, nell'editor del codice di vostra scelta (io preferisco Netbeans) aprire il file:

app/View/Layouts/default.ctp 

Esso dovrebbe essere simile:

<?php 
/** 
* 
* PHP 5 
* 
* CakePHP(tm) : Rapid Development Framework (http://cakephp.org) 
* Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* 
* Licensed under The MIT License 
* For full copyright and license information, please see the LICENSE.txt 
* Redistributions of files must retain the above copyright notice. 
* 
* @copyright  Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* @link   http://cakephp.org CakePHP(tm) Project 
* @package  app.View.Layouts 
* @since   CakePHP(tm) v 0.10.0.1076 
* @license  MIT License (http://www.opensource.org/licenses/mit-license.php) 
*/ 

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework'); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<?php echo $this->Html->charset(); ?> 
<title> 
    <?php echo $cakeDescription ?>: 
    <?php echo $title_for_layout; ?> 
</title> 
<?php 
    echo $this->Html->meta('icon'); 

    echo $this->Html->css('cake.generic'); 


    echo $this->fetch('meta'); 
    echo $this->fetch('css'); 
    echo $this->fetch('script'); 

?> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
     <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1> 
    </div> 
    <div id="content"> 

     <?php echo $this->Session->flash(); ?> 

     <?php echo $this->fetch('content'); ?> 
    </div> 
    <div id="footer"> 
     <?php echo $this->Html->link(
       $this->Html->image('cake.power.gif', array('alt' =>  $cakeDescription, 'border' => '0')), 
       'http://www.cakephp.org/', 
       array('target' => '_blank', 'escape' => false) 
      ); 
     ?> 
    </div> 
</div> 
<?php echo $this->element('sql_dump'); ?> 
</body> 
</html> 

Trovare questa:

echo $this->Html->css('cake.generic'); 

Sotto aggiungere questo:

echo $this->Html->css('cake.generic'); 

echo $this->Html->css('bootstrap'); 

echo $this->Html->css('bootstrap.min'); 

echo $this->Html->css('bootstrap-responsive'); 

echo $this->Html->css('bootstrap-responsive.min'); 

Trovare questa:

echo $this->fetch('script'); 

Sotto di esso aggiungere questo:

echo $this->Html->script('bootstrap'); 

echo $this->Html->script('bootstrap.min'); 

*** Ricordate prima, quando ho detto che stavo per spiegare perché i file devono essere nella directory webroot (per qualcuno nuovo di MVC)? Il codice sopra è come Cake include i suoi script e css. Il metodo che usa per questo aspetto in app/webroot/js per i file javascript; e rispettivamente in app/webroot/css per i file css.Questo fa sì che i file js e css siano sincronizzati. Se vuoi includere i file js/css GLOBALLY loro default.ctp.

* Se è necessario solo uno script da utilizzare con una vista/pagina, utilizzare lo stesso codice sul file di visualizzazione su cui è necessario.

Potrebbe sembrare un po 'complicato ma dovrebbe richiedere solo 3 minuti per includere globalmente il bootstrap di Twitter in questo modo.

Spero che questo aiuti!

Answer 10

Sono d'accordo con @Costa, il plug-in di Slywalker è la soluzione migliore. Ecco la nuova versione del suo plugin, che funziona con entrambi i rami Twitter Bootstrap 2.xe 3.x.

Questo plug-in è di gran lunga migliore poiché estende in modo intuitivo Helper, Form Helper e avvisi.

Fork BoostCake Plugin for CakePHP 2.x at Github

Answer 11

Ho avuto lo stesso problema utilizzando slywalker/cakephp-plugin-boost_cake. Ho aperto un biglietto e l'ha fatto riparare in poche ore. Ha aggiornato a 1,03 e mi ha detto di usare in questo modo:

<?php echo $this->Form->input('email', array('label' => array('text' => __('Email:'),), 'beforeInput' => '<div class="input-append">', 'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>')); ?> 

Spero che aiuta qualcun altro, anche.