[解決済み] angular 2でbootstrap 4を使用するには?
質問
typescriptで書かれたangular 2のアプリを作っています。bootstrap 4フレームワークをカスタムテーマと組み合わせて使用したいのですが、可能でしょうか?
npmパッケージは、ブートストラップのCSSクラスを使用することを許可しないので、機能しませんが、代わりにカスタムコンポーネントを提供します。( http://github.com/valor-software/ng2-bootstrap )
私のangular 2プロジェクトではsassを使っていますが、bootstrap 4もスタイリングにsassを使っているので、ソースからビルドすることは可能でしょうか?
どのように解決するのですか?
Angular2 CLI用Bootstrap4アルファ(Angular4 CLIでも使用可能)
を使用している場合 angular2 cli/angular 4 cli を実行してください。
npm i bootstrap@next --save
これで、プロジェクトにbootstrap 4が追加されます。
次に
src/style.scss
または
src/style.css
ファイルを作成し、そこにbootstrapをインポートします。
style.cssの場合
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
style.scssの場合
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
scss を使用している場合、デフォルトのスタイリングを scss に変更するよう
.angular-cli.json
:
"defaults": {
"styleExt": "scss",
"component": {}
}
Bootstrap JS コンポーネント
Bootstrap JS コンポーネントを動作させるためには、インポートする必要があります。
bootstrap.js
を
.angular-cli.json
下
scripts
(これは自動的に行われるはずです)
:
...
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"],
...
2017/09/13に更新しました。 Boostrap 4 Betaでは、tether.jsの代わりにpopper.jsを使用するようになりました。そのため、どちらのバージョンを使用しているかによって、スクリプト内でtether.js(アルファ)またはpopper.js(ベータ)のいずれかをインポートしてください。 ご指摘ありがとうございます @MinorThreat
関連
-
[解決済み] angular 2でbootstrap 4を使用するには?
-
[解決済み] package.jsonの各依存関係を最新バージョンに更新する方法は?
-
[解決済み] Node.jsを完全にアンインストールして、最初から再インストールする方法 (Mac OS X)
-
[解決済み] Node.jsのnpmモジュールをアンインストールするにはどうすればよいですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] Twitter Bootstrapのホストバージョンはありますか?[クローズド]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] bootstrapでpanel-bodyの背景色を変更するには?
-
[解決済み] BootstrapでNavbarが折りたたまれない
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み】Bootstrapを使用したフォームのマークエラーについて
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)
-
[解決済み] bowerでbootstrapを使用する
-
[解決済み] Bootstrapでテーブルの上にカーソルを置くと、カーソルの色を変更するにはどうすればよいですか?