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;
}
コメント