【MDB】Material Design for Bootstrap 4 ～ 入門編 ～

フロントエンドフレームワーク

 ■ はじめに

https://dk521123.hatenablog.com/entry/2018/05/26/005948

で調査した中で「Material Design for Bootstrap 4 (MDB)」を掘り下げてみる

 ■ Material Design for Bootstrap 4 (MDB)

 * MIT License; 商用利用可能

https://mdbootstrap.com/license/

 公式サイト
https://mdbootstrap.com/

サンプル
https://mdbootstrap.com/freebies/
https://mdbootstrap.com/bootstrap-tutorial/

Quick Start
https://mdbootstrap.com/mdb-quick-start/

Template
https://mdbootstrap.com/freebies/

icon list
https://mdbootstrap.com/content/icons-list/

 注意点 

 * 無料版 / 有料版 とあり、無料版は機能が限られている
  => 詳細は、以下「■ 有料版について」を参照。

 ■ 使用しているコンポーネント

 (当たり前だが...) Bootstrap 4

Bootstrap 4 の公式サイト
https://getbootstrap.com/

 Font Awesome 

 * ボタンアイコンなどで使用
  => 詳細は、以下の関連記事を参照のこと。

 Animate.css + WOW.js 

 * アニメーションで使用

Animate.css の公式サイト
https://daneden.github.io/animate.css/

WOW.js の公式サイト
http://mynameismatthieu.com/WOW/docs.html

 ■ 有料版について

 * 無料版で使えなかった機能が使える

 Switchボタン
https://mdbootstrap.com/components/bootstrap-switch/

 * 代わりになりそうな参考サイトは、以下。

https://bootsnipp.com/snippets/featured/material-design-switch
https://www.w3schools.com/howto/howto_css_switch.asp
https://codepen.io/kkirsche/pen/VYypVe

 マテリアルなチェックボックス 

 * Default checkboxes(従来のBootstrapのチェックボックス)は無料版で使えるが
   Material checkboxes(マテリアルなチェックボックス)は有料版のみ。
  => Material Design for Bootstrap 4って言ってるのに使えないのは何かズルい...

https://mdbootstrap.com/components/bootstrap-checkbox/
 丸みがかったボタン
https://mdbootstrap.com/components/buttons/

 * 代わりになりそうな参考サイトは、以下。（使えそう）

http://materialdesignblog.com/creating-a-simple-material-design-action-button-with-css/
http://materialdesignblog.com/multifunctional-material-design-button-in-pure-css/
http://materialdesignblog.com/awesome-css-codepen-to-enhance-material-design-fab-button/
http://materialdesignblog.com/material-design-floating-action-button-for-web-that-really-stands-out/

 関連記事

マテリアル デザイン フレームワーク の比較調査
https://dk521123.hatenablog.com/entry/2018/05/26/005948