Analyse complète de la façon d'utiliser les formulaires Bootstrap (contrôles de formulaire)_compétences javascript

1. Saisie de la zone de saisie

Zone de saisie sur une seule ligne, une zone de saisie de texte courante, c'est-à-dire que la valeur de l'attribut de type de la saisie est du texte.

Lorsque vous utilisez input dans Bootstrap, vous devez également ajouter le type type. Si le type type n'est pas spécifié, vous ne pourrez pas obtenir le style correct, car le framework Bootstrap utilise input[type="?"]

(où ? représente le type de type, tel que le type de texte, qui correspond à input[type="text"]) pour définir le style.

Afin de rendre le style de contrôle correct dans différents styles de formulaire, vous devez ajouter le nom de classe ".form-control".

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

2. Sélectionnez la zone de sélection déroulante

L'utilisation de la zone de sélection déroulante dans le framework Bootstrap est cohérente avec celle d'origine pour la sélection multi-lignes, définissez la valeur de l'attribut multiple sur multiple.

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

3. Zone de texte zone de texte

Le champ de texte est utilisé de la même manière que celui d'origine. La définition des lignes peut définir sa hauteur, et la définition des colonnes peut définir sa largeur.

Mais si le nom de classe ".form-control" est ajouté à l'élément textarea, il n'est pas nécessaire de définir l'attribut cols.

Parce que la largeur du contrôle de formulaire dans le style "form-control" dans le framework Bootstrap est de 100 % ou auto.

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

4. Case à cocher et bouton radio

1. La case à cocher et la radio sont enveloppées d'étiquettes
2. La case à cocher et l'étiquette sont placées dans un conteneur nommé ".checkbox"
3. La radio et la balise label sont placées dans un conteneur nommé ".radio"

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

5. Cases à cocher et boutons radio disposés horizontalement
1. Si les cases à cocher doivent être disposées horizontalement, ajoutez simplement le nom de la classe ".checkbox-inline" à l'étiquette
2. Si la radio doit être disposée horizontalement, il vous suffit d'ajouter le nom de la classe ".radio-inline" à l'étiquette

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

6. Taille du contrôle du formulaire
Le framework Bootstrap fournit également deux noms de classe différents pour contrôler la hauteur des contrôles de formulaire. Ces deux noms de classes sont :
1. input-sm : Rendre le contrôle plus petit que la taille normale
2. input-lg : Rendre le contrôle plus grand que la taille normale
Ces deux classes conviennent aux contrôles de saisie, de zone de texte et de sélection dans les formulaires.

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

Ce qui précède explique comment utiliser les contrôles de formulaire Bootstrap. D'autres contenus seront mis à jour à l'avenir. J'espère que vous continuerez à y prêter attention.