bootstrap のお作法

 

? bootstrap とは?

よく「ウェブフレームワーク」などと紹介されていたりするが、直感的にいえば「ウェブのフロントエンド(ウェブページそのもの)を作成する際に、便利な CSS や JavaScript の集まり」と言った方がいいだろう。
実際、その実体(bootstrap.bundle.min.js だとか)は一般の html のページを作成する際にも使える。
データベースやサーバーまで扱えるようなウェブフレームワークとは、ちょっと違う。

? bootstrap 使い方のお作法

bootstrap を導入する際には使い方のお作法(リンクのさせ方など)を知っておかなければならないが、ネット上では古い情報が散見されるので、公式サイトで確認した方がいい。

現在の最新バージョンは bootstrap5 だが、該当ページは

https://getbootstrap.jp/docs/5.0/getting-started/introduction/ 。

以下にあるように bootstrap4 までは必須とされた jQuery と popper の取り扱いが大きく変わっている。

最低限、必要なものは CSS と JS だが、

CSS: bootstrap.min.css を <head></head> 内でリンクさせる

JS: bootstrap.bundle.min.js を </body>タグの直前で <script>タグを使って使用を宣言する

ということらしい。

気になるのは popper や jQuery との関係だが、これも公式サイトに説明がなされていた。
https://getbootstrap.jp/docs/5.0/getting-started/javascript/

ドロップダウンはメニューなどで必要だろうから popper は、(個人的には)組み込んでおく方針。
jQuery は不要になったということだが、実際の挙動がどうなるかは試していないのでよくわからない。

【裏技?的な popper の入手】
現在(2022/5)最新バージョンは 2.11.5 なので、適当なブラウザで
https://unpkg.com/@popperjs/core@2.11.5/dist/umd/popper.min.js
に飛んで、ブラウザ画面上にソースを表示させファイルにしておく。

【jQuery の入手】
公式サイトのダウンロードページから入手。

 

air-h-128k-il