CakePHP:只将bootstrap.css应用于某些视图的内容,而不是布局


CakePHP: Apply bootstrap.css only to content of certain views, not layout

我正在和一位设计师一起开发一个网站,他已经用HTML/CSS对整个静态网页进行了编码。

我们需要一个管理后端和一个Auth组件,所以我认为一个简单的CakePHP应用程序会很好地工作,而不是把一个自定义的PHP/MMySQL解决方案拼凑在一起。我将他的所有静态页面转换为CakePHP语法,使用PagesController创建简单的视图。我使用Bootstrap 3.0为管理后端创建了一个完全独立的布局。

在一些前端页面上,比如我们的"注册"answers"登录页面",我想利用Bootstrap 3.0漂亮的CSS和Javascript组件(尤其是它干净的表单样式)。

然而,当我在布局的<head>中包含Bootstrap时,它与设计者创建的CSS类冲突,完全打乱了页面的布局。

我基本上想知道是否有一种方法可以将CSS样式表ONLY应用于视图的内容(即signup.ctp),而不是其布局(default.ctp)?这会为我节省很多时间和头痛。

在您的视图文件(即signup.ctp)中,只需使用Html助手包含css,如下所示

echo $this->Html->css('your_css_file', null, array(
    'inline' => false
));

并确保布局文件中有$this->fetch('css')行。因此,它将在您定义$this->fetch('css')的部分中包含上述css。

例如:

<head>
    <?php $this->fetch('css') ?>
</head>

将包括您在视图中定义的head部分中的css

您可以做的是将您的内容用一个特定的id(如<div id="bootstrap"></div>)封装在div中,然后用#bootstrap在bootstrap中为所有css选择器做准备。

仅使用HTML助手将Bootstrap 3 css包含在所需的视图文件中:

$this->Html->css()

文档页面:http://book.cakephp.org/2.0/en/core-libraries/helpers/html.html#HtmlHelper::css