【Rails】scaffold CRUDのindexにBootstrapデザインを当てる

Ruby on Railsアイキャッチ画像

scaffoldで作成したCRUDのindexページにBootstrapのデザインを当てる方法。

Bootstrapのバージョンは4.6にて作成

Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Bootstrapを当てる前がこちら

<% @documents.each do |document| %>
  <tr>
    <td><%= document.name %></td>
    <td><%= document.content %></td>
    <td>
    <% if document.public_level == 0 %>一般
    <% elsif document.public_level == 1 %>技術
    <% end %>
    </td>
    <!--前のdocumentが変数で後ろのdocumentがuploader-->
    <td><object data="<%= document.document.url %>" type="application/pdf" ></object></td>
    <td><%= link_to t('views.button.show'), product_product_document_path(@product, document) %></td>
    <td><%= link_to t('views.button.edit'), edit_product_product_document_path(@product, document) %></td>
    <td><%= link_to t('views.button.destroy'), product_product_document_path(@product, document), method: :delete, data: { confirm: t('views.messages.confirm_destroy') } %></td>
  </tr>
<% end %>

ここに、Bootstrapのこれを当てる。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrapを当てると

<div class="row">
  <% @documents.each do |document| %>
  <div class="document_card_list"> 
    <div class="card" style="width: 18rem;">
      <object class="card-img-top" data="<%= document.document.url %>" type="application/pdf" ></object>
      <div class="card-body">
        <h5 class="card-title"><%= document.name %></h5>
        <p class="card-text">
          <% if document.public_level == 0 %>一般公開資料
          <% elsif document.public_level == 1 %>技術資料
          <% end %>
        </p>
        <p class="card-text"><%= document.content %></p>
        <%= link_to t('views.button.show'), product_product_document_path(@product, document), class: "card-link" %>
        <%= link_to t('views.button.edit'), edit_product_product_document_path(@product, document), class: "card-link" %>
        <%= link_to t('views.button.destroy'), product_product_document_path(@product, document), method: :delete, data: { confirm: t('views.messages.confirm_destroy') }, class: "card-link" %>
      </div>
    </div>
  </div>
  <% end %>
</div>

card間の隙間を作るため簡単にCSSも適用しておく

.document_card_list {
  margin: 10px;
}

コメント