@totu_iy pureとbootstrapしか使ったことないねんな…。次なんか使うならAndroidのMaterialDesignみたいなbootstrap使ってみたい https://t.co/GuNFCIefV3
— こむ (@petitviolet) December 22, 2014ということでMaterial Design for Bootstrapを使ってみようと思い、自分のページをMaterialDesignっぽくしてみることにした
before
after
CardViewっぽくしただけ
やり方
https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip からダウンロードしてきて解凍し、material.min.cssをcssとして読みこむ
サンプル的なのはBootstrap Materialで見れる
なお、もともとBootstrapを使っている必要がある
今回使ったものたちは以下
CardView
CardViewっぽくするにはclass="well"ってやればよい
Shadow
いちおうヘッダーにはshadowをつけていて、これはclass="shadow-z-[n]とすればよい
nには1~5の数字を入れる
ButtonGroup
ボタンをひと続きのボタンにするにはclass="btn-group btn-group-justified"とすればよい
btn-group-flatとかすればフラットになる
雑感
こんなスマホだと画像の配置が乱れるような雑なページではあんまり効果はわからないが、
スマホ対応なWebアプリ作る際に、楽にMaterialDesign対応できて便利そうだと思った
商用で使う場合にはLICENSE.mdにあるように作者に連絡して許可を取る必要がある点に注意
