ここでは、Bootstrapがどんなものであるのか概要をある程度、理解した方が実際にBootstrap4を導入する際の最初のステップについてお話していきます。Bootstrap4を使うには、ファイルを自分のサーバーにアップロードするかBootstrapのCDNを利用してファイルを読み込む必要があります。ここでは、それぞれの方法についてお話します。
Bootstrap4をダウンロードする方法
Bootstrapの公式サイトへ行きます。
サイトの右上に「Download」というボタンをクリックします。
「Compiled CSS and JS」の下にある「Download」をクリックしてファイルをダウンロードします。
zipファイルを解凍すると、中に２つのフォルダがあります。
cssフォルダ内で必要なもの
cssフォルダ内で必要なファイルは、「bootstrap.css」もしくは、その圧縮ファイルの「bootstrap.min.css」です。bootstrapの仕組みを理解しながら使いたい方は「bootstrap.css」を、ページの読み込み速度を重視される方は「bootstrap.min.css」を使えば良いでしょう。
「bootstrap-grid.css」や「bootstrap-reboot.css」の内容はすべて上記のファイルに含まれているので使いません。
jsフォルダで必要なもの
jsファイルは「bootstrap.js」もしくは、その圧縮ファイル「bootstrap.min.js」のどちらかがあれば大丈夫です。
【追記】
もうひとつ、必要なファイルがあることが判明しました。「popper.min.js」というファイルがないと一部の機能が使えません。本家サイトは英語で分かりづらいので、bootstrapのDownloadのページにある下記の読み込みコードをそのまま使うか、自分のサーバーにアップロードしたい場合、下記のURLにアクセスしてファイルをダウンロードしても良いでしょう。
HTML
Bootstrapファイルの説明
ざっくりと、中のファイルについてお話しておきます。
- bootstrap.css
- Bootstrapの基本となるスタイルシートです。
- bootstrap-grid.css
- Bootstrapのグリッドシステムのスタイルシートです。
- bootstrap-reboot.css
- ブラウザ間で生じるデザインの微妙な違いをリセットするための（リセット）CSSです。
- bootstrap.js
- メニューの開閉などの動きを実装するためのファイルです。
- popper.min.js
- Bootstrap4から必要になったライブラリです。
さて、先ほどの「css」フォルダと「js」フォルダをコピーなどしてパソコンの適当な場所に保存したら、同じ階層にindexファイルを作成しましょう。ファイルの中には、下記のソースコードを入力します。
HTML
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<meta name="description" content="ページの説明"> |
<link rel="stylesheet" href="css/bootstrap.min.css"> |
<script src="js/popper.min.js"></script> |
<script src="js/bootstrap.min.js"></script> |
BootstrapCDNを利用して導入する方法
次は、ファイルをダウンロードせずにBootstrapCDNを利用する方法について見ていきます。一番、下に完成した雛形を載せておきましたが、できるだけ最新のファイルを読み込んだ方が良いので、下記の手順に従ってファイルの読み込みコードをコピペしてください。
Bootstrapの公式サイトへ行きます。
サイトの右上に「Download」というボタンをクリックします。
移動したDownloadページをスクロールしていくと、「BootstrapCDN」という見出しが出てきますので、その下にある読み込みコードをコピーして使います。
JSファイルを読み込ませる順番
jsファイルは下記の順番で読み込ませるようにしてください。
- jQuery
- Popper.js
- bootstrap.min.js
完成した雛形がこちらです。
HTML
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<meta name="description" content="ページの説明"> |
これがBootstrap4を使うための基本となる雛形ファイルになります。とりあえず、今日はここまでにしたいと思います。
2018.06.24ここではBootstrap4を導入したあとで、知っておきたいグリッドレイアウトの基本的な仕組みについて見ていきます。Bootstrapってなんだか説明がややこしく意味が分からないと思っていませんか？ここでは、細かい説明はさておき、とりあえず使えるようになってい...
2018.04.06Bootstrap4ではclass="row"に対してdisplay:flex;が初期設定として指定されているためflexboxコンテナとして使うことができます。つまり、この要素の中に入るcol-系クラスの要素たちはflexアイテムとして配置を指定することがで...
