twitter-bootstrap – 在Liferay 6.2中使用Bootstrap 3.3.6

2023年8月29日 227次阅读

我在Liferay 6.2中使用Bootstrap 3.我在CSS和JS中插入了bootstrap.css和bootstrap.min.js.我也在custom.css incompatilibilidad中更改了一些样式

你对它有更好的了解吗？

然后我附上了我在Liferay 6.2中插入Bootstrap 3的步骤.上面给出了一些兼容性问题…我想你的意见,例如,如果一个更优的代码使用这些工具和这些版本.我需要你的帮助才能改进这一点,并且每个人都可以使用Liferay 6.2中的Bootstrap 3.这是我的两分钱.

脚步：

1 – 将Bootstrap CSS,JS和字体放在主题中的_diffs目录文件夹中

2 – 我们打开或创建main.css文件并调用Bootstrap.css文件

3 – 在portal_normal.vm上添加两次JavaScript调用,其名称如上图所示.

4 – 我们在custom.css CSS类中插入与版本2.3.2默认的一个Liferay冲突

— 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中.

我和一位设计师合作过,他真的想在liferay的某些部分使用bootstrap 3 ..

这是我做过的锄头：在主题项目中,进入css文件,我复制了bootstrap库.在该文件夹中,我使用以下代码创建了一个scss文件：

.bootstrap-3 {
  @import“bootstrap”;
}

其中bootstrap指示要包含的文件,根据scss规则：_bootstrap.scss,它基本上是由原始css制作的文件.

诀窍是在需要使用库的任何地方使用命名空间.

在调用AJAX内容时,我们只需要添加类..有时候由于类和liferay使用的数量,CSS规则变得更加棘手,但是优先付费应该解决..

我宁愿使用这种方法,因为它更容易控制与原始库的冲突……“

点赞