CakePHP 2.0 z Twitter Bootstrap

Czy istnieje sposób, aby skonfigurować CakePHP, aby działał dobrze z Twitter Bootstrap? Zdaję sobie sprawę, że to pytanie zostało już zadane tutaj, ale odpowiedź nie była kompletna.

Istnieje również sporo samouczków, ale wszystkie są albo przestarzałe, albo po prostu nie działają, przykład: Zbuduj aplikację PHP przy użyciu CakePHP i (twitter) Bootstrap, Część 1 .

Dzięki!

Author: Community, 2012-02-03
Source

11 answers

Zakładając, że plik css jest zawarty w twoim układzie w widoku formularzy możesz użyć follwoing: 

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

Uznałem, że ta metoda działa idealnie z cake2. 0 i bootstrap 2.0

Spowoduje to następujące 

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

Powyższy kod html jest po przesłaniu formularza i zwróceniu błędu.

 24
Author: chronon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-31 00:37:45

IMHO, najlepsza Wtyczka Twitter Bootstrap (+polecana przez jednego z twórców Cake ' a w bug trackerze) to:

Https://github.com/slywalker/TwitterBootstrap

Przydatne w tym jest to, że używa aliasinguCake 2 dla helperów, więc nie musisz zmieniać żadnego kodu widoku.

Tak więc zwykły $this->Html-> i $this->Form-> w całym Twoimstarym kodzie wyświetli znaczniki Bootstrap. Super.

 16
Author: Costa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-14 03:44:32
 4
Author: Mike Taylor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-17 08:21:16

Sprawdź nasz Twitter Bootstrap Helper

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

 3
Author: Lee Forkenbrock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-27 15:24:03

Uprośćmy to i zaktualizujmy. Najszybszy i najłatwiejszy sposób na to jest następujący i jest aktualny od v:2.9

Pobierz 3 foldery dla bootstrap tutaj: http://twitter.github.io/bootstrap/getting-started.html

Następnie rozpakować je i przenieść: 

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/

* * * bardzo ważne jest, aby nie umieszczać tych plików w katalogu głównym witryny (wyjaśnię później...)!!!

Następnie w wybranym przez Ciebie edytorze kodu(wolę Netbeans) otwórz plik: 

app/View/Layouts/default.ctp

Powinno wyglądać tak: 

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

Znajdź to: 

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

Poniżej dodaj to: 

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

Znajdź to: 

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

Poniżej dodaj to: 

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

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

***pamiętasz, jak mówiłem, że wyjaśniam, dlaczego pliki muszą znajdować się w katalogu webroot(dla każdego, kto jest nowy w MVC)? Powyższy kod jest jak Cake zawiera swoje skrypty i css. Metoda używana do tego wygląda w app / webroot / js dla plików javascript; i odpowiednio w app / webroot / css dla css pliki. To sprawia, że w tym plików JS i css synchronizacji. Jeśli chcesz, aby pliki JS / css były dołączone globalnie, dodaj je domyślnie.ctp.

* Jeśli potrzebujesz tylko skryptu do użycia z jednym widokiem / stroną, użyj tego samego kodu w pliku widoku, na którym go potrzebujesz.

Może to zabrzmieć trochę skomplikowanie, ale powinno to zająć tylko 3 minuty, aby uwzględnić globalny bootstrap Twittera w ten sposób.

Mam nadzieję, że to pomoże!
 2
Author: ThePHPBoss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-11 06:19:47

Bootstrap nie używa żadnego kodu po stronie serwera.

Z wyjątkiem LESS CSS, który możesz skompilować do zwykłego CSS na serwerze, lub jak pokazuje strona LESS CSS , przeglądarka może skompilować go za pomocą less.js w następujący sposób: 

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

Po prostu połącz wszystkie .mniej plików używając stylesheet/less i less.js i powinno działać.

Poza tym Bootstrap to tylko HTML i Javascript. wystarczy umieścić cały javascript w folderze webroot/js i zrobić layout dla głównego HTML i idź już.

 1
Author: L. Adamek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-12 19:28:54

Zrobiłem to. To, co musisz zrobić, to:

  • Utwórz layout App / Views / Layouts / default.ctp
  • Skopiuj Bootstrap html do tego
  • zaktualizuj układ za pomocą kodu cake

It works like a charm

 0
Author: Chuck Burgess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-12 21:44:55

Spójrz na wtyczkę CakePHP AssetCompress, która obsługuje mniej kompilacji dla Ciebie, jeśli masz NodeJS i mniej zainstalowane na serwerze.

Następnie wystarczy dołączyć pliki CSS do układu i styl formularzy za pomocą klas Bootstrap.

 0
Author: fullybaked,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-22 15:38:34

Może podoba ci się ten plugin: https://github.com/BradCrumb/lesscompiler .

Jest to komponent CakePHP, który automatycznie kompiluje mniej plików do plików css. Właśnie Przetestowałem go z Bootstrap i działa find

 0
Author: Marc-Jan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-25 18:14:32

Zgadzam się z @ Costa, wtyczka Slywalkera jest najlepszym rozwiązaniem. Oto nowa wersja jego wtyczki, współpracującej zarówno z Twitterem Bootstrap 2.x i 3.x gałęzie.

Ta wtyczka jest o wiele lepsza, ponieważ ładnie rozszerza HTML Helper, Form Helper i alerty.

Wtyczka Fork BoostCake dla CakePHP 2.x at Github

 0
Author: Guillaume Pommier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-16 08:10:02

Miałem ten sam problem używając slywalker / cakephp-plugin-boost_cake. Otworzyłem bilet i naprawił go w kilka godzin. Zaktualizował do 1,03 i kazał mi używać go w ten sposób: 

<?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>' )); ?>
Mam nadzieję, że komuś jeszcze to pomoże.
 0
Author: user2658814,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-18 14:05:23