prestashop 1.6使用bootstrap插件 - 模态

时间:2016-03-16 07:25:12

标签: twitter-bootstrap prestashop

我正在使用基于bootstrap的默认主题,我正在尝试打开一个简单的模态弹出框。

使用http://www.w3schools.com/bootstrap/bootstrap_modal.asp中的示例,即我创建了一个模块,使用tpl在hookDisplayTop中移植此代码

但模态CSS完全搞砸了,所以我想我应该使用bootstrap CSS,所以我在hookHeader中添加了以下代码:

    $this->context->controller->addCSS ( "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", 'all' );

css仍然很乱,但我可以轻松解决。

我很困惑,因为我期望基于引导程序的主题具有开箱即用的模态(特别是因为prestashop使用了很多弹出窗口)。

另外,如果只包含css,它可能会覆盖我不知道的其他css。

所以我想我错过了一些关于如何将bootstrap插件集成到prestashop的基础知识。

我的问题是:在prestashop默认主题中添加引导插件(例如Modal)的正确方法是什么?

1 个答案:

答案 0 :(得分:2)

正如您在此文件中看到的那样

themes/default-bootstrap/sass/_bootstrap.scss

默认主题中已禁用某些组件(包含模式)。 在制作这个主题时,这确实是一个非常糟糕的决定。

然而,再次包括Bootstrap(就像你一样)更糟糕。你实际上是在复制CSS代码。

如果您必须继续处理当前主题,请仅包含缺少的部分:

bootstrap.css#L5869-L5991

bootstrap.css#L6492-L6498

bootstrap.css#L6513-L6516

制作自定义.css文件并复制此代码,使用相同的方法包含它。

我还可以建议一个简单的PrestaShop主题,它具有更新Bootstrap及其所有组件:PrestaShop/community-theme-16。这是一项正在进行中的工作,可能存在漏洞,但它确实是制作新主题的更好起点