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

1.Formulaire de base

 <form >
 <div class="form-group">
 <label>邮箱：</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

En plus de ces éléments, le formulaire comporte également des éléments input, select, textarea et autres. Dans le framework Bootstrap, un nom de classe `form-control` est personnalisé, c'est-à-dire si ces éléments utilisent le nom de la classe. "form-control" permettra d'obtenir certains effets de personnalisation de la conception.

1. La largeur devient 100%

2. Définissez une bordure gris clair (#ccc)

3. Coins arrondis avec 4px

4. Définissez l'effet d'ombre, et lorsque l'élément obtient le focus, les effets d'ombre et de bordure changeront

5. Définissez la couleur de l'espace réservé sur #999

2. Forme horizontale
Le formulaire par défaut du framework Bootstrap est un style d'affichage vertical, mais nous avons souvent besoin d'un style de formulaire horizontal (étiquettes à gauche, contrôles de formulaire à droite).

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

Pour obtenir des effets de forme horizontaux dans le framework Bootstrap, les deux conditions suivantes doivent être remplies :
1. Dans l'élément

, utilisez le nom de classe ".form-horizontal".
2. Système de grille qui coopère avec le framework Bootstrap.

Utiliser le nom de classe ".form-horizontal" sur l'élément a principalement les fonctions suivantes :
1. Définissez les valeurs de remplissage et de marge du contrôle de formulaire.
2. Modifiez l'expression de « form-group » pour qu'elle soit similaire à la « ligne » du système de grille.

3. Formulaire en ligne
Parfois, nous devons afficher tous les contrôles de formulaire sur une seule ligne

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

Il est facile d'implémenter un tel effet de formulaire dans le framework Bootstrap. Il vous suffit d'ajouter le nom de classe ".form-inline" à l'élément

Si vous ajoutez une étiquette devant l'entrée, l'entrée sera renvoyée dans une autre ligne. Si vous devez ajouter une telle étiquette et que vous ne souhaitez pas que l'entrée soit renvoyée à la ligne, vous devez également placer l'étiquette dans le conteneur "form-group".

Ce qui précède est le premier article d'une analyse complète sur la façon d'utiliser les formulaires Bootstrap. D'autres contenus seront mis à jour à l'avenir. J'espère que vous continuerez à y prêter attention.