RailsでWEBアプリを作って海外移住

30歳にしてサラリーマンをリタイア、WEBの世界で、ご飯を食べて、海外移住に挑戦

Bootstrapでテーブルよりも、リストよりも、グリッドを使おう。

みなさんこんにちは39の管理人のケンタリートです。今日は、Bootstrapで使うテーブルやリストについてご紹介します。

table-responsiveのクラスを使えば、スマホ画面でも綺麗に表示されると思われがちですが、使いにくいです。
例えば39のユーザ一覧のページは、テーブルを使っています。

f:id:kentarito:20160621020150j:plain

しかし、少しずつ小さくしていきます。

f:id:kentarito:20160621020744j:plain

f:id:kentarito:20160621020748j:plain

f:id:kentarito:20160621020753j:plain

このように画面からはみ出してしまいます。そこでこれを綺麗にするのに登場するのが、グリッドシステムです。
新しく作成した旅行プラン一覧ページのリストはグリッドシステムをつかいました。

f:id:kentarito:20160621021324j:plain

f:id:kentarito:20160621021332j:plain

こうすることで、スマホでも見やすいページができます。ぜひ参考にしてみてください。