bootstrapのcardを使って商品陳列のページを作ってみる

タイトルはあれですが、こんな感じのものです。

ページのコントロールとモデルはAngular.jsを使っています。外観は今回、bootstrapを使ってみました。Cloud9のヘルプに出ていたリンクでは上手く表示できなかったので、BootstrapのQuick Startに記載されていたコードでやったらきちんと表示されました。

v4-alpha.getbootstrap.com

これまでいくつかサンプルを作ってきたけど毎回CSSまわりがいろいろと面倒だなと思っていたので、こういうフレームワークがあると便利でいいですね。デザインのセンスがなくてもそれっぽい見た目になるのも助かります。

これを元に、詳細ページと商品追加・変更・削除のページを作る予定です。
それにしてもAngular.jsで調べてもモデルをどう扱うかというページがあまり出てこないんですね。ビューを操作する方法についてはたくさんあるんですが。そもそもAngular.jsで扱うというよりも、もっと上位の設計の話なのかも。

今日はこの辺で。