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だけ、配置パスを元にタグ指定します。

<link rel=”stylesheet” href=”配置パス/bootstrap.min.css”>

<script src=”配置パス/bootstrap.min.js”></script>

 

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というライブラリを動作に必要としています。

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

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

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

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

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

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

 


 

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

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

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

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

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

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

 


------------------------------------------ スポンサーリンク ------------------------------------------
都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 138

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る