Maison >interface Web >Tutoriel d'amorçage >Comment centrer le formulaire bootstrap
Comment centrer le formulaire bootstrap
- (*-*)浩original
- 2019-07-19 11:08:2313405parcourir
Bootstrap peut créer différents styles de formulaires grâce à quelques balises HTML simples et des classes étendues.
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 Ajoutez la classe .control-label à l'étiquette. Exemple : 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!<!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>