ブートストラップ入力ボックス グループとは何ですか?

推奨チュートリアル: ブートストラップ チュートリアル

1. Bootstrap4 入力ボックス グループ

.input-group クラスを使用して、フォーム入力ボックスのスタイルをさらに追加できます。 、アイコン、テキスト、ボタンなど。テキスト情報を入力ボックスの前に追加するには .input-group-prepend クラスを使用し、入力ボックスの後にテキスト情報を追加するには .input-group-append クラスを使用します。最後に、テキストのスタイルを設定するために .input-group-text クラスを使用する必要もあります。

<form>
  <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="Username">
  </div>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@runoob.com</span>
    </div>
  </div></form>

レンダリング:

##2. 入力ボックスのサイズ ## 小さな入力ボックスを設定するには

.input-group-sm

クラスを使用し、大きな入力ボックスを設定するには .input-group-lg クラスを使用します: <pre class='brush:php;toolbar:false;'>&lt;form&gt; &lt;div class=&quot;input-group mb-3 input-group-sm&quot;&gt; &lt;div class=&quot;input-group-prepend&quot;&gt; &lt;span class=&quot;input-group-text&quot;&gt;Small&lt;/span&gt; &lt;/div&gt; &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt; &lt;/div&gt;&lt;/form&gt;&lt;form&gt; &lt;div class=&quot;input-group mb-3&quot;&gt; &lt;div class=&quot;input-group-prepend&quot;&gt; &lt;span class=&quot;input-group-text&quot;&gt;Default&lt;/span&gt; &lt;/div&gt; &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt; &lt;/div&gt;&lt;/form&gt;&lt;form&gt; &lt;div class=&quot;input-group mb-3 input-group-lg&quot;&gt; &lt;div class=&quot;input-group-prepend&quot;&gt; &lt;span class=&quot;input-group-text&quot;&gt;Large&lt;/span&gt; &lt;/div&gt; &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt; &lt;/div&gt;&lt;/form&gt;</pre>

3. 複数の入力ボックスとテキスト

<!-- 多个输入框 --><form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Person</span>
    </div>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div></form>
 <!-- 多个文本信息 --><form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div></form>

4. チェック ボックスとラジオ ボタン

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="RUNOOB"></div>
 <div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="GOOGLE"></div>

レンダリング:

5. 入力ボックスの追加ボタン グループ

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Basic Button</button> 
  </div>
  <input type="text" class="form-control" placeholder="Some text"></div>
 <div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button> 
  </div></div>
 <div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div></div>

6. ドロップダウン メニューの設定

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      选择网站    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
      <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
      <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="网站地址"></div>

レンダリング:

#7. 入力ボックス グループ ラベル 入力ボックス グループ内で、入力ボックス グループの外側のラベルを介してラベルを設定します。ラベルの for 属性は、入力ボックス グループの ID に対応する必要があります。ラベルをクリックした後、入力ボックスにフォーカスできます。 :

<label for="demo">Write your email here:</label><div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@runoob.com</span>
  </div></div>

レンダリング:

以上がブートストラップ入力ボックス グループとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。