プログラミング

Bootstrap 使いのための Bulma 解説サイトがあります

Bulma の公式サイトを眺めていたところ、気になるページを見つけました。
それがこちら。> Coming from Bootstrap
どうやらBootstrap を使っている人向けの Bootstrap と Bulma の違いの解説ページのようですね。
Bootstrap と Bulma のそれぞれの特徴・違いが、簡単にですが説明されています。
私も CSS フレームワークは Bootstrap をメインで使っていましたが、現在は Bootstrap・Bulma をメインで使っています。Bootstrap から Bulma に入った口です。

今回は自分の勉強・復習も兼ねてComing from Bootstrapを参考に、Bootstrap と Bulma の違いを書いてみたいと思います。
※英語がてんでダメなので間違っていたらごめんなさい。

Bulma ってなんぞ?って方は、まずこちらを読むのをおすすめします。
> 私的おすすめ css フレームワーク「bulma」その 1
> 私的おすすめ css フレームワーク「bulma」その 2

他にこんな記事も書きました。Bulma を実際に使い始めた方向けの記事です。
> 知っておくと少し幸せになれる Bulma を使い方 6 選
> さらに知っておくと少し幸せになれる Bulma を使い方+5 選

--- 広告 ---

Bulma と Bootstrap の違い

『Why choose』のざっくり翻訳

Coming from Bootstrapに記載されている『Why choose』をざっくり翻訳するとこんな感じです。

Bulma Bootstrap
・Flexbox、グリッドレイアウトを利用しています。
・最新のブラウザを想定したフレームワークですよ。
・Bulma のグリッドシステムはシンプルです。
・Bulma の書き方はシンプルで学習コストが低いですよ。
・Font Awesome 5 をサポートしています。
・CSS のヘルパーは 100 以上ありますよ。
・JavaScript は使っていません。CSS のみです。

『Why choose』から察するに、Web サイト制作時、

  • JavaScript や jQuery が必要なら Bootstrap を使ったほうが良いよ。
  • JavaScript を書く予定がない or あまり書かないなら Bulma のほうが良いよ。

といったところでしょうか。
あとは Internet Explorer11 に対応するか否かとか。

ここから先は個人の好みでしょうね。

『Comparison table』のざっくりまとめ

『Comparison table』の内容はパッと見で分かると思います。 Bulma と Bootstrap のコンポーネント・クラスの対応図です。 すべてを取り上げるとキリがないので、いくつかピックアップしてみます。

Grid system

Bulma Bootstrap
columns row
column col
tile

一番基本の Grid system の違いです。 Bootstrap の row が columns に、col は column に相当します。 また、Bulma には tile レイアウトが用意されています。

Layout

Bulma Bootstrap
container container
hero jumbotron
section
footer

Layout の違いです。 へー。Bootstrap には Bulma の section、footer に相当するものがないんですね。
なんかありそうな気もするのですが…。

Form

Bulma Bootstrap
field
field is-grouped button groups
field is-grouped input groups
control form-group
label label
input form-control
textarea form-control
select
checkbox checkbox
radio radio
file
button is-static form-control-static

Form 周りの両フレームワークの違いをまとめたものです。
初めて気づいたのですが、Bootstrap には select、file 用のクラスってないんですね。

探してみたら普通にありました。
> Bootstrap-select
> Bootstrap-file

まとめ

いかがだったでしょうか。
個人的には Bootstrap から Bulma に入った身として、両フレームワークの違いを知ることができて有意義でした。

最後に:Internet Explorer11 について

Bulma と Bootstrap の違いの説明内で、Internet Explorer11 が出てきましたね。
ちょっと気になって、Internet Explorer11 のシェアを調べてみたのですが、まだまだシェアあるんですね…
うーん。悩ましい…。せめて Edge に移行してくれないかなぁ…