All-in-One WP Migrationで、エクスポートをする際に「Out of Disk Space」がでてエクスポートできない時の対処方法
Blogブログ
#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>
まとめ
導入に関しては以上になります。たった4行のコードをhead内に記述すれば使えるようになります。簡単に導入できるので悩んでいる方は試してみてほしいです。
当ブログ・サイトも【Bootstrap4】を使用して制作しています。【Bootstrap4】を導入した当初は、「グリッドシステム」に悩むことが多かったのですが、慣れると【Bootstrap4】を使用しないコーディングに戻れないほど愛用しています!