Comment centrer le formulaire bootstrap-Tutoriel d'amorçage-php.cn

Comment centrer le formulaire bootstrap

(*-*)浩

Libérer： 2019-07-19 11:08:23

original

13382 Les gens l'ont consulté

Bootstrap peut créer différents styles de formulaires grâce à quelques balises HTML simples et des classes étendues.

Comment centrer le formulaire bootstrap

Bootstrap propose une variété de mises en page de formulaires, mais la plus couramment utilisée est la forme centrée, également appelée forme horizontale.

Les formulaires horizontaux diffèrent des autres formulaires non seulement par le nombre de balises, mais aussi par la présentation du formulaire. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Si vous devez créer un formulaire de mise en page horizontale, veuillez suivre les étapes suivantes :

Ajoutez la classe .form-horizontal à l'élément parent

Placez les étiquettes et les contrôles dans un

avec la classe .form-group .

Ajoutez la classe .control-label à l'étiquette.

Exemple :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>

</body>
</html>

Copier après la connexion

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!