在 Liferay 6.2 中使用 Bootstrap 3.3.6 [英] Work with Bootstrap 3.3.6 in Liferay 6.2
问题描述
我正在 Liferay 6.2 中使用 Bootstrap 3.我在 CSS 和 JS 中插入了 bootstrap.css 和 bootstrap.min.js.我还在 custom.css incompatilibilidad 中更改了一些样式
I'm working with Bootstrap 3 in Liferay 6.2. I inserted the bootstrap.css and bootstrap.min.js in the CSS and JS. I've also changed some style in my custom.css incompatilibilidad
你有更好的想法吗?
然后我附上了在 Liferay 6.2 中插入 Bootstrap 3 所遵循的步骤.以上给了我一些兼容性问题......我想听听你的意见，例如，如果有更优化的代码来使用这些工具和这些版本.我需要您的帮助来改进这一点，并且每个人都可以在 Liferay 6.2 中使用 Bootstrap 3.这是我的两分钱.
Then I attached the steps I followed to insert Bootstrap 3 in my Liferay 6.2. Well above gives me a few compatibility issues ... I would like your opinion, for eg if a more optimal code to work with these tools and these versions. I need your help to improve this and that everyone can work with Bootstrap 3 in Liferay 6.2. This is my two cents.
步骤:
1 - 将 Bootstrap CSS、JS 和字体放在主题内的 _diffs 目录文件夹中
1 - Put the Bootstrap CSS, JS, and fonts in _diffs directory folder inside your theme
2 - 我们打开或创建 main.css 文件并调用文件 Bootstrap.css
2 - We open or create the main.css file and make a call to the file Bootstrap.css
3 - 在 portal_normal.vm 上添加两个对 JavaScript 的调用，名称如上述方案所示.
3 - On the portal_normal.vm add two calls to JavaScript with the name shown in the above scheme.
4 - 我们在 custom.css 中插入与 2.3.2 版本默认的 Liferay 冲突的 CSS 类
4 - We insert in custom.css CSS classes that conflict with the version 2.3.2 default one Liferay
--- custom.css ---
--- custom.css ---
.signed-in .collapse { display:block; }
.lfr-edit-layout-panel .collapse{ display:block; }
.dockbar.navbar-static-top .collapse { display: block; }
.navbar-inner .collapse{ display:block; }
.dockbar-ready section#content { padding: 0 0 0 0; }
.dockbar.navbar-static-top {
background-color: transparent;
padding: 0px;
}
.dockbar-messages{ display:none; }
.lfr-device-preview{ z-index: 1000; }
.modal{ display:block; }
.modal-hidden{ display:none; }
推荐答案
你觉得这个怎么样:
"您需要做一些技巧才能使 bootstrap 3 的部分功能在 liferay 中工作.
" You need to do some tricks to make parts of bootstrap 3 work within liferay.
我曾与一位设计师合作，他真的很想在 Liferay 的某些部分使用 Bootstrap 3..
I have worked with a designer who really wanted to have bootstrap 3 in some parts of liferay..
这是我完成的锄头:在主题项目中，我将引导程序库复制到 css 文件中.在该文件夹中，我使用以下代码创建了一个 scss 文件:
Here is hoe I have done it: On the theme project, into the css file, I copied the bootstrap libraries. On that folder I created a scss file with the following code:
.bootstrap-3 {@import "引导程序";}
根据 scss 规则，bootstrap 指示要包含的文件:_bootstrap.scss 基本上是由原始 css 制成的文件.
where the bootstrap indicates a file to be included, according to the scss rules: _bootstrap.scss which was basically a file made from the original css.
诀窍是在需要使用库的任何地方使用命名空间.
The trick is to work with namespaces wherever you need to use the library.
在调用 AJAX 内容时，我们只需要添加类.. 有时，由于类和 id liferay 使用的数量，CSS 规则变得更加棘手，但按优先级付费应该可以解决..
When calling AJAX content, we just need to add the class.. some times the CSS rules get trickier due to the amount of classes and id liferay uses, but paying with priorities should solve..
我宁愿使用这种方法，因为它更容易控制与原始库的冲突..."
I rather use this approach as it is easier to control conflicts with the original library..."
这篇关于在 Liferay 6.2 中使用 Bootstrap 3.3.6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
