はじめに
先日、Bootstrap 5 alphaがリリースされました。
jQueryとの依存関係が削除されたりして、シンプルにAngularと一緒に使えると考えました。
これは、そのメモです。
Angularプロジェクトの作成
まずは、テスト用に新しいプロジェクトを作ります。
任意のディレクトリに「angular-bootstrap-test」というプロジェクトを作成します。
$ng new angular-bootstrap-test
$? Would you like to add Angular routing? (y/N) y
$Which stylesheet format would you like to use? (Use arrow keys) CSS
>Sass
Less
Stylus
Bootstrap5のインストール
作成したプロジェクトのデイレクトリに移動して、npmでインストールする。
$cd angular-bootstrap-test
$npm install bootstrap@next
これで、Bootstrap5がインストールされ、angular-bootstrap-test/node_modulesにbootstrapディレクトリができる。
使うための準備
Bootstrap5を使うために、angular.jsonを編集する。
"style":[
"src/styles.css" ,
"node_modules/bootstrap/dist/css/bootstrap.css" //追加
],
"scripts":[
"node_modules/bootstrap/dist/js/bootstrap.js" //追加
],
これで使用できるようになりました。
使ってみる
app.component.htmlに適当に適当に追記してみる。
<p class="bg-dark text-light">Bootstrap test</p>
参考
https://v5.getbootstrap.com/docs/5.0/getting-started/download/