使用Twitter引导的CakePHP 2.0_Cakephp_Cakephp 2.0_Twitter Bootstrap

使用Twitter引导的CakePHP 2.0

cakephp twitter-bootstrap

使用Twitter引导的CakePHP 2.0,cakephp,cakephp-2.0,twitter-bootstrap,Cakephp,Cakephp 2.0,Twitter Bootstrap,有没有一种方法可以配置CakePHP，使其能够与Twitter引导很好地协同工作？我意识到这个问题已经被问过了，但答案并不完全还有相当多的教程，但它们要么已经过时，要么根本不起作用，例如：谢谢引导不使用任何服务器端代码除了更少的CSS，您可以在服务器上编译为常规CSS，或者如网站所示，您可以让浏览器使用LESS.js编译它，如下所示： <link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less">

有没有一种方法可以配置CakePHP，使其能够与Twitter引导很好地协同工作？我意识到这个问题已经被问过了，但答案并不完全

还有相当多的教程，但它们要么已经过时，要么根本不起作用，例如：

谢谢

引导不使用任何服务器端代码

除了更少的CSS，您可以在服务器上编译为常规CSS，或者如网站所示，您可以让浏览器使用

LESS.js

编译它，如下所示：

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

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

只需使用

stylesheet/less

和

less.js

文件链接所有.less文件，它就可以工作了

除此之外，引导程序只是HTML和Javascript。只需将所有javascript放在

webroot/js

文件夹中，为主HTML做一个布局，就可以开始了。

我已经这样做了。您需要执行以下操作：

创建布局App/Views/Layouts/default.ctp
将引导html复制到
使用特定于蛋糕的代码更新布局

它就像一个魔咒

看看CakePHP插件AssetCompress，如果您的服务器上安装了NodeJ和更少的插件，它可以为您处理更少的编译

然后，您只需要在布局中包含CSS文件，并使用引导类设置表单样式。

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

查看我们的Twitter引导助手
IMHO，最好的Twitter引导插件（+由bug tracker中的一位Cake开发者推荐）是：

这一点很方便，因为它用于帮助程序，所以您不需要更改任何视图代码
因此，所有旧代码中的常规$this->Html->
和$this->Form->
将输出引导标记。太棒了。
这里有一个新的：


Github页面：

也许你喜欢这个插件：
它是一个CakePHP组件，可以自动将较少的文件编译为css文件。我刚刚用Bootstrap测试了它，它可以工作。让我们简化并更新它。最快、最简单的方法如下所示，并且从v:2.9开始是最新的
在此处下载引导程序的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('bootstrap');

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

echo $this->Html->css('bootstrap-responsive');

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

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

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

找到这个：
echo $this->Html->css('cake.generic');

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

在其下方添加以下内容：
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->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文件，请将其包含在default.ctp中
*如果只需要一个脚本用于一个视图/页面，那么在需要它的视图文件上使用相同的代码
这听起来可能有点复杂，但以这种方式在全球范围内包含twitter引导只需3分钟
希望这有帮助 我同意@Costa的观点，Slywalker的插件是最好的解决方案。
这是他的插件的新版本，它与twitterbootstrap2.x和3.x分支一起工作
这个插件更好，因为它很好地扩展了Html帮助程序、表单帮助程序和警报
我在使用slywalker/cakephp-plugin-boost_-cake时也遇到了同样的问题。我开了一张票，几个小时后他就把它修好了。他更新到1,03并告诉我这样使用它：
<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less">
<script src="less.js" type="text/javascript"></script>

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

我想知道如何使表单和按钮与引导一起工作，但这是目前最好的答案。没有帮助，问题是如何使CakePHP打印引导兼容html标记。谢谢！这正是我要找的！不客气。上周我在寻找解决方案时看到了你的帖子。@Jamie谢谢你的回答！非常感谢：-）我想知道在触发验证错误时是否可以将集成到控制div中？它看起来比alert IMO更好。好奇的是，这个插件确实可以工作，但它迫使您使用（并记住）新方法来创建表单输出。slywalker
插件使用标准的Cake方法名称。为什么要同时包含文件的缩小版和普通版bootstrap.min.css
包含与bootstrap.css
完全相同的css，同样，对于其他文件，包括这两个文件，只会引入不必要的http开销。你的答案也不能解决像formHelper这样的问题，因为bootstrap需要一种特定的html格式，而Cake Helper不会直接生成这种格式。请注意，这个插件与bootstrap 3不兼容。作者启动了一个支持Bootstrap3的新插件，但它非常简单，在这一点上几乎没有任何作用：（我个人只是修改了以前的插件以输出新的BS3类名）