2019年9月18日/ 最終更新日時 : 2019年9月21日51WebLab.Web

Windows環境のApacheにBootstrapを入れてみる

jQueryのダウンロード

まずはjQuery。

Attention Required! | CloudflareThis website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

jquery.com

で、”Download the compressed, production jQuery 3.4.1″のリンクをコピー

$ cd htdocs_win/bootstraptest
$ mkdir js
$ cd js
$ wget https://code.jquery.com/jquery-3.4.1.min.js

popper.jsのダウンロード

続いて、popper.js

$ wget https://github.com/FezVrasta/popper.js/archive/v1.15.0.tar.gz
$ tar -zxvf v1.15.0.tar.gz
#dist/umdの下のpopper.min.jsをコピー
$ cp ./popper.js-1.15.0/dist/umd/popper.min.js .

README.md に、<script>タグで読み込むときはumdの下にあるスクリプトを使う、と書かれています。

もし、それ以外のスクリプト（distの直下など）を使うと、

”SyntaxError: export declarations may only appear at top level of a module ”

といったエラーが発生してしまいます。

bootstrapのダウンロード

bootstrapのダウンロードは

getbootstrap.com

でダウンロードURLをコピー。

$ wget https://github.com/twbs/bootstrap/releases/download/v4.3.1/bootstrap-4.3.1-dist.zip
$ unzip bootstrap-4.3.1-dist.zip
#あれ？unzipがなかった。
$ sudo apt install unzip
$ unzip bootstrap-4.3.1-dist.zip
#解凍して出来たcssディレクトリとjsディレクトリを適切なところにコピー

動作確認

getbootstrap.com

のStarter templateをコピーしてindex.htmlを作ります。

他にもいくつかコードをコピー。

index.htmlサンプル

<!doctype html>
<html lang="jp">
  <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>Hello, world!</h1>
   <h1 class="display-1">Display 1</h1>
   <h1 class="display-2">Display 2</h1>
   <h1 class="display-3">Display 3</h1>
   <h1 class="display-4">Display 4</h1>
   <table class="table table-dark">
     <thead>
      <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
       <th scope="col">Handle</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <th scope="row">1</th>
       <td>Mark</td>
       <td>Otto</td>
       <td>@mdo</td>
      </tr>
      <tr>
       <th scope="row">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
       <td>@fat</td>
      </tr>
      <tr>
       <th scope="row">3</th>
       <td>Larry</td>
       <td>the Bird</td>
       <td>@twitter</td>
      </tr>
     </tbody>
   </table>
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="./js/jquery-3.4.1.min.js"></script>
   <script src="./js/popper.min.js"></script>
   <script src="./js/bootstrap.min.js"></script>
  </body>
</html>

表示してみましょう。

動きました！

スクリプトのパスなどはお好みで変えてくださいませ。（バージョン管理など必要ですね・・・）

このほかサンプルでも作って確認しようと思いましたが、下のページが分かり易いですね。

Bootstrap 4 Cheat Sheet　https://hackerthemes.com/bootstrap-cheatsheet/

WSLで気づいたこと

日本語環境にしてみよう。
マーク（Ctrl+m）や貼り付け（Ctrl+v）などのショートカットキーが使えない。
右クリックから選択するのは面倒。

別途確認します。