プログラミング

【Bootstrap】一覧表示をデザインしよう!

投稿日:

概要

一覧表示をデザインします。
Bootstrapにはすぐに使える便利なクラスが用意されているので、それらを使用して実現します。

【SpringBootチュートリアル】#7~ 検索画面の作成に変更を加える形で行います。

パターン

代表的なデザインのパターンを紹介します。

  • Examples
  • シンプルな表形式のデザインです。

  • Striped rows
  • 行毎に色が変わるストライプ仕様のデザインです。

  • Hoverable rows
  • カーソルが乗った行の色が変わる、ホバー仕様のデザインです。

実装

画面イメージ

ソースコード

解説

  • 検索結果を表示する領域
  • <div class=”container”>で囲い、コンテンツに適切な余白を与え整列させるようにします。

  • テーブル全体
  • tableを追加し、通常のデザインを適用します。
    加えて、table-stripedで行毎にストライプになるようにします。

  • テーブルヘッダー
  • thead-dark:ダーク系のデザイン
    ※ライト系のデザインも可能です
     Table head options

  • 編集ボタン
  • btn-outline-primary:ホバーで色が変わる青いボタン
    btn-sm:ボタンサイズを小さくする

  • 削除ボタン
  • btn-outline-danger:ホバーで色が変わる赤いボタン

まとめ

  • 表はtableクラスを指定する。
  • Bootstrapには表のデザインが複数用意されている。
  • ヘッダーをデザインするオプションが用意されている。

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

ModelからBindingResultが消える原因と対処方法

環境 Java(SpringFramework) Thymeleaf 状況 更新画面でバリデーションエラーにより更新が失敗したというようなケースにおいて、 BuindingResultにFormのエラ …

【SpringSecurity】#2~ ユーザ毎の権限設定(認可)

概要 権限によって、アクセス可能なページを制限する機能の実装します。 管理者画面を作成し、権限によって画面の出し分けを行います。 前提 #1~ ログイン画面の実装が完了していること。 管理者画面の追加 …

Springでバリデーションがimportされていないときの対処法

状況 SpringF/Wでバリデーションを実装したいが、@NotNullや@Minといったアノテーションが使えない。 @NotNullを使おうとすると、import com.sun.istack.No …

【Java入門】Integerの使い方まとめ

概要 「Integerはint型のフィールドを1つだけ持つラッパークラスである」 ということが公式に書かれています。 つまりint型の値を持ち、様々なメソッドを備えたオブジェクト型であるということです …

junit, テスト, junit5

JUnit5の環境構築

概要 JUnit5を使う環境を構築します。 IDE:IntelliJ IDEA ビルドツール:Gradle 環境構築 IntelliJのダウンロード こちらからCommunity版をダウンロードします …

■運営者プロフィール
IT業界10年のエンジニア。
PHP -> VBA -> Javaと渡り歩いてきて、今はJavaをメインにフリーランスエンジニアとして活躍中!

[保有資格]
・Java SE 11 Gold

一度はエンジニアを辞めざるを得なかった私が再びエンジニアとして復活した数奇な物語

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。