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

Sponsored Link
ロリポップ!レンタルサーバー

bootstrapのイメージ

 

WindowsのApacheにbootstrapを入れてみました。

無理矢理WSLを使ってます。

前回htdocへシンボリックリンクを作りましたが、WSLからアクセスしてファイルをダウンロードしたりコピーしています。

jQueryのダウンロード

まずはjQuery。

Download jQuery | jQueryjQuery: The Write Less, Do More, JavaScript Library
Download jQuery | jQuery jquery.com
Download jQuery | jQuery

で、”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
Sponsored Link

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のダウンロードは

DownloadDownload Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
Download getbootstrap.com
Download

でダウンロード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ディレクトリを適切なところにコピー

動作確認

IntroductionGet started with Bootstrap, the world窶冱 most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
Introduction getbootstrap.com
Introduction

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動作確認結果

動きました!

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

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

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

WSLで気づいたこと

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

別途確認します。


 

Sponsored Link