Quels sont les groupes de zones de saisie bootstrap ?

Tutoriels recommandés : Tutoriel Bootstrap

1. Groupe de zones de saisie Bootstrap4

Nous pouvons utiliser la classe .input-group pour ajouter plus de styles à la zone de saisie du formulaire, tels que des icônes et du texte. Ou un bouton. Utilisez la classe .input-group-prepend  pour ajouter des informations textuelles devant la zone de saisie et la classe  .input-group-append pour les ajouter après la zone de saisie. Enfin, nous devons également utiliser la classe  .input-group-text  pour styliser le texte.

<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>

　Rendu :

Taille de la zone de saisie

Utilisez la classe  .input-group-sm  pour configurer de petites zones de saisie et la classe .input-group-lg  pour configurer de grandes zones de saisie :

<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>

3. Plusieurs zones de saisie et texte

<!-- 多个输入框 --><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. Cases à cocher et boutons radio

<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>

Rendu :

5. Zone de saisie plus groupe de boutons

<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. Définir le menu déroulant

<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>

Rendu :

7. Étiquette du groupe de zone de saisie

Dans le groupe de zone de saisie, passez par la périphérie. de l'étiquette du groupe de zones de saisie pour définir l'étiquette. L'attribut for de l'étiquette doit correspondre à l'identifiant du groupe de zones de saisie. Après avoir cliqué sur l'étiquette, vous pouvez vous concentrer sur la zone de saisie :

<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>

<.>　

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!