Bootstrap　Ver. 4.3-

　Bootstrap は CSS「フレームワーク」で、「枠組み・スタイルなど」をある程度最初から定義しているライブラリのようなものです。
　2010年の中頃に witter社で開発され 2021年5月には v.5 がリリースされました。 　参考１ 　参考２ 　参考３ 　参考４
　

■ Bootstrap で出来ること

■ Bootstrap を利用する

　Bootstrap を利用するには、Bootstrap をダウンロードする方法と、CDNを利用する方法があります。
  1. ダウンロードする方法
    • ダウンロードする･･････こちらからコンパイルされた CSS と JS をダウンロード(Ver.4)します。Ver.5 はこちら。
    • ファイルの構成････････ダウンロードした zipファイルを解凍すると次の構成が展開されます 
      bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
    • 基本テンプレート･･････上記の css, jsファイルを使った基本ページは以下のようになります。
      　＊ 別途 jqueryファイルが必要です 
      <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  2. CDNを利用する方法
    • Bootstrap をダウンロードしなくても Bootstrap CDN を利用することができます。
    • Bootstrap CDN を利用する場合のページは次のようになります 
      <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>
    • Bootstrap v5.1 の場合、CDN 利用は次のようになります。　参考 
      <!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; 次のどちらかを選択 -->
    <!-- Option 1: Popper 内蔵タイプ -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <!-- Option 2: Popper、 Bootstrap JS 分離タイプ -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    -->
  </body>
</html>
  3. Bootstrap の組み込みが出来たら、必要なクラスを呼ぶだけで必要な書式のページが表現できます。　参考

■ 参考サイト

Bootstrap 5概要 v5 　Bootstrap5 入門 　ver5 使い方 　おしゃれなサイト 　設置ガイド 　intro. v5 　ユーティリティ v5
Bootstrap 4概要 v4 　Bootstrap4 入門 　ver4 使い方 　索引 ver4 　Bootstrap 4 Class
使い方Bootstrapを導入 　見ておきたい使い方 　【入門者向け】 【コンポーネント編】 　メリット・デメリット
サンプル設置ガイド5 　Ver.5 Tutorial 　Ver.4 Tutorial 　Ver.3 入門 　コピペするだけ 　おさらい 　カルーセル
ダウンロード Ver 5「コンパイルされた CSS と JS」 の をクリックするとBootstrap v5.x コードをダウンロードできます。
「サンプル」 の をクリックすると様々なサンプルを一括してダウンロードできます。
解凍したサンプル内の各名前のフォルダにある index.html がそれらのサンプルページになっています。