Bootstrap導入

Gemfile

@@ -43,4 +43,6 @@ gem 'jquery-rails'
 # gem 'debugger'
 
 gem "paperclip", "~> 3.0" # added at 130209 by weed
-gem 'aws-sdk' # added at 130209 by weed
+gem 'aws-sdk' # added at 130209 by weed
+
+gem 'bootstrap-sass'

Gemfile.lock

@@ -33,6 +33,8 @@ GEM
       json (~> 1.4)
       nokogiri (>= 1.4.4)
       uuidtools (~> 2.1)
+    bootstrap-sass (2.3.0.1)
+      sass (~> 3.2)
     builder (3.0.4)
     cocaine (0.4.2)
     coffee-rails (3.2.2)
@@ -119,6 +121,7 @@ PLATFORMS
 
 DEPENDENCIES
   aws-sdk
+  bootstrap-sass
   coffee-rails (~> 3.2.1)
   jquery-rails
   paperclip (~> 3.0)

app/assets/stylesheets/application.css

@@ -10,4 +10,5 @@
  *
  *= require_self
  *= require_tree .
+ *= require 'base'
  */

app/assets/stylesheets/base.css.scss

@@ -0,0 +1,2 @@
+@import "bootstrap";
+@import "bootstrap-responsive";

app/assets/stylesheets/view.css.scss

@@ -1,3 +1,8 @@
 // Place all the styles related to the view controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+body {
+  padding-top: 60px;
+  padding-bottom: 40px;
+}

app/views/view/index.html.erb

@@ -1,17 +1,32 @@
-<h1>のぞみページ2</h1>
+<div class="container">
 
-<table>
-  <tr>
-    <th>タイトル</th>
-    <th></th>
-    <th></th>
-    <th></th>
-  </tr>
+  <!-- Main hero unit for a primary marketing message or call to action -->
+  <div class="hero-unit">
+    <h1>のぞみページ2</h1>
+    <p>ドキドキ・プリキュアのページです</p>
+  </div>
 
-  <% @pages.each do |page| %>
-      <tr>
-        <td><%= page.title %></td>
-        <td><%= link_to 'みる', controller: "view", action: "show", id: page.id %></td>
-      </tr>
+  <!-- Example row of columns -->
+  <% last_index = @pages.count - 1 %>
+  <% @pages.each_with_index do |page, index| %>
+    <% if index % 3 == 0 %>
+      <div class="row">
+    <% end %>
+        <div class="span4">
+          <h2><%= page.title %></h2>
+          <p><%= image_tag page.image.url %></p>
+          <p><%= page.text %></p>
+          <p><%= link_to 'みる', controller: "view", action: "show", id: page.id %></p>
+        </div>
+    <% if index % 3 == 2 or index == last_index %>
+      </div>
+    <% end %>
   <% end %>
-</table>
+
+  <hr>
+
+  <footer>
+    <p>&copy; Company 2013</p>
+  </footer>
+
+</div>