概要
一覧表示をデザインします。
Bootstrapにはすぐに使える便利なクラスが用意されているので、それらを使用して実現します。
【SpringBootチュートリアル】#7~ 検索画面の作成に変更を加える形で行います。
パターン
代表的なデザインのパターンを紹介します。
- Examples
- Striped rows
- Hoverable rows
シンプルな表形式のデザインです。
行毎に色が変わるストライプ仕様のデザインです。
カーソルが乗った行の色が変わる、ホバー仕様のデザインです。
実装
画面イメージ
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="header::head(~{::title})"> <title>書籍情報一覧</title> </head> <body> <header th:replace="header::header"></header> <div th:replace="book/search"></div> <div class="container"> <div th:text="${deleteError}"></div> <div th:if="${books}"> <div th:if="${books.size() == 0}">検索結果は0件です。</div> <div th:if="${books.size() > 0}"> <table class="table table-striped"> <thead class="thead-dark"> <tr><th>書籍名</th><th>ISBN</th><th>出版社</th><th>価格</th><th>出版年月日</th><th colspan="2"></th></tr> </thead> <tbody> <tr th:each="book : ${books}"> <td th:text="${book.name}"></td><td th:text="${book.isbnFormat()}"></td><td th:text="${book.publisher}"></td> <td th:text="${book.priceCommaOf1000()} + '円'" align="right"></td><td th:text="${book.publicationDateOfYyyymmdd()}"></td> <td><a class="btn btn-outline-primary btn-sm" th:href="@{/book/edit/} + ${book.id}">編集</a></td> <td> <form th:action="@{/book/delete}" method="post"> <button class="delete-action btn btn-outline-danger btn-sm" type="submit">削除</button> <input type="hidden" th:value="${book.id}" name="id"> <input type="hidden" th:value="${book.version}" name="version"> </form> </td> </tr> </tbody> </table> </div> </div> </div> </body> </html> |
解説
- 検索結果を表示する領域
- テーブル全体
- テーブルヘッダー
- 編集ボタン
- 削除ボタン
<div class=”container”>で囲い、コンテンツに適切な余白を与え整列させるようにします。
tableを追加し、通常のデザインを適用します。
加えて、table-stripedで行毎にストライプになるようにします。
thead-dark：ダーク系のデザイン
※ライト系のデザインも可能です
Table head options
btn-outline-primary：ホバーで色が変わる青いボタン
btn-sm：ボタンサイズを小さくする
btn-outline-danger：ホバーで色が変わる赤いボタン
まとめ
- 表はtableクラスを指定する。
- Bootstrapには表のデザインが複数用意されている。
- ヘッダーをデザインするオプションが用意されている。
最後までお読み頂き、ありがとうございました！
ご意見・ご要望がありましたら、遠慮なくコメント下さい！
もし内容が良かったらランキング評価を頂けると励みになります（＾＾）
⇒ランキング評価する
