彦坂明宏のHatena Blog

いろいろなCMSやBLOGサービスを試しています。

Bootstrapを入れてみました

<head>内に何か入れて良さそうでしたのでBootstrapをCDNから読み込んでみました。この段階ではChromeデベロッパーツールで確認してもエラーは発生していません。この記事内で適当にグリッド設定して公開してみます。エラーも発生せず、グリッド設定が活きていれば基本的なBootstrapの機能は使えると判断することにします。

なので、この下からHTML編集で、Bootstrap流のcontainer, row, col-*をやってみようと思います。カラムの設定は"col-12 col-md-6 col-lg-3"にしておきます。


カラム1
カラム2
カラム3
カラム4

公開してもエラーは発生していませんし、Windowサイズによってカラムも横並びになったり縦並びになったりします。Windowの横幅によって4カラム、2カラム、1カラムに変わってくれます。

ということで、<head>内にいろいろとCDNで読み込めること、Bootstrapも少なくてもグリッドシステムはちゃんと動いていることが確認できました。