私は最近angle2-materialを使用し始めました。角度flexは、矛盾した動作/混乱/複雑なドキュメント(...)で私を狂ってしまいます。今では、角度フレックスレイアウトを取り除き、ブートストラップ3.xグリッドシステムを使いたいと思っています。私はブートストラップがいくつかの角材料スタイルを上書きするかもしれないという別の質問を読んだ。だから私の質問です:(ブートストラップ3.xのグリッドシステムと組み合わせて角物質のコンポーネントを使用する)誰もこれを前にしていますか?もしそうなら、メジャーが間違っていたり、上書きされたりしていましたか?angle2-materialでangle-flex-layoutの代わりにBootstrap 3.xのグリッドシステムを使用するのは悪い考えですか?
答えて
そこに、それをしました。私は、フレックスレイアウトシステムがBootstrapのグリッドシステムよりも悪い/優れている理由を考えることはできませんが、私はその決定に個人的な好みを受け入れることができます。私の経験はAngular 1.xとそのマテリアルデザインコンポーネントにありましたが、私は答えはまだ立っていると思います。
グリッド/レイアウト対コンポーネント
あなたはそれがかなりよくかつ容易に作業することができます位置決めするために、次にブートストラップのグリッド設定とAMDのレイアウト設定を混在しないように十分注意している場合。ラベル、異なるタイプの入力、ボタン、ツールチップ、アイコンなどが含まれるフォームを使用する場合は、同じ時間
でブートストラップおよびAMDの両方のコンポーネントを使用して
1:さまざまなコンポーネントを使用する際に問題が上昇しますあなたは、最も予期せぬ場所でお互いを上書きし続けるCSS階層の巨大な混乱に遭うでしょう。ほんの少しの例:BS 3.xとAMDは、いくつかのケースでブラウザの互換性とアクセシビリティをやや異なったものにしています。 AMDのコンポーネントの幅と位置は、BSのグリッドシステムにある場合は100%ではない親コンテナのレイアウト設定に大きく依存します(おそらく最もブロックの問題)。無効/必須/プレースホルダ/などを想像してみてください。入力の設定:はい、それは、位置、テキストサイズ、および任意の可能な方法で巨大な混乱になります。
2. DOM重いアプローチ
両方のシステムは、DOMのレンダリングに関してはかなり重いです、今の両方を追加することを想像してみてください。大量のデータを表示する場合(数百万ではなく数百または数千)、スタイルやJSの機能を同じ要素に複数回(重なり合ったり上書きしたりして)適用すると、ブラウザに大きな負担がかかりますそれをレンダリングしようとします。これは私の経験では、いくつかのアクションボタンを含むリストに〜2k個のアイテムを表示しなければならなかったので、本当に大きな問題でした。どんな(IE10 +)ブラウザでも苦労してはいけませんでしたが、そうしました。
3.スタイリングの挙動、少なくとも最後にではなく、相互作用
は、私はそれがあまりにも多くの予期せぬ問題を作成したという意味で、それが信頼できない見つけました。 UIを作成しUXと応答性に集中しようとすると、5分ごとに小さな位置決め問題をデバッグすることができました。それは巨大な手間であり、異なる画面上の異なるブラウザで同じに見えるかどうか(少なくとも類似しているかどうかは決してわかりませんでした) UIを最適化するのは、通常は少なくとも3回かかりました。最後に、CSSとJSのスパゲッティの巨大なボウルを使ってそこに立っていました。
解決策? (種類)
MD Bootstrapは私の次のプロジェクトで良い方向に私を指摘した素晴らしいツールです。だからMaterializeです。私はこれらがあなたのすべての問題を解決し、彼らは唯一のことだと言っているわけではありませんが、彼らは私に大きな方向を指摘しました:あなたのUIには何が必要でしょうか最も多くを選択してください。グリッドのような配置をしているなら、BSを使い、CSSライブラリを使ってMDを模倣してください。あなたが角度のMVCとJSの柔軟性を必要とするなら、あなたはAMDと一緒に行くべきですが、良いレイアウト処理を考え出してください。
私の経験共有はあなたを助けたかったし、少なくとも良い方向を指摘してくれることを願っています。数ヶ月前に戻って私の研究で私を助けたいくつかのさらに読み:非常に詳細な回答のため
Using Bootstrap for Angular and Material design for Angular together
Combining angular material with twitter bootstrap without conflicts
- 1. はforループの代わりにmapを使用しています.JSでは悪い考えですか?
- 2. 3.x/4.xの代わりにXCode 2.5を使用するのは賢明ではありませんか?
- 3. [x]の代わりにoperator.itemgetter(x)を使用する理由は何ですか?
- 4. GCCの-fms-extensionsを使うのは悪い考えですか?
- 5. Rhino.Commonsユニットワークとリポジトリを使用するのは悪い考えですか?
- 6. ネイティブメソッドをオーバーライドするのはなぜ悪い考えですか?
- 7. Firebase 3.xのFirebase Secretの代わり
- 8. 巻き戻す代わりに複数のセグを使用して戻ることは悪い考えですか?
- 9. カスタムプレリュードモジュール - 悪い考えですか?
- 10. whileループの代わりにセマフォを使用する。これは良いか悪いですか?
- 11. MySQLテーブルのブール値フィールドの代わりにenum( 'y'、 'n')を使用するのは悪いですか?
- 12. WooCommerce 3では$ product-> variation_idの代わりに何が使えますか?
- 13. SQLExecDirectをSQLPrepare + SQLBindParameter + SQLExecuteの代わりに書式設定済みのクエリ文字列と併用するのは悪い考えですか?
- 14. 水平スクロールバーを隠すのは悪い考えですか?
- 15. 既存のサイトで.htaccessの代わりにPhalconを使用したいと考えています
- 16. (x!= n)の代わりに(x < n || x > n)を使用する点は何ですか?
- 17. Magentoでセッションキャッシュとバックエンドキャッシュの両方に単一のRedisインスタンスを使用するのは悪い考えですか?
- 18. なぜbootstrapはdisplay:inline-blockの代わりに.spanで浮動小数点数を使用するのですか?
- 19. ドメインをRDSインスタンスに割り当てるのが悪い考えですか?
- 20. バックエンドサービスにユーザーを認証するためにSAMLベアラトークンを使用するのは悪い考えですか?
- 21. Linqはselect()です。SingleorDefault()は悪い考えですか?
- 22. 複数のSQLデータベースを1つのアプリケーションに使用するのは悪い考えですか?
- 23. インターセプタの代わりにGrails 3でフィルタを使用するには?
- 24. なぜループの内部は悪い考えですか?
- 25. <body>要素のシャドウDOMは悪い考えですか?
- 26. プロローグの初心者 - これは悪い考えですか?
- 27. indexeddbコマンドの連鎖は悪い考えですか?
- 28. Python標準のcontextlibで `x .__ enter __()`の代わりに `type(x).__ enter __(x)`を使うのはなぜですか?
- 29. Cakephp 3:エンティティからテーブル関数を呼び出すのは悪いのか良い考えですか?
- 30. これはリモート接続には悪い考えですか?
感謝。だから、私はあなたを正しく理解していれば、グリッドシステムにはブートストラップ、それ以外には角度材料を使用すればOKです。私はmd-bootstrapでUIを書き直したり、レイアウトを書き直したいという具合にしたくありません。 – user2094257
システムに大量のデータが表示されておらず、それほど複雑ではない場合は、2つのシステムのオーバーラップ/上書きスタイルのためにUIの最適化にかなりの時間を費やすことになります。それは不可能ではない、それは私のプロジェクトのために終わりに働いた。 –