簡単!コピペで作れる!Bootstrapで作るステップバーナビゲーション

レスポンシブ対応のステップのナビゲーションを紹介します。

bootstrapで作ったサイトであれば、HTMLとCSSをコピーペーストするだけで利用できます。

通販のカートフローや、申し込みフォームなどのページで使うと、現在地が分かりやすくなり、申し込みのコンバージョンもアップするかと思います。

今回は例として4種類ご紹介します。

①右向き矢印で現在のステップを表すパターン

右向き矢印で現在のステップを表すパターン

右矢印付の、ボックスの中に文字を入れるパターンです。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら


②ドットと線でステップを表すパターン

ドットで現在地を表したシンプルなパターンです。

ドットと線でステップを表すパターン

⇒サンプル確認はこちら


③円の中の数字と線でステップを表すパターン

サークルの中に数字を入れ現在地を表すシンプルなパターンです。

円の中の数字と線でステップを表すパターン

ライトプラン 詳細はこちら

⇒サンプル確認はこちら


④Flexboxで作るstep wizard

flexboxを使ったパターンです。PCの場合横に進み、スマホの場合縦に並びます。

Flexboxで作るstep wizard

Flexboxで作るstep wizard

ライトプラン 詳細はこちら

⇒サンプル確認はこちら