「Bootstrap 4入門」input-groupでインプットグループを表示する方法

2021年1月2日

書式
.input-group 　インプットグループを構成
.input-group-prepend 前方部品
.input-group-append 後方部品
使用例

<head>
  <title>Bootstrapのサンプル</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="/jquery/3.2.1/jquery.min.js"></script>
  <script src="/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>インプットグループのサンプル</h3>
  <p>Input group(インプットグループ)では,テキスト入力, カスタム選択, カスタムファイル入力の両側にテキスト, ボタン, またはボタングループを追加します</p>
  <p> .input-group-text でテキストの様式を設定します。</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="ユーザー名" id="usr" name="username">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="メールアドレス" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@arkgame.com</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Bootstrap4

Posted by arkgame

関連投稿: