【備忘録】Bootstrap4を使ったHTMLを作る為の前準備

Last updated at 2018-04-04Posted at 2018-04-03

Bootstrap4をBootstrapCDNを使用せずに使いたい場合、
前もって準備しておくと楽かなと思った事についてのメモです。

参考サイト：はじめに（Introduction）～Bootstrap4移行ガイド

#１）必要なファイルをダウンロード
下記のファイルをダウンロードします。

Bootstrap4のソースファイル　(ダウンロード（Download）～Bootstrap4移行ガイドよりダウンロード可能)
jquery-3.x.x.min.js（jQueryよりダウンロード可能）
popper.min.js（Popper.jsよりダウンロード可能）

#２）フォルダー・ファイルの準備
ひとまず、下記のような構成でフォルダーを作って、ダウンロードした該当ファイルを入れます。

── [フォルダー]
     ├──── css
     │      ├── bootstrap.min.css　（BootstrapのCSS）
     │      ├── container.css　（自分用の調整・上書きスタイル）
     │      └── style.css　（自分用の基本スタイル）
     ├──── js
     │      ├── base.js　（自分用の基本js）
     │      ├── bootstrap.min.js　（Bootstrapのjs）
     │      ├── jquery-3.3.1.min.js　（jQueryのjs ひとまず 3.3.1 で書いてます）
     │      └── umd
     │           └──popper.min.js　（jPopper（ぽっぱー）のjs）
     ├──── scss
     │       └──(色々あるけど、今回は中身省略)
     │
     ├──── favicon.ico　（ファビコンのアイコンファイル(念の為、入れている)）
     │ 
     └──── template.html　（テンプレとして使うhtml）

ダウンロードしたファイルには色々入ってますが、ひとまずこれだけあればなんとかなります。

#３）テンプレートとして使うHTMLの準備
meta要素やscript要素など、
必要な要素の記載漏れや書き損じがおきないように、ザックリとしたテンプレ用のHTMLを作ります。

ひとまず、必要の可否を問わず、個人的によく記載忘れするものを一通り書いた状態にしています。
（HTML内に記載しているリンクは、前項目のファイル構成を前提とした相対パスで書いてます。）

<!doctype html>
<html lang="jp">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<meta http-equiv="content-language" content="ja"><!-- 言語を日本語に指定 -->
<title>Bootstrap4.0.0 自分用テンプレート</title>
<meta name="description" itemprop="description" content="【ここにページのディスクリプションが入ります】">
<meta name="author" content="【ここに著作権情報（個人名、組織名などなど）が入ります】">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- ビューポート -->
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1"><!-- iPhone X対応用のビューポート（念の為記載） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- IE用の設定（念の為記載） -->

<!--  OG設定関連　（必要があれば諸々設定する）
    ================================================== --> 
<!--  共通 -->
<meta property="og:site_name" content="【ここにサイト名が入ります】">
<meta property="og:description" content="【ここにページのディスクリプションが入ります】">
<meta property="og:title" content="【ここにページのタイトルが入ります】">
<meta property="og:url" content="【ここにページのURLが入ります】">
<meta property="og:image" content="【ここにサムネイル等、ページのイメージ画像が入ります】">
<meta property="og:type" content="【ここにページのタイプ(種類)が入ります（トップページはwebsite、個別ページはarticle）】">
<!-- Facebook用設定 -->
<meta property="fb:app_id" content="【ここにFacebookのアプリIDが入ります】">
<meta property="og:locale" content="【ここに言語のタイプが入ります（デフォルトはen_USで、日本ならば、ja_JPへの書き換え推奨）】">
<!-- Twitter共通設定 -->
<meta name="twitter:card" content=" 【ツイッターカードの種類設定が入ります】">
<meta name="twitter:site" content="【ツイッターのユーザー名（@ユーザー名）が入ります】"> 
  
<!-- ファビコン -->
<link rel="icon" href="./favicon.ico">
  
<!-- CSS設定関連
    ================================================== --> 
<link href="./css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrapのスタイル -->
<link href="./css/style.css" rel="stylesheet"><!-- 自分用の基本スタイル -->
<link href="./css/container.css" rel="stylesheet"><!-- 自分用の調整・上書きスタイル -->
<style>
/*調整用CSS 直書き(本当はできれば、外部ファイルにしておいたほうが良い)*/
body {
  padding-top: 5rem;
}
.hoge-top {
  padding: 3rem 1.5rem;
  text-align: center;
}
</style>
</head>

<body>
  
<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">でふぉるとのなびばー</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="#">とっぷ <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">りんく</a> </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">どろっぷだうん </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">どろっぷだうんの中身１</a> <a class="dropdown-item" href="#">どろっぷだうんの中身２</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">その他のナンヤカンヤ</a> </div>
        </li>
        <li class="nav-item"> <a class="nav-link disabled" href="#">使用禁止</a> </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="さーち">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
</header>
  
<main role="main" class="container">
  <div class="hoge-top">
    <h1>ぶーとすとらっぷてんぷれーと</h1>
    <p class="lead">時間短縮できるといいなぁ・・・<br>
      とりあえず、リンクは相対パスで書いてます。</p>
  </div>
</main>
  
<hr>
  
<footer>
  <p class="small text-center">&copy; 2018 ほげほげ by <a href="https://getbootstrap.com/" target="_blank">Bootstrap v4.0.0</a></p>
</footer>

<!-- JavaScript 諸々
    ================================================== --> 
<script src="./js/jquery-3.3.1.min.js"></script> <!-- 最初に、jQuery -->
<script>window.jQuery || document.write('<script src="./js/jquery-3.3.1.min.js"><\/script>')</script> 
<script src="./js/umd/popper.min.js"></script> <!-- 次に、Popper（ぽっぱー） -->
<script src="./js/bootstrap.min.js"></script>  <!-- そのまた次に、Bootstrap -->
<script src="./js/base.js"></script><!-- 諸々書いた後に自分用の基本js -->
</body>
</html>

とりあえず、上記のHTMLをtemplate.htmlとして
フォルダーの該当箇所に保存すると・・・

このような感じの、 ~~適当な~~シンプルなページが表示されると思います。

Bootstrap4を使ってHTMLやCSS（SCSS） ~~で遊ぶ~~ の勉強する際など、
そこそこ便利かなと思いますので、よろしければご参考までに。

2018/04/04　追記：
GitHub Pagesを使う練習がてら、下記のURLにて公開してみました。
URL：https://ka-ko.github.io/test_bootstrap4/index.html

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up