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
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.