演習課題「テーブルへのクラスの適用」

右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作ってあり、Bootstrapが導入してあります。

エディタを使って、app/views/cats/index.html.erbを修正して、猫リストのテーブルにBootstrapのデザインを割り当てて、1行おきに色を付け、マウスポインタを重ねたら色が変わるようにしてください。
割り当てるのは、次のクラスです。

- table
- table-striped
- table-hover

採点して、すべてのジャッジに正解すれば、演習課題クリアです!

演習課題「ボタンにクラスを適用する」

右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「breed」という掲示板が作られており、Bootstrapが導入されています。

エディタを使って、app/views/cats/index.html.erbを修正して、「New Cat」ボタンに、'btn btn-primary'スタイルを割り当ててください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです!

演習課題「グリッドの幅を設定する」

右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られてあり、Bootstrapが導入してあります。

エディタを使って、app/views/cats/_form.html.erbを修正して、グリッドの割合を1:11にしてください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです!

#02:Bootstrapでレスポンシブデザインにしよう

ここでは、BootstrapでRailsアプリをレスポンシブデザインにします。そして、テーブルやボタン・フォームにBootstrapのスタイルを適用します。