Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

参考サイト:はじめに(Introduction)~Bootstrap4移行ガイド

1)必要なファイルをダウンロード

下記のファイルをダウンロードします。

2)フォルダー・ファイルの準備

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

── [フォルダー]
     ├──── 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)

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

3)テンプレートとして使う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="#">どろっぷだうんの中身1</a> <a class="dropdown-item" href="#">どろっぷだうんの中身2</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として
フォルダーの該当箇所に保存すると・・・

テンプレ用HTMLをブラウザで開いて見たらこうなる.png

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

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


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

ka-ko
おもに、Web制作のアシスタント業務を行ってます。 一人前になれるように勉強中です(´・ω・`)
ayudante
いつもユーザー中心で技術者とコンサルタントがとことん考え抜く それがアユダンテです
https://ayudante.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away