Format du formulaire d'apprentissage Bootstrap et icônes de police

Cet article vous présentera le composant de groupe de liste, le composant de panneau et le composant intégré réactif dans BootStrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de didacticiels vidéo sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !

Format du formulaire

.form-group : groupe de formulaires (les étiquettes et les zones de saisie doivent être entourées autant que possible par cette classe)

.form-control : Pour les éléments input, textarea et select, l'attribut width sera défini sur width:100% par défaut. Bordure arrondie

.form-inline : le formulaire en ligne est défini pour la balise form, donc. que la boîte à l'intérieur Change la valeur pour qu'elle soit disposée horizontalement

.form-horizontal : Pour un formulaire disposé horizontalement, en ajoutant la classe .form-horizontal au formulaire et en utilisant la classe de grille prédéfinie de Bootstrap, l'étiquette les étiquettes et les groupes de contrôle peuvent être regroupés horizontalement Mise en page côte à côte. Cela modifiera le comportement de .form-group afin qu'il se comporte comme une ligne dans le système de grille, il n'est donc pas nécessaire d'ajouter un .row supplémentaire

.sr-only : il est principalement utilisé pour label Pour définir, masquer l'étiquette

Une simple boîte de connexion

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

L'étiquette de contrôle ici est le style pour la saisie de synchronisation des étiquettes

Icônes de police

Pour des raisons de performances, toutes les icônes nécessitent une classe de base et une classe correspondant à chaque icône. Mettez le code suivant et cela fonctionnera bien n’importe où. Notez que pour définir un remplissage correct, assurez-vous d'ajouter un espace entre l'icône et le texte. Pour des icônes de police spécifiques, veuillez visiter le site Web Bootstrap Chinese (https://v3.bootcss.com/components/).

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!