1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。
では詳しくみていきましょう。

Bootstrap とは

Bootstrap は Webサイトを制作するときに使う、CSSフレームワークです。
例えば、レイアウトを整えたり、ボタンを作ったりということが、あらかじめ用意されたクラスを割り振っていくことで、簡単にできてしまいます。

 Bootstrap 4 では、 Bootstrap と jQuery 、そして Popper.js というライブラリを読み込む必要があります。
今回はそれらのインストール方法を、かなり詳しく解説していきます。

ダウンロード無しで Bootstrap 4 を使う

Bootstrap はダウンロードすることなく始めることができます。
まずは以下の link タグを、<head></head>の間に入力します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

次に以下のコードを、</body>の直前に入力します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

HTML 全体で、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- ここから -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <!-- ここまでを入力 -->
  </head>
  <body>
    <h1>Bootstrapの使い方。</h1>

    <!-- ここから -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <!-- ここまでを入力 -->
  </body>
</html>

上のサンプルでは、 jquery の slim を使っていますが、フルバージョンもサポートしているとのこと。

Bootstrap をダウンロードして使う場合

では、ダウンロードして使う方法を解説します。
ダウンロードの場合は少々手間がかかります。本当ならば直接urlを指定する、上記の方法で行うのをおすすめしますが、ソースをダウンロードして設定する方法も紹介しておきます。

Bootstrap のダウンロード

今回は公式サイトからダウンロードする方法と、パッケージマネージャーを使ってダウンロードする方法を紹介します。

サイトからダウンロードする方法

Bootstrap をダウンロードしていきます。
ダウンロード方法はいくつかあります。まずは、サイトからダウンロードする方法です。
Bootstrap
Bootstrap

上のリンクから Bootstrap のページへ飛び、「 Download 」をクリックします。
Bootstrap

さらに「 Download 」をクリックすると、実際にダウンロードが開始されます。
Bootstrap

npm を使ってインストールする方法

npm を使う場合は、 Node.js が必要になります。
下の記事の「 Homebrewのインストール 」と、「 Node.jsをインストール 」を参考にしてください。
gulpでsassをcssにコンパイル。インストール&便利な使い方。

フォルダを作成し、ターミナルの cd コマンドで、作成したフォルダへ移動します。
その後、npm initで package.json ファイルを作ります。

では、インストールしていきましょう。
以下のコマンドを実行してください。

$ npm install [email protected]

Yarn を使ってインストールする方法

Yarn の詳しい使い方については「Yarn の使い方。インストールの方法から使い方まで解説します。」を参考にしてください。

ここではさわりだけ解説します。
yarn initで package.json ファイルを作ります。

インストールは以下のコマンドです。

$ yarn add [email protected]

これで先ほど作ったフォルダの中に node_modules フォルダが作成され、そのなかに bootstrap フォルダが作成されていれば成功です。

jQuery のダウンロード

同様に、公式サイトからダウンロードする方法と、パッケージマネージャーを使う方法を紹介します。

jQuery をサイトからダウンロード

jQuery もダウンロードしましょう。
jQuery
jQuery

Download jQuery をクリックすると、次の画面が表示されるので、使用したいタイプの jQuery を選び、クリックでダウンロードされます。
jquery

jQuery を npm でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ npm install jquery

これで、 node_modules フォルダの中に jquery フォルダが作成され、その中に様々なファイルが生成されました。

jQuery を Yarn でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ yarn add jquery

これで、 node_modules フォルダの中に jquery フォルダが作成され、その中に様々なファイルが生成されました。

Popper.js のダウンロード

Popper.js に関しては、パッケージマネージャーを使ってダウンロードします。

Popper.js
Popper.js

Popper.js を npm でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ npm install popper.js

node_modules フォルダの中に popper.js フォルダが作成されます。

Popper.js を Yarn でインストール

package.json ファイルがあるフォルダで、以下のコマンドを実行してください。

$ yarn add popper.js

node_modules フォルダの中に popper.js フォルダが作成されます。

index.html から読み込む

では、index.html から jQuery と Popper.js を読み込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- ここから -->
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- ここまでを入力 -->
  </head>
  <body>
    <h1>Bootstrapの使い方。</h1>
 
    <!-- ここから -->
    <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- ここまでを入力 -->
  </body>
</html>

作成したHTMLファイルをブラウザで開いてみて、次ように表示されていれば準備完了です。
隙間が空いていたり、ブラウザのコンソールにエラーが出ていたら、見直しましょう。

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

2件のコメント “Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

  1. Rails 5で開発を進めております。
    ドロップダウンがなかなか表示されず、四苦八苦しておりました。
    しかし主様の記事で無事解決しました。

    原因は直前でcdnを読み込んでいなかったことと、読み込む順番でした。
    本当にありがとうございました。

    1. >名無しの新九郎さん
      コメントありがとうございます。
      無事解決できたとのこと、私も嬉しく思います。
      開発、お互い頑張っていきましょう。
      ありがとうございます。

コメントをどうぞ!

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