プログラミング

【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


関連記事

【Java】TreeSetの使い方(順序付けSet)

TreeSetの使い方 基本的な使い方はHashSetと同じなので、以下を参照下さい。 【Java】HashSetの使い方いろいろ TreeSetは何も指定せずにインスタンスを生成すると、Collec …

Thymeleafで1000円単位をカンマ区切りで表示する方法

Thymeleaf(テンプレートエンジン)で金額などの数値を 1000円単位のカンマ区切りで表示する方法です。 ここでは、カンマ区切りの機能はオブジェクト側で実装し、 Tymeleaf(View)は表 …

【Java】TDDして汎用的な部品を作成する(日付期間オブジェクト)

目的 TDDブートキャンプというセミナーに参加して面白かったので、 自分で何かやってみようと思った。 仕様 日付期間を保持するオブジェクトである。 開始日と終了日を持つ。 開始日と終了日を持つことをど …

Camtasia(カムタジア)でKrisp(クリスプ)を使う方法

Camtasiaで動画撮影する時のノイズ除去にKrispを導入する方法です。 前提 Krisp(無料版でOK)をインストール済みであること。 Pro版を試したい方は以下の招待URLからダウンロードして …

Observerパターンってどう使うの?を考える(商品の予約)

目的 Observerパターンの使いどころとなる状況を具体例でもって理解する。   ゴール(実現すること) 商品の予約システムにおけるユーザ通知   実装する機能 ・商品を予約する …

SpringFramworkの良書

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

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