web-dev-qa-db-ja.com

MaterializeCssをBootstrapに統合することは可能ですか？

bootstrap と materializecss の両方を同じプロジェクトに統合することが可能かどうか、（テストされていない）自分に尋ねました。

両方のフレームワークは同じ目的のためであり、おそらくいくつかのクラス定義などで重複しているので、スタイリングオプションを拡張するために両方のフレームワークを結合することはまだ可能ですか？

csstwitter-bootstrapwebcss-frameworksmaterialize
33
Nickolaus

MaterializeはBootstrapだけでなく、「ビジュアルレイヤー」にも基づいていません。両方のフレームワークを使用すると、多くの機能が冗長になるため、多くの非互換性が発生するか、少なくとも重複します（グリッド、メニュー、アイコン、等）。

私は個人的にこのプロジェクトを使用しています Bootstrap material design Bootstrapのテーマであり、非常にうまく機能します。 Bootstrapが必要ない場合は、Googleが最近リリースした Material Design Lite も使用できます。これは、マテリアルデザインガイドラインに基づいた軽いCSSフレームワークです。 Angular Material または Polymer と比較して軽量で、Material Designガイドラインを使用していますが、他のJavaScriptフレームワークの一部または必要です（つまり、Angular）。

42
Guillaume

マテリアライズをbootstrap Webサイトに追加し、JC Borlagdanが言ったように、いくつかの重複がある場合でも正常に機能しました。Webサイトインスペクターを使用し、 bootstrapまたはmaterializeプロパティを使用して、気に入っているものを確認し、気に入らないものからスタイリングを削除します。マテリアライズとブートストラップの非縮小バージョンを取得してください。

10
Brian Purgert

可能性はありますが、単一のWebフォームで両方のフレームワークを既にテストしましたが、特に<div>タグに対して、コントロールの一部のプロパティが重複しています 容器 タグのクラス。
グリッドの場合、実際にはブートストラップに続いていますが、なんらかの理由で（これはわかりません）。 <script>タグの順序を再配置しようとしたため、ブートストラップグリッドはまだwebpage/webformで使用されているグリッドのままです。

1
JC Borlagdan

Materialize.cssからGRIDを削除して、カスタムのbootstrapパッケージをコンパイルして、BT GRIDを使用し、ボタン、ラベルなどを使用しないでください。

BT jQueryプラグインを使用しないでください。次にテンプレートでbootstrap.min.cssをコンパイルしてロードし、次に変更されたmaterialize.cssおよびmaterilize.min.jsをロードします。

Materialize.cssから選択してボタン、カード、または色だけを統合し、template.css/style.cssに挿入してbootstrapスタイルを上書きするか、代替のcssクラスを追加することもできます。グリッド。

1
Dennis Heiden

[〜＃〜] css [〜＃〜]ファイルの順序を設定する必要があります

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>

これでbootstrap cssクラスまたはIDをオーバーライドでき、独自のCSSスタイルを作成できます。

1
khurram

それが可能かどうかはわかりません。 Material DesignはGoogleの新しいものであり、その一部としてレスポンシブが含まれていますが、BootstrapライブラリはTwitterからのもので、ほとんどがレスポンシブ指向のようです。
この会話をご覧ください： http://forums.oscommerce.com/topic/407994-material-design/?hl=material
それらは互いに統合されることはなく、ひどく競合するでしょうが、他の誰かがより多くの情報を持っているかもしれません。

0
SAK