Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:30:26
original
1454 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal