5

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 を使用できるようにするために、あなたの助けが必要です。これは私の 2 セントです。

手順:

1 - Bootstrap CSS、JS、およびフォントを、テーマ内の _diffs ディレクトリ フォルダーに配置します。

2 - main.css ファイルを開くか作成し、ファイル Bootstrap.css を呼び出します。

3 - portal_normal.vm で、上記のスキームに示されている名前で JavaScript への 2 つの呼び出しを追加します。

4 - バージョン 2.3.2 のデフォルトの Liferay と競合する custom.css 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; }
4

1 に答える 1

1

これについてどう思いますか：

「ブートストラップ 3 の一部を liferay 内で動作させるには、いくつかのトリックを実行する必要があります。

私は、ライフレイのいくつかの部分でブートストラップ 3 を本当に望んでいたデザイナーと仕事をしました..

これが私がやったことです：テーマプロジェクトで、cssファイルに、ブートストラップライブラリをコピーしました。そのフォルダーに、次のコードで scss ファイルを作成しました。

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

ここで、ブートストラップは、scss ルールに従って、含まれるファイルを示します: _bootstrap.scss は、基本的に元の css から作成されたファイルです。

秘訣は、ライブラリを使用する必要がある場所で名前空間を使用することです。

AJAX コンテンツを呼び出すときは、クラスを追加するだけで済みます。liferay が使用するクラスと ID の量が原因で、CSS ルールが複雑になることがありますが、優先順位を付けて支払うことで解決するはずです。

元のライブラリとの競合を制御しやすいので、むしろこのアプローチを使用します...」

于 2016-03-17T18:11:44.850 に答える