Working with Bootstrap 3.3.6 in Liferay 6.2

Question

I am working with Bootstrap 3 in Liferay 6.2. I have inserted bootstrap.css and bootstrap.min.js in CSS and JS. I also changed some style in my custom.css incompatilibilidad

Do you have a better idea about this?

Then I attached the steps that I followed to insert Bootstrap 3 into Liferay 6.2. Good above gives me some compatibility issues ... I would like your opinion, for example, if there is more optimal code for working with these tools and these versions. I need your help to improve this, and that anyone can work with Bootstrap 3 in Liferay 6.2. These are my two cents.

STEPS:

1 - Put Bootstrap CSS, JS and fonts in the _diffs directory folder inside your theme

2 - We open or create the main.css file and call the Bootstrap.css file

3 - In the_normal.vm portal, add two JavaScript calls with the name specified in the above diagram.

4 - We embed CSS classes in custom.css that conflict with the default version 2.3.2 of 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; }

Answer 1

What do you think about this:

"You need to do some tricks to make bootstrap 3 boot parts for their entire lifetime.

I worked with a designer who really wanted to have bootstrap 3 in some parts of liferay.

Here is the hoe, I did it: in the theme project, in the css file, I copied the bootstrap libraries. In this folder, I created a scss file with the following code:

.bootstrap-3 { @import "bootstrap"; }

bootstrap , , scss: _bootstrap.scss, , css.

, , .

AJAX . CSS - id, .

, ... "