CakePHP 2.0 с Twitter Загрузочный

Есть ли способ настроить CakePHP, чтобы он хорошо работал с Twitter Bootstrap? Я понимаю, что этот вопрос уже задан здесь, но ответ не был действительно полным.

Есть также довольно много учебников, но они все либо устарели, либо просто не работают, например: Создайте приложение PHP с помощью CakePHP и ( twitter) Bootstrap, часть 1.

Спасибо!

Ответы

Ответ 1

Предполагая, что файл 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 после того, как форма была отправлена, и была возвращена ошибка.

Ответ 2

IMHO, лучший плагин Twitter Bootstrap (+ рекомендованный одним из разработчиков Cake в трекере ошибок):

https://github.com/slywalker/TwitterBootstrap

Какое удобство в этом заключается в том, что он использует Cake 2 aliasing для помощников, поэтому вам не нужно менять какой-либо код вашего вида.

Таким образом, регулярные $this->Html-> и $this->Form-> во всех ваших старых кодах выводят разметку Bootstrap. Высокий.

Ответ 3

Здесь более новый:
http://drawrdesign.com/twitter-bootstrap-for-cakephp

Страница Github:
https://github.com/Rhym/cakeStrap

Ответ 4

Оформить заказ нашего помощника по загрузке Twitter

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

Ответ 5

Позволяет сделать это простым и обновить это. Самый быстрый и простой способ сделать это следующий и текущий по v: 2.9

Загрузите 3 папки для загрузки: http://twitter.github.io/bootstrap/getting-started.html

Затем распакуйте их и переместите:

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. Метод, который он использует для этого, выглядит в app/webroot/js для файлов javascript; и соответственно в app/webroot/css для файлов css. Это заставляет синхронизировать jS и css файлы. Если вы хотите, чтобы js/css файлы включали GLOBALLY, включите их default.ctp.

* Если вам нужен только script для использования с одним представлением/страницей, используйте этот же код в файле вида, в котором он вам нужен.

Это может показаться немного сложным, но это займет всего 3 минуты, чтобы включить загрузку twitter во всем мире таким образом.

Надеюсь, это поможет!

Ответ 6

Bootstrap не использует серверный код.

За исключением LESS CSS, который вы можете либо скомпилировать до обычного 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, и он должен работать.

Кроме того, Bootstrap - это просто HTML и Javascript. просто поместите все javascript в папку webroot/js и создайте макет для основного HTML и начните.

Ответ 7

Я сделал это. Вам нужно будет сделать следующее:

создать макет App/Views/Layouts/default.ctp
скопируйте bootstrap html в
обновить макет с помощью специального кода торта

Он работает как шарм

Ответ 8

Посмотрите на плагин CakePHP AssetCompress, который обрабатывает LESS-компиляцию для вас, если на вашем сервере установлены NodeJS и LESS.

Затем вам просто нужно включить файлы CSS в свой макет и создать формы с использованием классов Bootstrap.

Ответ 9

Возможно, вам понравился этот плагин: https://github.com/BradCrumb/lesscompiler.

Это компонент CakePHP, который автоматически компилирует меньше файлов в файлы css. Я просто протестировал его с помощью Bootstrap, и он обнаруживает

Ответ 10

Я согласен с @Costa, плагин Slywalker - лучшее решение. Здесь новая версия его плагина, работающая с ветками Twitter Bootstrap 2.x и 3.x.

Этот плагин намного лучше, так как он отлично дополняет Html Helper, Помощник формы и предупреждения.

Fork BoostCake Plugin для CakePHP 2.x в Github

Ответ 11

У меня была такая же проблема, используя 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>' )); ?>

Я надеюсь, что это тоже поможет кому-то другому.