如何使用Bootstrap创建表单布局

HTML表单是网页和应用程序中不可或缺的一部分，但是仅使用CSS来逐个手动设置表单控件的方式通常很麻烦且枯燥乏味。如今随着bootstrap的出现大大简化了表单控件比如表单中的标签，输入字段，选择框以及提交框等样式和对齐过程。接下来在文章中将为大家详细介绍Bootstrap中的表单布局样式

【推荐课程：Bootstrap课程】

在Bootstrap中提供了三种不同类型的表单布局：

接下来在文章中将和大家逐一详细介绍这些表单布局以及各种与表单相关的Bootstrap组件

外部引入Bootstrap

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

创建垂直表单布局

这是默认的Bootstrap表单布局，其中样式应用于表单控件，而不向<form>元素添加任何基类或标记中的任何大的更改。

此布局中的表单控件在顶部堆叠有左对齐标签

例：

<div style="margin:20px;">
 <form action="#" method="post">
 <div class="form-group">
 <label for="inputName">用户名</label>
 <input type="username" class="form-control" id="inputName" placeholder="username" required>
 </div>
 <div class="form-group">
 <label for="inputPassword">密码</label>
 <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
 </div>
 <div class="checkbox">
 <label><input type="checkbox">记住密码</label>
 </div>
 <button type="submit" class="btn btn-primary">登录</button>
 </form>
</div>

效果图：

创建横向表格布局

在横向格式中，布局标签右对齐并向左浮动，使它们与表单控件显示在同一行上。横向表单布局需要在默认表单布局中进行各种标记更改。以下就是实现横向表单布局的具体操作步骤：

（1）为form元素添加.form-horizontal类

（2）在div元素中实现包装标签和表单控件并添加.form-group类

（3）使用Bootstrap的预定义网格类来对齐标签和表单控件

（4）在lable元素中添加.control-label到<label>类

<div>
 <form class="form-horizontal" action="#" method="post">
 <div class="form-group">
 <label for="inputName" class="control-label col-xs-2">用户名</label>
 <div class="col-xs-10">
 <input type="username" class="form-control" id="inputName" placeholder="username" required>
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword" class="control-label col-xs-2">密码</label>
 <div class="col-xs-10">
 <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-offset-2 col-xs-10">
 <div class="checkbox">
 <label><input type="checkbox">记住密码</label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-xs-offset-2 col-xs-10">
 <button type="submit" class="btn btn-primary">登录</button>
 </div>
 </div>
 </form>
</div>

效果图：

创建内联表单布局

有时候在创建表单时需要并排放置表单控件用来压缩布局。如果你想实现这个效果可以向form元素中添加form-inline类。

<div style="margin: 30px;">
 <form class="form-inline" action="#" method="post">
 <div class="form-group">
 <label class="sr-only" for="inputName">用户名</label>
 <input type="username" class="form-control" id="inputName" placeholder="username" required>
 </div>
 <div class="form-group">
 <label class="sr-only" for="inputPassword">密码</label>
 <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
 </div>
 <div class="checkbox">
 <label><input type="checkbox">记住密码</label>
 </div>
 <button type="submit" class="btn btn-primary">登录</button>
 </form>
</div>

效果图：

总结：