CakePHP 2.0 с Twitter Bootstrap - PullRequest
       43

CakePHP 2.0 с Twitter Bootstrap

23 голосов
/ 03 февраля 2012

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

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

Спасибо!

Ответы [ 11 ]

24 голосов
/ 01 марта 2012

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

16 голосов
/ 28 октября 2012

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

https://github.com/slywalker/TwitterBootstrap

Что удобно в этом, так это то, что он использует Псевдоним торта 2 для помощников, поэтому вам не нужно менять код вашего представления.

Так что обычные $this->Html-> и $this->Form-> во всех ваших старых *Код 1013 * выведет разметку Bootstrap.Потрясающе.

4 голосов
/ 17 апреля 2013
3 голосов
/ 27 апреля 2012

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

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

2 голосов
/ 05 июня 2013

Позволяет упростить и обновить это.Самый быстрый и простой способ сделать это следующим образом, и он актуален на 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.

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

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

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

1 голос
/ 12 февраля 2012

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>

Просто свяжите все файлы .less, используя stylesheet/less и файл less.js, и это должно работать.

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

0 голосов
/ 18 октября 2013

У меня была такая же проблема при использовании 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 голосов
/ 16 октября 2013

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

Этот плагин намного лучше, так как прекрасно расширяет Html Helper, Form Helper и оповещения.

Плагин Fork BoostCake для CakePHP 2.x на Github

0 голосов
/ 25 мая 2013

Может быть, вам нравится этот плагин: https://github.com/BradCrumb/lesscompiler.

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

0 голосов
/ 22 февраля 2012

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

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

...