【Bootstrap】【環境構築】Bootstrapの取得と動作確認

Bootstrapの概要
使用するバージョン
Bootstrapのダウンロード
jQueryのダウンロード
Bootstrapの動作確認(サンプルの作成)
Bootstrapの動作確認(結果)

Bootstrapの概要

・Bootstrapは「css」と「JavaScript」で構成されている
・Bootstrapの「JavaScript」は「jQuery」を使用している

使用するバージョン

ここで使用するバージョンは以下
・Bootstrap 4.4.1
・jQuery 3.5.0

Bootstrapのダウンロード

１.公式サイトへアクセスし「Download」をクリック
　https://getbootstrap.com/

２.「Compiled CSS and JS」の「Download」をクリック

３.ダウンロードされた「bootstrap-X.X.X-dist.zip」を解凍

４.回答されたフォルダの中に以下が存在することを確認
・「css」-「bootstrap.min.css」
・「js」-「bootstrap.bundle.min.js」

jQueryのダウンロード

１.公式サイトへアクセスし「Download jQuery」をクリック
　https://jquery.com/

２.「Download the compressed, production jQuery X.X.X slim build」を右クリックし、
　「名前を付けてリンク先を保存」をクリックし任意の場所に保存

３.「jquery-X.X.X.slim.min.js」が保存されたことを確認

Bootstrapの動作確認(サンプルの作成)

１.作業フォルダを作成し、上記で取得/確認したファイルを以下に配置する

bootstrap_sample 　　←作業フォルダ
┗css
　┗bootstrap.min.css
┗js
　┗bootstrap.bundle.min.js
　┗jquery-3.5.0.slim.min.js

２.作業フォルダ配下に以下のindex.htmlを作成する

※index.htmlの概要
　見出し(h1)のclassに「text-danger」を指定しているため、文字色が「赤」になる
※注意点
　jqueryのファイル名は取得したバージョンにより違うため、必要に応じて修正

●index.html

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1 class="text-danger">Hello, world!</h1>

    <!-- Bootstrap JavaScript -->
    <!-- jQuery JavaScript -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="jquery-3.5.0.slim.min.js"></script>
  </body>
</html>

Bootstrapの動作確認(結果)

作成したindex.htmlをブラウザで開く