CakePHP 2.0 avec Twitter Bootstrap
Y at-il un moyen de configurer CakePHP pour que cela fonctionne bien avec Twitter Bootstrap? Je réalise que cette question a déjà été posée ici , mais la réponse n’a pas été vraiment complète.
Il existe également de nombreux tutoriels, mais ils sont tous obsolètes ou ne fonctionnent pas, par exemple: Construisez une application PHP en utilisant CakePHP et (Twitter) Bootstrap, Part 1 .
Merci!
En supposant que le fichier css soit inclus dans votre mise en page dans votre vue, vous pouvez utiliser les formulaires suivants:
<?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>'));
?>
J'ai trouvé cette méthode fonctionner parfaitement avec cake2.0 et bootstrap 2.0
Cela produira ce qui suit
<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>
Le code HTML ci-dessus se trouve après que le formulaire a été soumis et qu'une erreur a été renvoyée.
IMHO, le meilleur plugin Twitter Bootstrap (+ recommandé par l'un des développeurs de Cake dans le traqueur de bugs) est:
https://github.com/slywalker/TwitterBootstrap
Ce qui est pratique avec celui-ci, c’est qu’il utilise le pseudonyme de Cake 2 pour les aides, vous n’avez donc pas besoin de changer votre code de vue.
Ainsi, le $this->Html-> et le $this->Form-> normaux dans tous vos old code généreront le balisage Bootstrap. Impressionnant.
En voici un plus récent:
http://drawrdesign.com/Twitter-bootstrap-for-cakephp
Page Github:
https://github.com/Rhym/cakeStrap
Commander notre Twitter Bootstrap Helper
Rendons les choses simples et mettons à jour ceci. Le moyen le plus rapide et le plus simple de procéder est le suivant et est à jour à partir de v: 2.9
Téléchargez les 3 dossiers du bootstrap ici: http://Twitter.github.io/bootstrap/getting-started.html
Puis déballez-les et déplacez-vous:
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/
*** C'EST TRÈS IMPORTANT DE NE PAS METTRE CES FICHIERS DANS LA RACINE DE VOTRE SITE (je vous expliquerai plus tard ...) !!!
Ensuite, dans l'éditeur de code de votre choix (je préfère Netbeans), ouvrez le fichier:
app/View/Layouts/default.ctp
Cela devrait ressembler à:
<?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>
Trouve ça:
echo $this->Html->css('cake.generic');
En dessous, ajoutez ceci:
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');
Trouve ça:
echo $this->fetch('script');
En dessous, ajoutez ceci:
echo $this->Html->script('bootstrap');
echo $this->Html->script('bootstrap.min');
*** Rappelez-vous plus tôt quand j'ai dit que j'allais expliquer pourquoi les fichiers DOIVENT être dans le répertoire webroot (Pour toute personne novice dans MVC)? Le code ci-dessus explique comment Cake inclut ses scripts et ses fichiers CSS. La méthode utilisée à cet effet ressemble à app/webroot/js pour les fichiers javascript. et respectivement dans app/webroot/css pour les fichiers css. Cela rend les fichiers js et css inclus, une synchronisation. Si vous voulez que les fichiers js/css inclus, GLOBALEMENT, incluez-les default.ctp.
* Si vous n'avez besoin que d'un script à utiliser avec une vue/page, utilisez le même code dans le fichier de vue sur lequel vous en avez besoin.
Cela peut sembler un peu compliqué, mais cela ne devrait prendre que 3 minutes pour inclure le bootstrap de Twitter de cette manière.
J'espère que cela t'aides!
Bootstrap n'utilise aucun code côté serveur.
Sauf pour LESS CSS, que vous pouvez compiler en CSS standard sur le serveur, ou comme le montre/ MOINS CSS site, vous pouvez demander au navigateur de le compiler à l'aide de less.js, comme ceci:
<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less">
<script src="less.js" type="text/javascript"></script>
Liez simplement tous les fichiers .less en utilisant stylesheet/less et le fichier less.js et cela devrait fonctionner.
Autre que cela, Bootstrap n'est que HTML et Javascript. il suffit de mettre tout le javascript dans le dossier webroot/js et de faire une mise en page pour le code HTML principal et de commencer.
J'ai eu le même problème en utilisant slywalker/cakephp-plugin-boost_cake. J'ai ouvert un ticket et il l'a fait réparer en quelques heures. Il a mis à jour à 1,03 et m'a dit de l'utiliser comme ceci:
<?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>' )); ?>
J'espère que cela aidera quelqu'un d'autre aussi.
Je suis d’accord avec @Costa, le plugin de Slywalker est la meilleure solution. Voici la nouvelle version de son plugin, fonctionnant avec les branches Twitter Bootstrap 2.x et 3.x.
Ce plugin est bien meilleur car il s'étend bien sur Helper HTML, Helper Form et les alertes.
Je l'ai fait. Ce que vous devrez faire est le suivant:
- créer la mise en page App/Views/Layouts/default.ctp
- copier le code HTML de démarrage dans cette
- mettre à jour la mise en page avec le code spécifique du gâteau
Il fonctionne comme un charme
Regardez le plugin CakePHP AssetCompress qui gère la compilation LESS pour vous si vous avez NodeJS et LESS installé sur votre serveur.
Ensuite, il vous suffit d'inclure les fichiers CSS dans votre mise en page et de styliser les formulaires à l'aide des classes Bootstrap.
Peut-être que vous aimez ce plugin: https://github.com/BradCrumb/lesscompiler .
C'est un composant CakePHP qui compile automatiquement moins de fichiers en fichiers CSS. Je viens de le tester avec Bootstrap et cela fonctionne trouver