Twitter Bootstrapには常日頃からとてもとてもお世話になっています。最近、Twitter bootstrapからフォークして誕生したGoogle Bootstrap。両者の違いをまとめました。気分によって使いわけよう。
リンク
- Twitter Bootstrap – Twitter Bootstrap（本家）
- Google Bootstrap – Google Bootstrap（TBからフォーク）
- 超便利！Twitter BootstrapでさくさくWeb開発 – 会社で書いたTB紹介記事
Overview
- 基本的なところはだいたい同じ。
- Google Bootstrapが拡張した部分について、特に本記事にまとめています。
- Twitter Bootstrapのほうが、色味が薄く、padding や line-heightをとっており、余裕があるデザイン。ボタンやフォームは角丸。
- Google Bootstrapは、文字が少し小さく、コンパクトな印象。ボタンやフォームは四角くて、ペタッとしている。
では、細かい部分の説明です。
テーブルダグ
クラス名は.success, .error, .warning, .info と同じですが、若干色味が違います。Googleのほうが少し濃い色になっています。
検索フォーム
Twitter Bootstrapの検索フォームが丸いのに対し、Google Bootstrapは四角いです。フォームにフォーカスすると、Twitter Bootstrapのほうがボワーっと光るエフェクトが大きいです。
セレクトボックス
Google Bootstrapでは、セレクトボックスが基本灰色で、開くと選択部分が灰色になる。
ファイルアップロード
ファイルアップロードフォームはGoogle Bootstrapのみ。でも…あんまり…なんかふつう。
その他、フォームは全体的に、Twitter Bootstrapが灰色グラデーション・角丸・立体的なのに対し、Google Bootstrapが灰色・四角・ペタっとしている。
フォーカス
Twitter Bootstrapは、フォーカス次のボワーがちょっと豪華。Googleは、Invalidなフォームの外枠が青なんですね。なんで？
ボタン
Twitter Bootstrapのボタンはおなじみ、同色グラデーション・角丸。若干大きいかんじがします。リンクの色は明るめの青です。
対してGoogle Bootstraoは、ボタンの色は一色で、四角です。結構前にGoogleのデザインが一新したとき、「うわっ！ださっ！」とWeb界隈が一瞬引きましたが、今は慣れましたよね。あのボタンです。リンクの色はちょっと濃い青。
ボタンサイズ
ボタンのサイズも、Twitter Bootstrapのほうが若干大きいです。
コンポーネント/タブ、ナビリスト
Google Bootstrapの上のコンポーネントは、ulタグに.nav-tabs .nab-tabs-google とつけたときに表示される、Google Tabsというものです。Googleのサービスでよく見ますね。Android4系も、こんなかんじのインタフェースがある場合があります。
下のコンポーネントはNav listsコンポーネント。Googleのコンポーネントは、Googleのサービスをよく使うようなユーザでないと、このリンクは押せるか押せないか？ということがわかりにくいかもしれませんね。
黒いナビバー・Inverted variation
Google Bootstrapは、Twitter Bootstrap風のバーを各種揃えていますが、「.navbar-googlebar」というクラスをつけることで、Google Bootstrapが提供しているバーを利用することができます。中でもパッと見て違うのが、Googleの黒バー。黒というよりは灰色で、アクティブになっている部分がカッコイイ！（Google bootstrapで、Homeの部分がactiveになっています。）
その他のGoogleバー
バーについてはGoogle Bootstrapが独自に拡張したものが多々あります。この上のバーは、アクティブになっている部分の下が、切符切りされたみたいに三角でカワイイ。
ページャ
ページャーは、Twitter Bootstrapが白ベース、Google Bootstrapが灰色ベースです。
ラベル、バッヂ
ラベルとバッヂ。バッヂは、スマートフォンの通知がまとめられているときなどによく見る、あの「通知何件」の表示法。色味はGoogleのほうがはっきりしている。Googleのラベルは四角い。
アラート
アラートは、全体的にGoogle Bootstrapのほうが濃くなっている。特に、通常のalert（黄色）の文字色が黒になったのは嬉しい。Twitter Bootstrapの黄色背景に黄色文字だと、ちょっと見辛かった（いや、CSSで上書きすればいいのですが…）。
おわりに
以上が、主なTwitter BootstrapとGoogle Bootstrapの違いです。
全体的にTwitter Bootstrapはポップで可愛いかんじ、Google Bootstrapはビジネス向きなかんじがしますね。
いずれにせよ自分たちで多少CSSを編集する必要がありますが、イメージに近い方のBootstrapを使うといいのかなーと思いました。