Bootstrap表单布局详解

Bootstrap表单时我们前端必学的内容，所以我给大家写了一个关于表单的Bootstrap学习教程：

在Bootstrap 提供了下列类型的表单布局：

垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看；

内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。

水平表单 -> 用栅格系统控制显示

 

一、垂直表单

垂直表单使用的标准步骤

<form> 元素添加 role="form"。

把标签和控件放在一个带有"form-group"的<div> 中，获取最佳间距。

向所有的文本元素 <input>、<textarea> 和 <select> 添加"form-control"样式。

1 2 3 4 5 6 7 8 9 10

<form role="form">     <div class="form-group">         <label for="name">名称</label>         <input type="text" id="name" placeholder="请输入名称">     </div>     <div class="form-group">         <label for="name">年龄</label>         <input type="text" id="name" placeholder="请输入年龄">     </div> </form>

二、内联布局

内联布局与垂直布局其他完全一样，只是需要给<form role="form">加个class=form-inline。

1