画面のヘッダ部に画面遷移状態表示について

Question

実現したいこと

画面のヘッダ部に下記のようなレイアウトを表示したいです。

「現在は画面２です」を表したいです。
次の画面では「3」が塗りつぶされている。

これをCSSで表現できる方法ありますか？
もしくは、こういうをなんと表現しますか？（検索するためのキーワード）

※ bootstrap3を使っております。

Answer 1

そのようなUIを検索する際は、以下のようなワードとCSSなどの掛け合わせをすればそれなりの情報がでてくると思います。

• ステップ
• ステップインジケーター
• ステップバー
• ステッププログレスバー

参考：[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル

Comments

[liguofeng29]

参考になりました。

bootstrapではサポートしてくれるのでしょうか？

Answer 2

このあたりが参考になるかもしれません（未検証）
https://bootsnipp.com/snippets/featured/form-process-steps
https://bootsnipp.com/snippets/zDaz1
https://bootsnipp.com/snippets/featured/form-wizard-and-validation

Comments

[liguofeng29]

参考にさせていただきます！