因为工作原因会经常接触表单元素,学习使用了 Bootstrap 的表单组件。下面是我总结的 Bootstrap 中表单组件的使用指南。
下面例子中,使用的代码是 Bootstrap 4.3 版本的
.form-control
.form-control
是表单组件最小的组成单位。这个类用在 <input>
、<select>
和 <textarea>
上。
<!-- 输入框 -->
<input type="text" class="form-control">
<input type="number" class="form-control">
<input type="password" class="form-control">
<input type="date" class="form-control">
<!-- 选择框 -->
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
<!-- 文本域 -->
<textarea class="form-control" rows="3"></textarea>
默认的 .form-control
使用了 display: block
、width: 100%;
两个样式,因此是独占一行的。
我们发现上下表单控件垂直方向紧紧挨在一起了,需要保持一定的间距,这时可以使用 .form-group
。
.form-group
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
现在就好看啦,因为 .form-group
身上只有一个样式 margin-bottom: 1rem
,这就比较开心了。
当然,.form-group
的作用不止于,它可以用来封装一个单独“表单控件套装”的:label
、input
和 .form-text
。
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Example select</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Example textarea</label>
<textarea class="form-control" rows="3"></textarea>
</div>
.form-text
的样式是:display: block; margin-top: 0.25rem;
。要确保每一个 .form-control
都有一个 label
与之对应,即使无需显示 label,也要有一个 label.sr-only
来修饰表单控件。
.form-inline
更进一步,如果想要表单控件水平排列,怎么做呢?这就要用到 .form-inline
了,这个类用来实现行内表单组件。
将上面的代码封装。
<div class="form-inline">
<!-- ... -->
</div>
.form-inline
使用了 display: flex
,.form-inline .form-group
也使用了 display: flex
,所以会发现都水平排列在一起了。这时还需要添加一些 space 工具类,控制元素水平和垂直方向上的间距。
<div class="form-inline mb-2">
<div class="form-group mr-3">
<label>Email address</label>
<input type="email" class="form-control mx-2" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group mr-3">
<label >Example select</label>
<select class="form-control mx-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group mr-3">
<label>Example textarea</label>
<textarea class="form-control mx-2" rows="3"></textarea>
</div>
</div>
我们给 .form-inline
加了 .mb-2
保证上下间距;给 .form-group
加了 .mr-3
保证左右间距;给 .form-control
加了 .mx-2
控制与 label
和 .form-text
之间的间距。
.form-inline
的使用范围还是有限的,更常用到的是 .form-group.row
的形式组织水平表单布局。
行内表单控件套件
下面直接看代码:
<div class="form-group row">
<label class="col-2">Email address</label>
<div class="col-10">
<input type="email" class="form-control" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group row">
<label class="col-2">Example select</label>
<div class="col-10">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-2">Example textarea</label>
<div class="col-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
.form-group
加 .row
;label
为一组,input
与 .form-text
,添加 col-*
即可。
当然了,如果 Email address 和 Example select 在一行也很好办。再加一层 .row
。
<div class="row">
<div class="form-group col-6 row">
<label class="col-4">Email address</label>
<div class="col-8">
<input type="email" class="form-control" placeholder="Enter email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group col-6 row">
<label class="col-4">Example select</label>
<div class="col-8">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-2">Example textarea</label>
<div class="col-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
也可以使用 .form-row
代替 .row
,获得更小的水平间距。
(完)