一瞬でサンクスページをつくる(Bootstrap)

1821 ワード
サンクスページ HTML thanks-page Bootstrap CSS HTML テキストリンク

一瞬でthanks_pageをつくる(Bootstrap)

なにかformを送信した後に、遷移先のthanksページのサンプルがあればいいかなと思い、記述。
css を書かずにできます。

headタグの中に忘れないように。bootstrapを読み込みます

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

bootstrapを読み込みます

jumbotron(ジャンボトロン)では, ヒーローユニットスタイルのコンテンツの表示できます。ジャンボトロンの使い方の例を示します。

オプションで viewport 全体を拡張して, サイトに主要なマーケティングメッセージを表示できます。
下記参考
https://getbootstrap.jp/docs/4.3/components/jumbotron/

source code

<div class="jumbotron text-center">
  <h1 class="display-3">Thank You!</h1>
  <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
  <hr>
  <p>
    Having trouble? <a href="">Contact us</a>
  </p>
  <p class="lead">
    <a class="btn btn-primary btn-sm" href="https://bootstrapcreative.com/" role="button">Continue to homepage</a>
  </p>
</div>