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 |