Bootstrap

Bootstrap4の使い方・必要なファイルのインストール方法

 

ここでは Bootstrap 4 を使うための

  • 必要なファイルのインストール方法
  • 基本的な使い方
  • Bootstrap と相性の良いアイコンサービス

を紹介しています。

 


 

 

必要なファイルのインストール方法

Bootstrap を利用するのに必要なファイルは

  • bootstrap.min.css
  • jquery.min.js
  • popper.min.js
  • bootstrap.min.js

の4つです。

jQuery, Popper, JavaScript は必須ではありません。
Modal(モーダル)やTooltip(ツールチップ)など動きがある要素を使う場合に読み込みます。

ボタンやテキストの色だけに Bootstrap を使う場合は bootstrap.min.css のみ読み込めば利用できます。
 

これら4つのファイルを読み込む方法は

  1. CDN を利用する方法
  2. ファイルをダウンロードする方法

があります。
 

CDN の方が簡単に Bootstrap を使い始めることができるのでオススメですが、どちらでも問題ありません。

好きな方を選んでインストールしてみてください🙂
 

方法1:CDN を利用する(オススメ)

CDN はコンテンツデリバリネットワークといい、インターネット経由でファイルを読み込むことができます。

ファイルをダウンロードする必要がなく、必要なコードをコピー&ペーストするだけなので、簡単に Bootstrap を読み込むことができます。
 

Step1

「Bootstrap」を検索、または https://getbootstrap.com/ にアクセスします。
 

「Get Started」をクリックします。

 
 

Step2

CSS を <head>タグ内に、JavaScript を</body>タグの直前に貼り付けます。


 

 

以上で Bootstrap を使う準備は完了です。
 
 

方法2:ダウンロードする

次にファイルをダウンロードする方法を紹介します。
 

Step1

「Bootstrap」を検索、または https://getbootstrap.com/ にアクセスします。

「Download」をクリックします。

 
 

Step2

「Compiled CSS and JS」という見出しの下に「Download」ボタンがあるのでクリックします。

クリックするとダウンロードが開始されます。


 

ダウンロードできたらファイルを開いてください。

css フォルダ内の bootstrap.min.css、 js フォルダ内の bootstrap.min.js を使います。

 
 

Step3

先ほどダウンロードしたファイルには jQuery と Popper.js は含まれていないので、別にダウンロードする必要があります。

* Bootstrap だけダウンロードして、jQuery と Popper.js は CDN を利用することもできます。
 
 

jQuery をダウンロードする

https://jquery.com/download/ を開いて、
「Download the compressed, production jQuery 3.3.0 slim build」の上で右クリックして保存します。

 
 

Popper.js をダウンロードする

https://github.com/FezVrasta/popper.js#installation を開いて、
「https://unpkg.com/popper.js/dist/umd/popper.min.js」の上で右クリックして保存します。

 
 

Step4

ダウンロードした4つのファイルをフォルダにまとめます。

ここでは css フォルダと js フォルダを作成して、index.html で Bootstrap を読み込む例を紹介します。

 
 

Step5

index.html を開き、以下のようにファイルを読み込みます。

 

以上で Bootstrap を使う準備は完了です。

 
 

Bootstrap の使い方

Bootstrap の使い方は簡単で、サンプルコードをコピー&ペーストするだけです。
 

例えばボタンを使いたい場合には、 https://getbootstrap.com/docs/4.3/components/buttons/ を開いて、コードをコピー&ペーストします。


 
 

Bootstrap の推奨アイコン

Bootstrap 3 では独自のアイコンが用意されていましたが、Bootstrap 4 ではアイコンが含まれていません。

Bootstrap 公式サイトでは、アイコンの利用に

を推奨しています。

これら3つは Bootstrap 側でテスト済みとなっているため安心して使うことができます。
 

他にも Google Material icons・Glyph などのアイコンサービスも紹介されていますが、これらはテスト済みとなっていないようです。

そのほかのアイコンはこちら:https://getbootstrap.com/docs/4.3/extend/icons/
 

アイコンを利用したい場合は、Bootstrap 側でテスト済みとなっている Font Awesome・Iconic・Octicons から選ぶのが良いでしょう。
 

どれを使えば良いか?

アイコンの種類の多さ、利用方法の簡単さを考えると Font Awesome がオススメです。

Font Awesome の場合はファイルをダウンロードする必要がなく、すぐにアイコンを利用することができます。
 

Font Awesome の利用方法は以下の記事をお読みください。

【簡単3ステップ】Font Awesome の使い方 ここでは Font Awesome の使い方を簡単3ステップで紹介しています。 Font Awesom...

 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です