CakePHP 2.0 avec Twitter Bootstrap

Est-il un moyen de configurer CakePHP pour que cela fonctionne bien avec Twitter Bootstrap?
Je me rends compte que cette question a déjà été posée ici, mais la réponse n'était pas vraiment complète.

Il y a aussi tout à fait quelques tutoriels là-bas, mais ils sont tous obsolètes ou tout simplement pas de travail, par exemple: Construire une application PHP avec CakePHP et (twitter Bootstrap, Partie 1.

Merci!

InformationsquelleAutor skimberk1 | 2012-02-03

En supposant que le fichier css est inclus dans votre mise en page de votre point de vue pour les formulaires, vous pouvez utiliser la forme suivante:

<?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é que cette méthode fonctionne parfaitement avec cake2.0 et bootstrap 2.0

Ceci va produire la suite de

<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 est une fois que le formulaire a été soumis et une erreur a été renvoyée.

Merci! C'est exactement ce que je cherchais!
Vous êtes les bienvenus. J'ai vu votre post de la semaine dernière quand je cherchais la solution moi-même.
merci pour la réponse! Beaucoup apprécié 🙂 je me promenais si son possible pour intégrer le <span class="aide en ligne"> dans le contrôle de la div lorsqu'une erreur de validation est déclenchée? Il a l'air mieux que l'alerte de l'OMI.

InformationsquelleAutor

16

À mon humble avis, le meilleur de Twitter Bootstrap plugin (+ recommandé par l'un des Gâteau devs dans le bug tracker) est:

https://github.com/slywalker/TwitterBootstrap

Ce qui est à portée de main à ce sujet est qu'il utilise Gâteau 2 de l'aliasing pour les assistants de sorte que vous n'avez pas besoin de changer tout votre code de vue.

De manière régulière $this->Html-> et $this->Form-> dans toutes vos vieux code de sortie de Bootstrap de balisage. Génial.
- Noter que ce plugin n'est pas compatible avec Bootstrap 3. L'auteur a commencé un nouveau plugin avec Bootstrap 3, mais c'est très minimaliste et à peine n'importe quoi en ce moment: github.com/slywalker/cakephp-plugin-boost_cake (personnellement, je l'ai simplement modifié l'extension précédente, à la sortie de la nouvelle BS3 les noms de classe)
InformationsquelleAutor Costa
4

Voici un autre plus récent:

http://drawrdesign.com/twitter-bootstrap-for-cakephp

Github page:

https://github.com/Rhym/cakeStrap
- +1, facile à utiliser et fonctionne bien.
InformationsquelleAutor Mike Taylor
3

Notre caisse Twitter Bootstrap Helper

https://github.com/loadsys/twitter-bootstrap-helper
- Pour les curieux, ce plugin fonctionne, mais il vous oblige à utiliser (et rappelez-vous) de nouvelles méthodes pour créer un formulaire de sortie. Le slywalker plugin utilise la norme de Gâteau noms de méthode.
InformationsquelleAutor Lee Forkenbrock

Permet de faire simple et de mettre à jour ce. La manière la plus rapide et la plus simple façon de le faire est comme suit et est en cours de v:2.9

Télécharger les 3 dossiers pour le bootstrap ici:
http://twitter.github.io/bootstrap/getting-started.html

Puis de décompresser et de passer:

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/

***IL EST TRÈS IMPORTANT QUE VOUS NE pas METTRE CES FICHIERS À LA RACINE DE VOTRE SITE(je l'expliquerai plus tard...)!!!

Puis, dans l'éditeur de code de votre choix(je préfère Netbeans) ouvrez le fichier:

app/View/Layouts/default.ctp

Il 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>

Trouver ceci:

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

Ci-dessous, il ajoute 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');

Trouver ceci:

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

Ci-dessous, il ajoute 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 ceux et celles qui MVC)? Le code ci-dessus est de savoir comment Gâteau comprend ses scripts et css.
La Méthode qu'il utilise pour cette recherche dans app/webroot/js pour les fichiers javascript; et respectivement dans app/webroot/css pour les fichiers css. De ce fait, y compris les fichiers css et js un jeu d'enfant. Si vous souhaitez que le js/css fichiers inclus à l'échelle MONDIALE les inclure par défaut.ctp.

*Si vous avez seulement besoin d'un script pour une utilisation avec une seule vue/page puis utiliser ce même code sur le fichier de vue vous avez besoin sur.

Il peut sembler un peu compliqué, mais il ne devrait prendre que 3 min pour inclure le twitter bootstrap à l'échelle mondiale de cette façon.

Espérons que cette aide!

Pourquoi êtes-vous y compris le minimisé et la version normale des fichiers? bootstrap.min.css contient exactement le même css que bootstrap.css et de même pour les autres fichiers, y Compris à la fois juste introduit inutile http généraux. Votre réponse n'est pas de résoudre les questions en rapport avec des choses comme la formHelper comme bootstrap s'attend à un certain format html, ce qui le Gâteau, les aides ne produisent pas de hors-the-box.

InformationsquelleAutor ThePHPBoss

1

Bootstrap ne pas utiliser n'importe quel code côté serveur.

Sauf pour les MOINS de CSS, que vous pouvez compiler vers réguliers CSS sur le serveur, ou que le MOINS CSS site indique que vous pouvez avoir le navigateur 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>
```
Juste un lien entre tous les .moins de fichiers à l'aide de stylesheet/less et la less.js fichier et cela devrait fonctionner.

Autres que Bootstrap est juste le HTML et le Javascript. il suffit de mettre tout le code javascript dans le webroot/js dossier et faire une mise en page pour le HTML principal et aller de l'avant.
- Je voulais savoir comment faire les formes et les boutons de travailler avec Bootstrap, mais c'est la meilleure réponse actuelle.
- N'aide pas, la question était de savoir comment faire CakePHP impression bootstrap compatible balisage html.
InformationsquelleAutor L. Adamek
0

Je l'ai fait. Ce que vous devez faire est la suivante:
- créer la mise en page App/Views/Layouts/default.ctp
- copie du fichier d'amorce html dans
- mise à jour de la mise en page avec le gâteau code spécifique
Il fonctionne comme un charme

InformationsquelleAutor Chuck Burgess
0

Regarder le plugin CakePHP AssetCompress qui gère MOINS de compiler pour vous si vous avez NodeJS et MOINS installé sur votre serveur.

Ensuite, il vous suffit d'inclure les fichiers CSS dans votre mise en page et le style des formulaires en utilisant le Bootstrap classes.

InformationsquelleAutor fullybaked
0

Peut-être que vous aimez ce plugin: https://github.com/BradCrumb/lesscompiler.

C'est un CakePHP Composant qui compile automatiquement les moins de fichiers pour les fichiers css. Je l'ai juste testé avec Bootstrap et il fonctionne à trouver

InformationsquelleAutor Marc-Jan
0

Je suis d'accord avec @Costa, Slywalker du plugin est la meilleure solution.
Voici la nouvelle version de son plugin, en collaboration avec Twitter Bootstrap 2.x et 3.x branches.

Ce plugin est de loin préférable, car il s'étend bien Helper Html, Formulaire d'aide et d'alertes.

Fourche BoostCake Plugin pour CakePHP 2.x sur Github

InformationsquelleAutor Guillaume Pommier
0

J'ai eu le même problème à l'aide de slywalker /cakephp-plugin-boost_cake. J'ai ouvert un ticket et il l'a résolu dans 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 aide quelqu'un d'autre, trop.

InformationsquelleAutor user2658814

Vous devez vous connecter pour publier un commentaire.