Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Input groups Bootstrap

Les inputs groups permettent d'étendre les possibilités des formulaires en ajoutant à gauche, à droite ou des 2 côtés des éléments textuels qui sont placés sur des balises <span>.

Les balises <select> ne pourront pas être relooké complétement selon le navigateur

Dans certain cas, les attributs rows de la balise <textarea> ne seront pas interprétés correctement.

Exemple basique

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Préfixe de l'email" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon"> €</span>
  <input type="text" class="form-control" aria-label="Quantité">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Compléter le reste de l'url</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://www.mondomaine.com/utilisateur/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Exemple

@

@example.com

.00
https://www.mondomaine.com/utilisateur/

Taille

Vous pouvez agir sur la taille avec les classes .input-group-lg et .input-group-sm.
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">
</div>

Exemple

@

@

Case à cocher et boutons radio

<div class="row">

 <div class="col-lg-6">
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox" aria-label="...">
    </span>
    <input type="text" class="form-control" aria-label="...">
  </div>
 </div>

 <div class="col-lg-6">
  <div class="input-group">
    <span class="input-group-addon">
      <input type="radio" aria-label="...">
    </span>
    <input type="text" class="form-control" aria-label="...">
  </div>
 </div>

</div>

Exemple

Avec un bouton

Les boutons dans les classes .input-group réagissent différemment et nécessitent un peu d'adaptation. Au lieu d'utiliser la classe .input-groupe-addon, vous utiliserez la classe .input-group-btn pour envelopper les boutons.
<div class="row">

  <!-- Avec un bouton à gauche -->
  <div class="col-lg-6">
    <div class="input-group">
       <span class="input-group-btn">
         <button class="btn btn-default" type="button">Allez</button>
       </span>
      <input type="text" class="form-control" placeholder="Rechercher">
    </div>
 </div>


  <!-- Avec un bouton à droite -->
  <div class="col-lg-6">
     <div class="input-group">
        <input type="text" class="form-control" placeholder="Rechercher">
        <span class="input-group-btn">
           <button class="btn btn-primary" type="button">Allez</button>
        </span>
     </div>
  </div>

</div>

Exemple

bouton avec menu déroulant

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li><a href="#" title="Lien 2">Lien 2</a></li>
<li><a href="#" title="Lien 3">Lien 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" title="Lien 4">Lien 4</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>

Exemple

Bouton divisé

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Menu déroulant</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" title="Lien 1">Lien 1</a></li>
<li><a href="#" title="Lien 2">Lien 2</a></li>
<li><a href="#" title="Lien 3">Lien 3</a></li>
<li role="separator" class="divider"</li>
<li><a href="#" title="Lien 4">Lien 4</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>

Exemple

Bouton multiple

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-bold"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-italic"></i></button>
</div>
<input type="text" class="form-control" aria-label="...">
</div>

Exemple