ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >ブートストラップ入力ボックスグループとは何ですか?

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

angryTomオリジナル: 2019-07-19 13:27:302467ブラウズ

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:html;toolbar:false"><form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div></form><form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div></form><form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div></form></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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップアイコンが表示されない理由次の記事：ブートストラップアイコンが表示されない理由

続きを見る

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

関連記事

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