Quels sont les groupes de zones de saisie bootstrap ?-Tutoriel d'amorçage-php.cn

Quels sont les groupes de zones de saisie bootstrap ?

angryTom

Libérer： 2019-07-19 13:27:30

original

2458 Les gens l'ont consulté

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>

Copier après la connexion

　Rendu :

Quels sont les groupes de zones de saisie bootstrap ?

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Rendu :

Quels sont les groupes de zones de saisie bootstrap ?

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>

Copier après la connexion

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>

Copier après la connexion

Rendu :

Quels sont les groupes de zones de saisie bootstrap ?

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>

Copier après la connexion

<.>　

Rendu :

Quels sont les groupes de zones de saisie bootstrap ?