Googleのマテリアルデザインを実現する洗練されたBootstrapテーマ「Material Design for Bootstrap」

[PR]記事内のアフィリエイトリンクから収入を得る場合があります
  • URLをコピーしました!

Bootstrap Material

Googleの提唱する新しいデザインガイドライン「マテリアルデザイン」はフラットデザインを一歩進めたデザインとして今注目されています。

Material Design for Bootstrap」はこのマテリアルデザインをBootstrapのテーマとして実現するもの。まだ開発の初期段階ですが、完成すればBootstrap 3と組合せてWebサイトでも簡単にマテリアルデザインを再現することができそうです(GitHub)。

ナビゲーションバー

Navbar

ボタン

Button

テーブル

Table

フォーム

Bootstrap Material 1

ナビ

Bootstrap Material 3

インジケーター

Bootstrap Material 2

アイコン

Bootstrap Material 4

アイコンも独自!

まとめ

組み込み方も簡単でbootstrapのあとに該当cssを読み込むだけ。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="material/ripples.css" rel="stylesheet">
<link href="material/material.css" rel="stylesheet">
<link href="material/icons/icons-material-design.css" rel="stylesheet">

フラットデザインに立体感を組み込んだマテリアルデザインの特徴を再現したテーマとなっています。

ただひとつ注意点は商用利用する場合、作者に問い合わせが必要な点です。詳細はLICENSEを参照してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次