プログラミング

【Bootstrap】入力フォームを作成しよう!

投稿日:

概要

SpringBootチュートリアルで作成した各画面の入力フォームをBootstrapに置き換えます。
また、containerを使用することで容易にグリッドシステムを導入できます。

実装

検索画面

画面イメージ

対象ファイル:src/main/resources/templates/book/search.html

Bootstrapの各クラスについての概要

  • container
  • グリッドシステムを使うために指定するクラスです。
    グリッドシステムとは画面幅を12本の格子(グリッド)で表現するためのものです。
    詳細はこちらを参照

  • form-group
  • タグ内をformのグループとして扱います。

  • form-inline
  • formを水平方向に並べます。

  • input-group-sm
  • inputタグを小さいサイズで表示します。

  • col-md-XX
  • XX部には数値が入ります。
    横幅を12本のグリッドになるように数値を指定して、表示される領域を指定します。

登録/更新画面

画面イメージ

対象ファイル:src/main/resources/templates/book/form.html(入力フォーム[登録・更新画面共通]

src/main/resources/templates/book/add.html(登録画面)

src/main/resources/templates/book/edit.html(更新画面)

Bootstrapの各クラスについての概要

  • text-md-right
  • テキストを右寄せにします。

  • text-danger
  • テキストを赤字にします。

  • small
  • テキストの文字サイズを小さくします。

まとめ

  • containerでグリッドシステムを導入できる。
  • グリッドシステムは12本のグリッド(格子)で構成されている。
  • フォームを水平にするために、form-inlineクラスを適用する。

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

ランキング評価する

-プログラミング
-

執筆者:


comment

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

CAPTCHA


関連記事

エンジニア未経験者の転職が難しくなったので解決策を提案してみる

現状 コロナ以降、未経験者のエンジニア採用が少しずつなくなっていきました。 それまではポートフォリオを作ったり、ある程度のポテンシャルがあると判断されれば 採用されるということがあったのですが、それが …

【Java】MySQLから取得した日付をフォーマット変換して表示する方法

MySQLからSELECTしてきた日付データ(DateTime型)を、 「yyyy年MM月dd日 hh時mm分ss秒」のフォーマットで表示する方法です。 コード [crayon-64766fbf6f0 …

【Java入門】演算子の種類と使い方まとめ

概要 Javaで使う演算子(計算を行うための記号)について、種類と使い方をまとめました。 備忘録として使ってください。   演算子 代入演算子 値の代入や代入時に計算を行う演算子です。 [crayon …

【SpringBoot入門】#8~ 検索機能の実装

概要 ・検索フォームから条件を指定して検索すると、条件に一致する結果が一覧画面に表示される。 ・検索条件は複合的に指定できることとする。 ・検索結果は適切にフォーマットされることとする。  (日付はy …

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

概要 一覧表示をデザインします。 Bootstrapにはすぐに使える便利なクラスが用意されているので、それらを使用して実現します。 【SpringBootチュートリアル】#7~ 検索画面の作成に変更を …

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

[保有資格]
・Java SE 11 Gold

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

SpringFramworkの良書

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

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