web-dev-qa-db-ja.com

Bootstrap（4）をAngular Material（2）と統合できますか？

私はAngularマテリアル2ライブラリを使用したいと思います。これは、その（増大するリストの）コンポーネントのためです。しかし、bootstrap=に慣れているので、 Bootstrap私は主にそのCSS部分を意味し、JS機能はほとんど必要ありません。

たとえば、マテリアルライブラリでは、リストグループのスタイリングは実質的にゼロですが、Bootstrapは、CSSでそれを提供します。

それらを組み合わせることは良い考えではないことを読んだことを覚えています。私はそのソースを見つけることができず、私は好奇心があります-それは現在のバージョンで本当ですか？もしそうなら、正確には何が矛盾していて、どのようにそれを回避することができますか？

javascriptcsstwitter-bootstrapangularangular-material2
17
Titan

Bootstrapはモジュール式なので、1つの代替アプローチはAngular Materialを使用し、Bootstrapあなたは本当に必要です。

注：インポートするものは何でも、まずインストールする必要がありますbootstrap：

npm install bootstrap --save

そして、必要なsassファイルをグローバルstyle.scss：

 // Imports functions, variables, and mixins that are needed by other Bootstrap files
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

たとえば、すべてのブラウザーで要素をより一貫してレンダリングし、Web標準に準拠させるために、 Bootstrap Reboot を使用することができます。

次に、インポートする必要があるだけです：

// Import Roboot
@import "~bootstrap/scss/reboot";

おそらく Bootstrap Grid System も使用したいと思うでしょう。その場合は、さらに追加できます。

@import "~bootstrap/scss/grid"; // add the grid

だからあなたはあなたのhtmlテンプレートでそれを使うことができるでしょう：

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Bootstrap Utilities を使用することもできます。その場合は、次も追加します。

@import "~bootstrap/scss/utilities"; // add css utilities

私の答えは、ここで詳細に説明されていることに基づいています： https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material -projects /

10
Francesco Borzi

Angular Material 2 はまだ活発に開発されている新しいライブラリです。そのため、多くの豪華なNice to have機能は期待できませんが、長期的に見ると、Material 2を使用すると多くの利点がありますangularアプリ。ここにいくつかの概要があります：

コンポーネント開発キット

最後のリリースで、Material 2チームは@angular/cdkのコアであるMaterial 2を導入し、開発者が独自のサードパーティコンポーネントを作成するための優れた基盤を提供します。 @angular/cdkに関するドキュメントはまだ多くありませんが、その問題を追跡することで https://github.com/angular/material2/issues/2789 更新できます。

敏感な女神

Material 2には、レスポンシブなゴディを提供する組み込み機能はありません。そのためには @ angular/flex-layout を使用する必要があります。物事はMaterial 2から完全に分離されています-基本的に Flexbox CSS の上にある素晴らしい抽象化です。それを使用すると、レスポンシブなcss mediaQueriesの束全体を自分で書く必要はありません。

ブラウザのサポート

Material 2：IE11 +
Bootstrap 4 IE10 +
Bootstrap 3 IE8 +

ブートストラップ+マテリアル？

2つの重いフロントエンドフレームワークを参照しているバンドルの合計サイズについて考える場合、アプリで両方のフレームワークを組み合わせる必要がある理由はありません。また、その場合、同じプロジェクトで両方を使用して発生する可能性のある競合に注意する必要があります。

8
kuncevic.dev

Kuncevicの答えは正しいですが、以下も追加する必要があると思います。

  • Angular Materialは暗黙的にDOM要素をアップグレード/ダウングレードしています
    while Bootstrap is not。つまり、Bootstrapでは、
    ご覧のとおり、Angular Materialの場合、一部の要素は自動的にレンダリングされます。そのため、必要に応じて2つを組み合わせる方法がよくわかりません。追加、Angularの カプセル化の表示 ミックスでは、事態はさらに複雑になります。
  • 協力の余地があるのはグリッドだけです。君は
    Bootstrap for the grid and Angular Material for the rest、but with Angular Flex Layout （Kunsevicが既に述べたように）あなたは本当にする必要はありません。小さな学習曲線がありますが、Angularを使用する場合、それは価値があります。
  • ブートストラップのCSSはAngular MaterialのCSSと競合します。一緒に使用すると、フローティングボタン内のアイコンなどの特定の要素が正しく中央に配置されないなどに気づきました。これは難しい修正ではないはずですが、その理由Angular Flex？

お役に立てば幸いです。

4
Kostas Siabanis

2019年にAngularカンファレンスは、bootstrapとangular資料を組み合わせて問題がないか説明しました。 https://www.youtube.com/watch?v=xLj1qw82oAo&feature=youtu.be

2
Sachithra Dilshan