web-dev-qa-db-ja.com

Twitter付きCakePHP 2.0 Bootstrap

Twitterブートストラップでうまく機能するようにCakePHPを構成する方法はありますか？この質問はすでに尋ねられていると思います here が、答えは完全ではありませんでした。

かなりの数のチュートリアルも世に出ていますが、それらはすべて古くなっているか、まったく機能していません。例： CakePHPと（Twitter）ブートストラップを使用したPHPアプリケーションの構築、パート1 。

ありがとう！

cakephpcakephp-2.0twitter-bootstrap
23
skimberk1

Cssファイルがフォームのビューのレイアウトに含まれているとすると、次のように使用できます。

<?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>'));
            ?>

私はこの方法がcake2.0とbootstrap 2.0

これは以下を生成します

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

上記のhtmlは、フォームが送信されてエラーが返された後のものです。

24
user140291

私見、最高のTwitter Bootstrapプラグイン（+バグトラッカーのCake開発者の1人が推奨）：

https://github.com/slywalker/TwitterBootstrap

このコードの便利な点は、ヘルパーに Cake 2のエイリアス を使用しているため、ビューコードを変更する必要がないことです。

したがって、通常の$this->Html->および$this->Form->すべてのoldコードでBootstrapマークアップを出力します。素晴らしい。

16
Costa

ここに新しいものがあります：
http://drawrdesign.com/Twitter-bootstrap-for-cakephp

Githubページ：
https://github.com/Rhym/cakeStrap

4
Mike Taylor

TwitterをチェックBootstrap Helper

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

3
Lee Forkenbrock

簡単にして、これを更新してみましょう。これを行う最も速く簡単な方法は次のとおりであり、v：2.9の時点で最新です。

bootstrap here： http://Twitter.github.io/bootstrap/getting-started.html の3つのフォルダーをダウンロードします

次に、それらを開梱して移動します。

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/

***これらのファイルをサイトのルートに配置しないことが非常に重要です（後で説明します...）!!!

次に、選択したコードエディター（Netbeansの方が好きです）でファイルを開きます。

app/View/Layouts/default.ctp

次のようになります。

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

これを見つける：

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

その下にこれを追加します：

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');

これを見つける：

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

その下にこれを追加します：

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

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

***ファイルがwebrootディレクトリになければならない理由を説明するつもりであると以前に述べた（MVCを初めて使用する場合）上記のコードは、Cakeがスクリプトとcssをインクルードする方法です。このために使用するメソッドは、javascriptファイルのapp/webroot/jsを探します。 cssファイルの場合は、それぞれapp/webroot/cssにあります。これにより、jsとcssのファイルを同期させることができます。 js/cssファイルをグローバルに含めたい場合は、default.ctpを含めます。

* 1つのビュー/ページで使用するスクリプトのみが必要な場合は、必要なビューファイルで同じコードを使用します。

少し複雑に聞こえるかもしれませんが、Twitterを含めるのに3分しかかかりませんbootstrapこの方法でグローバルに。

お役に立てれば！

2
ThePHPBoss

ブートストラップはサーバー側のコードを使用しません。

サーバー上の通常のCSSにコンパイルできるLESS CSSを除いて、または LESS CSS サイトが示すように、次のようにless.jsを使用してブラウザーでコンパイルできます。

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

stylesheet/lessとless.jsファイルを使用してすべての.lessファイルをリンクするだけで動作します。

それ以外はBootstrapは単なるHTMLとJavascriptです。すべてのJavaScriptをwebroot/jsフォルダに配置し、メインHTMLのレイアウトを作成してから始めましょう。

1
L. Adamek

Slywalker/cakephp-plugin-boost_cakeを使用して同じ問題が発生しました。私は切符を開けました、そして、彼はそれを数時間で直しました。彼は1,03に更新し、次のように使用するように指示しました。

<?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>' )); ?>

それが他の人にも役立つことを願っています。

0
user2658814

@Costaに同意します。Slywalkerのプラグインが最適なソリューションです。これが彼のプラグインの新しいバージョンで、Twitter Bootstrap 2.xおよび3.xブランチの両方で動作します。

このプラグインは、Htmlヘルパー、フォームヘルパー、アラートを適切に拡張するため、はるかに優れています。

GithubにあるCakePHP 2.xのFork BoostCakeプラグイン

0
Guillaume Pommier

私はこれをしました。次のことを行う必要があります。

  • レイアウトApp/Views/Layouts/default.ctpを作成します
  • bootstrap htmlをそれにコピーします
  • ケーキ固有のコードでレイアウトを更新する

それは魅力のように機能します

0
Chuck Burgess

サーバーにNodeJSとLESSがインストールされている場合は、LESSコンパイルを処理するCakePHPプラグインAssetCompressをご覧ください。

次に、CSSファイルをレイアウトに含め、Bootstrapクラスを使用してフォームのスタイルを設定するだけです。

0
fullybaked

多分あなたはこのプラグインが好きです： https://github.com/BradCrumb/lesscompiler 。

それは自動的に少ないファイルをcssファイルにコンパイルするCakePHPコンポーネントです。 Bootstrapでテストしたところ、うまくいきました

0
Marc-Jan