Bootstrap を使う方法

ここでは Angular 2 プロジェクト内で Bootstrap を利用する方法を説明します。

プロジェクトのディレクトリに移動し、次のコマンドを実行します。

$ npm install ng2-bootstrap --save

--save オプションによって package.json の dependencies セクションに Bootstrap が追加されます。

index.html に Bootstrap のスタイルシートを取り込みます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>How to install Bootstrap</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

x.x.x のところはバージョン番号に書き換えてください。

以上を設定した上で、ng build (とか ng serve) し直せば Bootstrap が利用可能なはずです。

新しいプロジェクトには「Bootstrap (ng-bootstrap) のインストール」の方法をおすすめします。