Start Bootstrapオープンソースの適用

16514 ワード
テキストリンク

ログイン画面

  • オープンソース

    • 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>Signin Template · Bootstrap v5.1</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">



  <!-- Bootstrap core CSS -->
  <link href="../bootstrap.min.css" rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="../css/signin.css" rel="stylesheet">
</head>
<body class="text-center">

<main class="form-signin">
  <form>
    <h1 class="h3 mb-3 fw-normal">로그인</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="Id">
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me">아이디 저장
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">로그인</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2021–2022</p>
  </form>
</main>



</body>
</html>
    bootstrapサンプルファイルからコードをインポートして適用しました.
    cssはずっと適用されていないので、苦労しましたが、bootstrap cssファイルを単独でダウンロードしませんでした.
    これを適用する過程で、cssがhtmlにどのように溶け込んでいるかを理解しました.
    cssファイルにスタイルラベルのすべての内容を含め、htmlにクラス名でcssを適用します.

  • 画面

    • メイン画面



    胸腺ペプチドの授業で学んだ断片機能を使ってナビゲーションバーコードを分離してみましたが、ずっとブロックされていました.頭の部分の分離に成功したが、なぜだめなのか分からず、先に残しておいた.

    アイテム画面



    最初はちょっと苦労しましたが、今はアプリが簡単にできるようになりました.
    画面間を接続し、内部システムの構成を計画できるようになりました.
    プログラマー.出前料理
    ElasticSearch単機間インデックスデータ移行ノート