プログラミング

【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


関連記事

プログラミングスキルを向上させる3ステップ

プログラミングスキルを向上させるための3ステップです。 私自身が実践していることであり、向上を実感している方法です。 写経 本をベースに写経します。 写し書きをして動いたらOKではなく、以下のような問 …

フロントエンジニアとバックエンドエンジニアのどちらになるべきか?

対象読者 ・これからWebエンジニアを目指す人 ・フロントエンジニアとバックエンドエンジニアの違いを知らない人   フロントエンジニアかバックエンドエンジニアか? ・役割から考える フロント …

2進数を使うと判定がシンプルになる!(じゃんけんプログラム編)

概要 仕事で2進数を使った判定処理について学んだので共有したくて執筆しました。 仕事上で設計したロジックは本記事で紹介するものより複雑でしたが、本質的な部分は変わらないので使って頂けると思います。 説 …

【Java入門】プロジェクトの作成からHello, World!まで

概要 プログラミングの入門といえば「Hello, World!」です。 まずは最も簡単なプログラムを動かすことから始めていきましょう。   プロジェクトの作成 新規プロジェクト作成 新規で「Javaプ …

【Java入門】繰り返し処理(while, for)

概要 繰り返し処理の制御構造について学んでいきましょう。 繰り返しには以下があります。 while(条件に一致する間だけ繰り返す) do-while(一度必ず実行し、その後は条件に一致する間だけ繰り返 …

SpringFramworkの良書

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

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