Blogブログ

ホーム
>
ブログ一覧
>
(2018年更新)【初心者必見】Bootstrap4の導入の仕方

2017.11.27

#WEB制作

(2018年更新)【初心者必見】Bootstrap4の導入の仕方

《2018年01月18日》にBootstrap4が正式リリースされたため、ブログ記事も更新しています。

【Bootstrap4】概要編

まず、【Bootstrap】について軽くご説明します。
【Bootstrap】は、Twitter社が開発した「フレームワーク」です。通常のWebサイト制作では、HTMLとCSSの二つを記述しなければならないのですが、【Bootstrap】を用いることにより、HTMLに記述をするだけでそれなりのWebサイトを構築できます。

【Bootstrap】は以前まで、「Twitter Bootstrap」と呼ばれていましたが、開発者がTwiiter社を退社したため「Bootstrap」に名称が変更されたようです。
【Bootstrap】は幾度となくアップデートされ、ついにBootstrap4の正式版がリリースされました。

《2018年01月12日　追記》
2017年12月28日にBootstrap4 beta3がリリースされました。

《2018年01月22日　追記》
2018年1月18日にBootstrap4が正式リリースされました。
導入に関しては特に変更はないので、この記事を参考にしてください。

【Bootstrap4】導入編（2018年更新）

【Bootstrap4】を使用する方法は2通り方法があります。

【Bootstrap4】本体をダウンロードし、自分のサイトにアップロードして使用する方法
CDNという方法を使って【Bootstrap4】のリンクを直接ファイルに埋め込む方法

今回は、CDNという方法を使って【Bootstrap4】を導入していきたいと思います。CDNについては、いつか説明ブログを書いていきたいと考えています。

headに【Bootstrap4】のコードを埋め込む

まず、【Bootstrap4】の本体であるCSSを読み込みます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

次に、jquery本体と【Bootstrap4】で使用しているjavascriptを読み込みます。これを読み込まないと、動きのある動作ができなくなってしまうので、必ず読み込んでください。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

最終的な記述

最終的にhead内に下記のような記述になっていれば、【Bootstrap4】が使用できます。

<!doctype html>
<html lang="ja">
  <head>
    <title>Hello, world!</title>
    <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>