web前端使用bootstrap制作水平表单
时间: 2023-08-06 10:01:53 浏览: 146
好的,下面是一个使用Bootstrap制作水平表单的示例代码:
```html
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
```
上面的代码中,使用了Bootstrap的CSS类实现了一个水平表单。其中,`.form-group`类定义了一个表单元素组,`.row`类定义了一个行,`.col-sm-*`类定义了列的宽度。
需要注意的是,以上代码中的样式需要引入Bootstrap的CSS文件和JS文件才能正常显示。
阅读全文