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

1. Prise en charge multi-balises

En plus d'utiliser l'élément de balise lors de la création de boutons, vous pouvez également utiliser les balises

De même, lorsque vous créez des boutons dans le framework Bootstrap, en plus des éléments label que nous venons de mentionner, vous pouvez également les utiliser sur d'autres éléments label. La seule chose à laquelle vous devez faire attention est d'ajouter une classe à l'élément label. lors de la création du bouton. Nom ".btn".

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. Style personnalisé

Différents styles de boutons dans le framework Bootstrap sont implémentés via différents noms de classe.

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. Taille du bouton

Dans le framework Bootstrap, la taille des boutons peut également être personnalisée. ​

Trois noms de classes sont fournis dans le framework Bootstrap pour contrôler la taille des boutons :

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. Bloquer les boutons

Le framework Bootstrap fournit un nom de classe ".btn-block". L’utilisation de ce nom de classe pour un bouton permet au bouton de remplir tout le conteneur et le bouton n’aura aucune valeur de remplissage ou de marge. En pratique, ce type de bouton est souvent appelé bouton de blocage.

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. État du bouton désactivé

Dans le framework Bootstrap, il existe deux manières de désactiver les boutons :

　Méthode 1 : Ajouter l'attribut désactivé dans la balise

　Méthode 2 : Ajouter le nom de la classe "disabled" dans la balise de l'élément

　La principale différence entre les deux est :

Le style ".disabled" ne désactivera pas le comportement par défaut du bouton, tel que les comportements de soumission et de réinitialisation.

L'ajout de l'attribut "disabled" à la balise element peut désactiver le comportement par défaut de l'élément.

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

Aujourd'hui, je vais ajouter de nouvelles connaissances pour vous : Informations sur l'invite du formulaire Bootstrap

Habituellement, lors de la vérification du formulaire, différentes informations d'invite doivent être fournies. Cet effet est également fourni dans le framework Bootstrap. Un style "help-block" est utilisé pour afficher les informations d'invite dans un bloc et en bas du contrôle.

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

Ce qui précède est une introduction détaillée aux boutons du formulaire Bootstrap. D'autres contenus seront mis à jour à l'avenir. J'espère que vous continuerez à y prêter attention.