Bootstrap 導入使い方

今回は、Bootstrapの導入方法のメモとなります。

基本的には、以下の公式ページのQuick startをご覧頂ければBootstrapを利用頂けると思います。

https://getbootstrap.com/

ただ、オープンソースのcssフレームワーク等を利用した事がない方は、

戸惑う部分があるかと思いますので、導入方法をメモしておきたいと思います。

1. 基本ソースファイル取得・配置

・基本ソースファイル取得

Bootstrapの公式ページから基本ソースを取得します。

ダウンロードボタンをクリックします。

zipをダウンロードしたらzipファイルを展開します。

基本ソースファイルの内容は、Bootstrapを利用するためのcssファイルとjsファイルが存在します。

Bootstrapに限らず、一般的にminファイルはリリース用の圧縮済みのファイルになります。

・基本ソースファイル配置

展開したファイルをフォルダごと、読み込み元から参照しやすい位置に配置します。

今回は、私のところでは確認しやすい様に、

読み込ませるindex.htmlというファイルと同じ場所に配置してみました。

画像では、全てのファイルを配置していますが、

Bootstrapを動作させるためには、以下のファイルのみの配置で構いません。

・bootstrap.min.css(or bootstrap.css)

・bootstrap.min.js(or bootstrap.js)

2. Bootstrap ソースファイル読み込み指定

読み込み元のhtmlに、Bootstrapのソース読み込みタグを追記します。

追記内容は、BootstrapCDNに記載されているタグを参考に追記します。

※引用元：Bootstrap はじめに

尚、Bootstrap公式からダウンロードしたzipファイルには、

jquery-X.X.X.slim.min.jsとpopper.min.jsは含まれていないので、

一旦、bootstrap.min.cssとbootstrap.min.jsだけ、配置パスを元にタグ指定します。

jquery-X.X.X.slim.min.jsとpopper.min.jsに関しては、

一旦、公開されているCDNを利用する形で、公式のテンプレート通りに指定します。

<head>
    <!-- Bootstrap base -->
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <!-- -->
</head>
<body>
    <!-- Support module -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 

    <!-- Bootstrap base -->
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
    <!-- -->
</body>

※bootstrap.min.cssは、headタグ内に配置します。

※boostrap.min.js、jquery-X.X.X.slim.min.js、popper.min.jsは、

なるべく、bodyタグ内の最後の位置に挿入します。

※boostrap.min.jsをjquery、popper.min.jsの後ろで読み込まないとエラーになります。

そして、Bootstrap挙動確認用に、以下のタグを入れておこうと思います。

<!-- Bootstrap 動作確認用タグ -->
<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>
<!-- -->

※全体ソース

<html>
<head>
    <title>index.html</title>
    <!-- Bootstrap base -->
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <!-- -->
</head>
<body>
    <div>DIR:/Users/practice_tmp/test</div>

    <!-- Bootstrap 動作確認用タグ -->
    <div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
    </div>
    <!-- -->

    <!-- Support module -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <!-- Bootstrap base -->
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
    <!-- -->
</body>
</html>

この状態で、テスト用のindex.htmlファイルをブラウザで表示させて確認してみます。

公式のサンプルの様に表示されていれば、問題なく読み込まれています。

https://getbootstrap.jp/docs/4.5/components/alerts/

3. jQuery Popper.js 取得・配置

Bootstrapの幾つかのコンポーネントは、jQueryやPopper.jsというライブラリを動作に必要としています。

これら２点は、Bootstrap公式で配布されているzipには含まれていません。

ローカルに実体を配置して利用するには、それぞれ取得する必要があります。

一番手っ取り早く取得する方法は、ブラウザでURLにアクセスして、コピーファイルする方法かもしれません。

アクセスするとJavaScriptファイルの内容が表示されますので、

ctrl + a キーなどで全選択、ctrl + c コピー等を行うと簡単にjsファイルを作成できます。

ローカルに実体を配置して確認する場合、パスの指定を更新します。

今回のメモ内容は以上となります。

Bootstrapは、実装方法にそれなりに癖もありますが、

レスポンシブ対応やグリッドレイアウトなど、基本的なcss要件を満たしており、

実際の案件でもよく使われているcssフレームワークです。

公式ドキュメントもよくまとまっていますので、

cssフレームワークを検討している方は、参考に頂ければと思います。

「Bootstrap 導入使い方」への3件のフィードバック

急にすいません。ダウンロードボタンの隣にある、はじめるというボタンを押しても何も影響？というかダウンロードされたりとかはされてないんですかね？はじめるのボタンはただの説明だけですか？見てもあまり分からず…

返信

いいお より:

2022年4月30日 3:26 AM

コメントありがとうございます。
はい、そうです。
はじめるボタンを押しますと、
利用方法の説明ページに移動するだけで特に何も起きません。

———–
以下、蛇足かもしれませんが捕捉させて頂きます。

bootstrapなどオープソースのcss/javascriptフレームワークを利用する方法は、
主に以下2つとなります。
１、bootstrapのプログラムなどソース実体を、手元にダウンロードして利用する
　※手元にダウンロードするので、bootstrapの公開が終了しても利用を続けられる。(当然、手元のダウンロードした実体は更新はされない)
２、手元に実体をダウンロードせずに、公開されているbootstrapのプログラムを、htmlのタグで直接指定して読み込んで利用する
　※手元にダウンロードしていないので、bootstrapの公開が終了したら即利用できなくなる。

こちらのブログの内容は、１の方法のメモとなります。
>１、bootstrapのプログラムなどソース実体を、手元にダウンロードして利用する

手元にダウンロードせずに、軽く試すのみでしたら、
はじめるページの通りにhtmlファイルを作成することでお試し頂けると思います。

返信

分かりました！
ありがとうございますm(_ _)m

返信

1. 基本ソースファイル 取得・配置

・基本ソースファイル取得

・基本ソースファイル配置

2. Bootstrap ソースファイル 読み込み指定

3. jQuery Popper.js 取得・配置

いいお